はじめに
今回はフロントエンドエンジニアとして転職する際の、ポートフォリオの作り方について解説します。
技術選定やアプリ設計の参考になれば幸いです。
ポートフォリオの評価されるポイントTop17！フロントエンドエンジニア必見！
1位：バグがない
基本中の基本ですが、しっかり確認しましょう。
特にアプリを開いた瞬間にレイアウトが乱れていると深刻です。
それだけで見てもらえない可能性もあります。
最低でもChromeとSafariでの動きは確認しましょう
2位：直感的に使い方が理解できる
面接官は忙しいです。
アプリの使い方の説明を添えても読んでくれないものと思いましょう。
直感的に使えないアプリには興味を持ってもらえないです。
3位：オリジナリティがある
メルカリクローンやごく普通のタスク管理アプリを作っても差別化はできません。
差別化をするのは意外と簡単です。
ポイントは用途や機能をあえて絞ることです。
・主婦専用のフリマアプリ
・ITの勉強専用のタスク管理アプリ
差別化で大切なのは「何をするか？」ではなく「何をしないか？」です。
4位：axiosを利用している
axiosは非同期通信ライブラリです。
例えば、楽天トラベルAPIから旅館の情報を取得したりできます。
非同期通信はフロントエンドエンジニアのアプリ開発では必須です。
外部のサーバーからデータを取得し画面に描画できるようにしましょう。
5位：Reactを利用している
Reactを利用すれば、非同期で取得したデータを簡単に画面に表示することが可能です。
また、フロントエンドのコードの管理も楽になります。
快適なUI/UXが提供できるので顧客満足度も上がります。
6位：Typescriptを利用している
Typescriptを利用すれば、コードの保守性や可読性が高くなります。
型やスペルにミスがあれば、自動で検出してくれるからです。
またAPIの仕様書のようなドキュメントとしての有益性もあります。
8位：モジュールバンドラーのカスタマイズ
具体例は「Next.js」「vite」「webpack」などです。
create-react-appで使用されているバンドラーは初心者用です。
とりあえずReactを触りたい人向きなので、パフォーマンスやカスタマイズ性が悪いです。
上記で紹介したバンドラーへ移行した経験があれば評価されます。
9位：UIコンポーネントライブラリの使用
具体例は「Material-UI」「Bootstrap」などです。
管理画面はこれらを利用することが多いです。
ユーザー画面は純粋なCSSで書くことが多いです。
どちらの経験もあると評価されます。
10位：eslintとprettierの使用
eslintは主にスペルミスや文法のミスなどを指摘してくれます。
prettierはコロンや改行位置など、コードの一貫性を指摘してくれます。
チーム開発では必須です。
11位：jestの使用
jestはコードにミスがないかを自動で検出してくれます。
また、「アプリの仕様書」としての側面も持ち合わせています。
テストが書かれていると、新規参加者でも認識の共有がしやすいです。
12位：huskyの使用
huskyを導入するとコミットする前に自動でeslintやテストが走ります。
「エラーが出てるのにコミットしてしまった」というミスをなくすことができます。
コードの保守性が改善され、チーム開発がしやすくなります。
13位：firebaseの使用
firebaseを使用するとサーバーサイド言語を扱えなくてもAPIの開発が可能です。
つまりJavaScriptしか書けなくてもタスク管理アプリが作れるようになります。
バックエンドの知見が多少身につくので転職先でも評価されます。
14位：githubActinonsの使用
githubActinonsを使用すると、自動デプロイが可能になります。
つまりプッシュした瞬間にアプリが自動で公開されるようになります。
サーバーにログインしてアップする手間が削減できます。
15位：AWSやGCP上でアプリが公開されている
アプリを公開する際はHerokuやエックスサーバーでも十分です。
AWSやGCPなどのクラウドを利用していると評価が高いです。
サーバーのカスタマイズ性が高く、実務でも頻繁に使われているからです。
16位：dockerで開発されている
複数のアプリを一つのPCで利用するとき、アプリごとにnodeのバージョンが違うことがあります。
dockerを使用すると、アプリごとにバージョンを切り替えることが可能です。
フロントエンドエンジニアがdocker環境を0から構築することは少ないです。
が、docker上での作業を求められることはあります。
「コンテナに入ってサーバーを立ち上げる」くらいはできると良いです。
まとめ
・バグや機能要件などの基本的なポイントは全て押さえましょう。
・Typescriptやfirebaseなど職歴書の目をひく技術を導入しましょう。
補足
