フロントエンドエンジニアのスキルと研修ロードマップ
もくじ
はじめに
現代のソフトウェア製品においてユーザ体験は特に重視され、それに応じてリッチな UI / UX を開発するフロントエンドエンジニアの需要も高まる一方です。
実際に IPA が従来の ITSS には無い、新しい領域の人材とそのスキルをまとめている ITSS+ のページの表では、新たな IT 投資の対象領域として「バックエンドから、 フロントエンド」と挙げています。
| 伝統的な IT 投資 | 新たな IT 投資 | |
|---|---|---|
| 目的 | 守り (コスト削減) （ビジネスを支援） |
攻め (売上・付加価値向上) (ビジネスを実行) |
| 傾向 | 安定性重視 | スピード重視 |
| 対象領域 | バックエンド SoR ( Systems of Record ) |
フロントエンド SoE ( Systems of Engagement ) |
| IT 投資の形態 | プロジェクト | プロダクト・サービス (価値提供) |
| オーナー | 情報システム部門 | LOB (事業部門: Line of Business ) |
| 開発手法 | ウォーターフォール | アジャイル、 DevOps 等 |
| プラットフォームへの要求 | 信頼性・堅牢性 | 拡張性・柔軟性 |
| 開発形態 | IT ベンダーへの外注が主体 | ユーザー企業での内製や パートナリングによる開発が主体 |
| 人材の役割 | 分業・専門分化 | フルスタック・マルチロール |
| 開発運用体制 | 技術者と IS 部門 | 技術者(と IS 部門) + 事業部門 |
| 対象の業務 | 予測可能 | 探索型 |
| データ | 構造 | 構造 + 非構造 + 外部 |
| 強み | 統率力・実行力 | 機動力・柔軟性 |
フロントエンドの開発規模が大規模化・求められるスキルが増加
リッチな UI /UX が求められるようになったことで、かつての牧歌的な Web ページのコーディング、 HTML で文書構造を整え、 CSS でスタイリングし、 JavaScript でアニメーションをつけるような、バックエンドのおまけのようなものではなく、 HTML5 とモバイルの登場も相まってフロントエンドの開発規模の大規模化が進んでいます。
これにより求められるスキルも JavaScript を中心に大幅に変化しました。
- 大量のライブラリを使用するため、パッケージマネージャとビルド方法の習得
- コンポーネントベースで拡張・分業しやすいフロントエンドフレームワークの習得
- MVVM / Flux などフロントエンドのアーキテクチャ設計
- TypeScript を使った型を重視した書き方
- モバイルとの連動（ React Native for Web, Flutter for Web のようなクロスプラットフォームモバイルネイティブフレームワークが Web にも対応）
など、バックエンドと見紛うような、従来に無かったスキルが求められるようになりました。
一方で、 HTML / CSS 仕様の理解とキャッチアップ、 CSS 設計など、従来からあるスキルも求められており、ゼロからフロントエンドエンジニアになるには学ぶことが増加し、スキルアップには比較的長期の時間が必要になります。
ロードマップ
では、どのようにスキルアップすると良いのでしょうか？ SE カレッジで 2021 年の春夏シーズンに開催しているコースをもとに、そのロードマップを公開しました。
ロードマップのコース種類の見方
play_circleアーカイブ動画（いつでも受講可能）
live_tvライブ配信
1. HTML / CSS
HTML / CSS の基本を理解し、基本的なページの作成、スタイリングのスキル、また最新のテクニックまでを理解します。
1. JavaScript 基礎
JavaScript の基本構文、イベントなどブラウザ操作及びライブラリの使用方法までを理解します。
3. モダン JavaScript
- パッケージマネージャとビルド方法を学び、フロントエンドフレームワークの代表格、 React もしくは Vue.js を理解します。
- 型を重視した書き方や設計方法など、フロントエンドの大規模化に対応した技術を理解します。
- モバイルネイティブフレームワークを使った Web フロントエンドの開発を理解します。
( 検討中 )
( 検討中 )
( 検討中 )
SEプラスにしかないコンテンツや、研修サービスの運営情報を発信しています。