TL;DR next exportは他のウェブフレームワークと違い、単一のhtmlではなくpages単位でhtmlを書き出す そのため、一般的なSPA向けのサーバー設定では、ブラウザの更新時に40…

ポートフォリオをjsで書いていたが、tsに書くために書き替えた部分を紹介します。 ですが、私自身もTypeScriptの知識が不十分な部分があるので、初心者向けの内容です。 ファイルをjsからtsx…

目次 1. アイコン表示 2. クラスネームの複数指定及び動的制御 3. モーダル表示 4. ドラッグ&ドロップの機能実装 1. アイコン表示 ライブラリをインストール $ npm install…

Gatsby FunctionsとmicroCMSのqパラメーターでサイト内検索機能を実装するには Gatsbyに、バージョン４から（正確には3.7から）Gatsby FunctionsというAP…

まえがき 色々モバイルアプリを見ていくと、リストの表示に横スクロールバーを使っている場合が多く見られます。 汎用性が高そうなので、実装しようと思いました。 フレームワークはReact、コンポーネン…

題名の通り、Chakra-uiの公ドキュメントの検索バーを作ります。 chakra-ui react-icons 　環境{ Next.js:"12.2.3" React: "18.2.0" Type…

こちらのプログラムを改造して、連想配列を表示します。 React: JSON をテーブルで表示 次の JSON を CORS のヘッダーがある形で受信します。 Access-Control-Allo…

次の JSON を CORS のヘッダーがある形で受信します。 Access-Control-Allow-Origin: * [ {"key": "t0921", "name": "宇都宮", "p…

Rechartsを使って凡例のフォーマットを変更する必要があったので調査しました。 <LineChart width={600} height={300} data={data} margin={{…