【最新】エンジニア転職ポートフォリオ：5選・フロントエンド

本記事では
エンジニア転職のポートフォリオ5選
をフロントエンド編で解説します

どんなポートフォリオを作ればいいの？
って悩んでいる人のために
フロントエンドエンジニアが難易度順に考えました

転職活動において
ポートフォリオがあると大きく有利になります

本記事でポートフォリオは
実装スキルと知識を示す成果物と定義します
（おしゃれなキラキラサイトは想定してません）

対象読者

ポートフォリオの具体例を知りたい
ポートフォリオを作るコツを知りたい

本記事の内容

ポートフォリオで頻出するする質問
ポートフォリオを作るのに必要な要素
ポートフォリオの具体例
ポートフォリオを作るコツ

順番に解説します！！
↓

では、さっそく見ていきましょう！

ポートフォリオの役割

ポートフォリオの役割は２つあります

ポートフォリオの役割

エンジニアスキルを判断する
論理的思考があるか判断する

スキルだけあっても不採用だし
論理的思考ができるだけでも不採用になりえます

重要な点を解説していきます
↓

ポートフォリオの役割① … エンジニアスキルを判断

まずポートフォリオは
スキルの有無を判断します

エンジニアに必要なスキル
（フロントエンド）

HTML・CSSのスキル
TypeScriptのスキル
フレームワークの知識
( Next.js, Nuxt.js, Angular.js )
Node.jsの知識
セキュリティの知識

1,2,3,4は必須知識で
どこまでスキルが高いかが判断されます

スキルごとにポートフォリオを解説するので
ポートフォリオを作る際、参考にしてください
↓

ポートフォリオの役割② … 論理的思考を判断

エンジニアの転職活動において、
ポートフォリオがあるとスキルをアピール
することができます

アピールがうまくできると
後続の選考に好印象
を与えることができます

面接でポートフォリオについて聞かれることを
あらかじめの準備が合否を分けます

面接で頻出する質問

なぜそのポートフォリオを作ったのか
作ったポートフォリオの改善点
現在のDB構成になっている理由
テストは書いてあるか
デプロイ環境はどういう構成になっているか

1, 2は作った意図から、
論理的思考ができている人かを見抜く質問です

仕事では論理的思考が必須なため、
うまく受け答えができないと悪印象を与えます

面接官を感心させる必要はないので
アラが出にくいポートフォリオがコツです

3, 4, 5はシステム設計や実装の能力から
論理的思考ができている人かを見抜く質問です

面接官は時間の都合上
ソースコードを全部読むことはできません

会話を通して必要な知識があるかどうか判断されます

上記を踏まえて
ポートフォリオに必要な要素を解説します
↓

エンジニア転職のポートフォリオに必要な要素

【注意】
闇雲に作ったポートフォリオでは
加点されません

むしろ実装にかけた時間が無駄になります…

まずはポートフォリオを作る上で
知っておかなければいけない要素
について解説します

ポートフォリオに必要な要素

システム設計
コンポーネント設計
リファクタリング済みのコード
テストコード
例外処理

エンジニアの選考では
絶対にポートフォリオの説明が求められます

設計のスキルにおいては
どのようなシステム設計になっているか？
コンポーネント設計はどう行っているか？
リファクタリングはされているか？

実装のスキルにおいては、
十分に検討されたコードになっているか？
テストコードは導入されているか？
例外処理は行われているか？

プロが実際に実装を行う上で
注意していることが聞かれます

詳しく学びたい人は
こちらの本が詳しく解説されているのでおすすめ
↓

設計系の必須知識

実装系の必須知識

では、ポートフォリオの具体例
を解説していきます
↓

ポートフォリオの具体例：5選

ポートフォリオの具体例を解説します

この5つのどれかを実装するのがベターです
↓

ポートフォリオの具体例

検索サイト
レビューサイト
ニュース系のサイト
チャットでコミュニケーションできるサイト
決済機能が伴うECサイト

1つずつ解説していきます

①検索サイト

DBに登録した情報を検索するサイトです

Googleのようなサイトではなく
単純にDBからデータを取得するサイト
を想定してます

内容と難易度はこちら
↓

