こんにちは、フロントエンドエンジニアの寺澤です。
今年も新卒が入社しまして、フロントエンド新卒研修の内容についての検討を開始しました。 検討にあたり、昨年（2019年）の実施内容について振り返りましたので、公開したいと思います。
ぐるなびの新卒研修
ぐるなびでは新卒研修を毎年行っており、エンジニアについてはフロントエンドやバックエンド、インフラ等の業務内容を研修を通じて知ってもらい、本人と面談で相談しながら配属先を決定しています。
また、2019年においては、若手のデザイナーからアニメーション等が JavaScript で制御できることをもっと早く知りたかったというフィードバックを受け、デザイナーも合同で実施しました。最後の課題については、エンジニアとデザイナーで別の課題にすることで、より職能にフィットするようにしました。
実施する上で、以下の内容をゴールと設定しました。
- 何も知らないところからスタートし、受講後に基礎的なフロントエンド知識が身についている
- フロントエンドに関わらず、フロントエンドとバックエンド、インフラ共通でエンジニアとして大事な部分もピックアップする
- フロントエンドと連携するときに知識があることで連携の効率化を狙う
研修概要
スケジュールの前半は座学を実施し、後半は課題を実施する形で進めることにしました。
座学では、基本的なことを簡単なハンズオンを交えながら学び、最後に総括的な課題で復習をしながら手を動かすことで、楽しくやったことが身につくことを狙いました。
また、前述の通り、最終的に身に着けて欲しい内容でデザイナーとエンジニアで課題をわけることにしました。
研修内容一覧
内容については以下項目を実施しました。 また、資料の一部を抜粋して掲載します。
HTML
- 「HTMLとは」から始め、親要素・子要素の対応など、基礎について説明
- プラスアルファで、Google のクローラ、強調スニペットについて説明
CSS
- 「CSSとは」から始め、セレクタや詳細度、疑似要素など、基礎について説明
- プラスアルファで、ベンダープレフィックス、CSS設計、Sass、PostCss について説明
画像の最適化
- ファイル形式や画像の遅延読み込み等について説明
フロントエンド開発環境
- 「Node.jsとは」から始め、npm や babel、gulp、webpack、parcel、rollupについて説明
- pug や ejs と言った、テンプレートエンジンも説明
JavaScript
- 「JavaScriptとは」から始め、変数、データ型、関数、非同期処理など、基礎について説明
- プラスアルファで、Cookieや各種Storage、DOM操作、eslint、prettier について説明
課題
-
デザイナー課題
- レスポンシブのポートフォリオサイト作成
- 基本的な HTML の組み方を理解する
- SCSS を用いた基本的な CSS を記述する
-
エンジニア課題
- 過去の実案件のマークアップ
- 既存のサービスについて自分で HTML と CSS を記述後、本番環境の実装と比較することで、セマンティクスや現場での CSS の書き方を理解する
- JavaScript課題
- 基本的な UI パーツを HTML + CSS + JS を組み合わせて実装する
- モーダル
- カルーセル
- etc
- UI ライブラリを使用して UI パーツを実装することで、自分で実装した時とのメリット・デメリットを考える
研修参加者の声
フロントエンドに配属される新卒にはマストなフロントエンド研修ですが、 フロントエンド以外に配属されて業務をこなしている2019新卒何人かに話を聞いてみました。
研修を受けてみて
研修後、バックエンドエンジニアとして配属されたが、フロントエンドエンジニアに配属されなくても知っておくべき知識だと考え、研修を楽しく受講していたという声や、研修前後でエンジニアから企画職につきたいという将来の希望に変化はなく、バックエンドを志望していたものの、フロントエンドは技術的にとっつきやすく、面白かったのでやってみたいという気持ちが大きくなったという声がありました。
他にも、JavaScriptは読みづらいイメージがあって苦手意識があったものの、受けてみて面白そうという気持ちが強まったという意見もありました。
また、研修後に個人的にJavaScriptで様々なサンプルコードを触ってみたと語ってくれた参加者もいました。
現在の業務にどういきているか
バックエンドとしてアサインされた社内システムの開発で、研修で学んだことを生かして、フロントエンドの部分まで対応することができたと、実際のプロジェクトの中で生きてくるシーンもあったようです。
研修担当としても、研修を通してフロントエンドの業務を知ってもらえたことは、良かったと思います。
研修時の工夫
研修時にはフロントエンドのメンバー数人がチューターとしてついていました。
チューターが各自の習熟度を見ながら進めていましたが、時には時間が余ってしまうことも。そんなときには、その場で相談しながら追加で演習問題を用意するなど、臨機応変な時間の有効活用を心がけました。
単調な座学だけでは退屈になると思い、ホワイトボードを使用したり、面白みのある説明を使用したりもしました。
また、ハンズオンを行ったところ、実際に動きとコードを見ながらというのがわかりやすいと好評でした。
座学ではあまり質問がなく、ちゃんと伝えられているか不安になっていましたが、課題では未消化の部分について各々から質問が出たため、課題を取り入れて良かったと思いました。
振り返り
何か説明する際は、講師にとっては当たり前なことであっても、新卒にとっては初めて聞くことが多いと思い、なぜそうするのか理由をしっかり説明するようにしました。
フロントエンド配属になる人だけではなく、デザイナーとエンジニア合同で実施したことで、バックエンド志望のエンジニアからデザイン的な質問がデザイナーに発生するなど、デザイナー、フロントエンド、バックエンド、インフラの職能を越えて、良いシナジーが生まれたため、合同でやってよかったと思いました。
また、詰まった部分をお互いに教え合う姿を見て、研修を通してチームプレーの練習にもなったのではないかと思いました。
課題についてもレスポンシブなだけでなく、デザイナーのUX観点でアニメーションを実装したいと考え、自ら調べ、JavaScriptでアニメーションを実装していたり、気になる部分は積極的に質問してくれたり、全体的に理解、吸収が早く、優秀な新卒ばかりで、感心しました。
おわりに
ぐるなびにおけるフロントエンド研修について紹介させて頂きました。JS の仕様による特有の動きや DOM API 等、新しい知識が毎日出てきて大変だったと思います。お疲れ様でした。そのような中でもどんどん吸収していく姿を見て、とても頼もしく思いました。
今年については、昨年得たナレッジをベースに、より理解しやすい方法がないか検討するとともに、カリキュラムについてもTypeScript の追加や Deno v1.0 がリリースされたため、Deno を少し取り入れる等より良い研修にしていきたいと考えています。
