こんにちは。フロントエンドエンジニアの小枝です。

この春、新卒入社したサーバーサイドエンジニアに、「フロントエンドエンジニアリング研修」を実施しました。フロントエンドとサーバーサイドという、職種を超えることで得られた効果や、職種が違うからこそ工夫した点を、研修を受けた社員の声とともにお伝えします。フロントエンドエンジニアリングの研修企画の参考にしていただけたら、幸いです。

なぜ、違う職種を対象に研修したのか？

例年ビズリーチでは、サーバーサイドエンジニア入社研修の講師は、社内のサーバーサイドエンジニアがつとめます。昨年までは、フロントエンドエンジニアリング研修もサーバーサイドエンジニアが実施していました。サーバーサイドエンジニアは、フロントエンドエンジニアと比べ、プログラミング技術により長けており、双方がそれを理解した上で「研修講師はサーバーサイドエンジニア」としてきたのです。

しかし、昨今、例えばECMAScript5で書く場面がほとんどないなど、フロントエンドの技術や働き方は大きく変わっています。そこで、フロントエンドエンジニアには、より実際の仕事に近い研修が必要であると、今年の研修の運営メンバーである前年の受講生が判断し、フロントエンドを専門としている私が研修講師を務めることになりました。

研修内容

期間は2日間。以下の内容を実施しました。

1日目前半：座学
・サーバーサイドエンジニアとフロントエンドエンジニアの連携
・フロントエンドにおけるデザイン観点の必要性
・HTML / CSS 基礎
・JavaScript 基礎
・MVVMフレームワーク
1日目後半：MVVMフレームワークを用いた個人ハンズオン
・ボタンUI 実装
・アコーディオンUI 実装
・カルーセルUI 実装
・簡易表計算ツール実装
2日目：グループワーク
・公開APIを用いた既存サイトの模倣

ここからは簡単に、一部の実施内容について説明していきます。

サーバーサイドエンジニアとフロントエンドエンジニアの連携

昨今のサービス開発では、「サーバーサイドエンジニアがAPIを作り、フロントエンドエンジニアがそれを利用してWebアプリケーションを作る」手法が一般的で、MVVMフレームワークの台頭によって、その手法がより顕著になってきました。
両エンジニアはより連携をとったうえで、サーバーサイドはフロントエンドに提供するAPIのインターフェイスを工夫したり、逆にフロントエンドは、データベーススキーマを理解したうえで、実装上、無理のないAPIの提供を依頼する必要があります。

そのため研修では、「アプリケーション開発においては両エンジニアによる互いの業務理解が当たり前のように必要である」「なぜ連携が必要なのか」という理解を深めることを目的に講義しました。

フロントエンドにおけるデザイン観点の必要性

デザイン観点といっても、エンジニアがワイヤーフレームやデザインモックを作る、という話ではありません。フロントエンドの業務を遂行するにあたって、デザイナーの意図をワイヤーフレームやデザインモックから汲み取り、以下を実践する必要がある、という話をしました。

Viewに効率よくデータを反映させるため、APIのインターフェイス設計を行い、サーバーサイドエンジニアへ実装を依頼
デザイナーと協業し、静止画からマイクロインタラクションを思案
Viewがユーザーとのタッチポイントとなるため、文章の校正やデザイン上の矛盾を指摘

多くの企業では、サーバーサイドとフロントエンド、デザイナーの分業がはっきりしています。それ自体は素晴らしいことですが、ビズリーチではそれぞれの職能を理解したうえで最適解を出す、という完全分業ではない滑らかに連結するスタイルを採用しています。つまり、ビズリーチにおけるフロントエンドエンジニアは、サーバーサイドとデザイナーの中間に位置します。

MVVMフレームワーク

MVVMフレームワークは、今やさまざまな分野の企業で利用されています。サーバーサイドエンジニアにもこのトレンドを知ってもらい、「MVVMフレームワークについて少し学べば、自分でもアプリケーションが作れる！」という楽しみを得てほしいと思い、MVVMフレームワークについて講義しました。

今回は、Angular、React、Vue.jsの3つの違いを簡単に説明し、現場ではどのよう選定しているかを説明しました。事業のスケールや保有する技術といった観点を踏まえて用途の説明することで、より現場感を理解してもらいたいとの想いを込めました。

MVVMフレームワークを用いた個人ハンズオン

ビズリーチでは、今やほとんどのフロントエンド開発環境でMVVMフレームワークを採用しています。多くのAPIを利用し、データをViewに反映し続けるというアプリケーションの特性上、静的ページでの利用に役立つjQueryなどの説明は最小限にとどめ、MVVMフレームワークによる実装をメインに体験してもらいました。

実際の開発ではコンポーネント指向が基本となるため、今回は、簡単なUIコンポーネントの実装を行いました。用途に即したイベントバインドをし、ViewModelで処理を行い、実行結果をViewに反映させる、というシンプルなコンポーネントです。どのプロダクトでも話題になる「状態管理」については、プロダクトによって管理方法が大きく異なるため、この研修では触れませんでした。

