【2022年】未経験からエンジニアになるためのポートフォリオとは！

年々未経験からエンジニアを目指している方のポートフォリオレベルが上がっているのはご存知ですか？

数年前まであれば、チュートリアルレベルのポートフォリオでも採用されていた時代がありました。

しかしプログラミングスクールやインフルエンサーの影響により、未経験からのエンジニア転職人口も増加。

ポートフォリオのレベルも比例して上がっていきました。

この記事では、現役エンジニアの私が2022年未経験からエンジニアになるための良質なポートフォリオの作り方を紹介します。

特に以下の3つを中心に解説していきます。

設計から実装までイメージしやすいよう具体的に解説しているので、ぜひ参考にしてください。

エンジニアのポートフォリオとは

そもそもエンジニアのポートフォリオがどんなものなのかわからない方もいるのではないでしょうか。

ポートフォリオとは、いわゆる「作品」のことです。

自分の職種、例えばエンジニアやデザイナーにおける実績や力量を評価してもらうために作成するものになります。

クリエイターの就職・転職には欠かせないものです。

この記事を読んでくれているエンジニア志望の方々にとっては、「自身の力でwebアプリケーションの制作を行うこと」とイメージしていただければ良いと思います。

未経験で評価されるエンジニアのポートフォリオとは？

結論として面接官に評価されるポートフォリオとは

「自走能力を良質なポートフォリオで証明できていること」です。

数年前まではチュートリアルレベルのwebアプリケーションでも評価されていた時代もありました。

しかし現在では、未経験からエンジニアを目指す人も多くチュートリアルレベルでは評価されなくなっています。

つまり、レベルの上がっているエンジニア業務未経験の方たちと競わなくてはいけないのです。

では、大前提を理解していただいたところでポートフォリオの制作方法を紹介していきます。

ポートフォリオの制作順序

まずポートフォリオ制作は、おおまかに以下の手順で行います。

では具体的にどんなポートフォリオが有利なのか紹介します。

どんなポートフォリオが転職において有利なのか？

いきなり準備もせずコードを書き始めるというのは、戦争に水鉄砲で挑むようなものです。

まずどんなポートフォリオが有利なのかを調査することから始めましょう。

以下挙げた点は未経験からエンジニアを目指す方と差別化する上で重要なポイントです。ぜひ参考にしてみてください。

十分な機能の実装をしている

コードの難易度を高くし、機能を減らすという選択肢もあります。

しかし未経験の時点で難易度を挙げ実装が進まず1日が経過してしまうことの方が非効率です。

簡単な機能でよいのでコード量を増やし、機能を充実させましょう。

UI/UXが整っている

UI/UXは人でいうところの第一印象になるため非常に重要です。

ポートフォリオでも同じ用にデザイン面をこだわりましょう。

Bootstrapなどを利用しビューを整えることをおすすめします。

コードの可読性が高い(rubocopなど静的解析ツールも活用できている)

rubocop等の静的解析ツールを導入しインデントや不要な改行をなくしましょう。

インデントがバラバラだったり、改行が適当なコードはマイナスな印象を与えるでしょう。

ほとんどの企業がrubocopを導入しており、コード成形を厳しくレビューする傾向にあります。

そのため「見られてる感」を意識できていないコードは問題外です。

統合テスト、単体テストが記載されている

テストが不足すると不具合につながりかねません。

単体テストは、比較的記載している方が多いと思います。

そのため統合テストまで記載されている方は差別化できるでしょう。

インフラにAWS、Docker、circleCIを利用する

AWS、Docker、circleCIは採用されている企業が多いです。

特にDockerを使わない企業はないため、Dockerを利用することは評価されるポイントになると考えられます。

またポートフォリオでAWSやdocker・circleCIが使えている人はごく僅かです。

これらのレベルの高い技術をポートフォリオに組み込むと、かなりレベルの高いポートフォリオになるでしょう。

Dockerについて知りたい方や、Dockerって何？という方は以下の記事を参考にしてください。

未経験でもわかる！Dockerとは？メリットまで解説

Githubのissueやプルリクの活用している

実際に現場に入ることを想定し、issueを作成、PR作成、マージまでを行っていきましょう。

GithubのReadmeは必ず見られるため、issueやPRまで作成し実装を進めることをおすすめします。

