ARTICLES
【IPython】magic commandまとめ
2022/11/18
個人的に使えるなと思ったIPythonのmagic commandをまとめてみました。 %lsmagic 現在のnotebookで使用可能なIPythonのmagic command一覧を表示します。…
Read Full Text
12 min.
【Android】emulator上でcamera scanを検証したい
2022/11/10
Androidアプリ開発を行っていると、カメラを使った機能の検証がちょくちょく発生します。 普段は実機で確認しているのですが、ちょうど手元に検証用のAndroidがない場合や、アプリによっては実機でス…
Read Full Text
4 min.
【Next】PWA対応後videoが裏で読み込み続けられる問題
2022/11/01
Nextでnext-pwaによるPWA化を行った後、裏側でvideoのsrcがすべて読み込み続けら れる問題が発生しました。 上記画像赤枠のようにvideoタグのpreload属性をmetadataに…
Read Full Text
6 min.
【GitLab】gitlab pagesでカスタムドメインを設定する
2022/10/20
gitlab pagesはGitLab上で簡単に静的サイトをホスティングできるサービスです（github pagesなどと同じ）。 gitlab pagesを利用するとCI/CD piplineから簡…
Read Full Text
6 min.
bundle size調べてみた
2022/10/11
当サイトで使用しているgatsbyのversionをv4へ上げたついでに、サイトのbundle sizeなども調べてみました。 bundle anlyzeはwebpack-bundle-analyze…
Read Full Text
4 min.
【React】useEffect（副作用）の多用はやめよう
2022/10/05
ReactのuseEffect便利ですよね。 自分もよくお世話になっていますが、なまじ便利すぎるがゆえに必要ないケースでもuseEffectが使われているコードが見られます。 関数型プログラミングに影…
Read Full Text
8 min.
【React】コンポーネントに汎用性をもたせる際のポイント
2022/09/28
ReactやVueの開発においては、コンポーネントの汎用性は重要な観点になります。 …
Read Full Text
12 min.
【パスワードレス認証】iOS16で発表されたpasskeyとは？
2022/09/15
先日、iOS16がリリースされました。 ロック画面の自由度が増したり、集中モードが実装されたりなど色々な機能が追加されましたが、セキュリティに関しても大きなアップデートが入りました。 中でもpassk…
Read Full Text
10 min.
SWRでGlobal Stateを実装する
2022/08/30
フロントエンドのstate管理はここ数年で様々な変遷を得て来ました。 近年、swr、apollo clientのようなサーバーデータをキャッシュするライブラリが出てからは、state管理がかなり最適化…
Read Full Text
8 min.
Cookie認証とToken認証
2022/08/10
まず前提として、現時点で完全にsecureな認証方法は存在しません。 XSSなどで外部から自由にJSが実行できる状況であれば、どの認証方法でも突破される可能性があります。 …
Read Full Text
14 min.
【React】react-i18nextの使用方法
2022/07/21
reactで一番有名な翻訳ライブラリであるreact-i18nextの使い方を簡単にまとめてみました。 サンプルのリポジトリも公開しているので、参考になれば幸いです。 https://github.c…
Read Full Text
10 min.
Github Copilotを一週間試してみた
2022/06/30
前々から興味があったgithub copilotが先週6/21に一般リリースされたので、一週間ほど試してみました。 結論、引き続き使おうかなと思えたので、個人的に良かった点をまとめてみます。 gith…
Read Full Text
6 min.
【SSL】ec2 + nginx + certbot
2022/06/22
certbotによるSSL通信設定。 作業量自体は大したことないですが、毎回手順を調べて無駄に時間がかかることが多かったので備忘録としてまとめてみました。 尚、domainの取得とルーティング設定は終…
Read Full Text
12 min.
【TypeScript 】Genericsの基礎
2022/06/16
Genericsは抽象的な型引数を用意しておくことで、関数・クラス・インターフェイスを使用時に型を指定できるになる仕組みです。 Genericsはtypescriptのライブラリにはほぼ確実に用意され…
Read Full Text
12 min.
serverlessフレームワークでmail用APIを用意する
2022/06/09
serverlessはサーバーレスなアーキテクチャをかんたんに作成できるオープンソースのフレームワークです。 AWS Lambdaだけでなく、Azure Functions、Google CloudF…
Read Full Text
10 min.
【React】custom-hooksのすゝめ
2022/06/01
custom-hooks。 知ってるけど、活用したことが無いという人はReact Hooksをまだ十分に使いこなせていないかもしれません。 custom-hooksとはその名のとおり独自に実装できるR…
Read Full Text
8 min.
関数を返す関数の活用
2022/05/19
まずとあるコード(React)をお見せします。 sample.tsx import React, { useState } f…
Read Full Text
4 min.
ブラウザからのBLE接続方法
2022/05/12
ブラウザにはBluetooth接続用のAPIが用意されています。 これを利用することでサイトからBLE接続をしてbluetooth機器と連携することが可能になります。 今回はこの接続方法を紹介します。…
Read Full Text
8 min.
chrome拡張からkeyboard操作をする方法
2022/05/02
とあるprojectにてchrome拡張でデバイスとBluetooth接続をして、そのデバイスから特定のサイトを操作する（物理キーボードの代わりにする）ことを行いました。 当初思 っていたよりも実装が特…
Read Full Text
4 min.
redisとin-memory-cacheのパフォーマンス調べてみた
2022/04/22
主に以下の違いが知りたくて、実際に時間を測って調べてみました。 複数key保存、単一key保存での処理速度の違い redisとin-memory-cacheの具体的なパフォーマンス差 方法 以下の…
Read Full Text
6 min.
docker-compose.ymlのbuild, imageオプション
2022/04/14
docker-compose.ymlのbuild, imageオプションは、それぞれ指定する、しないでdocker立ち上げ時のimage作成の挙動が異なります。 build, imageの挙動を理解し…
Read Full Text
4 min.
JS(Node.js)における環境変数の取り扱い
2022/04/07
環境変数 環境変数とはプログラム内で定義されて いる変数（定数）ではなく、プログラムを動かす環境側で定義されている変数（定数）のことです。 key情報などの重要な定数はコードに直接記入するのではなく、環…
Read Full Text
6 min.
webpackでtypescriptをtranspileする
2022/04/02
みなさんtypescriptの実行はどのようにされていますか？ ts-nodeでそのままtypescriptを実行しても良いですが、jsファイルに変換しておくと（ブラウザで実行できたり）色々な場面で便…
Read Full Text
4 min.
chrome.runtime.onMessage.addListenerからのresponseがundefined
2022/03/27
chrome extensionの開発で、background.jsからのchrome.runtimeによるresponseがundefinedになる問題に少しつまづいたのでメモとして残しておきます。…
Read Full Text
4 min.
pageに存在するEventListenerをすべて表示する方法
2022/03/19
あるプロジェクトでページに存在するすべてのEventListenerを取得する必要があったので、その方法をメモっておきます。 方法 調べたいサイトのdeveloper toolを開いてください。 あと…
Read Full Text
4 min.
bignumber.js使用方法
2022/03/12
javascriptでは小数点の計算は丸め誤差のために正確ではないです。 const a = 0.1 + 0.2 // 0.30000000000000004 javascriptでも正確な計算を行い…
Read Full Text
6 min.
JSの数値表記とその変換
2022/03/05
JavaScriptの数値表記とその変換に関して簡単にまとめてみました。 JavaScriptの数値表記 Number JSのNumber表記はいくつかあります。 12345 // 10進数の1…
Read Full Text
6 min.
シェルスクリプトでRoute53に自サーバのipアドレスを登録する
2022/02/26
昔、サーバを起動するたびにシェルスクリプトでAWSのRoute53のレコードを変更するということを行っていました。 もしかしたらまた利用するかもしれないのでその方法を備忘録として残しておきます。 aw…
Read Full Text
6 min.
サーバ起動時に特定のscriptを走らせる
2022/02/18
ec2を例にしていますが、linuxであればだいたいどのサーバでも手順は同じだと思います。 手順 1. 起動時に走らせたいscriptファイルを用意する 起動時に実行させたいscriptを事前に用意し…
Read Full Text
6 min.
【React】親コンポーネント内部のdata、methodをchildrenへ渡す方法
2022/02/14
以下のように親コンポーネントのdataやmethodをchildrenに渡したくなるときがたまに発生します。 import React from 'react' export const Paren…
Read Full Text
6 min.
JSでのディープコピー、シャローコピー
2022/02/05
そろそろディープコピーmethodがモダンブラウザで実装されるかも？ JSのディープコピーが可能なstructuredClonemethodは以前からFirefoxのみで使用可能でしたが、近々その他の…
Read Full Text
6 min.
setTimeout内でのErrorがcatchされない
2022/01/22
いきなりですが、問題です。 ↓のjavascript(typescript)コードを実行した場合、consoleに出力される文言は何になるでしょう？ async function hello() { …
Read Full Text
8 min.
gitlab-ciでfrontendをGCSへ自動アップロード
2022/01/16
フロントエンドをGCSへアップロードする際によく使用している.gitlab-ci.ymlに関しての紹介です。（備忘録も兼ねる） .gitlab-ci.yml 普段使用している.gitlab-ci.ym…
Read Full Text
4 min.
メモリスワップで一時的なメモリ不足を解消する
2022/01/08
プログラムを動かすにはメモリは十分足りてるけど、プログラムのbuild, compileやpackageのinstallにメモリが足りないっていうときに使える方法です。 サーバー代節約のためにメモリの…
Read Full Text
4 min.
SWRとは？
2021/12/12
SWRは、NextJSを作っているVercel社が開発したReact Hooksライブラリであり、データ取得、管理をstale-while-revalidateという方針に従って行ってくれるライブラリ…
Read Full Text
14 min.
github・gitlab上でWeb IDEを使用する
2021/12/04
Githubがvscode連携をしたときに一時期話題になったので、知っている方も多いと思いますが、 Github・Gitlabはブラウザ上でIDEを開くことができます！ 個人的には typoなどのち…
Read Full Text
4 min.
pyenvでPythonのversionを管理する
2021/11/27
基本的にOSに最初から入っているpythonを使用するのはオススメしません。 特に互換性の問題で特定のPythonプログラムが動かないからといって、システムにもともとあるPythonのversionを…
Read Full Text
6 min.
【Nginx】Websocketの設定備忘録
2021/11/21
プロジェクトでsocketを扱っていると、nginxでwebsocketの設定をする機会が時々あります。 そのたびに調べて設定している気がするので、自分用の備忘録としてwebsocket用のnginx…
Read Full Text
6 min.
【VirtualBox】MacでWindows環境の確認をする
2021/11/14
Web開発をしていると、たまにWindowsで確認しなきゃいけないときがあります。 金を払えばそこそこのWindows環境を構築可能ですが、確認のためだけに有料のを使用するのは少し気が引けます。 そこ…
Read Full Text
6 min.
【Python】スター演算子(*)の機能まとめ
2021/11/06
ある程度Pythonを使いこなしている方にとっては当たり前の機能かもしれないスター演算子(*) よく見かけるけど意味はあまり知らないという方向けに、Pythonにおけるスター演算子の主な機能をまとめて…
Read Full Text
4 min.
【Next.js】GCSやS3でNext.jsを静的ホスティングする際の注意点（dynamic routing）
2021/10/30
Next.jsを静的ホスティングする際に、若干詰まったので注意点をまとめておきます（特にdynamic routingを使用する場合は注意）。 Next.jsはもともとSSR用のフレームワークだったこ…
Read Full Text
6 min.
【Atomic Design】moleculeにドメイン知識を持たせてはいけない理由
2021/10/24
数多くのフロントエンド開発者に採用されているAtomic Design ✨ とりあえずAtomic Designにしとけば、いい感じにコンポーネントが整理できるので個人的にはすごく重宝しています。 …
Read Full Text
8 min.
Redux ToolkitでRedux導入がすごく楽になった件
2021/10/16
ReactでWeb App開発をしているとほぼ確実にお世話になるReduxですが、導入が面倒なのとコードの記述が冗長になりやすいのが玉に瑕でした。 そういう声が多かったのか、Redux公式がRedux…
Read Full Text
10 min.
Nestjs-queryでGraphQL APIを爆速で立ち上げる
2021/09/20
Nestjs-queryというGraphQLエンドポイントをいい感じで用意してくれるライブラリを使って、GraphQL APIを爆速？で立ち上げたいと思います 😏 Nestjs-queryはORMと…
Read Full Text
16 min.
GraphQL Playgroundの使い方
2021/09/11
REST APIのドキュメント兼実行環境としてはswaggerがよく利用されています。 Graphql APIにおいてそのswaggerの代わりになるものがGraphiQLやgraphql playg…
Read Full Text
4 min.
GraphQL APIのTypescriptの型をClient側で自動生成する
2021/09/05
openapi2aspidaみたいにswagger.ymlからtypescriptの型を自動生成してくれるのが便利すぎて、GraphQLでもgraphqlファイルから型を自動生成するやつないかな〜と思…
Read Full Text
10 min.
Typescript アクセス修飾子
2021/08/30
初心者向けにTypescriptのアクセス修飾子に関して簡単にまとめておきます。 public (どこからでも参照可能) private (自class内でのみ参照可能) protected (自c…
Read Full Text
4 min.
Dockerを使って爆速でvpnサーバを立ち上げる
2021/08/22
VPNサーバ立ち上げの備忘録です。 ルーターにVPN機能がない場合は自分でVPNサーバを立ち上げる必要があるので、dockerを使ってサクッと立ち上げます。 VPN構成イメージ VPNサーバを使用した…
Read Full Text
4 min.
jupyter lab上でPythonコードをフォーマットする
2021/08/14
最近身の回りでjupyter lab + Pythonを使用する人が増えてきました。 jupyter lab…
Read Full Text
4 min.
cors-anywhereをherokuにデプロ イする方法
2021/08/11
ブラウザは「同一オリジンポリシー」という仕組みにしたがって、あるオリジンから他のオリジンのリソースに対して簡単にアクセスできないようにしています。 通常は別オリジン間での通信はできないのですが、それだ…
Read Full Text
10 min.
Google Formでお問い合わせを用意する
2021/08/04
はじめに サイトを作る上で 毎回少し悩むのがお問い合わせフォームだと思います。 実装する場合は基本的に 自前のサーバでお問い合わせ機能を実装 labmdaなどのserverlessでお問い合わせ機能を…
Read Full Text
8 min.
ChromeのLighthouseでサイトの品質をチェックしてみた
2021/07/25
はじめに サイトを作ったはいいのですが、肝心の品質をまだチェックしていませんでした。 そこで今回はChromeにデフォルトで入っているLighthouseを使って当サイトの品質をチェックしてみたいと思…
Read Full Text
6 min.
JAMSTACKの紹介
2021/07/12
はじめに 今回の記事は初回なので、当サイトの自己紹介ということでこのブログの構成について紹介してみます。 ここの構成はいわゆるJAMSTACKと呼ばれるもので名前は聞いたことがあっても、内容は詳しく知…
Read Full Text
8 min.