読者Web系のフロントエンドエンジニアになるにはどうすれば良いの？学ぶべきプログラミング言語や、効率の良い学習手順などあれば教えて欲しい。
こんなお悩みにお答えします。
この記事で解説する「フロントエンドエンジニアになるためのロードマップ」を読めば、フロントエンドエンジニアになるためにやるべき学習方法や学習手順などが明確になりますよ。
僕は現役のフロントエンドエンジニアです。主にTypeScriptとVue.jsを使ってWeb開発しています。それらの実体験をもとに解説していきますね。
フロントエンドエンジニアになるためのロードマップ
STEP1.フロントエンドエンジニアとは何かを知る
まずはフロントエンドエンジニアとは何かを解説します。
フロントエンドエンジニアとは、Webサイトやアプリケーションにおける、「ユーザーが目にする部分の設計や開発を担当する職種」です。
たとえばWebサイトの見た目の作成や、サイトにデータを表示する処理も作ります。
実際の開発現場では、フロントエンドエンジニアはバックエンドエンジニアと連携して作業することが多いです。バックエンドからデータを受け取り、画面に表示する処理を作成します。
STEP2.Webの基礎知識を学ぶ
フロントエンドエンジニアになるためには、Webの基礎知識を身につけておく必要があります。
Webの基礎知識を身につけることで、画面が表示される仕組みや、セキュリティに関する知識も身についてきます。
具体的にWebの基礎知識とは何かというと、主に以下の通り。
- ブラウザの仕組み
- Webサーバーとは
- マークアップ言語
- プログラミング言語
- https
- GET/POSTとは
- APIとは
- Webセキュリティ
- 開発ツール
- コミュニケーションツール
- バージョン管理
- CORS
上記の用語はフロントエンドエンジニアをしていく上で、覚えておくべき最低限の知識なので、把握しておきましょう。
STEP3.コードエディターをインストールする
フロントエンドエンジニアとしてプログラムを書くために、コードエディターをインストールしていきましょう。
コードエディターはいろいろな種類があります。
- VS Code(Visual Studio Code)
- Sublime Text
- Atom
- Notepad++
実際の現場ではよくVS Codeが使われることが多いので、VS Codeで良いかと。
Windows用とmac用があるので、お使いのPCのOSに応じてインストールすると良いでしょう。
下記にリンクを貼っておきますので、ぜひインストールしておいてください。
STEP4.HTML/CSSを学ぶ
フロントエンドで使われるHTMLとCSSについて学んでいきます。
HTMLとは、HyperText Markup Languageの略です。HTMLはWebページの構造を作ったり、文字を表示したりする役割があります。
CSSとは、Cascading Style Sheetsの略で、Webサイトの見た目を作るスタイルシート言語です。
HTMLでWebページの構造を作り、CSSで見た目を整えていきます。
HTMLとCSSのおすすめの学習方法は、ドットインストールの「Webサイトを作れるようになろう」の全コースを受講することです。一通り受講すれば、基礎は大体身につくはずです。
STEP5.JavaScript(プログラミング言語)を学ぶ
HTML/CSSを学習した後は、JavaScriptを学んでいきましょう。
JavaScriptは、フロントエンドで使われるプログラミング言語です。主な役割としては、Webページに動きをつけたり、サーバー側と通信をしたりします。
JavaScriptの具体例を挙げると、たとえば登録ボタンを押したら登録処理を実行するとか、クリックしたらアコーディオンが表示されるとかですね。
ここまでの内容を簡潔にまとめると
- HTMLでWebページの構造をつくり
- CSSで見た目を整えて
- JavaScriptで動きをつける
という感じですね。
フロントエンドでは基本的に上記の組み合わせでWebサイトやアプリを作っていきます。もちろん上記の技術以外にも多くの技術を使っていきますが、まずは上記を押さえていきましょう。
JavaScriptを学習するなら、ドットインストールの「Webサイトに動きをつけてみよう」の全コース(①JavaScriptを体験しよう〜④よく見るUIを作ってみよう)を受講すれば基礎から応用まで学べますよ。
STEP6.JavaScriptのフレームワークを学ぶ
続いては、JavaScriptのフレームワークを学んでいきましょう。
フレームワークとは、アプリケーションを1から作らなくても、ある程度の骨組みを瞬時に作ってくれるものです。
なぜフレームワークを使うのか？
エンジニアはすべて1からプログラムを書いてアプリやWebサイトを作るのではなく、すでにあるプログラム処理は使い回しながら効率よく開発していくことが基本です。その効率よく開発するために、フレームワークを使います。
たとえば、とあるシステム開発をするとします。もしフレームワークを使わずに全て1からプログラムを書いて実装すると、1年はかかる見込みです。でもフレームワークを使って効率よく開発すれば、3ヶ月で完了するといったイメージですね。
ではJavaScriptのフレームワークは、一体どんなものがあるのか？
代表的なところで言うと、
- Vue.js
- Next.js
- React.js
この辺りですね。
Reactは正確にいうとフレームワークではなくライブラリなのですが、ここでライブラリやフレームワークなどの違いを細かく説明すると長くなるので割愛します。
正直、上記の3つのいずれかであれば、どれを学んでもOKです。なぜなら上記の3つは大体どれも作りが似ているからですね。つまり、Vueを習得すればNext.jsもある程度すぐに理解できるようになるし、その逆も同じということ。
もし迷ったら、React.jsを学ぶといいです。React.jsは日本でも人気のフレームワークで、案件数も多く需要があります。さらにReactを学べばNext.jsもある程度わかってきます。なぜならNext.jsはReactをベースに作られたフレームワークだからです。
フレームワークを学ぶなら、まずは公式サイトのチュートリアルで基礎を学ぶのが良いかなと。
基礎を学んだ後は、本格的にフロントエンドのスキルを使ってアプリを作っていくために、「Udemy」で学びたい言語やフレームワークを解説している動画を購入しましょう。Udemyの動画はときどきセールをしており、セール中なら数千円ほどで動画を安く購入できるので、そのタイミングを狙うといいかと。
動画を見ながらで良いので、実際にアプリを作りながら学んでいきましょう。
この章の内容をまとめると、
- JavaScriptでおすすめのフレームワークはVue.js, Next.js, React.jsの3つ
- フレームワークはいずれか1つ学べばOK
- まずは公式チュートリアルで基礎を学ぶ
- その後はUdemyで実際にアプリを作りながら学ぶ
上記の通りです。
まずは、上記をすべて試してみてください。
STEP7.フロントエンドのポートフォリオを制作する
STEP1からSTEP6を一通り実践すれば、フロントエンドで使われる主なスキルは学べます。
あとはインプットした知識をアウトプットするためにも、ポートフォリオを制作していきましょう。
ポートフォリオとは、実績証明物のことです。ポートフォリオは、フロントエンドエンジニアとしてのスキルの証明ができます。他にもフロントエンドエンジニアの案件に応募する時に、採用されやすくするために作ります。
ポートフォリオの例をあげていきます。
- 自分の経歴や自己PRを載せたサイト
- TODOアプリ
- 掲示板サイト
- ブログアプリ
- SNSアプリ
- 何か作りたいものがあればそれでもOK
上記の通り。
おすすめとしては、自分の経歴や自己PRを載せたサイトを1つ作り、そのサイトに他の個別のポートフォリオを載せていく方法です。
ひとまず何か1つ作ってみてください。
そしてポートフォリオが作れた方は、GitHubにソースコードを公開していきましょう。GitHubとは、プログラミングのソースコードを共有できるサイトです。Webエンジニアならほぼ必ず使うと言っても過言ではないです。
GitHubはドットインストールの「⑤Webサイトを公開してみよう」を受講している方はすでにアカウントを持っていると思います。もしまだGitHubのアカウントを持っていない方は、無料で作れるのでアカウントを作ってみてください。
その後に作ったポートフォリオをGitHubに公開しましょう。
GitHubに公開できた後は、ポートフォリオを世界中のインターネットで見れるようにデプロイしていきましょう。デプロイすることで、URLにアクセスすればどこからでも自身のポートフォリオをネットから見ることができます。
ネットで見ることができるようになれば、フロントエンドの案件に応募した際に、書類選考で面接官がそのポートフォリオを見ることができます。これにより、書類選考にも通りやすくなる傾向があるので、ぜひ公開してみてください。
ポートフォリオを公開するなら、Vercelというサービスを使えば一瞬で公開できます。GitHubで公開しているアプリをimportするだけでOK。
VercelはNext.jsと同じ会社が開発しているデプロイサービスです。以下にリンクを貼っておきますね。
STEP8.フロントエンドエンジニア募集企業に応募する
フロントエンドエンジニアを募集している企業に応募していきましょう。
会社員のフロントエンドエンジニアになる場合
エンジニアの実務未経験や会社員エンジニアの方で、会社員のフロントエンドエンジニアになる場合、転職サイトに複数登録してフロントエンドエンジニアを募集している企業にどんどん応募していきましょう。
実務未経験の方はなかなか書類選考に通らなかったりしますが、めげずに応募し続けることがポイントです。
以下でおすすめのIT転職サイトをまとめている記事のリンクを貼っておくので、何社か登録して早速応募していきましょう。
フリーランスのフロントエンドエンジニアになる場合
現在、すでにエンジニアの実務経験が2年以上ある方は、フリーランスエージェントにフロントエンドエンジニアの案件を紹介してもらうと良いかと。
フリーランスエージェントはできれば複数使うといいです。フロントエンドの案件を多めに保有しているところがあったりしますし、そもそもの案件の保有数も変わってくるので、とりあえず3社くらいは登録しておくと良いですよ。
といってもどのエージェントが良いかわからない方もいると思うので、以下記事で僕が実際に使ってみて良かったエージェントをまとめているので、あわせて参考にしてみてください。
STEP9.フロントエンドエンジニアになる
企業からオファーがでて承諾すれば、晴れてフロントエンドエンジニアとしてのキャリアをスタートできます。
フロントエンドエンジニアになった後も、引き続き自己学習をしつつ、実務経験を積み上げていきましょう。実務経験を積み上げてスキルアップしていくことが市場価値を高めるポイントです。
ポートフォリオを更新したり、新たに作ったり。または技術ブログなどを始めてアウトプットしつつ収益化して収入源を増やすのも得策です。