【現役エンジニアによる】未経験からフロントエンドエンジニアへのロードマップ

今日は、完全未経験の方がフロントエンドエンジニアになるためのロードマップを紹介する。

僕自身、数年前に全くの未経験からWebエンジニアに転職した。現在は、オーストラリアの会社で、フロントエンドエンジニアとして働いている。ちなみに、一つ前の会社では、フルスタックエンジニア（フロントエンドエンジニア＋バックエンドエンジニア）として働いてた。

僕がエンジニアになるために独学していた頃、

「学ぶことが多すぎて、何をどこまで学習したら良いのかわからない」

という不安と常に闘っていた。

最近の副業、プログラミング、フリーランスブームの前だったこともあり、これだ！というような参考になる記事をオンライン上で見つけることが出来なかった。独学もしたが、結局不安を解消できず、プログラミングスクールに通うことを決めた。

僕は今でも、転職・キャリアチェンジを狙う方には、スクールに通う、もしくはメンター付きのコースを受講することを薦めている。それは、プログラミングを独学し転職まで持っていくのは相当に辛いし、時間がかかるからだ。詳細はプログラミングを独学し就職するのは無理に近い【営業からエンジニアに転職した僕の経験談】でまとめている。

プログラミングを独学し就職するのは無理？【営業からエンジニアに転職した僕の経験談】こんにちわ！シドニーでフロントエンドエンジニアとして働いているワタです。 今日は、「初心者がプログラミングを独学し就職するのは無理？と...

独学は実際相当きついが、どうしてもお金のない方や、若い学生さんで時間もたっぷりある方が少しでもスムーズに独学を進められるよう、現役エンジニアの僕自身が「フロントエンドエンジニアになるためのロードマップ」を作成した。フロントエンドと限定しているが、フルスタックのWebエンジニアを目指すかたも、フロントエンド部分などは参考にして頂いて問題ない。

日本だけでなく海外でも多くの日本人エンジニアが活躍してくれるような未来を願っている。

今、フロントエンド界隈は最高に盛り上がっており、求人もいくらでもあるので、未経験からエンジニアを目指す方には、自信を持ってお勧めしたい職種がエンジニアだ。

独学でフロントエンドエンジニアになるための勉強法【ロードマップ】

まずは、フロントエンドエンジニアのどこを目指すのかを、明確にしよう。

「フロントエンドエンジニア」と一言に言っても、色々なフロントエンドエンジニアがいる。例えば、Wordpressのカスタマイズを主に扱う人、JavaScritpは書けないが、HTMLとCSSとデザインに強い人などだ。ここで僕たちが目指すのは、

海外でも通用する最新技術でプロダクトを開発するモダンなフロントエンドエンジニア

である。

どうせ目指すのなら、求人数が多く、年収も高く、そして、これからも必要されるフロントエンドエンジニアを目指すべきだろう。

モダンなフロントエンドエンジニアに必要なスキル

「フロントエンドエンジニア　言語」などのキーワードでググっても色々な技術、言語がヒットして、何を勉強したら良いのか混乱しないだろうか？

例えば、HTML, CSS, JavaScript, JQuery, Ruby on Rails, React, Angular, Vue, MySQL, PHPなどなど。これらは、言語、フレームワーク、ライブラリーが混在している。 初心者がこんなにたくさんの技術に手をつければ、間違いなく混乱し、どれも中途半端な学習になるだろう。

よって、まずはモダンなフロントエンドエンジニアに最低限必要なスキル、技術に絞って列学習を進めるべきだ。

最低限必要なスキル・技術は以下の通り。

1. Git(バージョン管理システム)&Github(Gitを利用したWebサービス)の基礎
2. HTMLの基礎（プログラミング言語） 
3. CSSの基礎（プログラミング言語）
4. JavaScriptの基礎（プログラミング言語）
5. React.jsの基礎（JavaScript ライブラリー）

これはとても重要なポイントなので覚えておいて欲しいが、○○の基礎と書いているように、完璧に身につける必要はない。これだけでも、全てを完璧にマスターしようとすれば一生かかるかもしれません。

それぞれ、解説していこう。

まず、「1.のGit&Github」は、必須なので諦めて、根気よく学んで欲しい。これは、ちゃんとした開発の現場で働けば、必ず使用する。Githubでなくても、似たようなものにBitbucketなどもあるが、まずはGithubで問題ない。

簡単なイメージを伝えると、黒い画面上で操作するあれだ。最初は、拒否反応がでるかもしれないが、それが普通だと思う。人間には適応能力という力があり、次第に慣れてくるので心配無用だ。

