No.
2024-05-01
  • Jan
  • Feb
  • Mar
  • Apr
  • May
  • Jun
  • Jul
  • Aug
  • Sep
  • Oct
  • Nov
  • Dec
  • Sun
  • Mon
  • Tue
  • Wed
  • Thu
  • Fri
  • Sat
  • 27
  • 28
  • 29
  • 30
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

React

1. 基本

  • SPA開発ではHTMLファイルは一つだけ
  • <div id="root">をJSで書き換えることで実現できる
  • createRootを使っている場合はReact18以降のバージョン

2. JSX記法

  • createRootでHTMLのdivタグを編集している
  • StrictModeはJSX記法を満たしているかを厳しくチェックする
  • 画面要素は関数(=コンポーネント)を使って記述
    • 関数でreturnするものが表示される
    • returnする際は1つのタグで囲まれている必要がある
      • divタグなどで囲う必要がある
      • divタグがいらない場合はReact.Fragmentを利用する(あまり使わないが)
    • コンポーネント名は大文字で始める
  • HTMLタグ内にJSを使いたい場合は{}で囲む
  • スタイルを当てる場合はJavaScriptのオブジェクトを利用する
    • インラインでCSSを当てることは少なく、CSSフレームワークを利用することがほとんど
    • あるいはコンポーネントライブラリを利用する

3. コンポーネントを利用

  • コンポーネント化する場合は、別ファイルに記述していく
  • コンポーネント化した関数は、そのままだとmain.jsxからアクセスできないので、 exportする必要がある
  • インポートする場合は、自分でimport文を書かずに、オートコンプリート機能を使って記述してもらう
    • 関数名を入力して、補完候補から選択すれば自動で記述してくれる

4. props

  • コンポーネントに渡す引数のこと
    • props.colorなどのようにアクセスできる
    • オブジェクトの分割代入で
  • タグで囲まれた部分を渡すこともできる
    • props.childrenでアクセスできる
    • HTML要素を渡すこともできるので、階層構造を作りたい場合はchildrenを使うと便利

5. state

  • それぞれのコンポーネントが持つ「状態」
    • (例)モーダルが閉じている・開いている、フォームの入力情報
  • stateを使う場合はuseStateをインポートする
  • set関数が実施されてすぐにnumの値が変わるわけではない
    • set関数を呼び出した関数が終了してからnumの値が変わる
    • set関数が呼び出された時点でのnumの値を使って更新する場合は関数を使って記述する
  • useStateなどのフックを使うときは、最上位の関数から呼び出す必要がある

6. 最レンダリングと副作用を知る

  • 再レンダリングを制すものはReactを制す

  • 開発時、StrickModeを使用していると2回レンダリングされる
    • 複数回マウント・アンマウントされる状況でも正常に動作するかを確認できるように、という目的がある
    • 本番環境では1回だけレンダリングされる
  • コンポーネントの再レンダリングが行われるのは次のタイミング
    • そのコンポーネントのstateが更新された時
    • そのコンポーネントのpropsの値が更新された時
    • 親のコンポーネントが再レンダリングされた時
  • Too many re-renders. React limits the number of renders to prevent an infinite loop.
    • Stateを使うと起こりがちなエラー
  • Stateを複数の関数で使うと、お互いに干渉してうまく動作しないことがある。
    • このことを副作用という
    • 副作用をうまくいなすためにはuseEffectを利用して、処理の関心を切り分ける
    • ただ、むやみやたらに利用せず、本当に必要かどうかを吟味してから使うようにしよう

useEffect

  • 第一引数：関数
    • 実施する処理を記述していく
  • 第二引数：配列
    • 空配列を入れると、最初のレンダリング時のみ、第一引数の処理が行われる
    • 配列内に変数を入れると、その変数が更新された場合のみ処理が行われる

7. defaultExportとNamedExport

  • DefaultExportは呼び出し側で自由な名前をつけられる
    • export default function ...
    • 外部公開するパッケージなどに使うといいかも
  • NamedExportは呼び出し側で名前を変えることができない
    • export const ... = () =>
    • 開発中はこちらを使う方がいいかも
    • {}で囲むのはこちらの方