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

# はじめに
私は未経験からフロントエンドエンジニアとして転職し、現在、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を使用した関数コンポーネント`での開発がベストです！

https://jp.vuejs.org/index.html

https://ja.reactjs.org/

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

https://nuxtjs.org/ja/


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

https://nextjs.org/

https://www.gatsbyjs.com/

https://remix.run/


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

https://sass-lang.com/

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

https://www.typescriptlang.org/

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

https://qiita.com/c-shiraga/items/33812799e4dc17d89b44

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

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

### ■BaaS(Firebase、supabase)

https://firebase.google.com/?hl=ja

https://supabase.com/

### ■Headless CMS(microCMS)

https://microcms.io/

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

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

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

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