「２、３、４のHTML、CSS,　JavaScript」は、フロントエンジニアの核となる必須のプログラミング言語だ。この言語をどこまで深く理解しているのかが、後のエンジニアとしての成長に大きく関わってくる。

フレームワークやライブラリーには流行り廃りがあるが、この3つの言語をちゃんと理解していれば、今流行のReactに変わり、新しいフレームワークやライブラリーが台頭したとしても、スムーズに新しい技術を身に付けることができるだろう。

しかし、この段階で全てを身に付ける必要はないことを再度強調しておく。

コードエディターを何を使えば良いか？

完全初心者の場合には、何を使えば良いのさっぱりわからないだろう。そんな時には、マイクロソフトさんのVisual Studio Codeを使えば全く問題ない。完全無料でこんなツールを使えるなんて、素晴らしい時代だと思う。私の周りのエンジニアの９割がVisual Studio Codeを使っていて、残りの１割がVimといった感じだ。

【学習ステップ１】: それぞれの基礎を学んでいく

まずは、狭く浅く学んでいこう。ファーストステップとしておすすめなのは、Progateさん。基礎の基礎から学べ、それぞれの分野に絞って学習できるので、完全素人向きである。

まずは、下記のコースを最低２サイクルはやっておこう。まだ、不十分だと感じれば３サイクルやってもいいだろう。「チャレンジしてみよう！」の道場コースも、自分の頭で考えて、きちんとやることが大切。そして、初心者の内はコピペをしないで、きちんとコードをタイプすることが大切だ。

1. Git
2. Command Line
3. HTM&CSS
4. JavaScript

他のコースにも目がいくかもしれないが、ここは焦らず、上記４項目の基礎をしっかりおさえよう。

２〜３サイクル回し終えたら、次のステップに進もう。

1. Sass(CSSより便利なCSSのようなもの)
2. React（世界的に最も有名なJavaScriptライブラリ。Facebook社が開発。）

これも理想的には２サイクルは回して欲しい。

ここまでこれたあなたは、いよいよ小さなプロダクトを作る段階だ。まだまだ不安があるだろうが、挑戦してみよう。

Progateさんは、入門中の入門と行った感じなので、全くのプログラミング素人の方が最初に学ぶ教材に向いている。しかし、転職となれば、レベルアップしないといけない。

ここで、「Javascriptの学習がまだ足りない」と感じる方にはAndrewさんの「The Modern JavaScript Bootcamp (2019) 」が、僕のおすすめだ。このコースだけで相当な学習量があるので、コスパの良い教材だし、完全初心者向けのコースだ。英語となるが、エンジニアとして働くからには英語にも慣れていく必要があるので、英語が苦手な方にもぜひ挑戦してほしい。

【学習ステップ２】: 学んだスキルを使い、チュートリアルに沿って何か作る

完全初心者の方が０から何か作るのは、まだまだ難しい段階だと思う。特に、Reactを採用した場合の開発環境を構築するのが最初のハードルだ。

ここは自分のレベルにあったチュートリアルを選び、それに沿って、何か作ってみよう。ここでチュートリアルを選ぶ際の重要なポイントを伝えておく。

「ステップ１で勉強した技術を使ったものを選ぶ。」

つまりReact のチュートリアルを選べという意味だ。間違っても、ここでRubyとか、PHPとか、JQueryとかを含んだものを選択してはならない。

あなたは、React周りの学習をして、Reactでポートフォリオを作成し、Reactを採用している会社で働く計画だ。

実は、 React の良質なチュートリアルは、日本語ではなかなか見つからない。しかし。英語だと溢れかえるほどある。一点注意点を伝えておくと、初心者コースと言いながらも、そのレベルはまちまちであるということだ。

初心者向けで、私も実際にやったチュートリアルは、Mr.Andrewの「The Complete React Developer Course 」。彼は、細かな点までいちいち説明してくれるので、初心者にはとてもありがたいです。説明が少しくどいというコメントがあるぐらい丁寧だ。また、喋りが軽快で聞いていて気持ちがいい。

このコースでは、これまでに勉強したこともたくさん出てくるが、していない分野も出て来くる。特にRedux。初回は、Redux部分は、スキップしても大丈夫。私は一応やてみたが、当時は全く理解できなかった記憶がある。

