OSS 【読書記録/レビュー】まつもとゆきひろ 言語のしくみ
最近OSSに興味が出てきたところから始まり、プログラミング言語がどんな感じで作られるか知りたい！と思い、読んでみました。
書籍名
まつもとゆきひろ 言語のしくみ
著者名
まつもとゆきひろ
リンク
単行本
Kin...
開発
OSS 
OSS 【npmライブラリ作成】パッケージサイズ(package size, unpacked size)を減らす2つの方法
自分でnpmライブラリを作ったのですが、そのパッケージサイズが大きく、減らす方法を模索しました。npmサイトでは、各ライブラリのページにUnpacked Sizeが表示されますし、ユーザーがライブラリを選択するときの基準にもなるので、でき...
Next.js 【npmライブラリ作成×webpack×Next.js】ReferenceError: document is not defined
作成したnpmライブラリをNext.jsで読み込む時、ReferenceError: document is not definedというエラーに遭いました。
状況
作成していたnpmライブラリは、webpackを使用してバン...
Next.js 【npmライブラリ作成/Next.js】Global CSS cannot be imported from within node_modules.
自分で作成したライブラリをNext.jsにインストールした際に、Global CSS cannot be imported from within node_modules.というエラーが立ちはだかりました。
エラー内容
Gl...
JavaScript CJS, UMD, ESMとは？その違い。
cjs, umd, esmって何？と思ったので調べました。
まずはざっくり結論から
これらは、モジュールの仕様を指します。JavaScriptファイルから別のJavaScriptファイルを読み込む仕組みのようなものです...
OSS Hacktoberfestとは？参加方法と取り組み方
Hacktoberfestとは
DigitalOceanが運営するOSS(オープンソースソフトウェア)の祭典。10月の1ヶ月間で行われている、OSSへの貢献を推進するものです。
参加方法は下記のように様々です。
プルリク...
React 【React/Portal】関数コンポーネントで作るPortalの使い方
モーダルやスナックバーなどを使用するとき、z-indexの関係でうまく一番上に出てこない...なんてことありますよね。そんな悩みに、React Portalという救世主がいるのでご紹介します。
React Portalとは
R...
フロントエンド 【GraphQL/Apollo】クエリのrefetch時にonCompletedが動かない
問題
apollo clientでクエリのリフェッチ時にonCompletedで指定した処理が動かない。（今回は取得情報に基づいて一覧を表示する処理でした）
解決方法
notifyOnNetworkStatusChang...
HTML/CSS/Sass 本番環境にデプロイしたらtailwindcssが効かない時に確認すること
tailwindを使用していた時に、本番環境やdev環境にデプロイしたらスタイルが効いてない時がありました。そんな時に確認することを２つ紹介します。
tailwindcss.config.jsのpurge設定を見直す
tail...
開発 powerlevel10kを入れてiTerm2をカスタマイズする方法
以前から他の人のターミナルをチラ見して、私もカスタマイズしたいな〜と思ってたのをいざ実行です！
前提：iTerm2
プラグインマネージャーをインストール
選択肢は複数あるのですが、一番デフォルトっぽいものにしました。
...
Python 【Django】SECRET_KEYをGithubで公開しない方法〜環境変数を用いて〜
趣味でDjangoアプリを立ち上げてみて、GithubにプッシュするとGitGuardianからこんなメールが！
GitGuardian has detected the following Django Secret Key ex...
Docker 【Docker×Django】新しいライブラリをインストールする方法
dockerとdjangoでプロジェクトを作ったはいいものの、ライブラリの追加ってどうやってするんだ？となったので備忘録です。
requirement.txtに追加したいライブラリを記載する
今回は django-en...
フロントエンド 【Jest・エラー】serializes to the same string
エラー内容
toBeを使用して、配列とオブジェクトのテストをしていたのですが、serializes to the same string というエラーに躓きました。
解決方法
toBeではなくtoEqualを使用...
TypeScript 【TypeScript】canvas（HTMLElement）の型を指定する
TypeScriptでcanvasを使用するとき、型をどうしようか迷ったのでメモです。
canvasの型
エディタの候補でも出てくると思いますが、HTMLCanvasElementです。
ただ、これを以下のように当てはめ...
React 【GraphQL/Apollo/Jest/React】queryのresultのdataがundefinedになる
GraphqlとReactのテストを書いているときに手こずったことを記録します。
問題
MockedProviderで定義しているはずのuseQuery(useLazyQuery)のresultのdataがundefinedに...
Next.js Next.jsで環境変数が読み込まれないときに確認すること
Next.jsで環境変数を読み込むのに手間取ったので備忘録。
環境変数名にNEXT_PUBLIC_をつけているか
環境変数をクライアントサイド（ブラウザ）で使用する場合、変数名ににNEXT_PUBLIC_とつける必要があります...
React 【Jest/GraphQL/React】Error: No more mocked responses for the query: mutation
このエラーで何時間も消えていったため、確認事項を記録しておきます。
大体のエラー原因
モック化しているリクエスト、もしくはレスポンスの型や内容が異なっている。
具体的に確認すべきこと
使用するクエリのドキュメントを...
React 【React】マウントとレンダリングとその違い
自分の中でマウントとレンダリングの違いがごちゃごちゃになったので、調べ直してみました。
マウントとは
Reactコンポーネントに対応するインスタンスとDOMノードの作成と、それをDOMツリー（DOMコンテナ）への追加を行う処理...
React 【React×TypeScript】コンポーネントをPropsとして渡す方法
コンポーネントをPropsとして渡す方法に少し手こずったので、メモしておきます。
ポイント
指定するPropsの型は、JSX.ElementやReact.ReactNodeなどを使用するコンポーネントを受け取る際は、引数にpr...
Dart/Flutter 【Flutter】ListTileを角丸にする方法（borderなし）
borderを使わずに角丸にする方法です。
方針
ListTileを直接丸くするのではなく、ListTileの親のContainerを丸くする。
実際のコード
Widget _buildListItem(Strin...