未経験からフロントエンドエンジニアになるために作るべきポートフォリオ

はじめに

私は未経験からフロントエンドエンジニアとして転職し、現在、Vue、Reactでのフロント開発とフロントエンドエンジニアの採用面接を担当している者です。
未経験から転職した私の経験に基づいて、未経験からフロントエンドエンジニアになるために作るべきポートフォリオのポイントをまとめてみました。
現在フロントエンドエンジニアを目指して勉強中の方に読んでいただけたら幸いです。

ポートフォリオ作成に必要な9つのポイント

ポートフォリオを作成するにあたって押さえておくべきポイントを大きく9つにまとめましたので、順に紹介していきたいと思います。
※あくまで私個人の考えのため、これが絶対というわけでは無いです。

1. VueまたはReactを使用する

現在のフロント開発は、基本的にVue、React、Angularなどのライブラリ、フレームワークを使用してSPAとしての開発がほとんどです。
中でも、Vue、Reactのどちらかをメインで使用している企業が多いため、ポートフォリオもVue、Reactで開発することをお勧めします。
Vue、Reactのフレームワークである、Nuxt.js、Next.js、Gatsby、Remixなどを使用して開発するのもGoodです！

※2022年４月現在、VueではVue2+compositionAPIまたはVue3、Reactではクラスコンポーネントではなくhooksを使用した関数コンポーネントでの開発がベストです！

■Vueのフレームワーク(Nuxt.js)

■Reactのフレームワーク(Next.js、Gatsby、Remix)

2. Sassを使用する

cssはSassを使用するのがお勧めです！
Material-UI、Boot Strap、Tailwind cssなどのライブラリを使用するのも良いと思いますが、少なからずcssを自在に扱える技術はフロントエンドエンジニアには必要です。
特にcssをより記述しやすくしたSassを使用している企業は多いため、Sassに慣れておけば、入社してからcssで苦労する場面は少なくなるのではと思います。

3. TypeScriptを使用する

最近のフロント開発は、どの企業でもTypeScriptを使用していることが多いため、TypeScriptも記述できるようになっておきましょう！
型がある言語を初めて触る方は慣れるまでに苦労するかもしれませんが、慣れてしまえば開発効率は格段に上がります。

4. ES2015~の記法で記述する

ES2015以降の記法も、モダンフロント開発をする上では必須となっています。
こちらに関しては、以前私がまとめた記事がありますので、参考にしてみてください！

5. デザインにこだわる

フロントエンドエンジニアは、ユーザーが見る、見た目の部分を開発するお仕事です。
デザイナーのようにデザインからキッチリと作らなくてもいいですが、ある程度のデザインを自分自身で考えられるレベルにはなっていないといけません。
また、実務ではデザイナーの方とやり取りをすることも多いため、デザインに関する最低限の知識は必要です。
バックエンドエンジニアのポートフォリオではあまりデザインは重視されませんが、フロントエンドエンジニアではデザインもしっかりと見られています。
自分でデザインを作るのが苦手だという方は、いいなと思ったサイトやアプリのデザインを真似るところから始めてみてください！

6. DBなどの外部データを扱う

フロントエンドエンジニアは、APIなどを使用して、DBの値を読み取ったり、DBに値を書き込んだりする処理を作らなければなりません。
ここはとても重要な部分で、DBなどの外部の値を自在に扱えるようにならなければ、フロントエンドエンジニアとは言えないというくらいのレベルです。
しかしながら、実務未経験の段階でフロントエンドエンジニアを目指して、バックエンドのAPIも同時に開発するのはほぼ不可能だと思います。
ですので、FirebaseなどのBaaSや、microCMSなどのHeadless CMSを使用したりするのがお勧めです！
とにかく外部と通信する機能をポートフォリオに組み込んでいると評価は上がること間違い無いです！

■BaaS(Firebase、supabase)

■Headless CMS(microCMS)

7. オリジナルアプリを作る

ポートフォリオは必ず自分が考えたオリジナルアプリを作りましょう！
既存のアプリを真似して作っても、採用担当者には響きませんし、何より誰でも作れるので、全くアピールポイントになりません。
エンジニアは技術も大事ですが、創造力も大事です。
自分自身で必死に考えたオリジナルアプリを作り、自分の良いところを存分にアピールしましょう！
また、書類選考時や面接時には、なぜこのアプリを作ったのか、このアプリがあればどんな良いことがあるのかなどをしっかりと説明できるようになっておきましょう！
ポイントとしては、実際にWeb上に公開されて、自分で運用するところまで考えて作るということです。

8. 機能、コードに責任を持つ

自分が作った機能やコードには必ず責任を持ちましょう！
エンジニアは、なぜこの機能が必要なのか、なぜこのコードを書いたのかを説明できなければなりません。
「なんとなくこの機能が必要だと思ったから・・・」や「テキトーに調べて出てきたコードを貼り付けたら動いたから・・・」などの理由ではとても無責任です。
コードというのは、エンジニアが提供する商品みたいなものです。
例えば、ある飲食店に行った時にとても不味い料理が出てきたとします。
なぜこんな料理を作ったのかとシェフに尋ねたところ、「なんとなく色合いが良かったから・・・」とか「なんとなく美味しくなりそうだったから・・・」などと言われたらどうでしょう？？多分お金を払う気などにはなれないでしょう。
それと同じで、エンジニアにとってのコードというのは、シェフにとっての料理と同じくらいの価値なのです。
未経験の内からこういう気持ちを持って開発をすることはとても大切です。

9. ポートフォリオは１つで良い

最後になりましたが、作成するポートフォリオは１つでOKです。
巷では、最低でも３つは必要、多ければ多いほど良いなどと言われたりもしていますが、１つで十分です。
なぜなら、採用担当者がポートフォリオをチェックしている時間がないからです。
エンジニアの採用担当者も普段は開発などの仕事で毎日忙しくしている場合が多いです。
本当に良いポートフォリオを１つ作れば、採用担当者はその人のレベルが分かりますし、仮に３つや４つもあったとしても、どれを見ればいいのかわからなくなってしまいます。
すでに何個も作ってしまっている方は、提出しなくて良いとは言いませんが、本当に見て欲しいものはどれなのかわかるようにしていれば採用担当者もそれをチェックしてくれると思います。

おわりに

ここまでお読みいただきありがとうございました。
途中、偉そうなことや厳しいことも言いましたが、現在フロントエンドエンジニアを目指して一生懸命勉強されている方にぜひ就職に成功してもらい、快適なエンジニアライフを送って欲しいと思ってのことです。
上に記述したポイントというのは、あくまで私個人の考えに基づいてのことですので、このポイントを全て押さえれば確実に合格できる訳では無いです。
ですが、このポイントを押さえられていれば、フロントエンドエンジニアになるための力はついているはずです。
このポイントのレベルまで身につけるにはかなり苦労するかもしれませんが、諦めずに頑張ってみてください。必ず成長を実感できると思います。
フロントエンドエンジニアを目指されている皆様を応援しています。