これは、英語のコースだが、エンジニアを目指すのなら、英語は避けて通れない。現在のプログラミングで使用されているほぼ全ての技術はアメリカ発と言っていいだろう。新しい技術が登場して数年の間は、オンライン上での情報はほぼ英語ベースということだ。フロントエンドエンジニアは、仕事中にググりまくるのだが、日本語でのみ情報を検索していたら、あなたはスタート時点で相当な遅れを取っていることになるので注意してほしい。よって、今から英語になれる訓練をしておこう。

【学習ステップ３】: チュートリアルで作ったプロダクトを参考に、改良して何か作る

ステップ2でMr.Andrewの「The Complete React Developer Course」 をやり終えたあなたは、すでに最新スタックで作り上げたいくつかのアプリケーションが手元にあるはずだ。

そのどれかを参考にして、モダンなスタックで自作のプロダクトを作ろう。つまり、ポートフォリオを作成するということだ。これは、のちの就職、転職活動に大いに役立つ。

最初は、シンプルなプロダクトで十分だろう。楽しみながら、気合いを入れて作ろう！

【学習ステップ４（おまけ）】: レベルアップ

ここはオプショナルだが、ここまでやっていたら、私ならば唸る。

学習ステップ３で作ったアプリケーションに、Prettier と Eslintを導入していこう。Prettierは、コードのフォーマットを自動で整えてくれるものです（Eslintできないことも修正できる）。Eslintは、コードのフォーマットと問題が起こりそうな箇所を事前に指摘してくれるツールだ。

よって、この二つを入れるだけで、あなたのコードのレベルがグンと上がる。

ちなみにこの二つは、実際の現場でも必ずと言っていいほど導入されている。

僕は、フロントエンドエンジニアの最も重要な技術的なスキルはJavascript だと思っている。面接の技術系の質問でも、聞かれて難しいのがJavascript関連だろう。

Javascriptを極めるために先ほど紹介したAndrewさんの「The Modern JavaScript Bootcamp (2019) 」が僕のおすすめです。苦手な部分だけやって見るのも良いだろう。

独学がキツイあなたへ

AndrewさんのReactコースは如何だっただろうか？自分には難しすぎたという方や、独学は辛すぎるという方は、プログラミングスクールを検討する時期かもしれない。

エンジニアの僕が分析したオススメのスクールを、【現役エンジニアが分析】おすすめプログラミングスクール３社で詳しく解説しているので参考にしてほしい。

学習が思うように進んでいない方や、スクールに行こうか迷っているのなら、自分で学習を続けながら、無料カウンセリングにも参加して見ることをオススメする。挫折を避けるためにも、学習のスピード感は常に大切にしてほしい。

【現役エンジニアが分析】おすすめプログラミングスクール３社現役エンジニアの僕自身が、プログラミングスクールの授業内容、教えているプログラミング言語まで分析し、皆さんの今後のキャリアに役立つおすすめプログラミングスクールを３社紹介します。それに付け加え、読者の方からよく頂くスクールに関する質問の中から、ぜひ知っておいて欲しいものに付いても解説します。...

書籍は読むのは早すぎるであろう件

エンジニア向けの書籍として有名なものに、オライリーの本がある。技術書ですが、なぜか、亀や、フクロウ、サイなどが表紙をかざっているあの本だ。 信頼できる質の高い技術書であるのは確かだろう。

しかし、この本は、未経験者・初心者向けではないので注意して欲しい。未経験者ではなくて、現役エンジニア向けの本である。

志高く読み初めて、無駄に挫折するこては避けてほしい。未経験でオライリーの本を読み、「へーなるほどねー」とか理解できるあなたはかなりの天才なので、このブログを読む必要はないだろう。

念のため付け加えておくが、書籍を読むことが悪いといっているのではない。半分以上理解できないような技術書を読み進めるのは、なかなかの苦行だ。また、自分のレベルにあう技術書を見つけるのは意外と難しいということを知っておいてほしい。

自分のレベルに合わない本を読み、エンジニアに向いていないと勘違いするのは勿体無いと、私は強く思う。私の本棚には、まだ読んでいない技術書がたんまりと眠っているが、いつか読む予定だ。

昔の私のように、意識高すぎる人は、挑戦するのもOKだ。

公式ドキュメントを読めと言われるけど難しすぎる件

よく、「公式docとか公式ドキュメントを読みなさい」と言われると思う。私たちが勉強しているReactの公式ドキュメントとは、これだ。

とはいえ、「難しくて読んでも理解できない。。。」という悲鳴をよく耳にする。僕はそれで普通だと思う。公式ドキュメントは完全素人向けでなく、現役エンジニア向けに書かれているからだ。