アプリケーションの用途や使用方法が直感的に理解できること

説明を読んでも一発でわからないというものは望ましくありません。

面接官が1人のポートフォリオに何時間も見ているわけではないため、直感的にわかるものにしましょう。

アプリケーションのレスポンスが良好である

アプリケーションを表示する際、アクセスに時間がかかると評価者がイライラする要因にになります。

人生をかけた転職活動になると思うので、通信速度が遅い無料サーバーなら課金するなどして対処しましょう。

リアルなデモデータを登録してる

作成したポートフォリオがサービスとして一般公開されていることを想定してデモデータを作成しましょう。

実際のデモデータを入れることで使用用途がイメージしやすくなるため投資対効果高いです。

例えば「テスト01」、「あああ」などは避けましょう。

また実際に知り合いなどに利用してもらい、感想をもらうのもおすすめです。

面接の場で話題にすることができます。

機能数が十分に多いこと

機能の難易度よりも機能の数の方が大きく印象を左右する傾向があります。

「難易度高め、機能少ない」より「難易度簡単、機能多め」の方がコード量が多くなり差別化を図ることができます。

不具合がないこと

ポートフォリオを提出する際、不具合やサーバートラブルは起こらないようにしましょう。

APIなどの外部ツールを中心としたアプリケーションはAPIがエラーになると動かなくなるため注意が必要です。

Readmeが整理整頓されていて使用している技術等がざっと把握できること

評価者の方はReadmeを見て仕様を把握するという方は多いと思います。

そのため十分な情報が見やすく整理された状態であれば、見るポイントを把握できます。

Googleで「Readme　書き方」などで検索しわかりやすいReadmeの書き方を調べましょう。

ポートフォリオのテーマ選定

さて、どんなポートフォリオを作成すれば良いか情報をまとめることができたら、ポートフォリオのテーマ選定です。

ここが一番むずかしいところではないでしょうか。

僕がプログラミングスクールのメンターだったとき、テーマ選定で悩む方は多くいました。

しかしポートフォリオのテーマを明確にすることは、面接の場で作成意図を伝えやすくなります。

なんとなく作成した人と、テーマを持って戦略的に制作するのでは、後に大きな差を生むため「このような意図で作成しました」といえる理由を明確にしましょう。

ポートフォリオのテーマの決め方

結論として、エンジニアになろうと思った経緯やこれまでの経歴と「一貫性」があるものの方が最も良いでしょう。

転職や就活で志望動機をこれまでの経歴と一貫性を重視するのは、一般的かつ重要です。

そしてエンジニア転職のポートフォリオに関してもその傾向はあります。

今まで出会った課題や問題意識と関連づいているものの方が、評価が高くなりやすでしょう。

その理由は「強いストーリー」が存在する方がより好印象になるためです。

もしあなたが企業の面接官だったら、「この志望者は口だけだな」と思う人より言動に一貫性がある人の方が信頼できませんか？

ポートフォリオも同じです。

「こうゆう経験をしたからこのポートフォリオを作ったんだ！」

というストーリーがある方が面接官は感情移入する傾向にあります。

よって、エンジニアになろうと思った経緯やこれまでの経歴と「一貫性」があるものにしましょう。

ポートフォリオでアピールすべきスキルは思考力

技術力ももちろん大事です。

しかし未経験の場合、エンジニアとして採用すると投資価値がありそうと思ってもらえるスキル（思考）をアピールすることが重要です。

そもそもエンジニアはプログラムを書くだけではありません。エンジニアには（社会人としてもですが）以下5つのスキルが重要です。

1. 問題発見力
2. 解決策の立案力
3. 立案したアイデアを実現する力
4. ユーザーに価値を提供するスキル
5. 改善を回すスキル

そしてエンジニアはこれらの課題発見から解決をシステムを通して解決する仕事であるといえます。

だからこそ、言動の一貫性や「こんな課題を見つけた」という着眼点が重要です。

ポートフォリオのテーマは何が正解なのか？

それで結局何を作るのが得策なのか？ですが、コピーサイトは技術力だけのアピールになり経験者に劣るため避けたほうが良でしょう。

例えばレストランの口コミサイトは、食べログなどと同じであるためおすすめしません。

