Webエンジニア「いっしー」のブログ

開発環境 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 ...

開発環境 Visual Studio Code:version 1.73.0 OS:Windows10 react:18.2.0 react-dom:18.2.0 ReactのuseReducerとは useReducerは、リデューサ (reducer) をコンポーネントに追加するための React Hookです。 コンポーネント内で状態管理を行うために使用され、複雑な状態ロジックや複数の状態を一元管理することができます。 useStateの代替として、より複雑な状態遷移を必要とする場合や、状態管理を一 ...

開発環境 Visual Studio Code:version 1.73.0 OS:Windows10 react:18.2.0 react-dom:18.2.0 ReactのuseContextとは useContextは、コンテキストを使用するためのReact Hookです。 Reactコンポーネントツリー全体に対して「グローバル」とみなすデータを利用するために設計されています。これにより、最下層までpropsバケツリレーをする必要がなくなります。 Contextを使用することで、コンポーネントツリー ...

開発環境 Visual Studio Code:version 1.73.0 OS:Windows10 react:18.2.0 react-dom:18.2.0 ReactのuseEffectとは useEffectは、副作用（データ取得、購読、手動DOM操作など）を扱うためのReact Hookです。 useEffectを使うと、関数コンポーネントで副作用の処理（DOMの書き換え、変数代入、API通信などUI構築以外の処理）を簡単に行うことができます。 副作用の処理は、コンポーネントがレンダリングされ ...

開発環境 Visual Studio Code:version 1.73.0 OS:Windows10 react:18.2.0 react-dom:18.2.0 ReactのuseStateとは useStateは、状態を管理するためのReact Hookです。 stateとは、コンポーネントが内部で保持する「状態」のことで、画面上に表示されるデータ等、アプリケーションが保持している状態を指しています。 stateはpropsと違い後から変更することができます。 公式ドキュメント：https://ja. ...

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

docker-reactディレクトリ直下にあるappディレクトリは、Reactアプリケーションが作成されるディ ...

開発環境 Visual Studio Code:version 1.73.0 OS:Windows10 Djangoの環境構築をするまでの手順 Djangoの環境構築を構築するまでの手順について解説していきます。 Pythonのインストール Djangoで開発するためには、まずPythonをインストールする必要があります。 Pythonの公式サイトのダウンロードページにアクセスします。 Pythonの公式サイト：https://www.python.org/downloads/ 上記のリリースノートからイ ...