Web系のキャリアパスとしてフロントエンドエンジニアを検討している人や、今目指そうとしている人は、必要なスキルや学習方法、転職のコツが気になっているのではないでしょうか。
筆者は現役のフロントエンドエンジニアで、実際に未経験から学習から転職まで実現した経験を元に成功の秘訣をお伝えしていきます。
一般的に必要だと言われているスキルや転職のコツに加えて、実際に経験しているからこそ分かるポイントも書いているので、ぜひご参考にください。
WRITER
Tsukasa｜現役エンジニア
Frontend Engineer / Web Creator / SEO Writer / Web Media Manager
現役のフロントエンドエンジニアで、「在庫管理アプリのフロントエンドリード」「プロ野球球団公式サイトの運用保守リーダー」「ECサイト実装」「Webサイト・LP実装」などの実績を積みながら、現在もWebクリエイティブ会社で活躍中。未経験からフロントエンドエンジニアに転職成功した実体験も活かして、当メディアを運営させていただいております。
AID-TRUTHは、バックエンドエンジニアやディレクター、人事で活躍する人など、現役で活躍する人たちが実体験を活かしてコンテンツ発信をしています。
INDEX
まずはフロントエンジニアの2パターンの仕事内容を知る
必要なスキルの話に入る前に、まずは「クリエイティブ系」「アプリ開発系」の2パターンのフロントエンジニアの仕事内容をまとめます。どちらを目指すかによって、優先すべきスキルも途中から変わってくるので、事前によく理解しておきましょう。
1/2｜クリエイティブ系（マークアップエンジニア）
一つ目は、企業のコーポレートサイトや商品告知用のWebページなど、Webサイトを実装するタイプのフロントエンドエンジニア。マークアップエンジニアやコーダーといった呼ばれ方をしています。
HTML/CSSやJavaScriptを用いて、Webデザイナーが仕上げたデザインをプログラムで構築していく仕事内容となります。
制作するサイトのジャンルに寄りますが、SEOやアクセビリティの知識が必要な場合や、JavaScriptの高度な技術が必要な場合、クリエイティブに特化する場合...等など必要なスキル感の幅も広いです。
2/2｜アプリ開発系
二つ目は、会計ソフトや在庫管理アプリ、ECサイトなど、Web上で動くアプリケーションを構築するタイプのフロントエンドエンジニア。企業や現役エンジニアとしても、フロントエンジニアといえばこちらの認識をする人が多いです。
Webサイト制作と同様に、Webデザイナーが制作したデザインを落とし込むのですが、機能実装やシステムと絡む構築など、マークアップと比べると、よりエンジニアとしての要素を含みます。
必要なスキルセットとしては、HTML/CSSやJavaScriptはもちろん、Webアプリ構築に役立つReactやVueといったフレームワークの理解も必須となります。
フロントエンドエンジニアに必要なスキル｜現役目線で見た優先度別
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（ページ遷移を必要としない機能）や複雑な処理が必要となるケースが多く、必需品レベルで活用します。
クリエイティブ系では、正直活用しないケースも多いですが、規模が大きくなれば保守性の担保のため重要度が増しますし、年々制作の技術レベルは上がりつつあり、筆者の会社でも導入しているプロジェクトが増えてきています。
市場価値の上がる実務レベルのスキルセット
必須スキル以外に、身につけておくと実務レベルで役に立つスキルをまとめておきます。
筆者の過去の経験をもとに、優先度と難易度割り振ってみました。が...正直、優先度は特に、案件とキャリアによりけりなのであくまでご参考程度に。
| カテゴリー | スキルセット | 優先度 | 難易度 |
|---|---|---|---|
| 【HTML/CSS】 実践的な知識と実装 | ・セマンティックマークアップ ・HTML/CSS仕様調査・実装 ・CSSプリプロセッサ（Sass等） ・CSS設計手法（BEM, OOCSS等） ・CSSフレームワーク（Tailwind, Bootstrap等） ・テンプレートエンジン（ejs, pug等） | ★★★ | ☆☆★ |
| 【JavaScript】 業務で頻出の技術に精通している | ・HTTP通信（Ajaxの理解も） ・JavaScriptメカニズム ・標準組み込みオブジェクト ・ES6以降の記述 ・Web APIs | ★★★ | ☆★★ |
| フレームワーク スーパーセット言語 | ・JavaScriptフレームワーク （Vue.js, React.js, Angular.js等） ・TypeScript | ★★★ | ☆★★ |
| 【環境構築】 フロント環境構築や テストアップ環境構築 | ・環境構築 （Gulp, Webpack, Vite等） ・テストアップ ・パッケージマネージャーの理解 （npm, yarn等） ・GitHubActions | ★★★ | ☆★★ |
| 【納品に必要な知識】 クロスブラウザ対応やテスト | ・ブラウザ・OS ・テスト（単体、統合、総合） ・JavaScriptテスト技術 （Jest, Cypress等） | ☆★★ | ☆★★ |
| 技術選定・実装アプローチ | ・SPA・MPA ・レンダリング手法：CSR・SSR・SSG ・フレームワーク選定 | ☆☆★ | ★★★ |
| 【他職種の理解】 デザインツールの理解 工数管理 | ・デザインツール （Photoshop, Illustrator, Figma等） ・工数管理 | ☆★★ | ☆☆★ |
上記全てのスキルセットの詳しい解説は、下記の記事の「実務レベルに必要なスキルセット」の見出しでえ、すこぶる詳細にまとめているのでご参考にください。
フロントエンドエンジニアになるには？筆者が実際に成功させたロードマップ
筆者の私やこれまで現場で関わってきたエンジニアが、現役のフロントエンドエンジニアになる前に試したロードマップになります。
シンプルにまとめると「学習→転職」なだけですが、無駄に寄り道しないためにもコツや意識すべきポイントがあるので、STEP.1と2は特に要注意です。
- STEP.1｜現役やプロの話を聞いて学習〜転職の流れを明確にする
- STEP.2｜自分に最適な学習法を見極める
- STEP.3｜期間を決めて猛勉強
- STEP.4｜完全オリジナルのポートフォリオ制作をする
- STEP.5｜転職エージェントで転職する
STEP.1｜現役やプロの話を聞いて学習〜転職の流れを明確にする
あまり書いている記事は少ないですが、賢いエンジニアはまず自分にとって最適な学習法と転職を見据えるために、先人の話を聞いています。
現場で仲良くなったバックエンドエンジニアの人は、知り合いにインフラエンジニアが居たようで直接コツを聞いていましたが、私はそういった知り合いはいなかったので、現役に無料相談できるプログラミングスクールのサービスに頼りました。
結局私は独学したのですが、無料相談を活用することで、学習法のコツやキャリアプランは明確になったのでオススメのやり方。
というのも、何をどうやって学習すべきかというのは、ネットを漁るよりやっぱ現役やプロの話を聞くのが手っ取り早いんです。
しつこい勧誘もする必要のない大手企業の安定したスクールを載せておきます。入学しなくて問題ないので、相談だけでも活用してみましょう。
RUNTEQも有名なプログラミングスクールで、専属メンターによる学習進捗サポートはもちろん、卒業試験の実施や本格的なポートフォリオ制作サポートなど、サポートも充実しています。
またRUNTEQ運営者の菊本さんが登壇されたインタビューにある通り、プログラミングスクール卒業生使えないと言わせないほど、学習内容が徹底しているのも特徴。
STEP.2｜自分に最適な学習法を見極める
現役やプロに相談をして、フロントエンドエンジニアの学習やキャリアのイメージが少しでも明確になったら、改めて自分に最適な学習方法を見極めるのがおすすめの流れ。
次の見出しで解説していますが、最近では下記の勉強方法が主流なので、じっくり考えていきましょう。
- 1/4｜学習サイト等で独学する
- 2/4｜独学サポート型スクールで独学する
- 3/4｜プログラミングスクールを活用する
- 3/4｜入社して実務経験を通して学ぶ
先にプログラミングスクールの無料相談を活用して後から勉強法を決めるというのも違和感かもしれませんが...筆者の私の所感的には、先に話聞いちゃった方が「独学できそうか？スクールに頼るべきか？」が明確になりやすいんです。
この記事で全体の流れと大体の学習法を理解しておいて、その後、無料相談等で現役の話を聞いておいて、最終的に自分に最適な学習法を決める...という流れがおすすめ。
STEP.3｜学習項目と期間を決めて猛勉強
続いて実際の勉強フェーズですが、必ず初めに学習する項目と期間は決めるべきです。
私の失敗談なのですが、項目を決めないとアレもこれもとキリが無くなるし、やはり期間を明確にしないと効率がガクッと下がります。
項目としては、必要なスキルで述べた通り「HTML/CSS、JavaScript、バージョン管理システム、Linuxコマンド、JavaScriptフレームワーク」はカバーしておくことをお勧めします。
期間については、正直いって自分の生活や状況によります。この辺りを自己判断するのが難しいので、無料相談の活用がおすすめだったりします。
STEP.4｜完全オリジナルのポートフォリオ制作をする
スキルを習得して終わってはいけません。就職/転職する際には、学んだことのアウトプットとしてポートフォリオ制作をする必要があります。
ポートフォリオとは、自分で制作したオリジナルのWebサイト・Webアプリのことで、職務経歴書等と併せて面接前に提出することが多いです。
採用面接の際にもポートフォリオの話題が上がることが多く、自分のスキル感の証明やエンジニアとしての適性を伝える材料となります。
ポートフォリオは制作するなら完全オリジナルでないといけません。スクールや教材の内容を模倣したりコピーしたものはポートフォリオとして通用しません。
ポートフォリオ制作の流れやNG例・良い例、最悪ポートフォリオなしでも転職する方法...などの情報が知りたい方は下記の記事もご参考に。
STEP.5｜転職エージェントで転職する
もちろん転職サイトで進めても良いのですが、エントリーする企業の数や種類、スケジュール管理や案件のピックアップ...といった転職活動を独りでするのはなかなかリスキーなんです。これも実体験ですが成功法を知らないまま進めて後から失敗してしまうこともあるので...。
なのでその辺りのサポートをしてくれる「転職エージェント」に私は頼りました。プロのキャリアアドバイザーが、求人ピックアップから資料作成や面接のサポートなど、あなたの転職を無料で徹底サポートしてくれるので、私もこれまで何度も使っています。
さらに、フロントエンドエンジニアを目指すのであれば、IT・Web業界に特化した「レバテックキャリア」が頼りになります。
業界特化のナレッジと過去の転職者のデータを駆使したキャリアアドバイザーのサポートが手厚く、エンジニアを目指すのであれば必ず活用しておきましょう。
フロントエンジニアになるための4パターンの勉強方法
この記事でもおすすめの勉強方法はまとめておきます。
勉強方法は「あなたのキャリア」「金銭状況」「割けられる時間」で慎重に見極める必要があるので、筆者の私の経験も活かして、勉強方法を選ぶ判断基準も、合わせて載せていきます。
1/4｜学習サイト等で独学する
今や主流のやり方ですが、ProgateやUdemyなどの学習サイトで独学する方法があります。かなり安価で学習ができますが、当然、何をどの程度学習するかは自分で判断していかないといけません。
ひとまず無料の範囲でプログラミングに触れてみたい人はProgateを、現役がアップする動画形式の講座で本格的に学習をしたい人はUdemyがおすすめです。
【Progate】知識をサクッと手に入れる
| 料金 | 一部だけ無料 ※ 中級以降のコースは、1,078円(税込)/月 |
| おすすめポイント | コードの記述もその反映結果も、全てブラウザ上のアプリひとつで勉強を進められます。とってもデザインの良いスライドで分かりやすくサクサクと学べるのもグッドポイント。 無料では初めのコースだけ受けられるので、試すくらいにはちょうど良いですね。有料なら全コース受講可能。 |
【Udemy】現役や講師から直接教えてもらえる感覚を
| 料金 | 講座によるが、セール価格で1講座2,000円前後 ※ 初めての人はセール価格で購入可 |
| おすすめポイント | Udemyは、学習動画を提供しているオンライン動画学習サービスです。学習本と同じくらいの価格で、現役エンジニアのリアリティのある講座を受けられるのが特徴。 Udemyにログインすればいつでもどこでもオンライン講座で学習ができるので、自分のペースで進めたい人にうってつけです。 |
2/4｜独学サポート型スクールで独学する
今の時代は独学をサポートするというコンセプトのスクールもあります。筆者の同僚や関わってきた人にも、下記のような独学をサポートするというスタンスのスクールを利用した人もいます。
詳しく説明しておくと、100種類以上の教材が学習し放題だったり、Q&A掲示板も活用できるなど、独学を支えるタイプのスクールになります。
金額も2,980円〜/月(税込)からのサブスク形式といった具合で、比較的安価に学習できるのがおすすめポイント。
上記のようなサービスを活用しつつ、独学で未経験からフロントエンドエンジニアになることは可能ですが、乗り越えないといけないポイントがあります。
- 挫折しない環境づくり
- エラー解決の適切な対処
- インプット → アウトプットを繰り返せられるか
- 完全オリジナルのポートフォリオ制作
- 近年の開発事情をどう収集するか
上記をうまく熟せる人もいれば、挫折してしまう人もいます。どのような基準で独学にトライすべきか、まとめておきますね。
【判断基準】時間のゆとりがあるかどうか
もし転職/就職までに時間のゆとりがあるのなら、独学にチャレンジしても良いでしょう。理由は失敗・挫折・寄り道をしても軌道修正できる余裕があるから。どちらにせよ独学する力はフロントエンドエンジニアにとって必須なので、今のうちに鍛えておきましょう。現役になると独学は当たり前になりますよ。
3/4｜プログラミングスクールを活用する
さて、独学の不安材料で述べた「挫折しない環境づくり」「近年の開発事情をどう収集するか」といった点ですが、費用は掛かりますが...プログラミングスクールを活用すれば万事解決できます。
プログラミングスクールの共通のメリットはざっと下記の通り。
- 現役エンジニアからのサポートを受けられる
- 学習者同士のコミュニティで挫折しない環境ができる
- ポートフォリオ制作・転職のフォローをしてくれる
現役エンジニアに相談できるタイミングが多く、開発の最新情報ももらえるし、エラーの相談もできて、他諸々のフォローも踏まえると、圧倒的に良い環境で学習ができます。
【判断基準】用意できる金銭と割けられる時間
当然スクールには数十万の費用がかかります。スクールの無料相談で適切なコースと料金を相談してから、その費用を用意できるか考えておきましょう。
そして、フロントエンドエンジニアになるまでに時間がない場合もスクールがおすすめです。プロが引いたスケジュールの基、効率よく学習できるからです。
この2つの要素を参考に、下記のおすすめスクールの無料相談も活用しながら判断していきましょう。
どのスクールもまずは無料で相談だけできて、しつこい勧誘もないので、今の学習やキャリアの悩みを話す程度に、軽く活用させてもらってOKです。
筆者のおすすめスクール
RUNTEQも有名なプログラミングスクールで、専属メンターによる学習進捗サポートはもちろん、卒業試験の実施や本格的なポートフォリオ制作サポートなど、サポートも充実しています。
またRUNTEQ運営者の菊本さんが登壇されたインタビューにある通り、プログラミングスクール卒業生使えないと言わせないほど、学習内容が徹底しているのも特徴。
4/4｜入社して実務経験を通して学ぶ
最後に、学習の質よりもゴールである転職/就職を最優先にする選択肢です。そんな事できるのか...？と少し疑問だと思いますが、筆者の私自身これまで会社で何度もそうやって入社した人を見てきています。
完全未経験OKの求人だったり、アルバイトから正社員というコースがある企業だったり、現実にある入社スタンスではあるんです。
まだ経験がなくてもOJT形式で、働きながら少しずつ技術力と知識と経験値を上げていくことができます。
【判断基準】あなたのキャリアの考え方次第
学習が曖昧な段階で入社すると、働きながら勉強もしなくちゃいけなくて余裕がなくなってきます。ただ、スクール卒の人といきなり入社した人とで、1年後にどれだけの差が出るかというと...そう大差はなかったりするんですね。
結局どちらもフロントエンドエンジニア未経験であることに変わりはないので、入社後の頑張り次第といったところです。
プログラミングスクール等で事前準備の質を高めるか、早速入社して実務経験を重視するか...結局のところはあなたのキャリアの考え方次第です。
そもそも未経験からフロントエンドエンジニアになれるのか？
結論、IT系エンジニア未経験者でも、フロントエンドエンジニアになれます。筆者の私は、大学中退後にフロントエンドエンジニアに入社しましたし、私の周りにも、プログラミングスクール卒や独学で、実現した人は多くいます。
フロントエンドやバックエンドなどWeb系エンジニアって、確かに実力主義な世界なのですが、未経験の受け入れに寛容的です。筆者の私もこれまで、未経験採用をしている企業は複数経験しています。
筆者が未経験だった頃にWeb系エンジニアになれたのは、下記の点を理解していたからと考えています。
未経験者なら特にスキル以外が採用面接で重要
正直に言うと未経験者のスキルは低いものだと、採用担当者も現役エンジニアの先輩も考えるようにしています。そうなると、スキル以外をいかにアピールできるかが重要なんですね。
エンジニア職は「独りで黙々と作業をする職業」ではなく、「他職種・同職種・さまざまな人とのチームプレーが必要な職業」です。
- 複数人のエンジニアでソースや状況をシェアしながら制作
- ディレクターと工数や仕様、制作の段取りを相談
- デザイナーとUIやインタラクション等の方針を会話
こういったコミュニケーションが日常だからこそ、ご自身の人柄やチームプレー力をアピールすることが大切です。
プログラミングスクールの無料相談に素直に甘えたこと
ロードマップでもお伝えしましたが、スクールの無料相談に素直に甘えた点も重要だと感じています。未経験者だとやっぱり学習や転職の情報が豊富でない点がキツいんです。
- 自分のキャリアに本当に必要な学習項目は何か？
- 最近のトレンドの技術やスキルセットは何か？
- 現場で本当に活きる知識は何か？
などなど、ITエンジニア未経験だとさまざまな情報に欠けています。迷ったまま学習をすると危険なので、大手の安心できる企業が運営するサービスの、無料相談等で現役やプロに相談を重ねた点は、成功に繋がっていると感じています。
※ 既にご紹介したおすすめのプログラミングスクールの無料相談一覧
転職エージェントを味方につけて採用を有利に進めたこと
未経験から入社を目指すなら特に、既にお伝えした転職エージェントが必須です。
スクールの話と同様に、転職には情報力が必要不可欠です。応募先企業が求めていることや、未経験ならではのアピールポイントなどなど...転職エージェントを味方につけるとそういった情報もアドバイザーからいただけます。
例えば、下記のステータスの人も紹介できる求人がある事があるので、トライする価値は十分にあります。
- 25歳
- 現職正社員
- 経験者数は1社（医薬品の営業職）
- ITに向けた自己研鑽 → プログラミングの学習をしているが資格はない
改めて、エンジニアの転職に強いおすすめエージェントをまとめておきます。
独学でフロントエンドエンジニアになれるのか？
ちなみに筆者の私は、独学でフロントエンドエンジニアに必須のスキルセットを学習したので、もちろん独学でも目指せます。その筆者の実体験から得たコツなどを、下記の記事にまとめておいたので、気になる人は覗いてみてください。
現役が考えるフロントエンドエンジニアにとって重要な資格
初めに断っておくと、資格がなくてもフロントエンドエンジニアにはなれます。結局のところ、筆者の経験としても資格の提示を要求されたことはなく、あればプラスといった具合です。
ただ、資格を勉強に励むことで単純にスキルアップします。中でも筆者が現役として働く多くの人関わっていく中で、学んで効果があると考える資格をまとめておきます。
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も務める優秀な社長に「基本情報技術者試験は名前の通り、エンジニア職の基礎であり、必要不可欠。この資格の知識がない人は作業担当者にはできても、プロジェクトをリードする立場には立たせ難い...。」と仰っていました。
それほど "エンジニア" を名乗るのに大切な知識が詰まっている資格となります。
まとめ
改めて、現役の筆者が考える「フロントエンドエンジニアになる秘訣」をまとめておきます。
2パターンの仕事内容
| クリエイティブ系 | 企業のコーポレートサイトや商品告知用のWebページなど、Webサイトを実装するタイプのフロントエンドエンジニア。マークアップエンジニアやコーダーといった呼ばれ方をしている。 |
| アプリ開発系 | 会計ソフトや在庫管理アプリ、ECサイトなど、Web上で動くアプリケーションを構築するタイプのフロントエンドエンジニア。企業や現役エンジニアとしても、フロントエンジニアといえばこちらの認識をする人が多い。 |
必要なスキルセット
HTML/CSS、JavaScript、バージョン管理システム（Git / GitHub）、Linuxコマンド、JavaScriptフレームワーク
筆者が実際に成功させたロードマップ
- STEP.1｜現役やプロの話を聞いて学習〜転職の流れを明確にする
- STEP.2｜自分に最適な学習法を見極める
- STEP.3｜期間を決めて猛勉強
- STEP.4｜完全オリジナルのポートフォリオ制作をする
- STEP.5｜転職エージェントで転職する
学習前にプログラミングスクールの無料相談で現役の話を聞くことが大切
RUNTEQも有名なプログラミングスクールで、専属メンターによる学習進捗サポートはもちろん、卒業試験の実施や本格的なポートフォリオ制作サポートなど、サポートも充実しています。
またRUNTEQ運営者の菊本さんが登壇されたインタビューにある通り、プログラミングスクール卒業生使えないと言わせないほど、学習内容が徹底しているのも特徴。
転職の際は転職エージェントに頼ることが重要
