React

開発環境 Visual Studio Code:version 1.73.0 OS:Windows10 Docker Engine:v23.0.5 DockerでNext.jsの環境構築をする手順 DockerでNext.jsの環境構築をする手順について解説していきます。 ディレクトリ構成 今回のディレクトリ構成は下記を目指していきます。

docker-compose.ymlを作成 まずはdocker-compose.ymlを作成していきま …

開発環境 Visual Studio Code:version 1.73.0 OS:Windows10 Node.js:22.14.0 npm:10.9.2 next:15.2.4 Next.jsをインストールして起動するまでの手順 Next.jsをインストールして起動するまでの手順について解説していきます。 Node.jsのインストール 最初にNode.jsをインストールする必要があります。 Node.jsは、Reactの実行に必要なJavaScriptランタイムであり、JavaScriptエンジン上に …

開発環境 Visual Studio Code:version 1.73.0 OS:Windows10 react:18.2.0 react-dom:18.2.0 ReactのuseCallbackとは useCallbackは、再レンダー間で関数定義をキャッシュできるようにするためのReact Hookです。 関数をキャッシュに保持することにより、関数の依存関係が変わらない限り、関数を再利用することで関数が不要に再作成されるのを防ぐことができます。 そのため、子コンポーネントに渡すコールバック関数が常に …

開発環境 Visual Studio Code:version 1.73.0 OS:Windows10 react:18.2.0 react-dom:18.2.0 ReactのuseMemoとは useMemoは、値のメモ化を行うためのReact Hookです。 メモ化のプロセスで関数の計算結果をメモリ内のキャッシュに保存することで、同じ入力に対する再計算を避け、パフォーマンスを向上させることができる技術です。 特に計算コストが高い処理や、頻繁に呼び出される関数に対して有効です。 公式ドキュメント：htt …

開発環境 Visual Studio Code:version 1.73.0 OS:Windows10 react:18.2.0 react-dom:18.2.0 ReactのuseRefとは useRefは、レンダー時には不要な値を参照するためのReact Hookです。 Classコンポーネント時のref属性の代わりに、useRefを使って要素への参照を行いDOM 要素へのアクセスや状態の保持するために使用されます。 公式ドキュメント：https://ja.react.dev/reference/re …