入門の動機

  • UIフレームワークは技術の変化が早くて追っかけられてなかったが一度最新の状況を理解しておきたい
  • 業務でも個人開発でもUI開発のパラダイムを理解することで良い開発ができそうな感覚を持ったため
  • スマホアプリ・デスクトップアプリ・フロントエンドに依存しない共通したUI開発のベストプラクティスの引き出しを増やしたい
  • Flutterアプリ・WPFアプリ・Kotlinアプリいずれにしても最新のパラダイムの理解が必要な感覚があった
  • Webアプリケーションのクライアント側の挙動を概要レベルで語れるようにしておきたい
  • フロントエンドという領域や職種に対するイメージをアップデートした方が良さそうなくらい進化している(気がする)
  • Reactは標準技術と言えるくらい普及している(気がする)

入門の仕方

  • 雑誌 WEB+DB PRESS Vol.129 の特集「Reactの深層 変わる常識と変わらない思想」の記事に目を通して、Reactの本質的な思想とVer18以降の設計方針が理解できた
  • 手を動かしたくなったので公式ページのReactを学ぶに着手した
  • チュートリアル：三目並べ は、最後まで実装してイメージつかめた
  • Reactの流儀 は、ひととおり目を通した
  • 内容的には違和感はなく、慣れればしっくりきそうな気がする

感想

  • 雑誌の特集記事がイメージはつかむのに役立った
  • 三目並べのチュートリアルも雰囲気を把握するのによかった
  • バックエンド側との連携とかページ遷移とか理解したい
  • Start building with Next.js が良いのかもしれない
    • スタイリング: Next.js でアプリケーションにスタイルを設定するさまざまな方法。
    • 最適化: 画像、リンク、フォントを最適化する方法。
    • ルーティング: ファイル システム ルーティングを使用してネストされたレイアウトとページを作成する方法。
    • データ取得: Vercel でデータベースを設定する方法と、取得およびストリーミングのベスト プラクティス。
    • 検索とページネーション: URL 検索パラメータを使用して検索とページネーションを実装する方法。
    • データの変更: React Server Actions を使用してデータを変更し、Next.js キャッシュを再検証する方法。
    • エラー処理:404一般的なエラーおよび見つからないエラーを処理する方法。
    • フォームの検証とアクセシビリティ:サーバー側でのフォーム検証の方法とアクセシビリティを向上させるためのヒント。
    • 認証: アプリケーションに認証を追加する方法NextAuth.jsおよびミドルウェア。
    • メタデータ: メタデータを追加し、アプリケーションをソーシャル共有用に準備する方法。
  • React foundations は後でやりたい

参考