MENU

未経験からフロントエンドエンジニアへ!ポートフォリオの作り方3ステップ

2020 2/29
未経験からフロントエンドエンジニアへ!ポートフォリオの作り方3ステップ

未経験からフロントエンドエンジニアを目指すにあたって、ポートフォリオの作り方に迷われる方は多いです。

なぜなら、未経験者はスキルが高いわけでもないため、面接官に受けの良いポートフォリオの作り方がわからないためです。

今回は、現役でフロントエンド・バックエンドの両方をこなす僕が

  • 面接官受けの良いポートフォリオの作り方
  • フロントエンドエンジニアを目指す人がポートフォリオに書くべき内容とレベル
  • 具体的なポートフォリオの作り方

について解説していきます。

目次

未経験でもポートフォリオを作るべき理由

まず、未経験からフロントエンドエンジニアを目指すにあたってポートフォリオは必要か?疑問に思われるかもしれません。

結論からお話すると、ポートフォリオは必須ではないが、あると面接では有利になることも多いです。

なぜなら、ポートフォリオは自身が学習した内容をアピールする最も有効な手段になりうるためです。

ポートフォリオは学習内容をアピールするためのもの

まず、企業は未経験エンジニアを採用するにあたって、様々な不安を覚えます。

特に未経験であれば、経験者よりもその不安の種類は必然的に多くなります。

ポートフォリオがあると、レベル感にもよりますが、未経験者として最低限OKと判断する企業は少なくないでしょう。

転職をする側からすると「実際に話を聞いてどんな学習をしたか企業側に判断してほしい!」と思われるでしょうが、最近は未経験からのエンジニア志望者が増えています。

そのため、学習内容がわからない人は書類選考の段階で落とされるケースが少なくないのです。

したがって、エンジニアになるチャンスを逃したくない方は、ポートフォリオを用意しておくのが無難な選択と言えるのです。

体感では応募者全体の2割程度しかポートフォリオがないため差別化のチャンス!

フロントエンドエンジニア未経験者のポートフォリオで書くべき内容

では、フロントエンドエンジニアを目指す人のポートフォリオの内容についてお話します。

ポートフォリオは、企業の人に見てもらうため、以下の2点に関して注意が必要です。

ポートフォリオ作成の注意点2つ
  • ポートフォリオに書くべき内容を押さえる
  • 企業が求めるレベルのポートフォリオを作る

ポートフォリオに書くべき内容

まず、ポートフォリオを作ったとしても、書いている内容が薄ければ企業も「何を見ればいいの?」と疑問に思います。

したがって、ポートフォリオには以下の内容は最低限書くようにしておきましょう。

ポートフォリオに書くべき内容
  • 制作物の説明
  • 使用した技術・担当範囲
  • 制作期間
  • 工夫ポイント・制作理由

以下のサイトなどはキレイにまとまっていて非常に見やすいですね。

あわせて読みたい
SIMA Portfolio
SIMA Portfolioもんしょーのポートフォリオサイト

より詳しくどんな内容を書くべきか知りたい方は以下の記事でまとめているので、合わせてご覧ください。

あわせて読みたい
【参考例あり】高評価を受けるエンジニア未経験者のポートフォリオとは?必要なレベルも公開
【参考例あり】高評価を受けるエンジニア未経験者のポートフォリオとは?必要なレベルも公開未経験からエンジニアになるにあたって、ポートフォリオをどうやって作成すればいいかわからない人は多いと思います。もし、すごく高い技術力があるわけでなくても、面...

未経験者に求めるポートフォリオのレベル

フロントエンドエンジニアを目指すにあたって求めるべきレベルは、CRUD操作ができるアプリケーションです。

CRUD操作とは、データ処理の操作のことであり、ブログサイトの例で話すと以下のようになります。

CRUD操作
  • C・・・Create(データの登録処理:ブログ記事の投稿)
  • R・・・Read(データの読み込み:ブログ記事の閲覧)
  • U・・・Update(データの更新:ブログ記事の内容修正)
  • D・・・Delete(データの削除:ブログ記事の削除)

通常、これらの操作を行うためには、PHPやRubyなどのバックエンド言語を使うのが一般的です。

しかし最近は、FirebaseやAWSといったサービスによって、フロントエンドエンジニアでもこれらの技術を使う機会が増えています。

この「フロントエンド言語 + FaaS」の構造をサーバレスアーキテクチャと言います

急に難易度がグッと上がったように感じられるかもしれませんが、導入自体はそれほど難しくありません。

したがって、次のポートフォリオを作るステップを読み進めて作り方を把握していきましょう。

【未経験者必見】具体的なポートフォリオの作る3ステップ

では、具体的なポートフォリオの作り方についてお話していきます。

先に一覧でステップを解説しておくと以下のようになります。

