OSS Hacktoberfestとは？参加方法と取り組み方
Hacktoberfestとは DigitalOceanが運営するOSS(オープンソースソフトウェア)の祭典。10月の1ヶ月間で行われている、OSSへの貢献を推進するものです。 参加方法は下記のように様々です。 プルリクを出してプロジェクト...
開発
OSS 
React 【React/Portal】関数コンポーネントで作るPortalの使い方
モーダルやスナックバーなどを使用するとき、z-indexの関係でうまく一番上に出てこない...なんてことありますよね。そんな悩みに、React Portalという救世主がいるのでご紹介します。 React Portalとは Reactの公式...
フロントエンド 【GraphQL/Apollo】クエリのrefetch時にonCompletedが動かない
問題 apollo clientでクエリのリフェッチ時にonCompletedで指定した処理が動かない。（今回は取得情報に基づいて一覧を表示する処理でした） 解決方法 notifyOnNetworkStatusChange: true を追...
HTML/CSS/Sass 本番環境にデプロイしたらTailwind CSSが効かない時に確認すること
tailwindを使用していた時に、本番環境やdev環境にデプロイしたらスタイルが効いてない時がありました。そんな時に確認することを２つ紹介します。 tailwindcss.config.jsのpurge設定を見直す tailwindcss...
開発 powerlevel10kを入れてiTerm2をカスタマイズする方法
以前から他の人のターミナルをチラ見して、私もカスタマイズしたいな〜と思ってたのをいざ実行です！ 前提：iTerm2 プラグインマネージャーをインストール 選択肢は複数あるのですが、一番デフォルトっぽいものにしました。 git clone -...
Python 【Django】SECRET_KEYをGithubで公開しない方法〜環境変数を用いて〜
趣味でDjangoアプリを立ち上げてみて、GithubにプッシュするとGitGuardianからこんなメールが！ GitGuardian has detected the following Django Secret Key expose...
Docker 【Docker×Django】新しいライブラリをインストールする方法
dockerとdjangoでプロジェクトを作ったはいいものの、ライブラリの追加ってどうやってするんだ？となったので備忘録です。 requirement.txtに追加したいライブラリを記載する 今回は django-environ を追加しま...
フロントエンド 【Jest・エラー】serializes to the same string
エラー内容 toBeを使用して、配列とオブジェクトのテストをしていたのですが、serializes to the same string というエラーに躓きました。 解決方法 toBeではなくtoEqualを使用すればOKです。 そもそも、...
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などを使用するコンポーネントを受け取る際は、引数にpropsを受け取...
Dart/Flutter 【Flutter】ListTileを角丸にする方法（borderなし）
borderを使わずに角丸にする方法です。 方針 ListTileを直接丸くするのではなく、ListTileの親のContainerを丸くする。 実際のコード Widget _buildListItem(String item) { ret...
Dart/Flutter 【Mac】Flutterをインストールする方法
Flutterをインストールする Flutterの公式ページから、SDKをインストールする。 以下の画像で言うと、flutter_macos_2.2.2-stable.zipファイル。 zipファイルを解凍し、任意の場所に配置する zipフ...
エラー 【Jest】ReferenceError: Element is not defined
エラー内容 以下のようにコードを書いていたのですが、ReferenceError: Element is not defined というエラーに遭遇していました。 ... Element.prototype.scrollIntoView =...
キャリア Linux Essentialsとは？合格までの勉強方法
先日Linux Essentialsという試験を受け、合格しました。結果は、800点満点中の780点でした（合格点は500点 / 問題数は40）。 Linux Essentialsとは Linux Essentialsは、LPIC・Linu...
HTML/CSS/Sass 数値入力するスライドバー・スライダーの作り方
下の画像のような、数値入力できるインディケーターというか、スライドバー・スライダーみたいなものを作りたかったので、その備忘録です。 作り方 HTMLのinput要素で作れます。 <input type="range" min="2" max...
Laravel Laravelのライフサイクルを調べてまとめてみた
1. アプリケーションとサービスコンテナのインスタンスを生成 リクエストが public/index.php に入り、以下のことが行われる。 Composerが生成したオートローダーの定義をロードbootstrap/app.php を読み込...