Zenn
Open4

React Developer Roadmap

React
roadmap
PoorStackPoorStack

CLI Tools

Vite

https://ja.vitejs.dev/guide/

  • 読み方は /vit/ （ヴィート）
  • より速く無駄のない開発体験を提供することを目的としたビルドツール

Viteの特徴

  • 非常に高速な開発サーバー
    • ネイティブESモジュールを利用
    • Hot Module Replacement (HMR)
      • ページをリロードせずにモジュールを更新する
      • 毎回全体をバンドルしないので高速
  • プロダクションでは Rollup でコードをバンドル
    • バンドルされていない ESM をプロダクション用にリリースするのは非効率なため ^
その他の特徴
  • NPM の依存関係の解決と事前バンドル
  • TypeScript のサポート（型チェックはしない）
  • JSX のサポート
  • CSS ファイルのインポート
    • <style> タグを介して挿入される
    • CSS Modules のサポート ^
    • 各種 CSS プリプロセッサーのサポート（sass, less, stylus）
  • 静的なアセットをサポート
    • 静的アセットをインポートすると、提供時に解決されたパブリック URL が返される
  • Glob のインポート
    • const modules = import.meta.glob('./dir/*.js')
  • Dynamic Import
    • 変数をつかった動的インポート
    • const module = await import('./dir/' + file + '.js')
  • WebAssembly のインポート
    • import init from './example.wasm?init'
  • Web Workers
  • ビルドの最適化
    • CSS のコード分割
      • スタイルが使われているページにのみ使われているスタイルを読み込み
    • プリロードディレクティブの生成
    • 非同期チャンク読み込みの最適化

Vite による React プロジェクトの初期化方法

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template react-ts

# yarn
yarn create vite my-app --template react-ts
コマンドラインインターフェース

https://ja.vitejs.dev/guide/cli.html

# 開発サーバーを起動
yarn dev

# プロダクション用にビルド
yarn build

# プロダクション用ビルドをローカルでプレビュー
yarn preview
マルチページにも対応

https://ja.vitejs.dev/guide/build.html#multi-page-app

// vite.config.js
import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        nested: resolve(__dirname, 'nested/index.html'),
      },
    },
  },
})
環境変数

https://ja.vitejs.dev/guide/env-and-mode.html

.env ファイル

.env                # 全ての場合に読み込まれる
.env.local          # 全ての場合に読み込まれ、gitには無視される
.env.[mode]         # 指定されたモードでのみ読み込まれる
.env.[mode].local   # 指定されたモードでのみ読み込まれ、gitには無視される
  • 環境変数が誤ってクライアントに漏れてしまうことを防ぐために、VITE_ から始まる変数のみが Vite で処理されたコードに公開される
  • HTMLでの置換
    • <h1>Vite is running in %MODE%</h1>
    • <p>Using data from %VITE_API_URL%</p>
PoorStackPoorStack

メモ: React の流儀

https://ja.react.dev/learn/thinking-in-react

React でユーザインターフェースを構築する際には、まず UI をコンポーネントと呼ばれる部品に分割します。次に、各コンポーネントのさまざまな視覚的状態を記述します。最後に、複数のコンポーネントを接続し、それらの間をデータが流れるようにします。

モックアップから始めよう
  • デザイン
  • API から返ってくるデータ（JSON）
ステップ 1：UI をコンポーネントの階層に分割する ⇒ コンポーネントに名前をつける
  • モックアップのコンポーネントを四角で囲んで名前をつけていく
  • 「単一責任の原則」にもとづいて１つのコンポーネントは１つのことだけを行うのが理想
  • JSONの構造にあわせてみる方法も
ステップ 2: React で静的なバージョンを作成する ⇒ コンポーネントを作る
  • まずはデータモデルからUIをレンダーするバージョンを作成
  • 静的なバージョンをつくって、あとでインタラクティブなものにする
  • コンポーネント を作成し、props 経由でデータを渡す
    • state はインラタクティビティなので使わない
  • 構築の着手順
    • 簡単な構成の場合：トップダウン
    • 複雑な構成の場合：ボトムアップ
  • 単方向データフロー (one-way data flow) ：データがトップレベルコンポーネントからツリーの下の方にあるコンポーネントに流れていく構造
ステップ 3：UI の状態を最小限かつ完全に表現する方法を見つける ⇒ state を見つける
  • UI をインタラクティブにするには state を使う
  • state とは、アプリが記憶する必要のある、変化するデータの最小限のセットのことである
  • state で一番大事な原則は DRY 原則
  • state ではないもの
    • 時間がたっても変わらないもの
    • 親から props 経由で渡されるもの
    • 既存の state や props から計算可能なもの
ステップ 4：state を保持すべき場所を特定する ⇒ state を保持するコンポーネントを特定
  1. その state を使ってレンダーするすべてのコンポーネントを特定
  2. それらのもっと近い共通の親コンポーネントを見つける
  3. state がどこにあるべきかを決定する
  • コンポーネントに state を追加するには useState() フックを使用
    • フックとは、React に「接続（"hook into"）」するための特殊な関数
ステップ 5：逆方向のデータフローを追加する
  • state を更新する関数を親要素から子要素に渡す
  • 子要素の中でイベントハンドラを追加し、親要素の state を設定
PoorStackPoorStack

🚧 Components

把握しておくべき項目

関数コンポーネント

https://ja.react.dev/learn/your-first-component

  • アプリのために再利用可能な UI 要素
  • 関数コンポーネント自体は普通の JavaScript の関数
    • 名前は大文字から始める必要がある
    • パラメーターとしてデータを受け取ることもあれば、受け取らないこともある
    • 返り値として JSX を返す
    • React フックを使って管理される state を持つこともできる
JSX

https://ja.react.dev/learn/writing-markup-with-jsx

  • JavaScript XML の略
  • JavaScript ファイル内に HTML のようなマークアップを記述できるようにするもの
Props vs Status
条件付きレンダー
コンポジション