ポートフォリオ作成の3ステップ
  • STEP 1: ポートフォリオのアイデアを考える
  • STEP 2: MVPを考える
  • STEP 3: 実際に作る

STEP 1: ポートフォリオのアイデアを考える

まず始めにポートフォリオのアイデアを考えていきましょう。

未経験からエンジニアに目指す人は「TODOアプリ」「Twitter」のようなアプリケーションを作ることが多いですが、ポートフォリオとしてはおすすめしません。

なぜなら、そうしたアプリケーションは「車輪の再発明」と言ってエンジニアが避けるべきことのためです。

車輪の再発明・・・既にあるものを利用せずに1から作ること

したがって難易度は上がりますが、オリジナルで考えたアイデアを出したいところです。

具体的なアイデアの出し方については以下の記事で解説しているので合わせてご覧ください。

あわせて読みたい
【5ステップ】初めてのオリジナルアプリの作り方!アイデアの出し方も公開
【5ステップ】初めてのオリジナルアプリの作り方!アイデアの出し方も公開この10週間プログラミング講座では、知識ゼロのプログラミング初心者の方がプログラマーとしてのキャリアをスタートできることを目指す講座です。第8週目の「【webアプ...

STEP 2: MVPを考える

MVPとは、Minimum Viable Productの略で、価値を届ける最小限のことを指します。

例えば、一般的なメモアプリを想像してもらうと以下のような機能がついていることが多いです。

メモアプリの機能
  • メモの登録機能
  • メモの削除機能
  • メモの閲覧機能
  • メモの修正機能
  • お気に入り機能
  • 文字数カウント機能
  • グルーピング機能
  • メモの色つけ機能
  • メモの同期機能
  • etc…

このように多数の機能があります。

しかし、メモアプリの必要最小限を考えたときには以下の機能で十分でしょう。

メモアプリの必要最小限の機能
  • メモの登録機能
  • メモの削除機能
  • メモの閲覧機能
  • メモの修正機能

このように機能を絞りに絞って残った機能のみを作っていきます。

これをすることによって明確にどこまで作ればOKか?の線引をすることができます。

まずは、できるだけ早く動くものを作り切ることに専念しましょう。

最初からあれもこれも…というのは100%失敗するよ!(経験済)

STEP 3: 実際に作る

では、実際に自分で考えたアプリケーションを作っていきましょう。

とはいえ、最初から何も学習せずにアプリケーション開発をすると設計に無理が出て破綻します。

したがって、まずはUdemyで一通りアプリケーション開発の基礎を写経して学ぶのがいいでしょう。

超Vue JS 2 入門 完全パック

上記の講座では、Vue.jsやフロントエンドエンジニアとして必要な以下の知識を網羅してくれています。

講座で学べる知識
  • コンポーネント指向
  • Vue Routerによるルーティング
  • Vuexによるstore処理
  • axiosを使った非同期通信処理
  • Firebaseを使ったサーバレスアーキテクチャ構築

講座は17.5時間と長時間ですが、それだけ学習できることも非常に多い講座です。

こちらの学習を終えた上であれば、自分が考えたアプリケーション開発のイメージがより湧きやすくなります。

ポートフォリオを作るときも「写経 => オリジナル」の流れを意識できれば、良いものを作れるでしょう。

まとめ:未経験者のポートフォリオのレベルは高くなくてOK!

ここまでの記事のポイントをまとめます。

  • 未経験でもポートフォリオを作るのは企業へのアピール
  • 内容のあるポートフォリオは技術レベルが低くても評価が上がる
  • ポートフォリオは最低限の機能しかないものを作ろう

ここまで未経験からフロントエンドエンジニアを目指す人のポートフォリオの作り方について解説してきました。

どんなものを作ろう…と悩んでいた方も、なんとなくイメージが湧いてきたかと思います。

しかし、ポートフォリオを作る目的は転職を成功させることであり、ポートフォリオを作ること自体を目的にしてはいけません。

そして転職を成功させるためには、面接官を納得させる魅力的な志望動機を作ることも同じくらい大切です。

以下の記事で魅力的な志望動機の作り方について解説しているので、合わせてご覧ください。

あわせて読みたい
【例文あり】面接官ウケの良いエンジニア未経験者の志望動機の作り方
【例文あり】面接官ウケの良いエンジニア未経験者の志望動機の作り方未経験エンジニアの志望動機サンプル!例文付きで転職理由を解説します未経験からエンジニアになろうと考えたときに面接は避けては通れない道ですよね。志望動機を考え...

- 本気でエンジニアを目指す人の10週間ロードマップ -

  • 手に職をつけたい・・・
  • プログラミング学習に挫折した・・・
  • 本当に転職できるか不安・・・

そんな悩みを持っている人に

現役エンジニアが教える3ヶ月でエンジニア転職を実現する方法

を解説しています。

コメント

コメントする

目次
閉じる