この記事では、現役のフロントエンドエンジニアである筆者が、3つのキャリア毎で必要なスキルセットをガチ考察しています。
筆者の私はこれまで、未経験からフロントエンドエンジニアになったり、Web制作ディレクターやフリーランスの経験も経て、今は現役のエンジニアとして活動しています。
他人よりも多様なキャリアを歩んでいるからこそ、多角的な視点で必要なスキルセットをまとめることができます。
未経験者には必要不可欠なスキルセットがありますし、転職・キャリアアップを目指す人だと、JavaScriptフレームワークの精通、JavaScriptの標準組み込みオブジェクトの理解、環境構築...等いわゆる "実務レベル" に引き上げる必要があります。
そして、この辺りの情報は実際にそのレベルで働く人の声が、具体性があって理解しやすいだろうということで、現役の筆者が必要なスキルセットをガチ考察しました。
未経験レベル
実務レベル
上記をそれぞれの見出しで解説していきます！
WRITER
Tsukasa｜現役エンジニア
Frontend Engineer / Web Creator / SEO Writer / Web Media Manager
現役のフロントエンドエンジニアで、「在庫管理アプリのフロントエンドリード」「プロ野球球団公式サイトの運用保守リーダー」「ECサイト実装」「Webサイト・LP実装」などの実績を積みながら、現在もWebクリエイティブ会社で活躍中。未経験からフロントエンドエンジニアに転職成功した実体験も活かして、当メディアを運営させていただいております。
AID-TRUTHは、バックエンドエンジニアやディレクター、人事で活躍する人など、現役で活躍する人たちが実体験を活かしてコンテンツ発信をしています。
INDEX
【未経験レベル】学習必須！フロントエンドエンジニアに必要なスキルセット
まずは未経験者が必ず習得しておくべきスキルセットになります。HTML/CSS・JavaScriptは当然ですが、業務ではバージョン管理システム・Linuxコマンドを扱うのも当たり前なので、この辺りも必要不可欠なラインに入るでしょう。それでは、合計5つのスキルセットを見ていきましょう。
1/5｜HTML/CSS
Webページ制作は、ここはヘッダー・フッター、このテキストは見出し・段落といった構造をHTMLで作って、何色にするか、どんな大きさにするかといった見た目をCSSで形作っていく流れとなります。
これがマークアップと言われる作業で、Webサイト制作もWebアプリ開発でも必須の仕事です。クリエイティブ系・アプリ開発系どちらであっても、まずはHTML/CSSを必要最低限インプットする必要があります。
2/5｜JavaScript
構造・見た目の他に、Webページに動きや機能を追加するためにJavaScriptが必要となります。
分かりやすい例はWebページのポップアップ。「このボタンをクリックするとブラウザからポップアップが出るようにする」という機能はJavaScriptを用いる必要があります。
さらに高度な領域になると、クリエイティブ系であればスクロールと連動したアニメーションや、アプリ開発系だと会計ソフトの入出力処理など、JavaScriptはフロントエンドエンジニアにとって必須のスキルとなります。
3/5｜バージョン管理システム（Git / GitHub）
「Git」に代表されるツールのことで、今までに書き換えたソースの履歴を全て残したり、チームでソースの状況をシェアしたり、制作現場では必ずと言って良いほど活用されています。
未経験から就職/転職する場合は、まずは簡単な作業から入ることにはなりますが、そもそも導入していないプロジェクトが珍しいくらいなので、入社前に身につけておくべきでしょう。
4/5｜Linuxコマンド
バージョン管理システム（Git/GitHub）を用いる際やテストアップ環境への接続をする際に、ターミナル（Mac）やコマンドプロンプト（Windows）というソフト内で「Linuxコマンド」という専用の記述を打ち込むイメージです。
学習方法としては、バージョン管理システムを学習する際に自然とおまけで学ぶことになるので、あまり時間をかけすぎなくてOK。
5/5｜JavaScriptフレームワーク
フレームワークとは、高度なJavaScriptのソースを簡易的に記述できる便利ツールのようなものです。大規模なWebサイトやアプリ開発になると、ハイレベルな仕組みが多くなり、JavaScriptでそのまま書くとなると時間も難易度も格段に上がるので、必須の技術となります。
ReactやVue等が代表的なフレームワークです。気になる人は下記の解説記事を参考にしてみてください。
実際の業務では、アプリ開発系だとSPA（ページ遷移を必要としない機能）や複雑な処理が必要となるケースが多く、必需品レベルで活用します。
Webサイト制作等では、正直活用しないケースも多いですが、規模が大きくなれば保守性の担保のため重要度が増しますし、年々制作の技術レベルは上がりつつあり、筆者の会社でも導入しているプロジェクトが増えてきています。
【未経験レベル】業務によって必要性が分かれるスキルセット
ここからは、未経験者がフロントエンドエンジニアになってから、案件や企業によっては必要になるスキルセットをまとめています。
例えば、jQueryやWordPress、他の記事では「必要だ」と書かれているものもあるんですが、現役目線的には正直「企業の制作方針」や「案件の対応言語」によって使わない場合もあるな...と考えています。
習得しないとフロントエンドに転職できないレベルじゃないので、余裕があれば少し触ってみる程度で大丈夫ですよ。
1/4｜jQuery（JavaScriptライブラリ）
jQueryは正直もう使われているプロジェクトが少なくなってきています。昔に組まれたサイトの拡充や保守に入る時に、仕方なく使う...といった温度感が多いです。
正直いって、jQueryはJavaScriptを（人によっては）書きやすくなるようにしたライブラリで、大元のJavaScriptをよく理解しておけば初見でも内容把握に時間がかかりません。
なので、「特定の場面でしか使わないから」「JavaScriptの理解の方が重要だから」という点で、優先度は高くはなく「触ったことはある」くらいで十分ですよ。
2/4｜WordPress（Open CMS）
WordPressはHTML/CSS・JavaScript等の専門技術のない人でも、Webサイトの更新・デザイン変更ができるCMS（コンテンツ管理システム｜Contents Management System）の一つです。
なのですが、現役で働く私的には「WordPressを扱う案件もたまにあるよね〜」というくらいの感覚です。最近では、費用をよく掛けられるプロジェクトだと、Next.js等のフレームワークを基準にCMS機能を組み込んだり、クライアントが更新するのではなく保守更新まとめて制作会社に委託していたりするケースも多く、WordPress（Open CMS）が必須スキルとは言えません。
こちらも入社後に必要であれば、働きながらインプットしていく...といった流れで構いません。
3/4｜PHP
WordPressをメインで扱う制作案件であれば、フロント側もPHPの理解が必須になりますが、そもそもWordPressを扱う案件がほぼない企業に入社する場合は、フロントエンドエンジニアがPHPを触る機会は少ないです。
本格的にECサイトや新規サイトシステムを組むのであれば、フロント側もPHPを理解してバックエンドエンジニアと連携する場合もありますが...正直、未経験者が転職してからしばらくの間は、バックエンド言語まで手を伸ばさなくてもOKです。
4/4｜デザインフレームワーク（CSSフレームワーク）
デザインフレームワーク（CSSフレームワーク）とは、ボタンやモーダルなどWebサイトでよく使うデザインを予めテンプレートとしてまとめられている便利ツールです。使う側は、テンプレートを読み込んで、ルール通りにHTML/CSSを書けばデザインが適用されます。
例えば最近では、TailwindやChakra UI、Bootstrapなどが実務でもよく使われています。
なのですが、こちらもプロジェクトによって使う使わないが分かれます。Webデザイナー側の工数があまり避けない場合や、UIルールを厳密に決めないといけず、フレームワークを使った方がスムーズな場合など、利用場面はケースバイケースです。
【実務レベル】市場価値があがるスキルセット
習得しなければ転職できない訳ではありませんが、実務では習得する必要性が出てきます。身につけておくと転職・キャリアアップで有利になるので、余裕があれば手をつけていきましょう。
1/5｜ビルドツール（Gulp / Webpack / Viteなど）
実務では、HTML/CSS・JavaScriptを直書きする方が少ないです。CSSをより便利に記述するScssや動的にHTMLを生成できるテンプレートエンジンなど、何か便利なツールを活用することになります。その際に、〇〇から〇〇に変換する、という「ビルド」が必要で、そのビルドをするためのツールが「Gulp / Webpack / Vite」などです。
未経験者でも先輩がビルドツールを使って組んだ環境を必ず活用することになりますし、そこそこ経験を積めば自分が環境構築する場面もあります。実務レベルには必須で、ビルドツールでの環境構築経験が豊富であれば、市場価値も上がります。
JavaScriptビルドツールの整理 各ツールの機能と依存関係｜Zenn
2/5｜CMSの知識・構築スキル
CMSとは、コンテンツマネジメントシステム｜Contents Management Systemのことで、HTML/CSSでコーディングをしなくてもページ更新・制作のできるシステムのことで、WordPressが代表的な例です。
制作前にクライアントと要件をすり合わせて、制作時にCMS構築まで行っておいて、簡単な保守・拡充は顧客側で担えるようにしておく、というパターンが多いです。CMSを導入すれば、顧客自身でページを修正・更新できてコスト削減や保守性アップに繋がるため、制作側も重宝しています。
フロントエンドエンジニア側もCMS構築のスキルが求められることもあるので、実装経験を積んでおくと良いですが、働く環境によっては使わないケースも十分あるので、余裕があれば触れておきましょう。
CMSとは？種類や機能、すぐに使えるおすすめサービスもまとめて紹介｜SAMURAI ENGINEER Blog
3/4｜SEOの知識
SEO（検索エンジン最適化｜Search Engine Optimization）とは、Webサイト・アプリをブラウザに理解してもらいやすい仕組みにすること。SEO対策をすることで、検索結果に表示されやすくなったり、ブラウザからの評価があがって結果的にどんなユーザーにも使いやすいコンテンツになります。
SEOといっても幅広すぎますが、初めに「セマンティックマークアップ」から理解するようにしましょう。見出しには<div>タグではなく<h2>を使う、といった「意味を持たせたマークアップ」をするスキルのことで、 <nav>, <figure>, <figcaption>など意外と覚えることが多いです。
【2024年版】SEOとは？基本と初めにやるべき具体策5つをわかりやすく解説｜Satori Marketing
Semantics (セマンティクス)｜MDN Web Docs
4/5｜アクセシビリティの知識
アクセシビリティ（Accessibility）とは、「誰でも情報を手に入れられるWebサイトである」ということで、例えば「目が見えなくても情報が伝わるか」「キーボードだけで操作できるか」「色の識別がしやすいか」「音声・動画コンテンツが音声が聞こえなくても伝わるか」といった点が指標になります。
2024年4月に障害者差別解消法の改正法が施行され、民間事業者では努力義務であった「合理的配慮の提供」が義務化される動きがあり、Webサイト・アプリの実装における「アクセシビリティ」の重要性は上がっています。
そのため、ディレクターや上層部から「アクセシビリティの実装をどうすべきか」という議題はよく上がるようになっていて、フロントエンドエンジニアとしては理解・実装できるスキルセットが必要になります。
【2024年新法施行】Web担当必見のウェブアクセシビリティ対応を徹底解説！義務化するの？｜farret One
ウェブアクセシビリティ導入ガイドブック｜デジタル庁
アクセシビリティ｜MDN Web Docs
私の働く会社でもこの議題で役員が話し込んでいましたし、ベテランのエンジニアが対策を練っていました。採用面接で下記のような資格を示したり、アクセシビリティへの理解を示せると一目置かれますよ。
デジタルアクセシビリティアドバイザー認定試験
5/5｜IT・Webシステムの基礎
JavaScriptやPHPといったプログラミング言語をマスターしているだけでは、"エンジニアとして" プロとは言えません。バックエンドもフロントエンドも、サーバーやセキュリティに関する知識は必要不可欠で、そういったIT・Webシステムの知識も身につける必要があります。
例えば、サーバーの知識がないあまりに、AWSを扱った業務やその他のテストアップ環境を上手く扱えないこともあるし、重要な学習項目となります。資格を通して体系的に学習するのであれば「基本情報技術者試験」がおすすめ。
とは言っても、資格がなくても上記のようなIT・Webシステムの基礎が無くても転職はできてしまうので、優先度が高い訳ではありませんが、いつか地雷を踏むことになるので、少しずつ時間をかけて学習しましょう。
気になる人は後の見出しで解説している「基本情報技術者試験の説明」をチェックしてみてください。
スクールに入学しなくても未経験者は無料相談で現役の話を聞くべき
未経験者はこれから学習を始める頃合いだと思いますが、自分の進路で何のスキルを学ぶべきか、どのレベルまで伸ばすべきか、これらを自己判断するのは危険です。
学習項目を何となく分かっていても、じゃあJavaScriptはどのレベルまで学ぶ必要があるか、React.js / Vue.jsもどこまで身につければ通用するのか...等、学習イメージが朧げな状態なはず。学習フェーズから実務までの経験のある現役に相談すればその辺りが明確になり、自分専用の学習ロードマップを決めることができます。
この辺りを明確にするためにも、現役やアドバイザーの話を聞くと「自分が目指すフロントエンドエンジニアならこの言語が最優先で、余力があればこれも学ぼう」と道筋が明確になります。
別にスクールに入学しなくても、相談した後に「スクールが合っているのか？独学でもできそうか？」と改めて学習方法を選択すれば良いのです。
しつこい勧誘もする必要のない大手の安定したプログラミングスクールを何点か挙げておくので、気になるスクールの無料相談を試しておきましょう。
RUNTEQも有名なプログラミングスクールで、専属メンターによる学習進捗サポートはもちろん、卒業試験の実施や本格的なポートフォリオ制作サポートなど、サポートも充実しています。
またRUNTEQ運営者の菊本さんが登壇されたインタビューにある通り、プログラミングスクール卒業生使えないと言わせないほど、学習内容が徹底しているのも特徴。
【転職対策】技術以外のフロントエンドエンジニアの知識・スキルセット
ここからは技術系とは違いますが、筆者の私がこれまでの転職の採用面接で尋ねられた質問をベースに、重要だと考えるスキルや知識をまとめていきます。
もしこれから転職を考えているのであれば、未経験者はこれまでのキャリアで近しい話ができそうか、経験者は過去の業務の中でアピールできるポイントをまとめておくと良いでしょう。
1/5｜他職種・他業界とのコミュニケーション能力
エンジニア職は「独りで黙々と作業をする職業」ではなく、「他職種・同職種・さまざまな人とのチームプレーが必要な職業」です。
- 複数人のエンジニアでソースや状況をシェアしながら制作
- ディレクターと工数や仕様、制作の段取りを相談
- デザイナーとUIやインタラクション等の方針を会話
など、コミュニケーションが重視される場面は多く、筆者の私自身、上記のような観点で採用面接で質問された経験があります。他職種・他業界の人と円滑なコミュニケーションができるように、日々の業務の中で鍛えておきましょう。
2/5｜UI・UX・デザインへの理解
フロントエンドエンジニアだと、デザイナーとUIやインタラクションを相談しながら制作する場面が多く、特にJavaScriptの動きに関わるようなアニメーションやUIに関しては、ある程度の知識量が求められます。
例えば、ディレクターがWebサイト全体で流体シェイプを使ったアニメーションを採用したいと考えて、その実装方法や実現可能性といった相談がフロントエンドエンジニアに降りてきたり...
Webアプリ開発でボタンやメニュー展開で厳格なデザイン定義が必要で、フロントエンドエンジニアとして良いフレームワークや規定がないか相談されたり...
こういった場面で良い提案ができるスキルがあれば、市場価値も上がります。
UI/UXとは？UIとUXの違い、デザインのコツやポイントをわかりやすく解説｜Monstarlab Blog
3/5｜教育能力・マネジメント能力
未経験者であっても2,3年経験のある人であっても、新しく入った人への教育能力は求められます。直近で教育を依頼されないにしても、長期的にみて次の世代への教育・マネジメントができる人かどうかは、企業側もよく見ています。
エンジニア職に限らず、下の世代への教育の機会があれば積極的にチャレンジして、経験として積んでおくことをお勧めします。
筆者や周囲の人の経験で言うと下記のような経験が参考になるはず。
- プロ野球サイトの運用保守リーダーとして4,5人チームをまとめる
- アルバイトの教育担当しての経験
- 新規案件のフロントエンドチームのマネジメント
- 顧客への運用レクチャー等
これ以外でも何でもOKなので、専門職としてのキャリアアップには欠かせないスキルなので、実践的に鍛えておきましょう。
4/5｜情報収集能力
IT業界は技術革新やトレンドの変化も激しく、仕様やルールも変わることが多いので、常にアンテナを張って情報収集をする力も必要となってきます。
実際に採用面接では、フロントエンドエンジニア職への興味関心や情報収集能力、アウトプット能力を知るために「普段どんな風に情報収集していますか？」といった質問をされることが多いです。
そもそも普段から様々なメディアを見る癖をつけておいて、情報収集とメンバーへのアウトプットを欠かさないようにして、日常的に情報収集能力を鍛えておきましょう。
5/5｜バックエンドのスキルや知識
フロントエンドエンジニアはデザイナーやディレクターだけじゃなく、バックエンドエンジニアと協力して開発する場面もたくさんあります。
例えば筆者だと、ECサイト構築をバックエンド優先の環境でしたことがあり、バックエンドエンジニアからフロント側の実装方針やAPIの使い方を教えてもらいながら、案件に取り掛かったこともあります。
また、別の経験では、フロント側で先行してアプリケーションのUIや開発環境を構築して、バックエンドエンジニアに必要なAPIの要件をまとめて伝えたり...
フロントエンドエンジニアだとしても、バックエンド側の知識やスキルが必要になるケースは多くあります。
エージェントを活用して転職・キャリアアップで活かせるスキルを評価・サポートしてもらおう
少し話が変わりますが、直近で転職やキャリアアップを考えている人は、プロのキャリアアドバイザーから転職をサポートしてもらえる「転職エージェント」に素直に甘えるのが安牌。例えば下記のようなサポートを受けられます。
- 面接企業から求められるスキルを教えてもらえる
- 市場価値を上げるために最近求められているスキルが分かる
- 企業毎の案件例や採用傾向を相談できる
エージェントは企業からマージン貰っていて、こっち側は無料で利用できるので、私的には使わない理由がないくらいの感覚です。
転職エージェントの中でも、エンジニア特化型のサービスがあり、下記で紹介したものは、筆者や同僚・先輩も実際に使っていたものになります。転職・キャリアアップを成功させたい人は、一度無料相談から試してみましょう。
実際にフロントエンドエンジニアの面接で尋ねられる質問集 & 回答例
合わせて採用面接の質問されることや回答例が知りたい人は、下記の記事も参考にしてみてください。
【実務レベル徹底解説】フロントエンドエンジニアに必要なスキルセット
最後に、筆者の私のこれまでのプロジェクト経験を思い返して、実務レベルに必要なスキルセットをまとめておきます。
未経験者は少し手を伸ばせられそうなスキルはないか模索してもらい、現役でキャリアアップしたい人はご自身に必要だと思ったスキルがないか要チェックしていきましょう。
参照元情報
【HTML/CSS】実践的な知識と実装
| スキル | 解説 |
|---|---|
| セマンティック マークアップ | マークアップする際に無視できない知識が「セマンティックHTML」。例えば「〇〇〇〇〇」というテキストは大見出しだと認識させるために<p>タグではなく<h2>タグを使う、といったように、ブラウザのクローラーにも開発メンバーにもコンテンツの可読性を上げる書き方です。 「そんなの簡単じゃね？」と思った人、セマンティックなタグは意外と沢山あります。<main>, <article>, <aside>, <section>, <nav>, <figure>, <figcaption>, <summary>...等もっとありますし、使いどころの理解も必要。一度公式ドキュメントを参照してみても良いかも。Semantics (セマンティクス)｜MDN Web Docs |
| HTML/CSS 仕様調査・実装 | 実際の業務では、デザイン通りに実装できるだけではいけません。例えば、CSSのgridの使い方を、開発初心者もいるメンバーでドキュメント化するシーンを考えてみましょう。 この場合は自分1人が何となく理解しているだけではダメで、gridとよく一緒に使う関連プロパティや、対応ブラウザ、flexとの活用ケースの違い...等など正確な情報を調査する必要があります。 ここで大切になる力が「公式ドキュメントで調査する力」です。"ググって出た情報で何となく理解" はNGで、"正式に" "公式の情報を" 把握する必要があります。 開発メンバー内の話ならまだしも、クライアントへ納品するサイトテンプレート制作とかだと、より一層、正確に調査する能力が求められます。 |
| CSS プリプロセッサ | CSSプリプロセッサとは、CSSの記述を簡潔にし、メンテナンス性や拡張性を向上させるためのツールのことです。Sass等のツールのこと。 実務では、CSSをそのまま記述することは滅多にありません。いくらマークアップ言語であれど、保守性を意識する必要があるので、Sass等の拡張言語を扱ったメンテナブルな実装が必ず求められます。 CSS preprocessor (CSS プリプロセッサー)｜MDN Web Docs |
| CSS設計手法 | BEM（Block Element Modifier）やOOCSS（Object-Oriented CSS）などの、 CSS設計手法も実務では必須事項です。また、プロジェクトや会社によってどんなCSS設計手法を採用しているかは異なるので、初見の設計手法にも柔軟に適用できる力が必要。 とは言え、最近はBEMやOOCSSが多いので、この辺りは一度触れておくと良いでしょう。 |
| CSSフレームワーク | TailwindやChakra UI、Bootstrapなどの、CSSのフレームワークも、実務レベルになると活用するケースが多くあります。 このCSSフレームワークで重要な点は、いちいち全て覚えていなくても、ドキュメントを見れば理解・活用できるような基礎力があること、です。CSSに限った話じゃないですが、フレームワークなんて全て覚える必要はありません。そもそも技術トレンドは移り変わりが多いので、重要なのは暗記力よりも柔軟性と対応力。 |
| テンプレート エンジン | テンプレートエンジンとは、ヘッダーやフッターなどページ共通のパーツをテンプレート化して動的にHTMLを出力できる仕組みのことです。EJSやPUGなどが該当します。 ただ、どんな案件でも使われている訳じゃありません。むしろEJSの活用は減退傾向にあり、Next.js等のJavaScriptフレームワークで実装することの方が増えてきているので、学習必須とまでは言えません。 しかし、テンプレートエンジンを扱う案件へのアサインが考えられるなら、理解くらいはしておきましょう。 EJS公式ドキュメント PUG公式ドキュメント |
【JavaScript】業務で頻出の技術に精通している
| スキル | 解説 |
|---|---|
| HTTP通信 | HTTP（ハイパーテキスト転送プロトコル ｜Hypertext Transfer Protocol, HTTP ）通信とは、Webサーバーとデータのやり取りをする時などに扱う規定のことで、「XMLHttpRequest (XHR) オブジェクト」や「Fetch API」を活用できている必要があります。実際の業務では、WebサーバーのJSONファイルを読み込んでデータ処理をしたり、SNS連携等で外部のAPIと連携したり、通信は必須の技術となります。 HTTP｜MDN Web Docs XMLHttpRequest｜MDN Web Docs Fetch API｜MDN Web Docs また、非同期通信でWebページを構築するプログラミング手法である「Ajax｜Asynchronous JavaScript And XML」の理解も、Webエンジニアであれば必須です。 Ajaxって何？(実装も踏まえて）｜Zenn |
| JavaScript メカニズム | JavaScriptのエラーの解決で無駄に時間を掛けてしまう人は、JavaScriptの仕組み自体の理解が足りていない可能性があります。 ・this構文の仕組み ・変数宣言の理解（let, const, varの仕様、変数参照の理解、など） ・コールスタック（プログラム実行中のタスク管理手法） ・ホイスティング（実行前のメモリー配置） ・スコープの理解（変数や関数の参照可能範囲） 等など、挙げればキリがないですが、JavaScriptでよく使う構文をただ覚えているだけでは、問題が発生した時に自力で解決できません。 いわゆる入門書系では学べない内容なので、MDNドキュメントや現役の先輩に教わるなど、一歩先の学習を心がけましょう。 |
| 標準組み込み オブジェクト | JavaScriptの標準組み込みオブジェクト（ビルトインオブジェクト）とは、標準で組み込まれているオブジェクトのことで、Map, Promise, JSON, Proxy, Generator 等を示します。この中では、Map, JSON, Promiseなどの活用頻度が多く、Promiseについては await や async 等の省略記法で何となく覚えているだけじゃなく、Promiseの仕様・概念から正確に理解しておきましょう。 この辺りのビルトインオブジェクトは、開発の中でドキュメントを参照したり、先輩のコードを見たりして、少しずつ頭に入れていきましょう。 標準組み込みオブジェクト｜MDN Web Docs |
| ES6以降の記述 | ES6（ECMAScript 6）以降でJavaScriptの書き方は大きく変わってきました。変数宣言方法の let, const もES6以降ですし、クラス定義、アロー関数、モジュール、Promise、スプレッド構文...等など、実務で頻出の記述に慣れておく必要があります。 この辺りは、未経験者であっても把握すべき内容なので、スクールで現役に相談するなど、きちんと理解に努めていきましょう。 ES6で追加された機能についておさらい｜Zenn JavaScriptとECMAScriptの違いって何？その背景を徹底解説！｜SAMURAI ENGINEER Blog |
| Web APIs | 具体的には、DOM API、Fetch API、動画音声系API、データ管理系のStorage API、などのブラウザで提供されるAPIや、各種SNSやYouTube等のサードパーティのAPIなどのことです。 はじめから全て覚えるというより、公式リファレンスを参照して、正確な実装ができる知識や慣れが重要です。感覚的には Storage, DOM, Fetch あたりはサッと実装できるのが理想ですが、サードパーティのAPIなんかは網羅する方が無理がありますし、柔軟に対応できるようにポートフォリオ等でもチャレンジして、感覚を掴んでおきましょう。 Web API の紹介｜MDN Web Docs |
【フレームワーク・スーパーセット言語】React.js / Vue.js / TypeScript等のスキル
| スキル | 解説 |
|---|---|
| JavaScript フレームワーク | 今やWebアプリ開発だけではなく、中大規模のWebサイト制作でも、React.js等のフレームワークは活用されています。 フレームワークは言わば過去の天才達のJavaScript構築の理想形であり、便利な機能で詰まっている夢の箱です。 例えば、React.jsを使えば、CSSのクラス管理もコンポーネント毎にスコープすれば競合も気にしなくて済むし、今やテスト実行のしやすい純粋関数がデフォルトですし、Next.jsも使えば SSR/SSG といった高度な機能も容易に実装できます。 もちろんフレームワークを使わない案件も多くありますが、高度な機能が多いほど、ゼロベースで制作するよりコスト削減・無駄なエラー回避ができるので、現代では主流のツールとなっていて、学習が必要となっています。 なぜフレームワークを使うのか？｜Zenn |
| TypeScript | JavaScriptのスーパーセット言語（拡張言語のような意味）で、動的型付け言語のネイティブJavaScriptと違って、静的型付けによる厳格な管理ができる点が大きな違い。 ES6以前は、クラス定義やモジュール管理など、ネイティブJavaScriptができない記述を、TypeScriptでは可能だった点もメリットだったのですが、ES6以降ネイティブJavaScript側で可能な記述法が増えてきて、あまり大きな差はないようになってきました。 あくまで所感としては、チーム規模の大きいプロジェクトや開発規模の大きい案件で、TypeScriptが採用されていることが多く、また、React.js等のフレームワークと一緒に扱われている場面が多いです。 なぜTypeScriptを使うべきか｜サバイバルTypeScript |
【環境構築】フロント環境構築やテストアップ環境構築ができる
| スキル | 解説 |
|---|---|
| 環境構築 | Gulp / Webpack / Vite 等の、フロントエンドで主流の環境構築にある程度慣れておく必要があります。 ただ、プロジェクトによって何を使っているのかが離散しがちで...Web制作系や少し古めのプロジェクトだとGulpも使われている印象ですが、Webpackオンリーの案件もあれば、そもそもJavaScriptフレームワーク毎の規定環境で進めている案件もあります。 とは言え、自分でオリジナルで環境構築した経験がないのが一番危ないので、ポートフォリオ制作等で、トレンドのツールを使った環境構築を経験しておくことをお勧めします。 |
| テストアップ | Xserver等のレンタルサーバーを使ったテストアップ環境準備や、AWS EC2を使った環境構築など、こちらもプロジェクトによって扱う技術や環境は異なりますが、同様に何か一つでも経験しておくことが大切です。 また、キャリアや経験年数によって求められる技術は異なるので、事前の学習というよりは、できるだけ多くの経験値を積んでおく意識をしましょう。 |
| パッケージ マネージャー の理解 | 環境構築をする際は、例えば CSSプリプロセッサのSassを扱う場合、npmというパッケージマネージャーから必要なパッケージを入手する必要があります。CSS以外にもJavaScript、フレームワーク、コンパイルやトランスパイルなどの環境構築だと、多量のパッケージをNPMからインストール流れになります。 |
| GitHub Actions | 自動デプロイや自動テスト実行など、GitHubのActionsを扱った環境構築も、多くのプロジェクトで採用されています。 これこそ年次の多い中堅エンジニアが担当することが多いですが、既に構築された環境でエラーが起きた際に、先輩に丸投げしてはダメで...どのような仕組みで構築されているか理解できる力が必要です。 こちらも同様にポートフォリオ制作等でご自身で構築にトライしておくと、採用面接でも少しでもアピールポイントになります。 |
【納品に必要な知識】クロスブラウザ対応やテスト
| スキル | 解説 |
|---|---|
| ブラウザ・OS | 実務では、契約項目に入っているブラウザ・OSでの納品前の確認が必須です。Mac OS / Chromeでは正しく表示されているのに、SafariやiOSで見るとデザイン崩れしている...なんてことはよくある話。（本当に辛い） こういった時に、原因の調査やリファレンスを参照して修正できる力が必要になってきます。採用面接でもこういった話は上がってくるので、スムーズに話せるだけ慣れておくと良いですよ。 |
| テスト | Web制作系（サイトやページ制作）では正直テスト項目が契約に含まれていることは少なく、Webアプリ開発で必要なケースがほとんど。 機能単体で問題なく動作するかテストする「単体テスト」、各機能間や他システムと合わせても問題なく動作するかテストする「統合テスト」、非機能を含んだアプリ全体をテストする「総合テスト」に分けられることが多いです。 こちらも経験として積んでおいて、テストを担当する側もマネジメントする側も、経験談としてスムーズに話せる状態がベスト。 |
| JavaScript テスト技術 | JestやCypressなどの技術を扱ってJavaScriptやフレームワーク上でのテストを行えるスキル。例えば、Jestであれば Meta（旧Facebook）社が開発したオープンソースのJavaScriptテストフレームワークで、ネイティブJavaScriptからTypeScriptやフレームワークまで幅広くカバーしています。Webアプリ開発等でも実際に、React.jsでもJestを扱ったテストファイルを実装・運用することがあります。 |
技術選定・実装アプローチに理解がある
| スキル | 解説 |
|---|---|
| SPA・MPA | JavaScriptフレームワークの勉強をしていると度々出てくるワード「SPA」「MPA」。フワッと理解している現役もいますが、実装担当者はもちろん、技術選定をするタイミングでは正確な理解が求められます。 SPA（シングルページアプリケーション｜Single Page Application）とは、サーバーからは単一HTMLファイルが提供され、画面遷移時はAPI側でHTMLファイルを書き換える形をとっており、画面遷移毎にサーバーにリクエストを送る必要のない特徴を持っています。 MPA（マルチページアプリケーション｜Multi Page Application）とは、従来の一般的な形式で、ページ毎に必要なHTMLファイルやCSS・JavaScriptファイルをサーバーからレスポンスしてもらうアーキテクチャとなります。 フロントエンドエンジニアとしては、これらの仕組みの理解と、実装手段、活用すべきフレームワークを理解しておく必要があります。 SPA, SSR, SSGって結局なんなんだっけ？｜Zenn SPA/MPAとCSR/SSR/SSGの分類｜Zenn |
| レンダリング手法 CSR・SSR・SSG | SPA・MPAなどの言葉と併せてよく出てくるのが「CSR・SSR・SSG」というレンダリング手法に関する話。 CSR（クライアントサイドレンダリング｜Client Side Rendering）とは、SPAに活用されているレンダリング方法で、クライアント側（自分のPC）で画面遷移等のレンダリング処理を行います。サーバーへリクエストするのは初回時のみ。 SSR（サーバーサイドレンダリング｜Server Side Rendering）とは、CSRと比較すると、別ページに遷移する時などに、クライアント側ではなくサーバー側でレンダリングを行います。レンダリングをサーバー側で行うことにより、ブラウザ・PC側の負担を減らすことができます。 SSG（静的サイトレンダリング｜Static Site Generation）とは、ビルド時にサーバー側で必要なデータ取得とHTMLファイル構築を完了させておき、リクエスト時はこの事前に完成しているファイルを返すだけ、といったレンダリング手法です。SSRと比べると最新データを常に反映できる訳じゃないですが、圧倒的に表示速度が速いのが特徴。 上記のレンダリング手法については、UXに力をかけるサイトなのか、モダンフレームワークを扱いつつSEOや表示速度が重要なのか、といったようにフロントエンドの技術選定時に重要となる項目です。 SPA, SSR, SSGって結局なんなんだっけ？｜Zenn SPA/MPAとCSR/SSR/SSGの分類｜Zenn |
| フレームワーク選定 | 自分のエンジニアとしてのキャリアが上がってくると、新規開発時に最適なフレームワークを選定する場面にも出会います。 JavaScriptでよくある話なら、React.js、Vue.js、Angular.js どれを使うべきか、React.jsにするならNext.jsを活用すべきか、CSR/SSR/SSGといったレンダリング手法はどうするか...こういった課題に対して答えを出す力が必要です。普段の業務の中で、「なぜこの技術が選定されたのか」「この技術には何のメリットがあるのか」「他の技術との違いは？」と常に探求する意識が大切です。 |
【他職種の理解】デザインツールの理解や工数管理
| スキル | 解説 |
|---|---|
| デザインツール | Photoshop, Illustrator, Figmaあたりのデザインツールに関しては、簡単な操作方法くらいは理解しておくべきです。当然デザイン制作ができる必要はないですが、デザイナーから渡されたファイルで書き出しをしたり、少し調整を入れる場面はたくさんあるので、一切使えないとなると問題です。「業務上で扱った経験はある」くらいの状態にしておきましょう。 |
| 工数管理 | 基本的に、ディレクターがエンジニアの工数管理や決定をしますが、案件アサイン後に問題なく稼働できているか自分で確認をしたり、ディレクターから妥当な工数感を相談されることはあります。 フロントエンドに限らずエンジニア等の専門職は、自分のことは自分で管理できないとダメなので、キャリアを積む中で長期的に工数管理能力は伸ばしていきましょう。 |
【資格】現役が考えるフロントエンドエンジニアに役立つもの3選
初めに断っておくと、資格がなくてもフロントエンドエンジニアにはなれます。結局のところ、筆者の経験としても資格の提示を要求されたことはなく、あればプラスといった具合です。
ただ、資格を勉強に励むことで単純にスキルアップします。中でも筆者が現役として働く多くの人関わっていく中で、学んで効果があると考える資格をまとめておきます。
HTML5プロフェッショナル認定試験
| 概要 | 特定非営利活動法人エルピーアイジャパン（以下LPI-Japan）が運営する資格試験で、HTML/CSSの知識はもちろん、JavaScriptのAPI関連の出題もあるので、フロントエンドエンジニアにとっての基礎をカバーできます。レベル1とレベル2に分かれており、それぞれ難易度と出題領域が異なります。 |
| 出題範囲 （レベル1） | 【Webの基礎知識】 HTTPプロトコル、HTMLの書式、Web関連技術の概要など 【CSS】 スタイルシートの基本、CSSデザイン、カスケード 【HTML要素】 要素と属性の意味、メディア要素、インタラクティブ要素 【レスポンシブ】 マルチデバイス対応、メディアクエリ 【JavaScript APIの基礎知識】 マルチメディア・グラフィックス系API概要、デバイスアクセス系API概要、オフライン・ストレージ系API概要、通信系API概要 |
| 勉強時間目安 （レベル1） | 既に関連知識があればあるほど短期間で学習を終わらせられるでしょう。 |
| 出題範囲 （レベル2） | 【JavaScript】 文法、ES6（ECMAScript2015）以降の新機能 【JavaScript API】 イベント、ドキュメントオブジェクト、ウィンドウオブジェクトなど 【グラフィックスアニメーション】 Canvas、SVG、Timing control for script-based animations 【マルチメディア】 メディア要素のAPI 【ストレージ】 WebStorage、Indexed Database、File API、バイナリデータ 【通信】 Web Socket、XMLHttpRequest、Server-Sent Events 【デバイスアクセス】 Geolocation API、DeviceOrientation Event 【パフォーマンスとオフライン】 Web Wokers、High Resolution Time、オフラインアプリケーションAPIなど 【セキュリティモデル】 クロスオリジン制約とCORS、セキュリティモデルとSSLの関係 |
| 勉強時間目安 | 【レベル1】 期間はおおよそ2〜3ヶ月、時間としては40時間以上を見積もっておくと良いです。 【レベル2】 4〜6ヶ月は見ておいた方が良く、1日4時間程度の時間を確保できる人は3ヶ月ほどでもチャレンジできます。出題範囲が広いので総勉強時間は360時間ほど見ておくべきでしょう。 |
レベル1は、クリエイティブ系でもアプリ開発系でも、学ぶ価値は十分にあり、採用面接の際は知識量のアピールができます。レベル2に関しては通信やストレージ周りなど、よりシステマチックな内容までカバーでき、アプリ開発系ではより一層その知識を活用できます。
Webクリエイター能力認定試験
| 概要 | MOS関連等のビジネスシーンで役立つ資格・検定を数多く展開している「サーティファイ」が実施する試験です。HTML/CSS・JavaScript等のコーディングスキルや、Webサイト設計・レイアウト構成といった実践的な内容も含まれており、Web制作に必要な基礎を体系的に身につけられる点が魅力です。 |
| 出題範囲 （スタンダード） | ・セマンティックWebの理解 ・HTML5のマークアップ ・CSSによるWebページのデザイン・レイアウト |
| 出題範囲 （エキスパート） | ・ユーザビリティ・アクセシビリティを考慮したWebデザイン → レイアウトや色彩設計等も含む ・スクリプトを用いた表現 → 動的なWebページの表示・マルチデバイス対応・新規サイト構築等も含む |
| 勉強時間目安 | スタンダードで24時間、エキスパートで38時間程度が必要とされていますが、実技の過去問を作成したり振り返ることも考えると、それぞれもう少し時間がかかると見積もっておきましょう。 |
この資格はテスト形式に実技が含まれるため、知識だけでなく実際に形にできることを示すのに最適な資格です。ただ、スタンダートは特に難易度が高いわけじゃなく、どちらかというとクリエイティブ系のマークアップ担当に合っていて、アプリ開発系はこれよりも次の資格の勉強をすべきです。
基本情報技術者試験（アプリ開発系向け）
| 概要 | この資格は、Webエンジニアのための試験ではなく、ITエンジニアやIT管理職に最適な試験となっていて、アルゴリズムとプログラミングの基礎理論やネットワーク、セキュリティ、コンピュータシステムなど、エンジニアにとって重要で幅広い知識が求められます。正直かなりのボリュームですぐに使える知識ではないですが、今後生き残っていくためには重要な知識が詰まっています。合格率は基本的に40％～50％で遷移しており、簡単ではありません。 |
| 出題範囲 | 「テクノロジ系」「マネジメント系」「ストラテジ系」の科目Aと、「アルゴリズムとプログラミング」と「情報セキュリティ」の実践的な科目Bの、2パターンに分かれた出題形式となります。 |
| 勉強時間目安 | 200時間前後が目安で、1日2時間勉強した場合、3ヶ月はかかると見ておきましょう。ただ、Webに特化した話じゃなく、IT技術者としての幅広い知識が必要なので、初心者はもっと多くの時間を見積もっておきましょう。 |
この資格は、フロントエンドエンジニアになる前に無理に取得しなくて良いです。正直なくても採用は通ります。ただ、Web系に限らずエンジニア職であれば、この資格で得られる知識が必要です。
筆者の私も、初めての職場の大手企業のCTOも務める優秀な社長に「基本情報技術者試験は名前の通り、エンジニア職の基礎であり、必要不可欠。この資格の知識がない人は作業担当者にはできても、プロジェクトをリードする立場には立たせ難い...。」と仰っていました。
それほど "エンジニア" を名乗るのに大切な知識が詰まっている資格となります。
まとめ：スクールの無料相談/体験や転職エージェントは惜しみなく活用すべき
フロントエンドエンジニア未経験者の人は、まずは現役の話を聞いて、自分にとって必要なスキルセットや学習ロードマップを明確にする必要があります。
また、これから転職やキャリアアップを目指している人は、エンジニア特化型の転職エージェントで、キャリアアドバイザーから企業から求められるスキル感を教えてもらいながら、採用率を上げることをお勧めします。
それぞれおすすめのサービスをまとめておくので、気になる人は、無料相談や無料体験から試していきましょう。
未経験者必見！現役エンジニアに無料相談・無料体験ができるプログラミングスクール
RUNTEQも有名なプログラミングスクールで、専属メンターによる学習進捗サポートはもちろん、卒業試験の実施や本格的なポートフォリオ制作サポートなど、サポートも充実しています。
またRUNTEQ運営者の菊本さんが登壇されたインタビューにある通り、プログラミングスクール卒業生使えないと言わせないほど、学習内容が徹底しているのも特徴。
エンジニア特化型のお勧め転職サービス
