フロントエンドエンジニアはどうスキルアップしていくのか？Webサービス業界におけるエンジニアの中でも特に重要な役割を担っていく若手フロントエンドエンジニアの育成方法とスキルアップについて、その具体的な実践例までを徹底解説しています。
フロントエンドエンジニアとは、WebサービスにおいてWebコンテンツやアプリケーションにおけるフロントエンド開発に関わるポジションを担うエンジニアです。
フロントエンド開発とは、Webコンテンツや技術の発達により進化したデザインや機能などを実装するエンジニアリングによる開発を指します。
Webデザイナーとの差異は、デザイナーは主にWebコンテンツやアプリケーションのデザインそのものを制作するのに対し、フロントエンドエンジニアはそのデザインを機能的に再現することにあります。
フロントエンドエンジニアは具体的に以下のような能力を現場で発揮しています。
フロントエンドエンジニアは、特性上デザイン領域からサーバー領域の中間に位置しており、Webサービス開発においてハブ役をこなします。そのためWebに関する幅広い知見を持つことはもちろんのこと、ディレクターとの協働も多いため、コミュニケーション能力やビジネス能力も多分に求められます。
フロントエンドエンジニアが開発で使用する言語は主にJavaScriptが一般的です。
Web界隈では2000年代に入り「WEB2.0」という大きな動きが生まれ、それまでHTMLやCSSを中心に構成された静的なサイトから、JavaScriptをふんだんに活用したポップアップやスライド表示などの操作性の高いインタラクティブなデザインを基にした動的サイトへの移行が始まりました。
またJavaScriptには、フォーム入力されたユーザー情報をサーバーにあるデータベースに送信する機能も持ちます。現在ではほとんどのWebサイトのフロント・ミドルエンド領域においてJavaScriptは必須のものとなっています。
JavaScriptの歴史はライブラリという概念が登場した事により急激に変化を起こし始めます。ライブラリとはJavaScriptのテンプレートを集約したアーカイブです。代表的なライブラリであるjQueryの登場や、Reactなどのフレームワークの応用でコーディングにかかる時間はクオリティを担保したまま大幅に短縮され生産能率が上昇しました。
2018年現在の技術トレンドとしては三大有力フレームワークである「React」「Angular2」「Vue.js」が提唱されています。
このようにフロントエンド界隈はめまぐるしい速度で進化を続けており、新しいフレームワークやライブラリの出現によってトレンドが激しく移り変わります。そのため常に目を離すことなく注視していく必要があります。
またトレンドを追うことも大事ですが、実際には自社のサービスやプロダクトに沿って開発効率やコストダウンに寄与できる技術の選定と適用が本質的に重要になります。
フロントエンジニアはそのポジションの特性ゆえに求められる能力や取り扱うフレームワーク、ツールが他領域のエンジニアと比べても膨大です。そのため育成を実施する側が日々変化していくフレームワークやツール群を1から10まで網羅的に教えるには限界があります。
効率的で最大効果を得られる育成を行うためにはトレーニング側が”教える”配分とトレーニー側が”学び取る”配分のバランスを取る事やフェーズを立てて段階的な育成を行う必要があります。
具体的にどのような流れやスケジュール感で教育を進行していけばよいのでしょうか？
若手フロントエンジニアへの教育ケーススタディをモデルとしてイメージを掴んでみましょう。
教育対象であるトレーニーエンジニアの器量を確認しつつ、ステップにわけて適宜課題をあたえて成長を促進させるこのケーススタディはとても参考になります。
総合職などの教育と違い、技術職であるフロントエンドエンジニアはテクニカルな面で修得すべきことが山積しています。そして企画・構成力などのクリエイティブな作業とコーディングを同時に行わなければならないフロントエンドエンジニアの教育ではより実戦的でタフな教育手法が求められるのです。
フロントエンドエンジニアは膨大な量のスキルの修得や、常にアップデートされる情報に目を光らせる必要があります。幸いにもそれらの学習をサポートするエンジニア向けのコンテンツやコミュニティは数多くあり、それらを上手に利用して教育に活用している企業も多いようです。
本項では、フロントエンドエンジニアの教育促進に活用されている施策の事例をご紹介します。
GitHubは全世界で多くのエンジニアに愛用されているプロジェクトのバージョン管理システムの一種です。バージョン管理システムとは、プロジェクトにおけるコードやシステムなどの改訂履歴を保存し管理するシステムです。
GitHubは、従来のバージョン管理システムと違い、複数のユーザーそれぞれに個別にリポジトリ(保存庫)が割り当てられており、個々がプロジェクトのコピーを所有して個別にプロジェクトを改訂し、それを全員が参照することができます。従来のバージョン管理システムではリポジトリ自体が中央に一つしかなく仮変更などにおいても原本ファイルに書き込みすることになり、大変ややこしいものでした。その点、GitHubでは自身のリポジトリ上で原本のコピーに修正を加えてこれを他のエンジニアやディレクターに共有し、変更がOKになった場合には中央サーバーにマージする形で変更を適用する事ができるホスティングサービスです。
このGitHubをクラウドとして運用することで教育担当者のコードを参照したり、教育担当者が若手エンジニアの書いたコードに対しフィードバックを行ったり、チャット機能を併用してオンライン上でOJTを実施することもできます。これにより物理的な距離がある場合や働き方改革の一環としてエンジニアのリモートワークを採用していても問題なく教育を実施することができます。
GitHub について詳しく知りたい方はこちらへ
開発や実装などにおいて標準や手本となるコードが保存された参照用のデータベースがリファレンスと呼ばれるものです。いわばコーディングなどにおける参考書と言えるでしょう。
こんな機能を実装したいなど、企画やデザインのモックアップはできていても実際にそれを再現するコードが分からないといった場合にリファレンスを利用すれば効果的な自主学習になります。
リファレンスにはネット上に様々なものがありますが、ここでは主に新卒などの若手エンジニア向けに比較的初中級者向けのリファレンスサイトを紹介します。
フロントエンドエンジニアがJavaScriptを学ぶ上で、登竜門的なライブラリであるjQueryの日本語版リファレンスサイトです。同ライブラリのサンプルコード付きで解説している貴重なサイトです
jQuery日本語リファレンスについて詳しく見たい方はこちらへ
マイクロソフト社が提供する開発者用リファレンスページです。どちらかというと文章による説明が中心なので、じっくりと読んで理解しながらリファレンスを行いたいというエンジニア向けになります。
JavaScript言語リファレンス | MSDNについて詳しく見たい方はこちらへ
こちらはオフラインでの施策事例になります。
字の通り社内のエンジニアが集まり、ミーティング形式や座談会形式で技術的なノウハウの共有や不満や悩みなどの解消を目的に開催するものです。
スマートフォンアプリの開発を中心に事業を展開しているＩＴベンチャー企業・アカツキでは2週間に1回全エンジニアでミーティングを行っています。アカツキではただミーティングを行うだけではなく、「エンジニアミーティングは楽しむための場所である」というある社員の言葉に端を発して、カレーを作ってミーティング後に全員で試食をするという催しを実施しています。
ミーティングでは技術的なことをとことん議論し、終了後のカレー試食会でコミュニケーションの活性化やエンジニア同士の交流につながりモチベーションアップにもつながるなど副次的な効果もあるようです。
「エンジニアチームを幸せにするたった1つの方法」 – AKATSUKI HACKERS LAB
ここまでケーススタディで見る効率的な育成ステップや実際の現場で用いられている具体的な施策事例をご紹介しました。しかしご紹介した施策事例や育成に関するノウハウをただ流用するだけでは効果は発揮されません。
フロントエンジニアの育成は何よりも、基礎スキルの習得とエンジニアの自立的な学習習慣の醸成を達成する事を目的とした育成スタンスを取る事が重要になります。
育成担当はまず、若手エンジニアが自社の求める人材レベルに到達する教育設計を行わなければなりません。そのためには、若手エンジニアが担当しているプロジェクトのゴールと若手エンジニアが立っている現状の間にあるギャップを分析し、ギャップを埋めるために必要な要素を修得できるようなフローで教育設計を行います。
教育設計に沿って、若手エンジニアに対してフロントエンドエンジニアとして求められる基礎スキルについてティーチングを行うことになります。しかし一人前のフロントエンドエンジニアとして求められる知識・スキルは受け身の教育だけで身に付けることはできません。受け身では必ず限界が訪れます。
つまるところ担当者の手を離れた後も、エンジニア自身が自走的に学んで成長できるように若手エンジニアに対して学びの習慣と手段を修得させることが大切です。
教育設計に沿って育成を実施するためにはもちろん、学びの習慣と手段を修得させるためにも重要なのは学習サポート体制の整備です。
一つは若手エンジニアが壁にぶつかった時やモチベーションの維持に苦しんでる時、成果や成長について積極的にポジティブな評価をし、ミスが中々改善されない場合には適切なフィードバックを行う基本的なサポートです。
もう一つは本格的な学習サポートとして、現場ではティーチングからコーチングに切り替え、問題の原因や学びを引き出すことを心がけましょう。育成対象者からの質問への対応についてもただ答えを教えるだけではなく、新たな気づきを与えて成長へとつなげましょう。
例えば「こういう問題が起きた場合にはどう対処したらいいですか？」という質問に対しては、育成対象であるエンジニア自身がまず自分なりの答えを導き出して答え合わせを行う形式で対応を行います。なぜなら自分で考え判断し答えを出すという「決断経験」が今後の成長によりレバレッジをかけるものになるからです。
このように評価やフィードバック、コーチングなどを通して相手に良質な経験を積ませることができるように総合的なサポートを行うことが成長の伸び率を左右していきます。
フロントエンドエンジニアはその立ち位置から、非常に多くの知識やスキル・役割が求められます。それゆえフロントエンドエンジニアの育成はとても難しいものになります。
全てを１からすべてを教えるのではなく、最終的にはエンジニア自身が自立的に学習し成長できるような手段を教え、習慣を身に付けるサポートを行うことがフロントエンドエンジニア育成のカギとなります。
そのためには、本人の学びを重視した育成スタンスを基にエンジニアの学習サポートを整備することが必要不可欠です。またGitHubを用いたオンラインOJTやオンラインフォーラムを用いて積極的に疑問を解決していくなど育成に応用できそうなサービスやツールを適宜、効果的に用いるのも効果的でしょう。
そのマインドセットへのアプローチ、間違っていませんか？ アチーブメントHRソリューションズでは、人の行動の根源である「マインドセット」に着目し、個人の「内発的な動機付け」に基づくアプローチによって、人財育成や組織開発を成功に導きます。
正しく研修に取り入れた企業様では「社員の離職率が30%減った」「売上が昨年対比160%を実現した」といった成果を生み出し、進化を続けています。 専門コンサルタントがプロの視点であなたの問題を解決する道筋を示しますので、真に価値のある教育施策を共に考えていきませんか？
