転職 PR

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

フロントエンドエンジニア転職に必要なポートフォリオの例
記事内に商品プロモーションを含む場合があります

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

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

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

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

対象読者

  • ポートフォリオの具体例を知りたい
  • ポートフォリオを作るコツを知りたい
本記事の内容
  • ポートフォリオで頻出するする質問
  • ポートフォリオを作るのに必要な要素
  • ポートフォリオの具体例
  • ポートフォリオを作るコツ

順番に解説します!!

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

ポートフォリオの役割

エンジニア転職ポートフォリオ具体例1

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

ポートフォリオの役割

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

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

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

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

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

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

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

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

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

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

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

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

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

面接で頻出する質問

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

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

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

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

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

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

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

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

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

エンジニア転職ポートフォリオ具体例2

【注意】
闇雲に作ったポートフォリオでは

加点されません

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

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

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

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

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

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

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

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

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

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

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

エンジニア転職ポートフォリオ具体例3

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

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

ポートフォリオの具体例

  1. 検索サイト
  2. レビューサイト
  3. ニュース系のサイト
  4. チャットでコミュニケーションできるサイト
  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)
→ 決済の実装まで勉強できる

5つの中でもっとも難易度が高いサイトです

決済を伴うため、
通信やデータのセキュリティを高める実装
が必要です

ポートフォリオの質を上げるコツ

エンジニア転職ポートフォリオ具体例4

ポートフォリオ作りにはコツがあります

コツを理解しておかないと、
質が上がらず選考で不利になります

どれを作るかイメージが湧いた後は、
コツを理解しておきましょう

ポートフォリオの質を上げるコツ

  1. 転職したい企業を洗い出す
  2. 転職したい企業に近いサイトを選ぶ
  3. ポートフォリオの最低限必要な機能を決める

①転職したい企業を洗い出す

企業を探すことで
どういうポートフォリオを作るべきか

ヒントになります

ポートフォリオを作成しても、
転職先と毛色の違うサイトを作っても響きません

転職したい企業を洗い出し、
どのようなサービスを開発運用しているか
把握しましょう

企業を探す具体例

検索機能が特徴の企業なのか?
レビュー機能が特徴の企業なのか?
ニュース系の機能が特徴の企業なのか?

②転職したい企業に近いサイトを選ぶ

転職したい企業のめどがたった後は、
実装する機能を検討しましょう

転職したい企業によっては
ポートフォリオの実装難易度を
高くしすぎないでも良い場合
があります

例えば、レビューサイトを運営する企業の選考に「決済機能があるサイトのポートフォリオ」を提出しても「なんで?」ってなりますよね?

必ずあっているサイトを選ぶ
ことを心がけましょう!

③ポートフォリオの最低限必要な機能を決める

どのようなサイトを作るか決まったら、
最低限必要な機能を決めましょう

ポイントは
「完璧に作り込もうとしないこと」
です

作り込んでから選考を受けようとすると
時間が無駄にかかってしまう
のでおすすめではありません

エンジニア転職を成功させるコツ

エンジニア転職ポートフォリオ具体例5

スキルがある人でも
不採用になることはよくあります

【不採用になる理由の例】
・良い求人に出会えない
・魅力が伝わらないで落ちる
・企業の選び方がわからない

エンジニア転職では
ポートフォリオと同じくらい重要なのが
転職サイト選び
です

本記事では
転職がうまくいきやすい
サイト選びのポイント
だけ解説します

転職サイト選びのポイント

  1. 求人数は多いか?
  2. 履歴書添削などサポートがあるか
  3. 年収UPできるか?
  4. スキルマッチしやすいか?


あなたは転職活動のとき、
どれを重要視しますか?

どれを重要視するかによって
選ぶべき転職サイトが異なります

こちらの記事に
おすすめの転職サイトがまとまっています

サイト選びに、参考にしてみてください

さいごに:ポートフォリオの作成が目的ではない!転職することが目的!

今回はエンジニア転職における
ポートフォリオの内容やコツ
について解説しました

ポートフォリオの質は
あげようとするとどこまでも挙げられます

しかし、
ポートフォリオの作成が目的ではなく、
転職することが目的

なので間違えないようにしましょう!

最後まで読んでいただき、ありがとうございます!

Twitterでは最新のエンジニア情報や、NFT関連の情報を発信していますのでフォローいただけると嬉しいです!

では、また!