だからこそ、思い入れがあるオリジナルサービスを作成することが重要です。

思い入れのあるサービスであれば、面接の場でのコミュニケーションツールとして使うことができます。

市場調査した評価されるポートフォリオを元に、自分が生活しているとき不便だと感じるものをメモに書き留めておき考えましょう。

ポートフォリオ作成でやってはいけないこと6選

これまでは、どのようなポートフォリオを作るべきか？という観点でお話しましたが、ここからはやってはいけないアンチパターンについて6つ記載します。

複数アカウントでログインしないと使えない機能に工数を使ってしまうこと

面接官が何度もログインユーザーを作成しなければ、使えない機能をを時間をかけて見るとは考えられません。

実際に採用現場で、ログインするのがめんどくさいというのは話題になります。

例えばリアルチャットアプリ等は2人のユーザーを作成しないと使うことができません。

見てもらえなければ開発コストの割に、評価されない可能性もあります。

よって単純に送受信できる機能で対応しても良いと思います。

ユーザー登録やSNSログインの機能に工数をつかってしまうこと

基本的に評価者は何十人、何百人というポートフォリオを見ているため時間をかけ操作することはないと考えましょう。

そのためテストユーザーログインやかんたんログインで１クリックでログインできる設計にしておいた方が得策です。

SNSログインは見ず知らずの他者のアプリケーションに対して、自身のSNSを登録したいと思わないですよね。

だからこそ、工数をかけすぎるのには注意しましょう。

決済系の機能に工数をかける

ECサイトはよくありますが、出品から購入までのチェックに手間がかかってしまいます。

上述している点と似ていますが、ユーザーを2人作成しなければならないためです。

よって出品はすでにできている状態で提出することが大切です。

外部API連携に頼りすぎること

外部APIに依存したサービスにしてしまうと何らか異常が発生した場合に対処できないことも考えられます。

可能性は低いですが、もしポートフォリオ提出日にAPIにトラブルが発生したら大変なので外部APIは補助にしましょう。

basic認証機能は使わない

basic認証はセキュリティーの観点からは得策ですが、面接官が入力する手間を取ってしまいます。

よって別の簡易的な機能に工数をかけるほうが良いと思います。

トップページがログイン画面になっている

面接官に唯一見られるのがReadmeとトップページです。何度もいっていますが第一印象になるためです。

だからこそ、URLをクリックしたらトップページを表示させる仕様にしましょう。

もしログインページにするならば、ログイン画面にIDとユーザー名を初めから入れておきましょう。

Readmeに関する注意事項

どんなポートフォリオなのかを表現するReadmeに関するの書き方の例です。

よければ参考にしてください。

1. 一番上でアプリケーションの概要を１行で記載する
2. アプリケーションの機能一覧
   • 記事機能一覧
   • 記事にコメントをつける機能
   • 認証機能
   • ページネーション機能
   • その他アプリで実装している機能一覧を簡潔に記載する
3. アプリケーション内で使用している技術一覧
   • インフラで何をつかっているのか
   • データベースには何をつかっているのか
   • 画像アップロードにはどういったライブラリを使っているのか
   • デプロイはどのように行なっているのか

※評価者にはReadmeの下の方は見てもらえないということを前提に2,3はまとめて書く

これらはごく一部ですので、ぜひご自身で調べてみてください。

おすすめの学習方法

Udemy

Udemyでは、動画コンテンツで学習を進めることができます。

また買い切りのコンテンツになるので、自分の好きなタイミングで学び、復習することができます。

「本業を行いつつポートフォリオを作成したい方」や「新たな言語を学習したい方」におすすめの学習方法です。

ぜひ自分の学びたい講座を選び、ポートフォリオを進めてみてください。

仮説を立てて考えられる人になろう

僕はたくさんの未経験からエンジニアを目指す方を見てきました。

その中で、「この人優秀だな」「きっとすぐ内定もらえるだろうな」と感じた方は、自身で仮設検証を行う人でした。

思考停止状態で、仮設を立てず調べない人は、面接の場でも言動の節々から伝わってしまうと思います。

この記事を読んでくださった人は、少なからず自分自身で調べた結果たどり着いたはずです。

だからこそ、これからもっと調べて面接の場で思いの伝わるポートフォリオを作成してください。

応援しております。