お勧めプログラミングスクール/学習教材

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

フロントエンドエンジニア

今日は、完全未経験の方がフロントエンドエンジニアになるためのロードマップを紹介します。僕自身、数年前に全くの未経験からwebエンジニアに転職しました。現在は、オーストラリアはシドニーの会社で、フロントエンドエンジニアとして働いています。ちなみに、一つ前の会社では、フルスタックエンジニア(フロントエンドエンジニア+バックエンドエンジニア)として働いていました。

僕がエンジニアになるために独学していた頃、「学ぶことが多すぎて何をどこまでやったらいいのかわからず不安」でした。

最近の副業、プログラミング、フリーランスブームの前だったこともあり、これだ!というような参考になる記事を見つけることができませんでした。独学もしましたが、結局不安を解消できずプログラミングスクールにお世話になりました。

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

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

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

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

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

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

まずは、どこを目指すのか明確にしましょう。

「フロントエンドエンジニア」と一言に言っても、色々なフロントエンドエンジニアがいます。ここで私たちが目指すのは、

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

です。

もっとも、求人数が多く年収も高くなるであろうフロントエンドエンジニアを目指します。

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

HTML CSS JS

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

例えば、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の基礎

〜基礎と書いているように、完璧に身につける必要はありません。これだけでも、全てを完璧にマスターしようとすれば一生かかるかもしれません。

それぞれ、簡単に説明していきます。

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

黒い画面上で操作するやつです。最初は、拒否反応が出るかもしれませんが、それが普通です。時期に慣れていきますので、心配無用です。

ここでgitのコマンドを打っていますここでgitのコマンドを打っています

「2、3、4のHTML、CSS, JavaScrip」tは、フロントエンジニアの核となる必須のプログラミング言語です。この言語をどこまで深く理解しているかが、のちのエンジニアとしての成長に大きく関わってきます。

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

しかし、この段階で全てを身に付ける必要はないことを強調しておきます

コードエディターを何を使えば良いですか?

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

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

Javascriptフレームワーク

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

まずは、下記のコースを最低2サイクルはやりましょう。理想は、3サイクルです。チャレンジしてみよう!の道場コースもきちんとやることが大切です。そして、初心者の内はコピペをしないで、きちんとコードを打ち込みましょう

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

他のコースにも目が行くかもしれませんが、ここは焦らずに、上記4項目の基礎をしっかりおさえましょう。

2〜3サイクル回し終えたら、次のステップです。

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

これも理想的には3サイクル回して欲しいです。いや、余裕すぎるわって人で2サイクルはやって欲しい感じです。

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

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

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

React

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

ですので、ここは自分のレベルにあったチュートリアルを選び、それに沿って、何か作ってみましょう。

ここでチュートリアルを選ぶ際の重要なポイントをあげます。

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

つまり React のチュートリアルです。間違っても、ここでRuby とか、PHPとか、JQueryとかを含んだものを選択しないでください。

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

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

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

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

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

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

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

そのどれかを参考にして、モダンなスタックで自作のプロダクトを作ります。そうです、ポートフォリオを作成するのです。シンプルなもので十分です。これは、のちの就職、転職活動に大いに役立ちます。楽しみながら、気合いを入れて作りましょう!

【学習ステップ4(おまけ)】: レベルアップ

レベルアップ

ここはオプショナルですが、ここまでやっていたら、私ならば、うなります。

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

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

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

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

Javascriptを極めるためにAndrewさんの「The Modern JavaScript Bootcamp (2019) 」が僕のおすすめですが、自分に合うものがあれば、他のコースでももちろん大丈夫です。あれこれ手を出しすぎるのではなく、自分に合うものを着実にこなしましょう。

独学がキツイあなたへ

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

エンジニアの僕が分析したオススメのスクールをいくつか紹介しておきます。詳細は、【現役エンジニアが分析】おすすめプログラミングスクール3社で詳しく解説しています。

スクール名 こんな方にオススメ 特徴
【TECH::EXPERT】エンジニアコース 

僕の一押しはココです。東京、大阪、名古屋、福岡のいずれかのスクールに通える方。30代でもOK。

Javascript, AWS, git, 非同期通信など授業内容が非常に良い。フロントエンド、サーバーサイド、インフラ全てを一通り学習できるので、その後に自分の好きな分野を追求することができる。
GEEK JOB(社会人転職コース) お金のない、関東圏に住んでいる29歳までの方。 何と言っても、無料でプログラミング学習と就職支援サービスを受けれることができる。卒業生を企業に送りこみ、企業側からお金をもらう仕組み。
【TechAcademy】「エンジニア転職保証コース」  上記スクールに通えない地方に住んでいる方。 オンラインで完結するので全国どこからでも受講可能。受講生に1人ずつ現役のメンターがつく。転職保証コースもあり、転職が決まらなければ受講料全額返金。

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

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

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

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

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

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

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

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

昔の私のように、意識高すぎる人は、挑戦してみてもいいかもしれません。

React.js & Next.js超入門 [ 掌田津耶乃 ]
created by Rinker

初めてのJavaScript 第3版 ES2015以降の最新ウェブ開発 [ Ethan Brown ]
created by Rinker

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

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

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

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

ですので、何かググる際の、私のオススメする手順は、

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

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

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

デザイナー

よくある質問に、

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

というものがあります。

簡単に説明すれば、

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

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

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

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

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

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

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

②のバックエンドよりにスキルを拡大していけば、自分一人でWebアプリケーションを作成できるようになります。いわゆるフルスタックエンジニア(webエンジニア)という状態になります。最近のフロントエンド界隈では、JavaScriptが圧倒的にメジャーな言語です。そして、最近ではNode.jsという環境のおかげで、バックエンド開発にもJavascriptを使用できるようになりました。つまり、JavaScriptさえ書けるようになると、フロントエンドもバックエンドも開発できるということです。フロントエンドエンジニアには最高の環境がすでにあります。

どちらが良い悪いというわけではありません。興味がある方に、自分のスキルの輪を拡大していけば、自分の市場価値も向上していくでしょう。

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

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

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

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

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

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

僕自身、最初の数年は、エンジニアに向いてないわ。。。とモンモンとしてましたが、最近になって、いや俺向いてるわ!!!と、思うようになりました。単純すぎてすみません。

もっといえば、向いてるかどうかは考えなくて良いと思います。自分が好きかどうか、やってみたいかどうかという気持ちを大切にしたらいいような気がします。

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

フロントエンドエンジニアへのロードマップは如何だったでしょうか?

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

ABOUT ME
Wata
Wata
30歳で営業職からエンジニアに転職した者のブログです。 大手海運業→総合商社→ソフトウエアエンジン。現在は、オーストラリアにてエンジニアとして働いています。 未経験からのエンジニアへの転職、フロントエンド周りの技術、エンジニアの仕事環境、趣味の旅行、JAL修行、オーストラリアの情報などを発信しています!

POSTED COMMENT

  1. […] ンなフロントエンドエンジニアになるための独学方法は、【現役エンジニアによる】未経験からフロントエンドエンジニアになるには で詳しく解説しています。興味があれば、どうぞ。 […]

  2. […] 【現役エンジニアによる】未経験からフロントエンドエンジニアになるには […]

  3. […] てもお金がない方のために独学のためのロードマップ(【現役エンジニアによる】未経験からフロントエンドエンジニアになるには)も作りました。その記事の中で、おすすめのサイト […]

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

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

  6. […] お勧めプログラミングスクール/学習教材 【現役エンジニアによる】未経験からフロントエンドエンジニ… […]

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です