- フロントエンドエンジニアは自分に向いているのか？
- 現場の実情も交えて「つらさ」や「適性のある人の特徴」が知りたい
- バックエンド等他の職種とも比べて検討したい
上記のような悩みや疑問を持っている人に向けて、この記事では現役のフロントエンドエンジニアとして活躍している筆者が、実体験ベースで向き不向きや職場の実情を赤裸々にまとめています。
さぁフロントエンドエンジニアになろう！必要なスキルは何か...といきなり学習に突っ走る前に、冷静に向き不向きを考えるのは賢い選択です。
実際に採用面接の時、他職種からの転職だと「なぜフロントエンドエンジニアになろうとしたのか？」といった質問があります。こう言う場面で納得感のある回答を出せるのは、自分の適性をよく理解している人になります。
客観的に見てなぜ向いているのか...逆にフロントエンドエンジニアの辛い実情を分かった上で乗り越えられそうか...この辺りを考えながら記事を読み進めていただければと思います！
WRITER
Tsukasa｜現役エンジニア
Frontend Engineer / Web Creator / SEO Writer / Web Media Manager
現役のフロントエンドエンジニアで、「在庫管理アプリのフロントエンドリード」「プロ野球球団公式サイトの運用保守リーダー」「ECサイト実装」「Webサイト・LP実装」などの実績を積みながら、現在もWebクリエイティブ会社で活躍中。未経験からフロントエンドエンジニアに転職成功した実体験も活かして、当メディアを運営させていただいております。
AID-TRUTHは、バックエンドエンジニアやディレクター、人事で活躍する人など、現役で活躍する人たちが実体験を活かしてコンテンツ発信をしています。
INDEX
フロントエンドエンジニアに向いている人の8つの特徴
フロントエンドエンジニアに向いている人の特徴を、筆者が実際に現役で働く中で感じたことや、これまで見てきたエンジニア像、採用担当者との会話の中から得た情報で整理してみました。
それぞれ簡単に説明した後「実務で働く現役目線で実際どうか？」という内容も盛り込んでいるので、ご参考にください。
- 柔軟なコミュニケーションができる
- デザインやバックエンドなど他職種の技術にも関心がある
- オーダーに対して寛容的でサービス精神がある
- 品質重視な場合もスピード重視な場合も臨機応変に対応できる
- 分からない事があっても試行錯誤できる
- 自己管理力・自走力がある
- 勉強意欲のある・最新技術に関心がある人
- ゲーム（スキル構築・RPG・モノ創り系）が好き
1/8｜多様な職種の人と円滑なコミュニケーションができる
フロントエンドエンジニアは、案件によってはバックエンドエンジニアと連携したり、デザイナーと連携したり、仕事毎に関わる人も変わってくるので、他職種と比べても関わるメンバーが多い職です。そのため、どんな職種の人とも柔軟にコミュニケーションを取らないといけないので、この辺りに抵抗がない人の方が向いています。
実務で働く現役目線で実際どうか？
実際に筆者はこれまで、バックエンドエンジニアと協力してECサイトを制作したり、デザイナーとアニメーションを相談しながらWebサイト制作をしたり、もちろん常にディレクターとは連携して案件に取り掛かっているので、どんな人とも円滑なコミュニケーションが取れる方が向いていますよ。
2/8｜デザインやバックエンドなど他職種の技術にも関心がある
上記に伴って、他職種とのコミュニケーションが必要だからこそ、デザインツールやバックエンドの環境を触る機会もあります。そのため、自分の専門外の技術やツールに関しても、情報をキャッチアップする努力ができたり、素直に分からない事を他職種の人に相談できるような人の方が向いています。
実務で働く現役目線で実際どうか？
筆者は過去の採用面接でも「Photoshopなどのデザインのツールはどれくらい使用できますか？」と尋ねられた経験は沢山あります。業務でも自分がデザイン制作をしないにしても、画像の書き出しやテキスト修正くらいの温度感でPhotoshopやIllustrator、Figmaは頻繁に触っています。
3/8｜オーダーに対して寛容的でサービス精神がある
ディレクターやデザイナー、クライアントなど多方面から意見を求められたり指示を出される場合があるので、寛容的でサービス精神のある人の方が向いています。時には自分の拘りも大切ですが、普段の業務では寛容的に周りに合わせられる特性がフロントエンドエンジニアには活きています。
実務で働く現役目線で実際どうか？
私が今まさに対応している案件だと、LP（ペラいちのWebページ）の制作前にデザイナーから「参考サイトのようなアニメーションってできるんですか？」とか「良いインタラクション何か知ってますー？」とか相談を受けていますし、定時後にディレクターから細かい更新のお願いをされることもあります。こんな風に、いろんな人からの相談を受けたり、細かいお願いにも、寛容的に応えられる人は適性があると思いますよ。
4/8｜品質重視な場合もスピード重視な場合も臨機応変に対応できる
ディレクターと連携しながら進めていると納期に追われたり、複数案件を同時にお願いされることもあります。そう言った時に重要になるのが「クオリティ」と「スピード」を分けて考えられるか。案件によっては、テンプレ化された実装をスピード感良く熟す必要があるケースも多いので、臨機応変な対応力も適正の判断材料になります。
実務で働く現役目線で実際どうか？
全ての案件を「クオリティ重視」で対応できるほど、クリエイティブや開発の業界は甘くありません。筆者はこれまでクリエイティブ系の会社や開発系の会社の経験もありますが、質よりもスピード感を重視して、効率的に仕上げて欲しいと言われる案件はいくらでもあります。このバランスを取れる人の方が向いていますよ。
5/8｜分からない事があっても試行錯誤できる
いくら技術力を上げても実務で開発をしていると「どう実装したら良いか？なぜエラーが起きているのか？保守しているアプリのベストな追加機能は何か？」のように分からない事がいくらでも出てきます。
予期せないトラブルや問題に対して、トライアンドエラーを繰り返して、試行錯誤しながら課題に取り組める人が、フロントエンドエンジニアには向いています。
実務で働く現役目線で実際どうか？
例えば、ディレクターから「顧客のWebサイトの表示速度が異様に遅いから解決したい」と相談された事があります。結果、重たい画像の読み込みが優先されていた事が原因で、JavaScriptコードを修正して解決できたのですが...こういう時って技術力よりも、答えがハッキリ見えない問題に対しての "考える力" が試されると実感しています。
6/8｜自己管理力・自走力がある
フロントエンドエンジニアは、任された仕事に対して自分で工数管理して進めるケースが多いです。そもそも、ディレクターから「どれくらいの工数でできそう？」と聞かれる事もあるので、慣れてきたら自分の裁量を理解して、管理する力が必要です。
このような自己管理力や、自分の力でタスクを推進する自走力がフロントエンドエンジニアには必要です。
実務で働く現役目線で実際どうか？
未経験からフロントエンドエンジニアになりたての頃は、先輩もよく見てくれたり、ディレクター側から進捗確認をしてくれたりはしていました。とは言え、慣れてきたりある程度キャリアを積んだりしてくると、2,3件プロジェクトを抱えている状態で「〇〇のプロジェクト入れそう？」と訊かれたり、自分で裁量を見極めないといけない場面が多くなりました。
7/8｜勉強意欲のある・最新技術に関心がある人
開発・クリエイティブ系の職種には、自己学習が付きものです。Web業界は特に、最新技術やトレンドの移り変わりが激しく、フロントエンドエンジニア自身も日頃からアンテナを張って最新技術や情報をキャッチアップする必要があります。
新しいものに関心があって、積極的に勉強したいと思える人は、フロントエンドエンジニアに向いています。
実務で働く現役目線で実際どうか？
筆者の私は、何度か転職も経験していますが、前の職場で使っていたちょっと古いプログラミング言語が、転職後の職場では主流ではなくて、応用的な技術が要求された経験があります。このような時に興味関心を持って、新しい技術をキャッチアップできる人が、向いているなと実感しています。
8/8｜ゲーム（スキル構築・RPG・モノ創り系）が好き
最後に、ゲーム好きの人はフロントエンドエンジニアに向いている傾向がありますよ。冗談じゃなくて、例えば、モンハンでのスキル構築とか、主人公を育成しながら成長させるRPGゲーム、マリオメーカーなど創る系のゲームなど...こういった系列のゲームって、エンジニアと共通点が多いんです。
フロントエンドエンジニアも、自分の職種に必要なスキルセットを構築しないとだし、需要のあるプログラミング言語を習得して自分を育成したりと、共通項が多かったりするんです。
実務で働く現役目線で実際どうか？
面接でそんな会話があるのか...！といった話ですが、最近転職した会社の最終面接で「何か好きなゲームとかありますかー？」と実際に訊かれました。その時に、Creative Universeというクリエイティブ系ゲームの話をしたら、エンジニア職との共通点なんかの話にもなって、実際凄く盛り上がりました。なので、これもフロントエンドエンジニア職の適性を確認できる立派な項目かもしれませんね。
フロントエンドエンジニアに向いていない人・「つらい」と言われる実情
逆に、フロントエンドエンジニアに向いていない人の特徴も併せて知っておくべきなので、この辺りを筆者のリアルな体験談をベースに伝えていきます。
それから「フロントエンドエンジニアはつらい職業だ」ともよく耳にします。この辺りの実情も合わせてまとめているのでご参考にください。
- 他業務の影響を受けやすい
- 納期に追われやすく残業が不規則
- 納品前のブラウザ・OSチェックの責任・負担が重い
- 他職種のツール・環境を扱う場面が多い
- 未経験時は特にマークアップ・コーディングを任される場面が多い
1/5｜他職種の業務の影響を受けやすい
フロントエンドエンジニアは他職種の人とコミュニケーションを撮る機会が多いからこそ、ディレクターやデザイナーの業務の影響を受けやすいです。仕様変更や細かい文言修正、デザインの調整など、他職種の業務の影響を比較的受けやすいです。
ディレクターやデザイナーがクライアントから細かい修正を指示出しされたら、致し方なくフロントエンドエンジニアに降りてきます。まぁ私もすっかり慣れましたが...。他エンジニアと比べると少しつらい点でしょう。
2/5｜納期に追われやすく残業が不規則
上記に伴って、ディレクターと連携するタイミングが多いということは、直に納期に追われやすいです。クライアントからの突然の納期変更依頼や、サービスローンチの調整等で、急に納期が変わることもあり、残業も不規則な場合が多いです。
こうやって、つらい点に挙げているのは「"直に" 影響を受ける」という点がポイント。想像してみて欲しいんですけど、週末の18:00頃にディレクターがクライアントから優先度の高い指示を受けたら、フロントエンドエンジニアとしては対応する他ありません。日によっては納期の影響で残業が不安定になることは仕方ありません。
3/5｜納品前のブラウザ・OSチェックの責任・負担が重い
Webサイト制作でもWebアプリ開発でも、フロントエンドエンジニアは納品前に「ブラウザ・OSチェック」を必ずしなくてはいけません。Webページは、Chrome / Safari や Windows / Mac など表示するアプリ・機器によって表示が変わります。納品前の最終チェックはチームとして必須で、もし問題があればフロントエンドが修正しなければいけません。
私的に、これこそフロントエンドエンジニアならではのつらさ、と感じています。他エンジニアも環境毎の調整はあると思うけど、Webのフロントは特に環境の影響が強いんです...。プログラミング言語はまだしも、CSSが特に不安定な上に答えが明確じゃなく、つらいと感じる人は多いです。
4/5｜他職種のツール・環境を扱う場面が多い
フロントエンドエンジニアは、簡単な画像・文言修正ならデザイナーの代わりにPhotoshopやFigmaをサッと修正する場面が多いです。また、バックエンドエンジニア側が構築した環境に合わせるため、Docker等のツールを使う場面もあったり、比較的に他職種のツールや環境を触るケースが多くあります。
「あまり勉強していないツールなのに使わないといけないのか...」と感じる人にとっては特につらいと思います。私的には、扱えるツールや環境の幅が勝手に広がるので得な気分しかしないけど...まぁ人によりますね。
5/5｜未経験者は特にマークアップ・コーディングを任される場面が多い
プログラミング・エンジニア職が未経験だと、いきなり皆さんが想像しているようなプログラミングチックな実装を任されない場合もあって、初めは HTML/CSS、簡単なJavaScriptの実装、といったケースもよくあります。「もっと難しい事をできると思ったのにつらい...」と感じる人もいます。
正直いっちゃいますが、これは仕方ないです！！初心者であれば当たり前の話...。でも、メリットでも伝える通り、成果が目に見えて分かりやすいので、焦らず半年、1年、と実績を積めばアサインされる案件の幅と難易度も上げられます。
筆者が実際に面接で経験した質問集&回答例
もしこれから採用面接を控えていて、フロントエンドエンジニアの向き不向きを探っている人がいれば、下記の記事もご参考にください。
私がこれまでの採用面接で実際に経験してきた「質問集&回答例」をまとめています。
【現役トーク】バックエンドエンジニアと比べたフロントエンドエンジニアの向き不向き
この記事を読んでいる人の中には、まだバックエンドエンジニア等の他の職種にしようか検討中の人もいるかと思います。
当メディアでは、筆者のフロントエンドエンジニアの他にバックエンドエンジニアの歴が長い人もいるので、比較するために下記の点を話してみました。
現役のバックエンドエンジニア / Web CreatorのTakagiです。私は、今はフリーランスですが、正社員としてバックエンドエンジニアに在籍していた頃もあるので、その時も思い返しつつフロントエンドとの比較を考えていきます。
Takagi のプロフィールページ
【前提】バックエンドとフロントエンドの仕事内容
比較の前に、そもそもバックエンドエンジニアとフロントエンドエンジニアの仕事内容について、簡単にまとめておきます。
バックエンドエンジニアの仕事内容
例えば、ファッション系の在庫管理アプリを制作するとしたら、バックエンドはデータベースの設計をしたり、在庫登録・修正等のアクションをフロントから受けた際の、データベース連携処理などの裏側のシステム関連を担います。
扱う言語やツールは、PHP、Ruby、Java、Python、JavaScript（Node.js）等のプログラミング言語や、SQL等のデータベース言語、Docker等の環境構築ツール、などです。
フロントエンドエンジニアの仕事内容
フロントエンドは「クリエイティブ系」「アプリ開発系」の2パターンに分けられると考えると、もう少し職種の理解ができます。
「クリエイティブ系」は、企業のコーポレートサイトや商品告知用のWebページなど、Webサイトを実装するタイプで、「アプリ開発系」は、会計ソフトや在庫管理アプリ、ECサイトなど、Web上で動くアプリケーションを構築するタイプとなります。
【議論】バックエンドの現役とフロントエンドの現役が思う現場の実情
ここからは、バックエンドエンジニアのTakagiさんとお話した実情をお伝えしていきます。
フロントエンドエンジニアの「向き不向き」をまとめてきたんですけど、バックエンドエンジニアと比較すると、実際のところどうですか？
「辛さ」という話で言うと、正直のところバックエンドエンジニアでも似た話は多いですよ。例えば「最新の技術トレンドも追う必要がある」とか「納期に追われやすい」等は、フロントエンドに限った話じゃないし、同じWeb系エンジニアだからこその共通点は多いと感じています。
それから、フロントエンド側は「ブラウザ・OSチェックの荷が重い」という点はあると思うんですが、バックエンド側は「携わるシステムに不備があった場合の責任が大きい」といった似たようなつらさがあります。
確かにそうですよねー、私も記事を書きながら「フロントエンドに限った話じゃないよな...」とは感じていました。
とは言え、バックエンドエンジニアは逆に「業務で関わる人が狭くなりがち」というデメリットがあると思います。今携わっている案件もなんだかんだ「フルスタックエンジニア」「テックリード」「テスター」といったように、エンジニア周りの人と密に関わっているイメージだから、フロントエンドとは少し違うかもしれません。
なるほど、やっぱりバックエンドエンジニアと比較すると、フロントエンドの方が関わる人のジャンルは多いように思えます。伸ばせられる技術力・スキル的にはいかがでしょうか？
最近冨岡さんと話していて思ったのですが、バックエンドの方がサーバーの理解やデータベース設計、多様なプログラミング言語に触れられるから、エンジニアとしては鋭い技術力が身についていくのかも、と感じています。
まぁ確かにフロントエンドエンジニアの人は、サーバーやデーターベースを触るほどの機械は少ないですからね。とは言え、アプリ開発なんかをしていると JavaScriptフレームワークの React.js や Vue.js で組んだり、サーバーとの通信、API連携といったエンジニアチックな業務は沢山あります。
...と話していると、詰まるところ「自分にとって適性のある職を選ぶべき」とは落ち着きました。
【結論】フロントエンド・バックエンドの共通点は多い
バックエンドでもフロントエンドと似たようなつらさもあれば、業務や関わる人といったところでは違いも出ていました。
バックエンドエンジニアと比較して「改めてフロントエンドエンジニアの方が自分には向いていそう...」と思ってもらえたら何よりです。
さて、Takagiさんとの会話の中でも、技術力やスキルの話題がありました。次の見出しからは、フロントエンドエンジニアを目指すための必須スキルや実務レベルのスキルセットをまとめていきますね。
フロントエンドエンジニアに必要なスキルセット｜未経験 〜 実務レベル
フロントエンドエンジニアの向き不向きが分かったところで、ここから実際にフロントエンドエンジニアなるには、どんなスキルセットが必要で、どんな勉強をすべきか、というお話をしていきます。
まずは未経験者が習得必須のスキルセットを見ていきましょう。
未経験者に必要不可欠なスキルセット
Webサイト制作などのマークアップ・クリエイティブ系も、アプリ構築などの開発系も、どんな場合でも必須のスキルになります。初めに下記の勉強は必ず進めるようにしましょう。
| スキルセット | 解説 | 難易度 |
|---|---|---|
| HTML/CSS | Webページ制作は、ここはヘッダー・フッター、このテキストは見出し・段落といった構造をHTMLで作って、何色にするか、どんな大きさにするかといった見た目をCSSで形作っていく流れとなります。 これがマークアップと言われる作業で、Webサイト制作もWebアプリ開発でも必須の仕事です。クリエイティブ系・アプリ開発系どちらであっても、まずはHTML/CSSを必要最低限インプットする必要があります。 | ☆☆★ |
| JavaScript | 構造・見た目の他に、Webページに動きや機能を追加するためにJavaScriptが必要となります。 分かりやすい例はWebページのポップアップ。「このボタンをクリックするとブラウザからポップアップが出るようにする」という機能はJavaScriptを用いる必要があります。 さらに高度な領域になると、クリエイティブ系であればスクロールと連動したアニメーションや、アプリ開発系だと会計ソフトの入出力処理など、JavaScriptはフロントエンドエンジニアにとって必須のスキルとなります。 | ☆★★ |
| バージョン管理システム (Git / GitHub) | 「Git」に代表されるツールのことで、今までに書き換えたソースの履歴を全て残したり、チームでソースの状況をシェアしたり、制作現場では必ずと言って良いほど活用されています。 未経験から就職/転職する場合は、まずは簡単な作業から入ることにはなりますが、そもそも導入していないプロジェクトが珍しいくらいなので、入社前に身につけておくべきでしょう。 | ☆★★ |
| Linuxコマンド | バージョン管理システム（Git/GitHub）を用いる際やテストアップ環境への接続をする際に、ターミナル（Mac）やコマンドプロンプト（Windows）というソフト内で「Linuxコマンド」という専用の記述を打ち込むイメージです。 学習方法としては、バージョン管理システムを学習する際に自然とおまけで学ぶことになるので、あまり時間をかけすぎなくてOK。 | ☆☆★ |
| JavaScriptフレームワーク | フレームワークとは、高度なJavaScriptのソースを簡易的に記述できる便利ツールのようなものです。大規模なWebサイトやアプリ開発になると、ハイレベルな仕組みが多くなり、JavaScriptでそのまま書くとなると時間も難易度も格段に上がるので、必須の技術となります。 ReactやVue等が代表的なフレームワークです。気になる人は下記の解説記事を参考にしてみてください。 ・Reactとは？特徴やできることをわかりやすく解説｜レバテックキャリア ・Vue.jsとは？特徴やjQueryとの違いをわかりやすく解説｜レバテックキャリア | ★★★ |
転職後に案件によって必要なスキルセット
案件や企業によっては必要になるスキルセットをまとめています。例えば、jQueryやWordPress、他の記事では「必要だ」と書かれているものもあるんですが、現役目線的には正直「企業の制作方針」や「案件の対応言語」によって使わない場合もあるな...と考えています。
習得しないとフロントエンドに転職できないレベルじゃないので、余裕があれば少し触ってみる程度で大丈夫ですよ。
| スキルセット | 解説 | 難易度 |
|---|---|---|
| jQuery (JavaScriptライブラリ) | jQueryは正直もう使われているプロジェクトが少なくなってきています。昔に組まれたサイトの拡充や保守に入る時に、仕方なく使う...といった温度感が多いです。 正直いって、jQueryはJavaScriptを（人によっては）書きやすくなるようにしたライブラリで、大元のJavaScriptをよく理解しておけば初見でも内容把握に時間がかかりません。 なので、「特定の場面でしか使わないから」「JavaScriptの理解の方が重要だから」という点で、優先度は高くはなく「触ったことはある」くらいで十分ですよ。 | ☆☆★ |
| WordPress (Open CMS) | WordPressはHTML/CSS・JavaScript等の専門技術のない人でも、Webサイトの更新・デザイン変更ができるCMS（コンテンツ管理システム｜Contents Management System）の一つです。 なのですが、現役で働く私的には「WordPressを扱う案件もたまにあるよね〜」というくらいの感覚です。最近では、費用をよく掛けられるプロジェクトだと、Next.js等のフレームワークを基準にCMS機能を組み込んだり、クライアントが更新するのではなく保守更新まとめて制作会社に委託していたりするケースも多く、WordPress（Open CMS）が必須スキルとは言えません。 こちらも入社後に必要であれば、働きながらインプットしていく...といった流れで構いません。 | ☆★★ |
| PHP | WordPressをメインで扱う制作案件であれば、フロント側もPHPの理解が必須になりますが、そもそもWordPressを扱う案件がほぼない企業に入社する場合は、フロントエンドエンジニアがPHPを触る機会は少ないです。 本格的にECサイトや新規サイトシステムを組むのであれば、フロント側もPHPを理解してバックエンドエンジニアと連携する場合もありますが...正直、未経験者が転職してからしばらくの間は、バックエンド言語まで手を伸ばさなくてもOKです。 | ★★★ |
| デザインフレームワーク (CSSフレームワーク) | デザインフレームワーク（CSSフレームワーク）とは、ボタンやモーダルなどWebサイトでよく使うデザインを予めテンプレートとしてまとめられている便利ツールです。使う側は、テンプレートを読み込んで、ルール通りにHTML/CSSを書けばデザインが適用されます。 例えば最近では、TailwindやChakra UI、Bootstrapなどが実務でもよく使われています。 なのですが、こちらもプロジェクトによって使う使わないが分かれます。Webデザイナー側の工数があまり割けない場合や、UIルールを厳密に決めないといけず、フレームワークを使った方がスムーズな場合など、利用場面はケースバイケースです。 | ☆☆★ |
実務レベルのスキルセット
最後に、フロントエンドエンジニアになってからも学習を続ける必要があるので、実務レベルを更に強固にできるスキルセットをまとめておきます。優先度については私の主観もありますが、今まで携わったプロジェクトを元にリストアップしています。
| カテゴリー | スキルセット | 優先度 | 難易度 |
|---|---|---|---|
| 【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等） ・工数管理 | ☆★★ | ☆☆★ |
上記全てのスキルセットの詳しい解説は、下記の記事の「実務レベルに必要なスキルセット」の見出しでえ、すこぶる詳細にまとめているのでご参考にください。
フロントエンドエンジニアになるための3パターンの勉強方法
この記事でもおすすめの勉強方法はまとめておきます。
勉強方法は「あなたのキャリア」「金銭状況」「割けられる時間」で慎重に見極める必要があるので、筆者の私の経験も活かして、勉強方法を選ぶ判断基準も、合わせて載せていきます。
1/3｜独学サポート型スクールで独学する
今の時代は独学をサポートするというコンセプトのスクールもあります。筆者の同僚や関わってきた人にも、下記のような独学をサポートするというスタンスのスクールを利用した人もいます。
詳しく説明しておくと、100種類以上の教材が学習し放題だったり、Q&A掲示板も活用できるなど、独学を支えるタイプのスクールになります。
金額も2,980円〜/月(税込)からのサブスク形式といった具合で、比較的安価に学習できるのがおすすめポイント。
上記のようなサービスを活用しつつ、独学で未経験からフロントエンドエンジニアになることは可能ですが、乗り越えないといけないポイントがあります。
- 挫折しない環境づくり
- エラー解決の適切な対処
- インプット → アウトプットを繰り返せられるか
- 完全オリジナルのポートフォリオ制作
- 近年の開発事情をどう収集するか
上記をうまく熟せる人もいれば、挫折してしまう人もいます。では、独学にトライすべきか、その決め方をまとめていきますね。
【判断基準】時間のゆとりがあるかどうか
もし転職/就職までに時間のゆとりがあるのなら、独学にチャレンジしても良いでしょう。理由は失敗・挫折・寄り道をしても軌道修正できる余裕があるから。どちらにせよ独学する力はフロントエンドエンジニアにとって必須なので、今のうちに鍛えておきましょう。現役になると独学は当たり前になりますよ。
もしフロントエンドエンジニアを独学で目指したいと考えている人がいれば、下記の記事をご参考にください。
2/3｜プログラミングスクールを活用する
さて、独学の不安材料で述べた「挫折しない環境づくり」「近年の開発事情をどう収集するか」といった点ですが、費用は掛かりますが...プログラミングスクールを活用すれば万事解決できます。
プログラミングスクールの共通のメリットはざっと下記の通り。
- 現役エンジニアからのサポートを受けられる
- 学習者同士のコミュニティで挫折しない環境ができる
- ポートフォリオ制作・転職のフォローをしてくれる
現役エンジニアに相談できるタイミングが多く、開発の最新情報ももらえるし、エラーの相談もできて、他諸々のフォローも踏まえると、圧倒的に良い環境で学習ができます。
【判断基準】用意できる金銭と割けられる時間
当然スクールには数十万の費用がかかります。スクールの無料相談で適切なコースと料金を相談してから、その費用を用意できるか考えておきましょう。
そして、フロントエンドエンジニアになるまでに時間がない場合もスクールがおすすめです。プロが引いたスケジュールの基、効率よく学習できるからです。
この2つの要素を参考に、下記のおすすめスクールの無料相談も活用しながら判断していきましょう。
どのスクールもまずは無料で相談だけできて、しつこい勧誘もないので、今の学習やキャリアの悩みを話す程度に、軽く活用させてもらってOKです。
筆者のおすすめスクール
RUNTEQも有名なプログラミングスクールで、専属メンターによる学習進捗サポートはもちろん、卒業試験の実施や本格的なポートフォリオ制作サポートなど、サポートも充実しています。
またRUNTEQ運営者の菊本さんが登壇されたインタビューにある通り、プログラミングスクール卒業生使えないと言わせないほど、学習内容が徹底しているのも特徴。
3/3｜入社して実務経験を通して学ぶ
最後に、学習の質よりもゴールである転職/就職を最優先にする選択肢です。そんな事できるのか...？と少し疑問だと思いますが、筆者の私自身これまで会社で何度もそうやって入社した人を見てきています。
完全未経験OKの求人だったり、アルバイトから正社員というコースがある企業だったり、現実にある入社スタンスではあるんです。
まだ経験がなくてもOJT形式で、働きながら少しずつ技術力と知識と経験値を上げていくことができます。
【判断基準】あなたのキャリアの考え方次第
学習が曖昧な段階で入社すると、働きながら勉強もしなくちゃいけなくて余裕がなくなってきます。ただ、スクール卒の人といきなり入社した人とで、1年後にどれだけの差が出るかというと...そう大差はなかったりするんですね。
結局どちらもフロントエンドエンジニア未経験であることに変わりはないので、入社後の頑張り次第といったところです。
プログラミングスクール等で事前準備の質を高めるか、早速入社して実務経験を重視するか...結局のところはあなたのキャリアの考え方次第です。
もし今の状態で転職に踏み切ろうと考えている人は、下記の転職エージェントを必ず活用しましょう。専属でキャリアアドバイザーが付いてくれて、条件のヒアリング、ES・面接対策、模擬面接、企業個別対策、内定後のフォロー...といったように0から100までサポートしてくれる無料サービスです。
IT・Web業界のエンジニア・クリエイターに強い、大手のエージェントを数点まとめておくので、簡単な無料相談から今の悩みを打ち明けてみましょう。
フロントエンドエンジニアのロードマップを参考にしよう
勉強方法について、まだ明確に決めきれないと言う人は、学習から転職までの道導となるロードマップを参考にするのも良いかもしれません。
下記の各フェーズごとに、現役の筆者の実体験ベースでまとめた記事があるので、興味があればご参考にください。
- Phase01. 未経験からの学習
- Phase02. ポートフォリオ制作
- Phase03. 転職・キャリアアップ
- Phase04. 実務レベル
- Phase05. ハイレベル：アプリ開発
- Phase05. ハイレベル：クリエイティブ