難易度	優しい
サイト案	・書籍の検索サイト・観光地の検索サイト・Todo管理サイト
アピール点	・最低限のフレームワークの知識・最低限のTypeScriptスキル
実装する機能	・データの一覧検索・データの絞り込み検索・データの1件取得
注力すべき点	・フレームワーク選び・コンポーネント設計・DB設計
参考教材	おすすめ NextjsとSupabaseによる高性能Web開発(30日間返金OK) → フロントエンドで完結する！

検索サイトは最も基本的なポートフォリオです

DBからデータを検索してくるサイトのため、
実装の知識だけではなく
DBやSQLの知識が必要とされます

シンプルのように思えますが
DB構成を複雑にすることもできるので
十分にアピールに使えるサイトです

②レビューサイト

ユーザがレビューを登録できるサイトです

単純にDBからデータを取得するだけではなく
データ同士が紐づいた状態で保存&取得するサイト
を想定しています

内容と難易度はこちら
↓

難易度	普通
サイト案	・レストランレビューサイト・本のレビューサイト・Q&Aサイト
アピール点	・標準のフレームワークの知識・標準のTypeScriptスキル
実装する機能	・検索サイトで実装する機能・ユーザ登録機能・レビュー機能
注力すべき点	・フレームワーク選び・セキュリティ対策
参考教材	おすすめ Nextjs + Tailwind CSS + Django で学ぶモダンReact開発(30日間返金OK) → ユーザ登録、モダンCSSも解説

レビューサイトの実装難易度は
検索サイトより少し難しいです

基本的な実装内容は
検索サイトにコメント機能を加えた形です

またユーザ登録の実装に加えて、
新しいデータ追加するため実装
とテーブル構成が増えます

十分に検討されていれば
ポートフォリオとしてアピール点が高いです

個人的には
コスパいいと思うのでおすすめです

③ニュース系のサイト

DBのデータを
継続的に更新するサイトです

ポートフォリオで作るサイトでは
自分でニュース記事を書きません
（=自動ニュースを取ってくる）

内容と難易度はこちら
↓

難易度	難しい
サイト案	・メイク系のニュースサイト・金融系のニュースサイト
アピール点	・DB・クエリの知識・実装スキル・アルゴリズムの知識・データフィードの知識
実装する機能	・検索サイトで実装する機能・ニュース情報のフィード・配信アルゴリズム
注力すべき点	・DB設計・配信アルゴリズム
参考教材	おすすめ Reactで作るニュースサイト（英語）(30日間返金OK) → 唯一、ニュースの作り方を　解説されているサイト

他のニュースサイトで執筆されているニュースを
定期的に取得してきて、最適化して配信を行う
という流れで行います

データを定期的に取得してくる機能
のことをフィードといいます

このフィードのアルゴリズムと、
配信アルゴリズムがアピールポイントになります

メディア系の企業に転職を考えている人におすすめです

④チャットなどでコミュニケーションが取れるサイト

ユーザ同士がサイト内で
コミュニケーション取れるアプリケーションです

内容と難易度はこちら
↓

難易度	難しい
サイト案	・Twitterのようなサイト・Facebookのようなサイト
アピール点	・DBスキル・高い実装スキル
実装する機能	・検索サイトで実装する機能・コミュニケーション機能
注力すべき点	・DBの構成
参考教材	おすすめ React×Firebaseでツイッターをハンズオンで自作(30日間返金OK) → Twitterを作りながら、　ポートフォリオができる

チャットなどでコミュニケーションが
取れるサイトは実装難易度が高い分、
アピールしやすくおすすめです

チャットの会話内容を
どのようにDBに格納するかがポイント
になります

⑤決済機能が伴うサイト

ポートフォリオの中では
最も難しいのが決済を伴うサイトです

内容と難易度はこちら
↓

難易度	難しい
サイト案	・ショッピングサイト・サブスクリプションで機能が使えるサイト
アピール点	・高いDBスキル・高い実装スキル
実装する機能	・検索サイトで実装する機能・ユーザ登録機能・決済機能
注力すべき点	・高いセキュリティ対策・決済まわりの実装
参考教材	おすすめ Next.jsでECサイトを構築【決済システム構築】(30日間返金OK) → 決済の実装まで勉強できる