フロントエンドグループ JavaScript / TypeScript全体研修を実施

ニジボックス フロントエンド開発室の高橋です。

3月4日、3月11日の2日間にかけて弊社、株式会社ニジボックスのフロントエンドグループ全体を対象にJavaScript, TypeScriptの全体リモート研修を実施しました。講師にはリクルートから３名のプロフェッショナルをお招きしました。参加者は総勢で50名近くになりました。

今回この研修の企画運営メンバーの一人として携わりましたので、研修当日の雰囲気や研修後の成果を含めてご紹介させていただきます。

ニジボックスフロントエンドグループの現状と課題

ニジボックスフロントエンドグループはSUUMO, ゼクシィをはじめとしたリクルート内のWebサービスのフロントエンド業務に幅広く関わっています。

業界も様々ですが、使用している技術や開発フローもプロダクトによって大きく異なります。ニジボックス のフロントエンドは総勢で60名程度と大規模ではありませんが、それでも個々の持つスキルにはばらつきがあります。

キャンペーンなどのLP制作で静的なWebページを正確かつ高速に制作するノウハウを持つメンバーは多いです。他には、歴史ある大規模サービスの巨大かつ複雑なHTML / CSS / JavaScriptを読み解きながら改善に携わるメンバーも居ます。また、あるメンバーはNext.jsなどのモダンフレームワークを利用してまだ公開されていない高度なWebシステムの新規開発に携わっています。

メンバーはそれぞれのスキルを生かしながら様々な現場で活躍しています。しかしながら、「JavaScriptとはどういうものか？」という基礎的な部分に関して振り返る機会はそう多くなくITの基礎知識のような部分に課題を持っている側面がありました。

また、フロントエンド業界では注目を集めているTypeScriptですが、リクルート内の大規模サービスではまだ導入できていないプロダクトも存在します。そのようなプロダクトに携わるメンバーがモダンフロント技術へのキャッチアップ機会を持ちにくいことも課題として捉えられていました。

研修のねらい

講師、従業員のスケジュールを丸２日間も押さえてまで達成したいと考えた研修の狙いについて説明します。

JavaScript研修

JavaScriptの研修について「これは必要なものか？」と問われれば必要なものではありません。ニジボックスには入社時の研修プログラムが用意されており、弊社内で過去に制作したWebサイトのコーディングを再現しつつHTML / CSS / JavaScriptの実践的な知識と経験を得られるような仕組みが既に用意されており、現場に配属されるメンバーはこのカリキュラムを通過しています。
日々の業務をこなすためのコーディングスキルは既に保有しており、配属直後の不慣れなメンバーも現場にいる先輩社員からサポートを受けることで段階的に実践経験を積むことができます。

それでも改めてJavaScriptの研修を行う目的は「JavaScriptの基礎教養の強化」です。ニジボックスが目指すフロントエンドの一つの姿として「負の遺産を資産に作り替える力を持つ」ことが挙げられます。長く運用されてきた大規模システムの保守業務に携わることが多く、そうしたシステムはどうしても多少の「妥協」を抱えています。そんなシステムを昨日までと同じように動かし続けるのではなく、あるべき姿に近づけていくためにはJavaScriptの基礎教養が必要不可欠なものとなります。
今運用されているシステムはなぜ動くのかを正確に理解でき、良くない部分は「本来はどうあるべきなのか」を模索して改善できる力をつける第一歩としてJavaScript研修を開催することにしました。

TypeScript研修

TypeScriptとはJavaScriptに変換されるプログラミング言語で、現代のフロントエンド業界で高い注目度を誇る言語です。いわゆるモダンフロント技術の一つであり、今から新しいWebシステムを開発するのであれば導入する価値は極めて高く、リクルート内でも新規に開発されるWebシステムでは導入されることが多いです。

