Next.js研修を実施 ~ 深い理解の上でモダンフロントエンドに携わる ~

弊社ニジボックスでは、9/8（水）にNext.jsの1日研修を実施しました。WEB+DB PRESS Vol.123でNext.jsの特集記事を執筆した古川陽介さんと吉井健文さんの2名を講師に迎え、参加者は30名以上にもなりました。

この研修の企画運営と事前のフォローアップ研修で講師を担当させていただきましたので、研修のねらいや当日の雰囲気をご紹介します。

なぜNext.js研修なのか

Reactに関しては世間的にも広く使われ始めており、これまでもニジボックス内の研修テーマとして度々扱って来ました。Next.jsはそのReactを包含しているフレームワークです。
今回、Reactの枠を超えたNext.js研修を行ったのにはいくつかの理由があります。

まず１つ目は、フレームワークとしての使い勝手が非常に良いからという単純な理由です。React、TypeScriptといったモダンな開発環境をコマンド一つで作成することができ、コーディングしなくても様々なパフォーマンス改善の仕組みがビルド時に自動的に盛り込まれます。
開発しやすいだけでなく、アウトプットの形式を指定できることによってHTMLをWebサーバーで公開するだけの静的Webサイトや、サーバーサイドでNode.jsを動かしてSSRを行うようなモダンなWebアプリケーションの作成もできるため利用可能なシーンが多いことも重要な特徴です。

２つ目は、Next.jsの強みを引き出すためには、このフレームワークについて深い理解が求められるからです。先に述べたようにNext.jsは使いやすく、公式で配布されているドキュメントも非常に分かりやすいため初心者でも手軽に使うことができます。しかし裏返せば、特性を深く理解しなくても使えてしまうということでもあります。Next.jsはCSR、SSR、 ISR、 SSGといった多様なHTML生成戦略を取ることができ、それぞれの長所短所を理解して使い分けを的確に行うことで初めて最大のパフォーマンスを発揮することができます。

リクルートグループの案件を請け負うことが多い弊社ですが、Next.jsを利用したプロジェクトは増加傾向にあります。ニジボックスでは、Next.jsについて深い理解を持ってその強みを生かしながらこれらのプロジェクトに携わることを目標として、この研修を行うことにしました。

研修の概要

研修カリキュラムはWEB+DB PRESS Vol.123の内容を噛み砕いた内容となっており、記事を執筆した古川さん、吉井さんご本人に作成いただきました。

参加者は30名程度。Discordを利用したリモート形式での研修です。
Next.jsの特性や強みについて簡潔に解説する古川さんによる座学パートと、基本的な機能を学びつつmicroCMSを使ったブログシステムを作成していく吉井さんによるハンズオンの２つのパートに分かれています。

研修に向けた準備

Next.jsに関する研修は、弊社では今回が初めてでした。Next.jsを全く知らないメンバーも多く、その前提知識であるReactに慣れていないメンバーも多く居ました。「Next.jsもReactも全く自信がなく参加していいのかどうか分からない」、「Next.jsを案件で使う予定が無いので、参加しても意味があるのか分からない」といった声も多からずありました。

後ろ向きな気持ちで参加してもらっても研修の効果は上がりません。そこで、Next.jsがどれだけ扱い易いフレームワークであるか、業務以外でも自主的な制作においてどれほど強力なフレームワークであるかを理解して研修に参加するモチベーションを持って欲しいと考え、私自身のNext.jsの業務経験を生かして事前補講を開催することにしました。

事前補講は1時間程度の内容で、あくまでNext.jsの魅力の部分にフォーカスした補助的な内容に絞っています。古川さんや吉井さんに質問を投げかけるのはハードルが高いと感じていたメンバーも、積極的に質問を投げかけてくれました。補講が終わる頃にはNext.jsの魅力について多くのメンバーが理解してくれ、本研修がとても楽しみになったという声もいただきました。

研修当日の様子

Discordの画面共有で講義内容を聞きつつ、チャットルームでは質問をしたり議論が交わされたりと賑やかに進行していきます。

午前10時半から古川さんの講義パートから始まります。途中で吉井さんが補足説明をしてくださる場面もあり、非常に内容の濃い講義となりました。

続いてはメインとなる吉井さんのハンズオンパートです。
microCMSのアカウントを作成してからNext.jsのプロジェクトを作成し、Vercelにデプロイして動作を確認するというゼロからの開発を体験できる内容となっており、非常に本格的です。

本格的であるが故にスピードも早く、着いて来られなくなる受講者も現れ始めます。しかし、そういった受講者を置いてけぼりにするようなことはなく、Next.jsの業務経験がある受講者が自主的に初学者のサポートに回る流れが見られました。
Discordの複数ボイスチャンネルを設けられる特徴を生かして、詰まってしまったメンバーを先輩メンバーが随時マンツーマンでサポートします。

苦戦していた若手のメンバーもmicroCMSで投稿した内容がNext.jsで作ったフロントアプリケーションに表示されたときには強い達成感を得ているようでした。

ただブログを作るだけでなく、Next.jsのSSR、CSR、ISRなどのHTML生成戦略について動作検証を混じえた解説があり、深く実りのある内容となっていました。

研修を終えて

今回の研修は、これまでニジボックスで実施してきたものの中で最もハードな内容だったと言えるかもしれません。途中でエラーを解決できなくなり、着いて来られなかったメンバーもゼロではありませんでした。

しかし、このハードな経験こそが狙いの一つでもあります。扱いやすいNext.jsでも、正しく理解して強みを素早く最大限に引き出すためには深い理解と練習が必要になるということをメンバーに体感してもらえたと思っています。

弊社の新入社員研修は充実しており、リクルートグループ内の過去案件を模したWeb制作を体験してもらう実践的な内容をほぼ全ての社員が経験しています。新人研修で身につけた知識によって皆が自信を持って業務に当たってくれるのは良いことですが、一方でIT分野の広さと深さにも目を向けて更なる高度な貢献ができるように自主的な学習を続けて欲しいとも思っています。

中途採用がほとんどの弊社では、社員ごとに積んできた経験の量や目指している方向性が大きく異なります。社員それぞれの個性をより強く活かして社会に貢献していくためにも、初心者をフォローするための研修だけでなく専門性をより深める今回のような研修は引き続き行っていきたいと考えています。