グループワーク

次に、4〜5人が1組になり、ある公開APIを利用して、既存サイトの1ページを模倣してもらいました。「HTML担当」「CSS担当」など役割分担をするチームや、コンポーネント単位で分担をしているチームもありました。グループワークの様子を見ていて、私自身も、フロントエンドにおいてさまざまな分担方法があることを改めて実感できました。

結果として、すべてのチームが機能要件を満たしてサイトを完成させることができました。最終日をグループワークにしたのは「誰かと仕事をする感覚」を味わい、学んでほしいという想いがあったからです。フロントエンドエンジニアの分業のスタイルを知ってほしい、そしてなにより楽しんでほしい。そのような思いで研修を設計したので、グループワークを通して仲良くなったり、非機能要件の実装を楽しんでいるチームを見て、とても嬉しく感じました。

受講者へのインタビュー

研修の受講者として、学んだことや感想をサーバーサイドエンジニアの渡邉、静の2人に聞きました。

—— フロントエンド研修に臨む前は、どんな心持ちでしたか？

渡邉：学生時代のインターンでは、サーバーサイドの開発がほとんどだったので、フロントエンドで使われている技術がどのようなものなのか、知っておきたいという気持ちを強くもっていました。

静：僕も以前から、フロントエンドにとても興味がありました。

—— Angularを利用してみて、どうでしたか？

渡邉：僕を含めてほとんどの同期がAngularを扱った経験がありませんでした。しかし研修では、簡単なものから徐々に複雑なコンポーネントを作っていく設計だったので、学びを実感し楽しみながら、のめり込むことができましたね。

静：僕もAngularには触れたことがなく、難しそうなイメージもあったので、限られた研修の時間で理解して使えるようになるか不安でした。でも実際に触れてみると、複雑なUIやインタラクションを簡単に作ることができて、フレームワークを使わずにHTMLやJavaScriptを書くよりも、とても効率的だと思いました。

—— グループワークのハンズオンの感想を教えてください。

渡邉：コンポーネント単位でUIを実装していくと、プロダクト全体では複雑に感じていたものが細かい要素に分割でき、単純化されていく感覚がありました。パズルを組み立てていく作業のようで、とても楽しかったです。

既存サイトを模倣してみて、たくさんの要素が詰まっているページでも、コンポーネントに分けて実装していけば、意外と単純な仕組みでできていることが実感でき、今後の研修課題や業務に活かせる良い経験になったと感じます。

静：フロントエンドは、書いたコードの結果をすぐにブラウザで見ることができるので、コードを少し編集して確認しての繰り返しで、直感的に学習することができました。

座学もそこそこに、早い段階でハンズオンが開始され、最初は驚きました。けれど、探り探りでも手を動かしながら進めていくと、意外と簡単に作っていくことができました。やはりプログラミングは、実際に作ってみるのが1番身につくし、何より楽しいですね！

僕たちのチームは、ページ内の要素をコンポーネントに細かく分けて、実装を分担して作っていくスタイルで開発しました。一人ひとりが自分の担当作業に集中できて、しかも予想を上回るスピードでページとして出来上がっていくのを見て、コンポーネントを分割して、グループワークする意義を実感しました。

—— 研修を終えて、何を学びましたか？

渡邉：実践形式でコードを書く時間があり、フロントエンドの開発が思っていたよりも楽しいことに気づきました。技術面のトレンドの移り変わりが激しく、キャッチアップが大変そうなイメージがあったフロントエンドエンジニアリングに、抵抗感がなくなったことが研修の大きな成果です。

静：リッチなUIの多いWebサイトがどうやってできているのか、想像できるようになりました。自分でも、頑張れば、そのようなサイトを作れるのでは、という自信にもなりました。

実践を想像しやすい研修形式によって、他職種でもフロントエンドの技術に対する抵抗感を減らすことができました。知らない世界に楽しみながら触れてもらい、サーバーサイドエンジニアでも、デザイン、フロントエンドなどの分野に、興味を持ちつづけてもらうきっかけができたと感じています。

研修を終えて

「研修」自体が、さまざまなデザインの集合体だと気づきました。サーバーサイドエンジニアが、「フロントエンドについて、ほとんど知らない」という問題を解決するために、「誰が」「どのように」「何を」「いつ」「どこで」といったペルソナやストーリーをまとめ、研修の目的・課題を考え、設計すること。そして、前途洋々なサーバーサイドエンジニアの彼らに、どんなことを知って、学んで、どう楽しんでもらいたいか、といった具体的な手段を考えること。このようなプロセスを軸に、研修を設計していきました。そして、この記事を書くにあたって彼らに感想を聞いてみて、目的を達成できたと嬉しく思っています。

フロントエンドの分野は数年前と比較にならないほど複雑化しており、他職種との連携がより必要とされる職種になっています。そういった点でも、今回、職種を超えた研修には大きな意味があったと考えています。

今回のお話が、エンジニアのみなさんのより良い学びや相互理解のきっかけになれば幸いです。ありがとうございました。