実務未経験のフロントエンドエンジニアで求められるポートフォリオの最低ラインと学習方法を解説

「フロントエンドエンジニアを目指してますが、面接で求められる成果物のレベルを知りたい…」

フロントエンドエンジニアを目指して勉強を頑張っている人にとって気になるのではないでしょうか？

本記事では、「実務未経験のフロントエンドエンジニアで求められるポートフォリオの最低ラインとフロントエンドの学習方法」について解説していきます。

この記事を読むことで以下のことが学べます。

ぜひ最後までご覧ください。

フロントエンドの役割

実務でのフロントエンドエンジニアの仕事を簡単に説明すると、Webアプリのブラウザで表示される見た目の実装とバックエンドとの連携を実装をすることがフロントエンドの役割になります。

フロントエンドエンジニアでもバックエンドの知識は必要で、フロントだけ書けるのエンジニアはコロナ禍のエンジニア転職は厳しいというのが大多数の意見です。

フロントエンドで絶対に必要なのは、CSSとJavaScriptの知識になります。

特にJavaScriptがどれだけ書けるかが肝になると言っても過言ではありません。

JavaScriptの効率の良い習得方法を解説【初心者が習得するまでの流れ】

「JavaScriptって需要がありそうだけど、どのように習得をしたらいいかな」 「JavaScriptの学習 ...

未経験のフロントエンドエンジニアで求められるポートフォリオのレベル

未経験のフロントエンドエンジニアで求められるポートフォリオのレベルとしては、データベースはFirebaseでも問題ないですが、非同期処理をどれだけ理解しているかを見られます。

他にも、素のJavaScriptをどれだけ書けるか（理解できているか）も重要です。

素のJavaScriptを理解していれば、React.jsやVue.jsのようなSPA（シングルページアプリケーション）やNext.jsやNuxt.jsのようなSSR（サーバーサイドレンダリング）、TypeScriptを理解することができるはずです。

あとは、ReduxやVuexのライフサイクルを理解して、フロントエンドのテストを最低限書けていればポートフォリオとしては十分だと言えるでしょう。

実務に入る前に知っておいたほうが良いこと

実務未経験のフロントエンドエンジニアが実務入る前に知っておいたほうが良いことは、フロントエンドだけでなくバックエンドの知識が必要になります。

開発現場で環境構築するときやどのAPIを実装しているのかなど、バックエンドを知らないとフロントエンドの実装で苦労します。

フロントエンドとバックエンドを分担でやっている会社であれば、バックエンドエンジニアとの連携が絶対に必要です。

ですので、実務入る前にバックエンド（Ruby on RailsかLaravel）の勉強をやっておいたほうが良いです。

会社の規模によりますが、タスクをある程度こなせるようになってきたら、フロントエンドエンジニアの人でもバックエンドのタスクを振られます。

逆も然りで、バックエンドエンジニアの人でもフロントエンドのタスクを振られることもザラにあります。

フロントエンドの学習方法

実務に入る前に知っておいたほうが良い知識を理解した上で、フロントエンドの学習方法を紹介していきます。

ここでは、HTMLとCSSを勉強している前提で話を進めていきます。

それぞれの学習手順について見ていきましょう。

JavaScriptを勉強

フロントエンドエンジニアになるにはまずJavaScriptを勉強する必要があります。

JavaScriptの勉強で実務でも使える書籍を紹介すると、「JavaScript［完全］入門」です。

この書籍はJavaScriptの基礎文法から関数、非同期処理までフロントエンドで必須の知識を一冊で学ことができます。

JavaScriptを始めたばかりの人は書籍で学ぶのは少しハードルが高いので、初めのうちはprogate（プロゲート）をやることをおすすめします。

JavaScriptの基礎文法がある程度できるようになったら、JavaScriptで簡単なアプリを作ってみましょう。

JavaScriptで簡単なアプリを作るのに最適な教材がUdemyの「モダンJavaSciptの基礎から始める挫折しないためのReact入門」です。

上記で紹介したUdemyの教材にはReactが入っていますが、素のJavaScriptとReact.jsで機能が同じTodoアプリを作ったときに何が違うのかを見比べることができます。

JavaScriptの基礎文法を総合的に学びたい人は、神経衰弱のようなゲームを実装するのもおすすめの勉強になります。

JavaScriptでゲームを作りたい人は以下のレッスンをやってみると良いでしょう。

javascript が効率的に学べるおすすめサイト9選！

JavaScript を学びたいけど、分かりやすいサイトないかなー こんな悩みはありませんか？この記事では、J ...

React.jsかVue.jsを勉強

JavaScriptの学習が進んだタイミングで、React.jsかVue.js（どちらか）の勉強に取り掛かりましょう。

「React.jsとVue.jsどちらが良いですか？」という質問は頻繁にあります。

結論としてはどちらでも良いです。

難易度で言えばReact.jsのほうが難しいというのがほとんどの意見です。

Vue.jsだと単一コンポーネントでの実装になるので、HTMLとCSSとJavaScriptを1つのファイルで実装できるというのがメリットであり、React.jsより勉強しやすい理由です。

React.jsだと、ファイル数が多くなってしまうことが理由でVue.jsを選択している人が比較的に多いです。

どちらかを選択したら、次はUdemyを用いてSPA（シングルページアプリケーション）を用いたアプリを作ってみましょう。

まとめ

いかがだったでしょうか？

今回は実務未経験のフロントエンドエンジニアに求められるポートフォリオのレベルとフロントエンドの学習方法について解説しました。

フロントエンドはバックエンドより難しいと言う人が多いというのが正直なところです。

フロントエンドはJavaScriptができないとReact.jsやVue.jsをやっても挫折します。

フロントエンドエンジニアとしてやっていくのであれば、素のJavaScriptで出来るだけたくさんコードを書くことが一番の近道と言えます。

フロントエンドエンジニアとしてやっていくには、JavaScriptは当然ですが、CSSもある程度書ける必要があります。

フロントエンドのポートフォリオを作るのであれば、理想はバックエンドAPIを用いたSPAのアプリケーションを作ることができれば、フロントエンドエンジニアの転職ポートフォリオとしては十分と言えるでしょう。

実務未経験からフロントエンドエンジニアでやっていくには、学習する範囲が広いので、長い目で取り組むようにしましょう。