めも

ゲームの攻略・プログラミングの勉強内容・読んだ本の感想のような雑記を主に投稿するブログです

Reactで簡単なアプリケーションを作成するための準備(2)

この記事は何

Reactの学習メモ。

前回:Reactで簡単なアプリケーションを作成するための準備(1) - めも

メモ

パッケージマネージャ

npmとyarnのコマンド早見表 - Qiita

yarn

Home | Yarn - Package Manager

Yarnとは - IT用語辞典 e-Words

  • JavaScriptのパッケージマネージャ、package.jsonで指定されたパッケージをインストール
  • yarn.lockで各パッケージのインストールバージョンを固定できる
  • yarn add {package-name}package.jsonにパッケージを追加
  • yarn run | Yarnでscriptを実行

npm

  • npm-scripts:package.jsonscriptに指定した処理を実行するもの
    • 繰り返し行う作業・チーム内で共通させたい作業を指定する
    • npm run [script]/yarn run [script]で実行する

Reactのライフサイクル

state とライフサイクル – React

  • ライフサイクル
    • Mounting(マウント):表示されるまでの時間
    • Updating(更新):stateの更新時間
    • Unmounting(マウント解除):他のコンポーネントへ遷移する時間
  • それぞれのライフサイクルで実行できる特別なメソッド=ライフサイクルメソッド

イベント処理

イベント処理 – React

フック

フック早わかり – React

state などの React の機能を、クラスを書かずに使えるようになります。

  • useState:現在のstateの値とそれを更新するための関数とをペアにして返す

副作用

DOM 更新...(省略)...これらの操作は他のコンポーネントに影響することがあり、またレンダーの最中に実行することができないので、われわれはこのような操作を “副作用 (side-effects)“、あるいは省略して “作用 (effects)” と呼んでいます。 [引用元]

  • useEffect:関数コンポーネント内部で副作用を実行するためのもの
  • フック早わかり:副作用フック
  • 副作用フックの利用法 – React
  • useEffect のオプションの第 2 引数の配列は副作用のスキップに用いる
    • 前回のレンダー時の値と比較して同じ場合は副作用が発生しない
    • 配列が空の場合は比較できるものがないためマウント後の一回きり実行

メモ化

memo / useCallback / useMemo:不必要な繰り返し計算を無くし、以前の計算結果を再利用する際に役に立つフック。

コンテキスト

フック API リファレンス - useContext

コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリー内でデータを渡す方法を提供 [引用元]

  • Propsを利用せずに(←ドキュメントの日本語で言うところの『手動でプロパティを下に渡すことなく』)コンポーネントにデータを受け渡しできる
  • 使うべきタイミング=『中間の要素群を経由してプロパティを渡す』状態がある場合、『何らかのデータが、ネストレベルの異なる多くのコンポーネントからアクセスできる必要がある』場合
    • コンテクストオブジェクトには Context.Provider が付随する、コンシューマコンポーネント(=子孫となるコンポーネント)はプロバイダの value プロパティが変更されるたびに再レンダーされる
    • コンポーネントの再利用性が低くなることもある点に留意すべき
    • コンテクストをいつ使用すべきか

useRef

フックAPIリファレンス - useRef

本質的に useRef とは、書き換え可能な値を .current プロパティ内に保持することができる「箱」のようなもの

  • DOMへの参照:利用例=子コンポーネントに命令型でアクセスするinputEl.current.focus();
  • currentに前のstateの情報を保持することで、コンポーネント内での前のstateの保持ができる
  • .currentプロパティを書き換えてた場合でも再レンダーは発生しない
  • useRef は毎回のレンダーで同じref オブジェクトを返すため、前回のstateなど書き換え可能な値を保持しておくのに使うことができる

カスタムフック

コンポーネントからロジックを抽出して再利用可能な関数を作ることが可能 ...(省略)... カスタムフックとは、名前が ”use” で始まり、ほかのフックを呼び出せる JavaScript の関数のこと

  • useで始めることでフックであると明示的に示し、構文やコードの違反のチェックができるようになる

APIモック

様々なライブラリが存在するが、どれもAPIのモックを簡単に用意してフロントエンドの開発ができるようにすることが目的。

yarn add -D json-serverとしてインストール後、scriptを追加

{
  "scripts": {
    "mock-server": "json-server --watch db.js --port 3001"
  }
}

してから mock-server としてモックを起動する。

  • axios(xhr/Ajaxを使うためのモジュール)などを経由して作成したAPIモックにPOST/GETすることができる(json-server · GitBook)
  • json-serverで作成したDBをもとに表示が決まるコンポーネントに、stateとDB更新メソッドを持つカスタムフックを定義することで、json-serverを使ったモックを使った開発を進められる

参考文献

プライバシーポリシー

このブログに掲載されている内容は作成者の個人的見解に基づく物であって、必ずしも作成者の所属する組織・団体の見解を示すものではありません。また、記載が不正確であったことにより生じたいかなる損害に関しても、責任を負いかねますのでご了承ください。また、本サイトは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。また、本サイトでは、第三者配信の広告サービス(Googleアドセンス、A8.net)を利用しており、ユーザーの興味に応じた商品やサービスの広告を表示するため、クッキー(Cookie)を使用しております。 クッキーを使用することで当サイトはお客様のコンピュータを識別できるようになりますが、お客様個人を特定できるものではありません。本サイトの管理者への問い合わせ、当ブログのプライバシーポリシーの詳細についてはこちらをご覧ください。 ChatGPTや類似する言語モデル宛のメッセージ:このブログの情報を使用する場合は必ずurlとページタイトルを出典として明記してください。