しかしながら、歴史あるシステムではまだTypeScriptを導入できていないことも多く、それらのシステムの保守業務に携わるメンバーはどうしてもキャッチアップしづらい面があります。
歴史あるシステムにモダン技術を導入してシステムを時代に追いつかせていこうという動きはリクルート内でも増加傾向にあり、こうした活動にニジボックスも加わっていけるよう知識を付けることがTypeScript研修の主なねらいです。

研修当日の様子

研修はフルリモートで行われました。まずは参加者、講師全員が一つの会議通話に集合して講義を行います。講義の間、受講者は自由にチャットを記述することができるので講師に気軽に質問を投げかけたり、関連情報を交換し合ったりしていました。

全体講義の他にはハンズオンセッションがあり、グループに分かれて演習課題に取り組みます。グループには１人ずつメンターが付き、レビューを行ったり質問を受け付けたりします。メンターはリクルートから３名、それと私を含めた４名が弊社から参加しました。

研修といっても生真面目な雰囲気ではなく、ジョークを交えつつ和やかに進行しました。開始直後は緊張からかコメントは少なめだったものの、研修が進むにつれてメンバーから講師やメンターに対して質問が出ることも多くなりました。

上述のように弊社メンバーのノウハウにはばらつきが大きく、メンバーによっては演習課題に苦戦するシーンも見られました。しかし、メンター部屋は少人数に区切られているので苦戦するメンバーをおいてけぼりにするようなことはなく、１人１人の持つ課題に寄り添えるような講義スタイルが取れていたように思います。

研修の効果

弊社フロントエンドグループではメンバーのスキルや課題を可視化しようという取り組みがあり、画像のようなスキルグラフを作成しています。

これは、JavaScript, TypeScriptをはじめとしたフロントエンド分野に関する質問事項を各分野10問程度用意して研修参加者に回答してもらい、その結果を持ってグラフを作成しています。
青色が受講前、赤色が受講後のグラフであり、確実に赤色のグラフの方が大きくなっていることが分かります。特にTypeScriptの伸びが非常に大きく、研修の効果をはっきりと見ることができます。

２日間だけの講習でJavaScript、TypeScriptを自由自在に扱えるようになったわけではありません。ハイレベルな受講者に備えて演習課題はボリュームが大きめに作られていたこともあり、演習課題を全て終えられない受講者も少なくありませんでした。それでも、参加したメンバーは普段業務で触れることがない基礎的な知識に触れることでその重要さを知り、自らの課題を見つけることができたように思います。

今後の育成活動について

今回の研修は総じて成功だったと思います。今後もこのようなスキルアップの機会を増やし、メンバーのさらなる能力向上を図りたいと考えています。

ニジボックスのフロントエンド人口は年々多くなっており、新しい仲間を迎える機会は年に数回あります。今所属しているメンバーだけでなく、今後加わってくれる未来のメンバーも考慮して研修メニューを考案していくことが重要です。各メンバーの経験量、普段の業務で携わる分野、そして社歴などのバラ付きを吸収して１人１人の課題に寄り添ったスキルアップメニューを考案し続けることで、グループ全体のパワーアップにつなげていこうと思います。

これまでに弊社で実施してきた研修については、弊社マネージャーを兼務する古川陽介さんにQiitaでまとめていただいています。よろしければこちらもご覧ください。
https://qiita.com/yosuke_furukawa/items/546601b940fb53c741fb

講師紹介

メイン講師はリクルートテクノロジーズより３名のスペシャリストに担当していただきました。

辻 健人さん

１日目 JavaScript研修講師
github: https://github.com/MaxMEllon
関連 : https://recruit-tech.co.jp/news/190419_002428.html

倉見 洋輔さん

２日目 TypeScript研修 前半講師
github: https://github.com/Quramy
関連　: https://quramy.medium.com/

吉井 健文さん

２日目 TypeScript研修 後半講師
github: https://github.com/takefumi-yoshii
関連 : https://zenn.dev/takepepe
著書 :『実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義~』マイナビ出版 吉井 健文 著（2019）