Zenn
Open10

Udemy_React_ステップアップ

React
JavaScript
naoto911naoto911

セクション3(再レンダリング)

内容のまとめ

memoについて
・親componentが再レンダリングされても、propsに変化がなければ子componentは再レンダリングされて欲しくない
・このやり方を、memoを用いた実現する方法について学んだ

useCallbackについて
・また、memoだけだと、親componentで定義した関数がアロー関数の記法で記載されている場合は、親componentの再レンダリングのたびに、その関数は毎度別の関数に変化したと判定されてしまう
・この判定を最適化する方法としてuseCallbackについて学んだ

useMemoについて
・ある変数の値が中身の計算などによって定まる場合に、再レンダリングのたびに再計算をおこなってしまう
・この値が再レンダリングに依存していない場合は、依存元の更新以外では再計算は不要であることが望ましい
・これを実現するためにuseMemoを用いることについて学んだ

naoto911naoto911

セクション4 (cssの当て方)

内容のまとめ

  • Reactでのcssの当て方は沢山あるがその中の代表的なものについて学んだ
    • Inline Styles
    • CSS Modules
    • Styled JSX
    • Styled components
    • Emotion
naoto911naoto911

セクション5 (React Router)

内容のまとめ

画面遷移/react-router-domについて
・Reactで画面遷移を実現する際のRouting設定方法について
・react-router-domを用いる
画面遷移時に使用する主要の機能について
・<BrowserRouter でrouting を用いたい範囲を囲む
・<Link>で要素のクリックに同期してurlを遷移することができる
・<Switch>と<Route>で遷移先のurlに応じて、表示するコンポーネントを指定する
・<Route path="/"></ コンポーネント></Route>のような形で遷移時のpathと画面を指定する
画面遷移がネストする場合
・遷移先でネストした場合の記述としてrendeを用いる方法について
・これらを、ファイル分割して記述する方法について
URL/クエリパラメーターの取得方法
・useParamsを用いるとURLパラメーター(動的なpath)のidを取得できる
・useLocatioを用いるとクエリパラメーター(?以後の〇〇=□□)の部分を取得できる
・URLパラメーターでuseParamsを用いると動的なpathのidを取得できる
stateを画面遷移先に渡す場合
・Linkタグの中で、<Link to={ { pathname: "pathを指定", state: オブジェクトを指定} }> とすると、画面遷移先にstateを渡すことができる
・遷移先の画面からstateを取得するには、useLocation を用いる
Link以外で画面遷移する方法
・useHistoryを用いてそのメソッドを用いる(push("pathを指定"), goBack などのメソッド)

naoto911naoto911

セクション6 (Atomic Design)

内容のまとめ

・Atomic Designの設計思考に則ってcomponet分割して画面を作成するハンズオン
・共通のパーツが分割粒度に応じて使い回すことができて記述がシンプルになる
・styled compoentを用いる時に、ATOMS以外は、作成したcomponsnt自体を囲むタグを作ってそのタグに対してスタイルを当てることが多いことに注意して作成する

Atomic Designとは

  • 画面要素を5段階に分けて組み合わせることでUIを実現するというデザインにおける構造の捉え方
  • モダンなJSと相性がよいがReact, Vue用の概念ではない

構成用途について

  • ATOMS (原子)
    • 最も小さくてそれ以上分解ができない要素
      • ボタン、入力テキストボックス、アイコンなど
  • MOLECULES (分子)
    • Atomの組み合わせで意味を持つデザインパーツ
      • アイコン+メニュー名、プロフィール画像+テキストボックス、アイコンセットなど
  • ORGANISUMS (有機体)
    • AtomやMoleculeの組み合わせで構成される。単体である程度の意味を持つ要素群
      • ツイート入力エリア(テキストボックス + 画像添付アイコンなど + ボタン)
      • サイドメニュー(様々なアイコン+テキストの集合群)
      • ツイートエリア (アイコン + テキスト + リプライ/リツイート/いいねボタンなど)
  • TEMPLATES (テンプレート)
    • ページのレイアウトのみを表現する要素 (実際のデータはもたない)
      • サイドメニュー、ツイートエリア、などのエリア自体の空間のこと(中のデータは関係ない)
  • PAGES (ページ)
    • 最終的に表示される1画面
naoto911naoto911

セクション7 (グローバルなstate)

内容のまとめ

