Web開発ログ | エンジニアに役立つ情報 | 開発の中での気づきを発信

高卒Devlog

【4月15日@神田】Next.js勉強会・イベントレポート〜 未知の機能に挑め! 春のNext.js勉強会! 〜

thumbnail

こんにちは! RYOTAです!

当記事をご覧くださりありがとうございます!

4月15日に開催したNext.js勉強会のレポート記事です。

はじめに

私が運営する【Developers Guild】では毎月イベントを開催しております。
今回は初となるNext.js勉強会を開催いたしました!
〜 未知の機能に挑め! 春のNext.js勉強会! 〜 (2023/04/15 13:30〜) ## 概要 昨今のフロントエンド開発では目まぐるしい進化が繰り広げられています。 その中でも、React(特にNext.js)の進化は群を抜いています。 この進化についていけない方もたくさんいると思います。 本勉強会では、Next.jsの機能を各チームごとにテーマを決めて学習していただき、最後に5分ほど発表して参加者の知識の定着に繋げていきます。 * チーム分けは事前アンケートに沿って運営側で決めさせていただきます。(当日変更する可能性有り) * 学習内容は各チームで決めていただきます。内容はNext.jsならなんでも構いません(ex: appディレクトリについて... connpass
主催はReactおじさんです!
@react_nextjs Twitter

今回は各グループでテーマを決めてディスカッション。
ディスカッション・発表共にレベルが高くとても刺激の多い会になりました!
参加者の皆さまありがとうございます!

各グループの発表資料は下記にまとめているので是非ご覧ください!

発表資料

A「Next.js基礎」チーム

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases. A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team Notion

B「レンダリング & CSS」チーム

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases. A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team Notion

C ※解散

※ メンバーが集まらなかったので解散

D「App Router & レンダリング」チーム

グループD App router Google Docs

E「App Router & fetch」チーム

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases. A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team Notion

F「Next.js環境構築 & データフェッチ」チーム

こちらのグループはNext.jsの環境構築を行い、データフェッチして描画するまでを実際のエディタを共有しながら実施!
最終的にはタイムオーバーとなりましたが、途中経過・最終ゴール・学びを共有頂きました!
何が理解できて / 何が理解できなかったか のまとめが素晴らしかったです!
※資料なし

感想

レベルが高すぎるんじゃ!!

今回のイベントを一言で言うとコレです。
フロントエンドに強い化け物みたいな方がたくさん。。。
会話の質が高すぎて私自身、置いてけぼり感を食らっていました。笑

App Directoryの話で終始一貫すると思っていましたが、「App Directoryで何が良くなるか」「fetch戦略」「キャッシュ戦略」など、とても深い議論がされていました!

CSS in JSについてもめちゃめちゃ深い議論がされておりました!
セカヤサさんが綺麗にまとめてくださっているので是非覗いてみてください!


各グループ発表上手すぎ!!

正直、各グループの発表の質が高すぎて「一つ一つが講座になるのでは!??」と感じました。
短時間で理解を深めて共有し、それを他者にわかりやすく説明する。
本当にレベルが高くて驚きを隠せませんでした。
(多分、皆さん人前で話すの慣れてるんでしょうね)

手を動かすの良いね!!

5グループ中1グループは実際にエディタを共有して、Next.jsの環境構築からデータフェッチまでを行なっていました。
ドキュメントを読み進めるのも大事ですが、実際に手を動かして挙動を確認する。これに勝るものはないですね!
発表もめちゃめちゃ面白かったです!笑

次回のイベントではお題を出してみんなでコーディングが出来たらなって思ったりしています。

App Directory完全に理解した!!

Ryoさんが実際にApp Directoryベースで開発したプロダクトを公開/運用されていたので「俺ならこう設計するぜ!」を教えて頂きました!
なんか便利になるんだなぁぐらいの認識でしたが全く違いますね。
Server Componentsが前提の話になるので世界観自体が変わるのが理解できました!

Ryoさんのアカウントはこちらです。是非フォローを!
@ryocacode Twitter

参加者の声






さいごに

今回はNext.jsをテーマにしたイベントを開催いたしました。
正直、参加者の皆さんレベルが高すぎるわ技術のキャッチアップスピードが早すぎるわで「何でそんなこと知ってるの?」と終始感じていました。皆さんの技術愛、すげぇっす。。。

昨年フロントエンド勉強会を開きましたが、今回はよりテーマが限定的で皆さんの目線が合って良い会だったかなと思います。
ドキュメントだけだと伝わらないリアルな情報はやはり重要だなと感じました。
今後はディスカッションだけでなく、実際に手を動かすようなコンテンツを入れていこうかなと考えています。

以上。簡単なレポートでした。
最後までご覧くださりありがとうございます。