<p>こんにちは、よしこです。<br>
今回は、参加者が800人を超え大盛況となった <a href="https://knowledgework.connpass.com/event/285601/" target="_blank" rel="nofollow noopener noreferrer">Encraft #4 「React/Next.js 最前線」</a> の開催レポートをお届けします！</p>
<p><a href="https://knowledgework.connpass.com/event/285601/" target="_blank" rel="nofollow noopener noreferrer"><img src="https://storage.googleapis.com/zenn-user-upload/653d0626fe83-20230703.png" alt loading="lazy" class="md-img"></a></p>
<h2 id="encraft%E3%81%A8%E3%81%AF%EF%BC%9F">
<a class="header-anchor-link" href="#encraft%E3%81%A8%E3%81%AF%EF%BC%9F" aria-hidden="true"></a> Encraftとは？</h2>
<p>Encraft（エンクラフト）は <a href="https://kwork.studio" target="_blank" rel="nofollow noopener noreferrer">株式会社ナレッジワーク</a> が提供する、 "Enablement" と "Craftsmanship" をテーマにした勉強会です。技術にこだわりを持つ人々が集まって互いに知見を交換し、できることを増やしていく場を作りたいと思っています。</p>
<p>過去のイベントの開催レポートは以下からご覧ください。</p>
<ul>
<li><a href="https://zenn.dev/knowledgework/articles/739a8413aff7a4" target="_blank">Encraft #1 「フロントエンド × 設計」 開催レポート</a></li>
<li><a href="https://zenn.dev/knowledgework/articles/db1013f79e7929" target="_blank">Encraft #2 「サーバーとクラインアントを結ぶ技術」 開催レポート</a></li>
<li><a href="https://zenn.dev/knowledgework/articles/5bb88332b1379e" target="_blank">Encraft #3 「エンジニアイネーブルメント - 共有・育成・評価・効率化 -」 開催レポート</a></li>
</ul>
<p>それではさっそく今回のセッション資料と動画アーカイブをご紹介していきます。<br>
セッションの感想はぜひハッシュタグ <a href="https://twitter.com/search?q=%23encraft&amp;src=typed_query&amp;f=live" target="_blank" rel="nofollow noopener noreferrer">#encraft</a> でツイートしていただけたら嬉しいです！</p>
<h2 id="%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E5%86%85%E5%AE%B9">
<a class="header-anchor-link" href="#%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E5%86%85%E5%AE%B9" aria-hidden="true"></a> セッション内容</h2>
<p>メインセッションとして、ここ最近で大きなアップデートのあったReactとNext.jsの今とこれからについて <a href="https://twitter.com/koba04" target="_blank" rel="nofollow noopener noreferrer">@koba04</a> さんをお招きしライブコーディングも交えて解説いただきました。<br>
またサイドセッションとして、時系列的に前後にあたる内容をナレッジワーク社内から <a href="https://twitter.com/yoshiko_pg" target="_blank" rel="nofollow noopener noreferrer">@yoshiko_pg</a> と <a href="https://twitter.com/otofu_square" target="_blank" rel="nofollow noopener noreferrer">@otofu_square</a> が発表しました。</p>
<h3 id="%E3%82%B5%E3%82%A4%E3%83%89%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E2%91%A0%3A-suspense-fetch%E3%82%923%E5%B9%B4%E5%AE%9F%E7%94%A8%E3%81%97%E3%81%A6%E3%81%BF%E3%81%A6">
<a class="header-anchor-link" href="#%E3%82%B5%E3%82%A4%E3%83%89%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E2%91%A0%3A-suspense-fetch%E3%82%923%E5%B9%B4%E5%AE%9F%E7%94%A8%E3%81%97%E3%81%A6%E3%81%BF%E3%81%A6" aria-hidden="true"></a> サイドセッション①: Suspense Fetchを3年実用してみて</h3>
<p><span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/vv2Qx1QLEZs" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=vv2Qx1QLEZs" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=vv2Qx1QLEZs</a></p>
<p><a href="https://twitter.com/yoshiko_pg" target="_blank" rel="nofollow noopener noreferrer">@yoshiko_pg</a> / <a href="https://docs.google.com/presentation/d/19r7fNb6xTk0NDNcdZaQZy3Ng__8doLAeN3ET6nwsbvk/edit" target="_blank" rel="nofollow noopener noreferrer">登壇資料</a></p>
<ul>
<li>このセッションについて
<ul>
<li>Suspenseの利用経験を振り返り、before/afterの具体的な変化や使ってみた感想を共有</li>
</ul>
</li>
<li>前段： CatchつきFetchライブラリの台頭による近年のfetchスタイルの変化
<ul>
<li>Page Containerではなく各Componentからfetchするようになった</li>
<li>CacheつきFetching libraryを使うことでuseEffectが隠蔽された</li>
</ul>
</li>
<li>Suspenseによる変化
<ul>
<li>isLoadingとerrorの状態がComponentの外に追い出された</li>
<li>dataの型が <code>T | undefined</code> ではなく <code>T</code> になった</li>
</ul>
</li>
<li>使ってみてどうだったか？
<ul>
<li>良かったこと
<ul>
<li>書きやすさ、コードの見通しの良さ</li>
<li>ローディングコンテナとコンテンツが相互に入れ替え可能に</li>
</ul>
</li>
<li>課題
<ul>
<li>waterfall問題</li>
<li>fetch-on-render問題</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%EF%BC%9A-react%2Fnext-%E3%81%AB%E3%82%88%E3%82%8B%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA%E3%81%AE%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89">
<a class="header-anchor-link" href="#%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%EF%BC%9A-react%2Fnext-%E3%81%AB%E3%82%88%E3%82%8B%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA%E3%81%AE%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89" aria-hidden="true"></a> メインセッション： React/Next によるアプリケーション開発のこれから</h3>
<p><span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/saVbwACgELA" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=saVbwACgELA" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=saVbwACgELA</a></p>
<p><a href="https://twitter.com/koba04" target="_blank" rel="nofollow noopener noreferrer">@koba04</a> / <a href="https://speakerdeck.com/koba04/next-niyoruapurikesiyonkai-fa-nokorekara" target="_blank" rel="nofollow noopener noreferrer">登壇資料</a> / <a href="https://github.com/koba04/next-app-router-hacker-news-demo" target="_blank" rel="nofollow noopener noreferrer">ライブコーディングリポジトリ</a></p>
<h4 id="%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3">
<a class="header-anchor-link" href="#%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3" aria-hidden="true"></a> セッション</h4>
<ul>
<li>最近の React の変化
<ul>
<li>Suspense</li>
<li>React Server Components (RSC)</li>
<li>Data Fetching for Suspense</li>
<li>Server Action (Alpha)</li>
<li>New Hooks (Experimental)</li>
</ul>
</li>
<li>React Framework としての Next
<ul>
<li>Next の App Router</li>
<li>フレームワークと React</li>
</ul>
</li>
<li>これまでの考え方の違い
<ul>
<li>実はそんなにない？</li>
<li>アプリケーション全体が React Tree に</li>
<li>振り子と螺旋</li>
<li>JavaScriptを使わない表現</li>
</ul>
</li>
</ul>
<h4 id="%E3%83%A9%E3%82%A4%E3%83%96%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0">
<a class="header-anchor-link" href="#%E3%83%A9%E3%82%A4%E3%83%96%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0" aria-hidden="true"></a> ライブコーディング</h4>
<p>HackerNewsの一覧を取得し、記事をコメントつきでブックマークするアプリを作ります。</p>
<ul>
<li>create-next-app</li>
<li>下準備</li>
<li>一覧を表示する
<ul>
<li>React Server Components</li>
<li>metadata (AppRouter)</li>
</ul>
</li>
<li>ブックマーク追加
<ul>
<li>Client Components</li>
<li>Server Actions</li>
<li>useFormStatus</li>
</ul>
</li>
<li>マイページで自分のブックマークの一覧を表示</li>
<li>ブックマークの削除
<ul>
<li>useTransition</li>
<li>revalidatePath</li>
</ul>
</li>
<li>ローディングの表示
<ul>
<li>loading.tsx (AppRouter)</li>
</ul>
</li>
</ul>
<p>useEffectやライブラリを使わずにCRUDアプリケーションを作成できました。</p>
<h3 id="%E3%82%B5%E3%82%A4%E3%83%89%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E2%91%A1%3A-%E3%83%8A%E3%83%AC%E3%83%83%E3%82%B8%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%A7%E3%81%AE-app-router-%E3%81%AE%E3%81%93%E3%82%8C%E3%81%BE%E3%81%A7%E3%81%A8%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89">
<a class="header-anchor-link" href="#%E3%82%B5%E3%82%A4%E3%83%89%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E2%91%A1%3A-%E3%83%8A%E3%83%AC%E3%83%83%E3%82%B8%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%A7%E3%81%AE-app-router-%E3%81%AE%E3%81%93%E3%82%8C%E3%81%BE%E3%81%A7%E3%81%A8%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89" aria-hidden="true"></a> サイドセッション②: ナレッジワークでの App Router のこれまでとこれから</h3>
<p><span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/hsnfry1f7mU" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=hsnfry1f7mU" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=hsnfry1f7mU</a></p>
<p><a href="https://twitter.com/otofu_square" target="_blank" rel="nofollow noopener noreferrer">@otofu_square</a> / <a href="https://docs.google.com/presentation/d/13290KW30PqzEYBihxNSkx4s4Ygs2B6p3Xch0dpJkh-0/edit" target="_blank" rel="nofollow noopener noreferrer">登壇資料</a></p>
<ul>
<li>このセッションについて
<ul>
<li>ナレッジワークでの App Router に対する取り組みのこれまでとこれからを紹介</li>
</ul>
</li>
<li>これまで： 新規事業のプロダクト開発に App Router を採用した話
<ul>
<li>エンジニアイネーブルメント新規事業 YOUR WORK の紹介</li>
<li>各ページの実装の紹介</li>
<li>得られた学び・所感</li>
<li>課題や改善点</li>
</ul>
</li>
<li>これから： 今後ナレッジワークで App Router をどう扱っていくか
<ul>
<li>App Router 移行を推進していく</li>
<li>なぜ App Router に移行するのか</li>
<li>どうやって App Router に移行するのか</li>
</ul>
</li>
</ul>
<h2 id="triple-win-%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88">
<a class="header-anchor-link" href="#triple-win-%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88" aria-hidden="true"></a> Triple-WIN アンケート</h2>
<p>Encraftでは、参加者のアンケート回答に連動してナレッジワーク社が OSS プロジェクトに寄付をする試みを行っております。参加者の 1 回答当たり 8 ドルをナレッジワークが OSS に寄付することで、参加者と OSS プロジェクトをナレッジワーク社が繋ぐ仕組みです。<br>
今回は60名の方がアンケートに回答してくださり、うち計上対象となるオフライン参加者39名ぶんの312ドルをopen collective経由で <a href="https://opencollective.com/react-hook-form" target="_blank" rel="nofollow noopener noreferrer">react-hook-form</a> プロジェクトに寄付いたしました。<br>
react-hook-formはナレッジワークでも大変活用させていただいているOSSライブラリなので、少しでもお返しになれば嬉しいです。<br>
オフライン・オンライン問わず、ご回答いただいた皆様、ありがとうございました！</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/0d011425d02d-20230703.png" alt loading="lazy" class="md-img"><br>
<em>react-hook-formへの寄付</em></p>
<h2 id="%E9%96%8B%E5%82%AC%E3%81%AE%E6%A7%98%E5%AD%90">
<a class="header-anchor-link" href="#%E9%96%8B%E5%82%AC%E3%81%AE%E6%A7%98%E5%AD%90" aria-hidden="true"></a> 開催の様子</h2>
<p><img src="https://storage.googleapis.com/zenn-user-upload/570f62c78de5-20230703.png" alt loading="lazy" class="md-img"><br>
<em>準備の様子</em></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/af2b38b6ff63-20230703.png" alt loading="lazy" class="md-img"><br>
<em>約800名が登録していたYouTube Live配信をやり遂げてくれた配信チームに感謝</em></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/b41f9fd4cae7-20230703.png" alt loading="lazy" class="md-img"><br>
<em>メインセッションの様子。満員御礼！</em></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/fc1779fe5fe2-20230703.png" alt loading="lazy" class="md-img"><br>
<em>ライブコーディング、圧巻でした</em></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/c6066de66255-20230703.png" alt loading="lazy" class="md-img"><br>
<em>アンケート記入タイムのラジオがてらの登壇者感想戦</em></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/1bd3492f28d4-20230703.png" alt loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/ad4e523ad3ea-20230703.png" alt loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/3e245a32d70b-20230703.png" alt loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/21df52a50aa4-20230703.png" alt loading="lazy" class="md-img"><br>
<em>懇親会も大盛況</em></p>
<h2 id="%E6%AC%A1%E5%9B%9E%E4%BA%88%E5%91%8A">
<a class="header-anchor-link" href="#%E6%AC%A1%E5%9B%9E%E4%BA%88%E5%91%8A" aria-hidden="true"></a> 次回予告</h2>
<p>次回の Encraft #5 は「Go1.21+ 最前線」ということで、Goの最新バージョンを追う会です！</p>
<p><a href="https://twitter.com/__syumai" target="_blank" rel="nofollow noopener noreferrer">@__syumai</a> さんと <a href="https://twitter.com/sivchari" target="_blank" rel="nofollow noopener noreferrer">@sivchari</a> さんの2名をパネラーとしてお迎えし、モデレーターはナレッジワークの <a href="https://twitter.com/tenntenn" target="_blank" rel="nofollow noopener noreferrer">@tenntenn</a> が務めます。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__e8d0bcc6147b4" src="https://embed.zenn.studio/tweet#zenn-embedded__e8d0bcc6147b4" data-content="https%3A%2F%2Ftwitter.com%2Ftenntenn%2Fstatus%2F1673085944801677313" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://twitter.com/tenntenn/status/1673085944801677313" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://twitter.com/tenntenn/status/1673085944801677313</a></p>
<p>盛りだくさんなリリースとなるようですので、一気にキャッチアップできるこの機会、ぜひご参加ください！</p>
<hr>
<p>Encraftは今後も定期的に学びと交流の場として開催を予定しています！</p>
<p>Connpassでグループメンバーになっていただけると開催通知メールが送られますので、開催を知りたい方は以下より是非グループメンバー登録をよろしくお願いします。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e9d3a29d3b30a" src="https://embed.zenn.studio/card#zenn-embedded__e9d3a29d3b30a" data-content="https%3A%2F%2Fknowledgework.connpass.com%3Fcc" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://knowledgework.connpass.com?cc" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://knowledgework.connpass.com?cc</a></p>
<p>セッションをオンラインでご覧いただいた方も、感想などハッシュタグ <a href="https://twitter.com/search?q=%23encraft&amp;src=typed_query&amp;f=live" target="_blank" rel="nofollow noopener noreferrer">#encraft</a> でツイートしていただけたら嬉しいです！</p>
<p>それでは、また次回お会いしましょう！</p>


Encraft #4「React/Next.js 最前線」開催レポート

サイドセッション①: Suspense Fetchを3年実用してみて

メインセッション： React/Next によるアプリケーション開発のこれから

サイドセッション②: ナレッジワークでの App Router のこれまでとこれから

Discussion