・component間で共通のstateを参照するときにprops経由で渡す以外の手段について
・グローバルなstateとして変数を用意してそれを参照するために、contextを用いる方法について学ぶ
createContextとuseContextについて
・createContext でグローバルな変数を定義
・ </UserContext.Provider> で囲むだcomponentの中でこのcontextを参照することが可能になる
・contextを参照するには、useContextを使って、contextを受け取る
useStateとcontextの組み合わせ
・useStateと組み合わせることで、グローバルなcontextを動的に更新する行為もcomponentを跨いで実現可能になる
memoと組み合わせる
・useStateでconetextを更新すると、親compoentの再レンダリングに同期して、子comopnetも再レンダリングされる
・しかし、子componentでは、contextを参照していない場合は、再レンダリングは無駄な処理になる
・これを子component側で、memo()で全体を囲むことで解決する

naoto911naoto911

セクション8 (JSONPlaceholder)

内容のまとめ

  • JSONPlaceholderを使うと無料でAPIを叩くテストができる
  • ReactでAPIを叩く時には、axiosを使うと簡単にできる
  • axios.get("pathを指定")でAPIを叩ける
  • APIを叩いた直後に .then( (引数) => {処理} ) の形で記述する
    • 引数で取得したデータを受け取れる
    • 処理の部分でデータに関する処理を記述する
  • APIを叩いてエラーが出る場合の回避処理は、catch( (引数) => {処理} )の形で記述する
    • 引数でエラーを受け取る
    • 処理の部分でエラーに関する処理を記述する
import axios from "axios";
import "./styles.css";

export default function App() {
  const onClickUsers = () => {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((res) => {
        console.log(res);
      })
      .catch((err) => console.log(err));
  };
  const onClickUser1 = () => {
    axios.get("https://jsonplaceholder.typicode.com/users?id=1").then((res) => {
      console.log(res);
    });
  };

  return (
    <div className="App">
      <button onClick={onClickUsers}>users</button>
      <button onClick={onClickUser1}>id=1のuser</button>
    </div>
  );
}
naoto911naoto911

セクション9 (TypeScript_基礎)

内容のまとめ

  • TypeScriptの概要について
  • 基本的な型の種類
  • 型指定のメリット
    • 型指定をあらかじめするしておくことで、想定していない型に将来的に変更された時に、画面描写する前に、コードの修正を行った時点でIDE上でエラーが発生するため意図しない変更を検知することができる
  • 型指定する場合(関数の引数)
    • const 関数名 = (引数: 型) ⇒ {処理}
  • 型指定する場合(関数の返却値)
    • const 関数 = (引数: 引数の型): 関数の型 ⇒ {処理}
  • 型指定する場合(関数の返却値)
    • let 変数: 変数の型 = 値;
  • tsconfig.jsonについて
naoto911naoto911

セクション10 (TypeScript_実践)

内容のまとめ

  • Stateに型定義
    • type 型定義名 = { 型定義のkey: 型} で型を定義
    • この型を、const [satate値, set関数] = useState<型定義名>([state初期値]);で指定する
  • Propsに型定義
    • まず型定義をする
    • その型を、const 関数コンポーネント名 = (props: 型定義名) => {処理} で記述
  • 型定義の効率化
    • 共通の型定義を作ってそれを使い回す
    • 共通の型定義との差分をPick, Omitを使って記載することで使い回す
  • コンポーネント自体の型定義
    • 関数コンポーネント名: FC<型定義名> / 関数コンポーネント名: VFC<型定義名>
    • VFCの場合は、暗黙的にchildrenを受け取ることもできない
  • オプショナルチェイニング
    • 型定義の中で必須でないプロパティを用いた処理のところに?をつけると、プロパティがない場合にundifinedになって処理がエラーにならずに済む回避方法
  • ライブラリ自体の型定義
    • ライブラリのための型定義があり、そのファイルもセットでimportが必要
naoto911naoto911

セクション11 (カスタムフック)

内容のまとめ

  • 関数コンポーネントのうち、ロジックの部分だけを別の関数ファイルとして切り出しておいて、参照できるようにすること
  • 切り出す際は hooks/use〇〇.tsとうファイルに切り出すことが多い
  • カスタムフック自体も関数だが、戻り値には、呼び出し元で使用したい関数や変数などのカスタムフックのファイル中で定義したものをreturnで指定する
  • 呼び出し側では、const { 受け取りたいカスタムフックの最後に記載した戻り値 } = import時に定義した変数(); でカスタムフック中のものを受け取る
  • 以後は、constで定義したプロパティを使って実際のコードとして使い回す