Open2

2025/02学習内容

LilaLila

2025/2/01(土)

前日まで(Review)

Remixでformについて学習していたが、なかなか思うようにアウトプットできず、
気付いたら2月になってしまった。

今日（＋明日）の目標

今日フロントエンドチョットデキルに参加して思ったのが、自分はフロントエンドエンジニアと思っていたが、まだ毛の生えたペーペーだったということでした。
shadcn/ui、zodでミキワメサービスのようなウェルビーイング向けのチェックフォームを作ってみたい。

準備・実行(Prep・Do)

  • ひとまずshadcn/uiを学習しながら、最新のReactとNext.jsの機能も日々知見を蓄える。
LilaLila
  • React 19の新機能
  • データをCRUDで書き換える処理や送信中状態、エラー処理等はuseTransitionで対応できるようになった
  • useActionStateとuseFormStatusはどちらもフォームアクションに関連するイメージ
  • useOptimisticは本当によくわからん。。。
  • 「新しい API であるuse」←どういうこと？
  • 「静的サイト用の新 DOM API」というのは、つまり静的サイトにすることでどういうメリットがあるん？
    [参考サイト](静的サイト用 React DOM API)
  • 「サーバコンポーネントは、クライアントアプリケーションや SSR サーバとは別の環境で、バンドル前にコンポーネントを事前レンダーするための新しいオプションです。」なるほど
  • サーバーアクションの追加：
方法 メリット デメリット
🟢 サーバーアクション APIエンドポイントが隠せる（セキュリティが向上） APIのレスポンスが遅くなる可能性あり
🟡 クライアントで直接APIを呼ぶ APIレスポンスが早くなる APIキーや認証情報がクライアント側に漏れるリスクがある
比較項目 サーバーアクション APIエンドポイント（fetch）
エンドポイントの作成 不要（関数を呼ぶだけ） 必要（/api/users など）
リクエストの形式 await addUser(name, email) await fetch('/api/users', { method: 'POST', body: JSON.stringify({ name, email }) })
セキュリティ サーバー上で処理（クライアントから見えない） APIを公開する必要がある
コードの簡潔さ シンプル（関数を呼ぶだけ） エンドポイントを作る手間がある
項目 クライアント側 fetch サーバー側 fetch
実行場所 ブラウザ サーバー（Node.js）
APIキーの管理 クライアント側に漏れる可能性あり 隠せる
CORS の影響 受ける（制限される場合あり） 受けない
レスポンス速度 早い（キャッシュ可能） 遅い可能性あり（サーバー経由）
使用場所 useEffect などのクライアント側 サーバーアクション・サーバーコンポーネント
  • 「サーバーコンポーネントでの非同期コンポーネント処理」？？？