Reactだけでなく、他の技術の公式ドキュメントも同じで、完全素人の人が読んで理解するには難しすぎると思う。

よって、何かググる際の、私のオススメ手順は、

1. まずは公式ドキュメントをみる（この癖づけは大切）。
2. 理解できなければ、他のもっと噛み砕いて説明してくれる易しい記事を見つける。

この手順を繰り返していれば、いつの間にか公式ドキュメントが読めるようになっているはずだ。そして、その頃には自分の技術力の向上を感じることができるだろう。

フロントエンドエンジニアとwebデザイナーの違い

よくある質問に、

フロントエンドエンジニアとwebデザイナーの違いなに？

というものがある。

簡単に説明すると、

Webページ、アプリケーションのページのデザインをする人が、Webデザイナーだ。

そのデザインを元に、コードを書き、動くページを実際に開発していくのが、フロントエンドエンジニアだ。

しかし、実際の現場では、デザイナーでも少しHTMLやCSSがかける人や、デザインの知識もあるフロントエンドエンジニアがいるので、両方の領域に渡って仕事をしている人も存在している。特に、小規模な会社、小規模なプロダクトチームほど、色々な役割を兼任しているパターンが多い。フロントエンドエンジニアの領域を極めていきたい人には、ある程度規模の大きな会社にいくことをお勧めする。

フロントエンドエンジニアのキャリアパス

フロントエンドの経験をある程度積んだ後は、大きく分けて二つのキャリアパスがある。

1. デザインを学び、デザイナーからフロントエンド開発まで担当できるようになる。
2. バックエンドを学び、フルスタックエンジニア（webエンジニア）となる。

①のデザイン寄りにスキルを拡大していけば、プロダクトのフロントエンド、みための部分は、もはやあなたの自由自在となるだろう。(他の人の意見を聞くことは忘れるな)

②のバックエンドよりにスキルを拡大していけば、自分一人でWebアプリケーションを作成できるようになる。いわゆるフルスタックエンジニア（webエンジニア）という状態になる。

最近のフロントエンド界隈では、JavaScriptが圧倒的にメジャーな言語である。そして、最近ではNode.jsという環境のおかげで、バックエンド開発にもJavascriptを使用できるようになった。つまり、JavaScriptさえ書けるようになると、フロントエンドもバックエンドも開発できるということだ。フロントエンドエンジニアには最高の環境がすでに整っている。

興味がある方に、自分のスキルの輪を拡大していけば、自分の市場価値も向上していくはずだ。

どんな人がフロントエンドエンジニアに向いているのか

一言でいうのは難しいが、あえて言うならば、ロジカルでありながらも視覚的な美しさに興味関心がある方が向いている。

あくまで、コードを書いていくのがメインとなるので、ロジカルな考え方を持っている必要がある。とはいえ、バックエンドエンジニアと違い、サイト、アプリケーションの見た目部分もCSSでスタイリングするので、数mm（よくピクセルと言う単位を使います）の違いに目がいく人の方が向いている。

意外とこうゆう素養が後々のキャリアに効いてくるものだ。

例えば、ファッションに無頓着な人を、オシャレにするのが難しいように、細かなスタイリングに目が向かない人を、スタイリングに敏感な人に育てるのは意外と厳しい。これまでに、転職を数回経験し多くのエンジニアと仕事をしてきて僕はそう感じている。

とはいえ、向き不向きというのは自分では意外とわからないものだ。そういう時は、実際に初めてみよう。勉強を開始するのだ。

僕自身、最初の数年は、エンジニアに向いてないのかな。。。とモンモンとしていたが、最近になって、いや俺向いてるわ！！！と、思うようになった。自分でも単純すぎて恥ずかしいが、意外とそんなものだったりする。

もっといえば、向いてるかどうかは考えなくて良いのかもしれない。自分が好きかどうか、やってみたいかどうかという気持ちを大切にしてすぐに試してみる姿勢がポイントだと思う。

まとめ：とにかくやってみるべし

フロントエンドエンジニアへのロードマップは如何だっただろうか？

TOEICのように満点中の今何点だな！というような学習の指標がエンジニアにもあれば良いと思うが、そういうものがないので、独学でモチベーションを保つのが結構大変だと思う。自分がどのレベルを走っているのかわからないと継続するのは大変なものだ。そういう時には、このブログや紹介したプログラミングスクールをうまく活用して、挫折ポイントうまく乗り越えていってほしい！

Happy coding!