こんにちは、よしこです。
今回は、参加者が800人を超え大盛況となった Encraft #4 「React/Next.js 最前線」 の開催レポートをお届けします！
Encraftとは？
Encraft（エンクラフト）は 株式会社ナレッジワーク が提供する、 "Enablement" と "Craftsmanship" をテーマにした勉強会です。技術にこだわりを持つ人々が集まって互いに知見を交換し、できることを増やしていく場を作りたいと思っています。
過去のイベントの開催レポートは以下からご覧ください。
- Encraft #1 「フロントエンド × 設計」 開催レポート
- Encraft #2 「サーバーとクラインアントを結ぶ技術」 開催レポート
- Encraft #3 「エンジニアイネーブルメント - 共有・育成・評価・効率化 -」 開催レポート
それではさっそく今回のセッション資料と動画アーカイブをご紹介していきます。
セッションの感想はぜひハッシュタグ #encraft でツイートしていただけたら嬉しいです！
セッション内容
メインセッションとして、ここ最近で大きなアップデートのあったReactとNext.jsの今とこれからについて @koba04 さんをお招きしライブコーディングも交えて解説いただきました。
またサイドセッションとして、時系列的に前後にあたる内容をナレッジワーク社内から @yoshiko_pg と @otofu_square が発表しました。
サイドセッション①: Suspense Fetchを3年実用してみて
- このセッションについて
- Suspenseの利用経験を振り返り、before/afterの具体的な変化や使ってみた感想を共有
- 前段： CatchつきFetchライブラリの台頭による近年のfetchスタイルの変化
- Page Containerではなく各Componentからfetchするようになった
- CacheつきFetching libraryを使うことでuseEffectが隠蔽された
- Suspenseによる変化
- isLoadingとerrorの状態がComponentの外に追い出された
- dataの型が
T | undefinedではなくTになった
- 使ってみてどうだったか？
- 良かったこと
- 書きやすさ、コードの見通しの良さ
- ローディングコンテナとコンテンツが相互に入れ替え可能に
- 課題
- waterfall問題
- fetch-on-render問題
- 良かったこと
メインセッション： React/Next によるアプリケーション開発のこれから
@koba04 / 登壇資料 / ライブコーディングリポジトリ
セッション
- 最近の React の変化
- Suspense
- React Server Components (RSC)
- Data Fetching for Suspense
- Server Action (Alpha)
- New Hooks (Experimental)
- React Framework としての Next
- Next の App Router
- フレームワークと React
- これまでの考え方の違い
- 実はそんなにない？
- アプリケーション全体が React Tree に
- 振り子と螺旋
- JavaScriptを使わない表現
ライブコーディング
HackerNewsの一覧を取得し、記事をコメントつきでブックマークするアプリを作ります。
- create-next-app
- 下準備
- 一覧を表示する
- React Server Components
- metadata (AppRouter)
- ブックマーク追加
- Client Components
- Server Actions
- useFormStatus
- マイページで自分のブックマークの一覧を表示
- ブックマークの削除
- useTransition
- revalidatePath
- ローディングの表示
- loading.tsx (AppRouter)
useEffectやライブラリを使わずにCRUDアプリケーションを作成できました。
サイドセッション②: ナレッジワークでの App Router のこれまでとこれから
- このセッションについて
- ナレッジワークでの App Router に対する取り組みのこれまでとこれからを紹介
- これまで： 新規事業のプロダクト開発に App Router を採用した話
- エンジニアイネーブルメント新規事業 YOUR WORK の紹介
- 各ページの実装の紹介
- 得られた学び・所感
- 課題や改善点
- これから： 今後ナレッジワークで App Router をどう扱っていくか
- App Router 移行を推進していく
- なぜ App Router に移行するのか
- どうやって App Router に移行するのか
Triple-WIN アンケート
Encraftでは、参加者のアンケート回答に連動してナレッジワーク社が OSS プロジェクトに寄付をする試みを行っております。参加者の 1 回答当たり 8 ドルをナレッジワークが OSS に寄付することで、参加者と OSS プロジェクトをナレッジワーク社が繋ぐ仕組みです。
今回は60名の方がアンケートに回答してくださり、うち計上対象となるオフライン参加者39名ぶんの312ドルをopen collective経由で react-hook-form プロジェクトに寄付いたしました。
react-hook-formはナレッジワークでも大変活用させていただいているOSSライブラリなので、少しでもお返しになれば嬉しいです。
オフライン・オンライン問わず、ご回答いただいた皆様、ありがとうございました！
react-hook-formへの寄付
開催の様子
準備の様子
約800名が登録していたYouTube Live配信をやり遂げてくれた配信チームに感謝
メインセッションの様子。満員御礼！
ライブコーディング、圧巻でした
アンケート記入タイムのラジオがてらの登壇者感想戦
懇親会も大盛況
次回予告
次回の Encraft #5 は「Go1.21+ 最前線」ということで、Goの最新バージョンを追う会です！
@__syumai さんと @sivchari さんの2名をパネラーとしてお迎えし、モデレーターはナレッジワークの @tenntenn が務めます。
盛りだくさんなリリースとなるようですので、一気にキャッチアップできるこの機会、ぜひご参加ください！
Encraftは今後も定期的に学びと交流の場として開催を予定しています！
Connpassでグループメンバーになっていただけると開催通知メールが送られますので、開催を知りたい方は以下より是非グループメンバー登録をよろしくお願いします。
セッションをオンラインでご覧いただいた方も、感想などハッシュタグ #encraft でツイートしていただけたら嬉しいです！
それでは、また次回お会いしましょう！
Discussion