【開発】JavaScript/TypeScript, React, Redux(RTK), Next.js
tateishiNext.js
◆ 公式ドキュメント
◆ Next.jsインストール時のオプション設定
◆ Page Router → App Routerによる変更
・ルーティングの違い
・デフォルトがSSRのサーバーコンポーネントに変更
・親コと子コでのデータの受け渡し不要
・getStaticProps・getServerSideProps不要
◆ getStaticProps
◆ getServerSideProps
・getStaticProps：ビルどのタイミングで実行(SSGを実現)
・getServerSideProps：リクエストごとに実行(SSRを実現)
◆ App Routerの詳細解説
◆ Next.jsにおけるCSS in JS(App RouterでのRSC(React Server Components)の場合)
◆ RSC(React Server Components)の詳細解説
tateishiJavaScript、React
◆ forEach, map, filterメソッドの違い
・forEachメソッドは、すべての配列要素に対して処理を行い、その結果を取得する
・mapメソッドは、すべての配列要素に対して処理を行い、その結果を配列として返す
・filterメソッドは、条件に一致した配列要素をフィルタリングし、その要素のみの配列を返す
◆ JavaScript Primer
◆ Reactで{}(curly bracket or 中括弧 or 波括弧)をimportで使う理由
◆ リストと key – React
◆ 「export default」と「export」の違い
◆ React Hooks一覧
◆ 「formの送信」などの際にデフォルトの動作を防止する(≒リロード防止)「preventDefault()」
◆ 関数コンポーネントの「波括弧{}」と「丸括弧()」の違い
・波括弧{}：通常の関数と同じため、内部で変数の定義が可能。return文も必要
・丸括弧()：return文を省略した形で、おもにJSXなどを返すためだけに用いられる関数の際に使用。内部で変数の定義が不可
◆ Ajaxにおる非同期処理の歴史
◆ 「Object Destructuring」を使ったPropsの受け取り方
◆
◆
◆
◆
◆
tateishi-
アロー関数の記法について学ぼう
-
コールバック関数の挙動について学ぼう
-
DOMとイベントリスナについて学ぼう
-
配列のmap、filterメソッドについて学ぼう
-
分割代入について学ぼう
-
スプレッド演算子と残余引数について学ぼう
-
三項演算子について学ぼう
-
Reactコンポーネントって何？コンポーネントを定義してみよう
・コンポーネント名の頭文字は大文字 -
【TIPS】式と文の違い
・「式」はJSX内に記述ができ、「文」は記述できない -
propsでコンポーネントに値を渡してみよう
-
propsに色々な値を渡してみよう
-
propsの重要なルール
・propsは「一方通行(子→親はできない)」であり、「読み取り専用(値の書き換えはできない)」 -
イベントに合わせて関数を実行してみよう
・「イベントリスナー」に登録する関数のことを「イベントハンドラー」と呼ぶ
イベントリスナーに登録するのは関数自体(かっこなし)であり、かっこありの関数で記述するとJSXがレンダリングされた瞬間に発火(関数が実行)されてしまう -
開発でよく利用するイベントタイプ
・onChange：input要素などの値の変更
・on/Focus/onBlur：input要素などへのフォーカス/フォーカスアウト
・input要素などの値を取得
onChange = {(e) => e.target.value}
・onMouseEnter/onMouseLeave：要素へのマウスオーバー/マウスアウト -
【重要】ステートとは？
・useStateが実行されると
① React内部の状態を保持する仕組みと接続し、useStateの引数として渡した値を初期値として保存し、合わせて更新関数を生成する
② useState実行の戻り値として「① 現在の値(state)」と「② 更新関数」が返ってくる
③ 更新関数を実行すると、更新関数の引数として渡した値で現在の値を更新し、関数コンポーネントを再実行(再レンダリング)する -
【複数のステート】ステート使用時の注意点！
・useStateは「関数コンポーネントのトップレベル」「React Hooks内」からのみ呼び出せる
→「関数コンポーネントの外側」や「関数コンポーネントの内のif文/for文の中」からは呼び出せない -
【更新は即時ではない】ステート使用上の注意点！
・更新関数を実行した際に値(状態)は即時更新されず、次のレンダリングの際に初めて更新される
→再レンダリングを待たずに更新された値を使いたい場合は「prevstate => prevstate + 1」などといったアロー関数で記述できる -
【重要】オブジェクトのステートは新しいオブジェクトを設定する！
・オブジェクトのstate管理を行う場合には以下2点に気を付ける
・更新関数の引数にはオブジェクトの形で記述し、更新されるプロパティ以外のプロパティも記述する
・オブジェクトのプロパティの値を変更する場合には新しいオブジェクトを生成して、そのプロパティに対して新しい値を設定する
→プロパティが多いオブジェクトの場合にはスプレッド演算子を用いる -
ステートとコンポーネントの関係
・DOM内で同じ位置に生成されるコンポーネントはstateの状態を引き継ぐ
同じ位置のコンポーネントでstateの状態を分けたい時は、コンポーネントにkeyを付けて一意に管理する -
ステートを複数のコンポーネントで管理しよう！
・コンポーネントが消滅→再生成する場合にstateの状態を維持したい場合には、親コンポーネントでstateを定義し、子コンポーネントへpropsでstateを渡すことができる -
関数型プログラミングとは？
・関数型プログラミングの3つの概念
・「状態管理」と「処理」を分離する
→useStateを用いてstateで状態を管理し、コンポーネントで処理を実行する
・純粋関数
→特定の入力には必ず特定の出力を返す
・不変性(immutability)
→一度設定した値は書き換えない -
useReducerとuseStateの違い・114. useReducerとuseStateの違い（関数型プログラミング視点）
・useStateとuseReducerの大きな違い
・useState：
・更新関数を実行するタイミングでstateをどのように更新するかを設定する
→状態の更新処理内容は利用側で決める
・コンポーネント側で更新用の処理を保持する
・関数内で関数の外側の変数などを参照している場合などは純粋関数とならない(単体テストも不可)
・useReducer
・useReducerを定義するタイミングでstateをどのように更新するかを設定する
→状態の更新処理内容は状態側で管理し、利用側は更新方法(条件)だけを決める
・state側で更新用の処理を保持する
・必ず純粋関数となる
-
useContextでグローバルな値を管理しよう
・親→子→孫コンポーネントへpropsのバケツリレーが発生する際に使用する -
useContextでstateを管理してみよう
・「コンテキスト名.Provider」を用いてvalueに設定している値を配下の子コンポーネントからuseContextを用いて取得することができる
→「.Provider」を記述しない場合はcreateContextで渡した初期値が取得される -
useEffectとは？タイマーを作りながら学んでみよう
・コンポーネントが一番最初にレンダリングされたときのみ、最初の1回だけ実行させたい関数はuseEffectを用いて実行する
→useEffect(コールバック関数, 依存配列)
→依存配列には空の配列を指定する -
useEffectの依存配列の使い方
・useEffectの第二引数の依存配列に指定したstateが更新されると、第一引数のコールバック関数が実行される -
useEffectの実行タイミングをおさらいしよう
・依存配列が空の配列の時、useEffect内のコールバック関数の戻り値(return)に関数を設定すると、その関数はコンポーネントが削除された際に呼び出される(これをクリーンナップ処理と呼ぶ)
→依存配列にstateが設定されている場合は、stateの更新が入って依存値が更新された際にクリーンナップ→コールバック関数の順で各巻数が実行される -
useLayoutEffectって何？useEffectとの違いについて学ぼう
・useEffectとuseLayoutEffectの違い
・useLayoutEffectはuseEffectよりも先に実行される
・useEffectはコンポーネントがレンダリングされた後に実行されるが、useLayoutEffectはコンポーネントのレンダリングよりも先に実行される
tateishiTypeScript
◆ 値としてnullやundefinedを取る(可能性のある)プロパティの短絡評価
「オプショナルチェイニング(?.)」の項を参照