未経験からITエンジニアに転職するためのポートフォリオの作り方とは?フローを解説します

プログラミング学習が終わったから、ポートフォリオを作る段階になりました。

 

よし!ガッツリ、人が作らないようなサイト作るぞ!」と気合い十分。

いざ、ポートフォリオ作ろうとしたら「何からしたら良いの?」とわからなくなり、挫折に繋がることは良くあります。

 

この記事では、どのようにポートフォリオを作っていけば良いのか、採用担当も兼任する、現役のエンジニアが手順(フロー)を示していきます。

 

そもそも何故ポートフォリオが必要なの?

ITエンジニアへの転職でポートフォリオが必要な理由は、応募者が何をすることができるのか採用担当が見極めるためです。
ポートフォリオがないと、採用担当は何ができるのかわからないため、採用に至ることは無いです。

 

筆者も採用担当の業務を行いますが、ポートフォリオがない人は、プログラミング(もしくはエンジニアリング)で何か実績を持っていない限りは、書類審査を通過させたことがないです。

 

そのことからも、未経験からエンジニアに転職するのであればポートフォリオの制作は必須です。

 

ポートフォリオの作成手順

概要

 

ポートフォリオを作る手順は、大まかに以下の通りです。

 

  1. ポートフォリオの題材を決める(対象ユーザを決める)
  2. 画面設計
  3. ポートフォリオに作るのに必要な技術のピックアップ
  4. 本番環境(公開する場所)を準備
  5. データベース(DB)の設計
  6. 実装する(プログラミングコードを使って作り上げる)
  7. テストする
  8. インターネット上に公開する

 

ポートフォリオの題材を決める(対象ユーザを決める)

 

まず、あなたが作るポートフォリオは、誰が使うか(ペルソナと言う)を決めます。

たとえば、あなたの知り合いにインターネットを利用して野菜を売る農家がいたとします。その農家を「ペルソナ」とします。

その農家(ペルソナ)は、PRの一環として複数SNSを利用して、野菜ができていく様子を投稿(投稿内容は全く同じとする)していたとします。

 

ペルソナは、1つの投稿のために、いちいち複数のSNSを開いて、投稿することになります。ペルソナは、複数のSNSに投稿が「面倒」と感じています。

そのような「面倒」を解消することが、ポートフォリオを作る題材になります。

このように誰かの助けになる視点で、考えると題材が生まれます。

 

 

題材にブログ、TODO、SNSアプリはおすすめできない

私は、エンジニアの採用活動もしています。

その中で気になったことを述べます。

 

応募者は、TODOアプリ、SNSアプリ(ログイン、投稿機能、コメント機能)をポートフォリオの題材にすることが多いです。

 

その理由は、作りやすいからだと思います。

 

もちろん、サイトのデザインが、応募者同士で同じというわけでは無いです。

・旅行が好きな人向けSNS

・音楽が好きな人が集まるSNS

・ある業種向けのタスク管理ツール(TODOアプリ)

・個人向けのタスク管理ツール

 

上記は、利用するユーザは別々にいると思います。

しかし、機能に着目すると、ありがちな「ログイン、投稿機能、コメント機能、画像を投稿できる」と同じようなものができてしまい、他の人と差別化できなくなります。

 

採用担当の視点から見ると、採用したい人は、10人中1人の割合です。

「同じようなアプリを見ても仕方ない」と思い、「お見送り」にすることが多いです。

 

画面設計

ポートフォリオの題材が決まったら、次にやることはどんな画面が必要か挙げていきます。

先ほどの農家の例で、複数のSNSに同時に投稿するツールを考えてみます。

 

条件、機能を抽出する

まずは、あなたが作るポートフォリオでは何ができるか、条件や機能を上げていきます。

  • SNSへの投稿は、特定の人しかできない
    • ログイン機能が必要だ
  • 投稿するSNSは、フェイスブック、ツイッター、インスタグラムに限定する
    • 上記のSNSに一括で投稿するなら、SNSそれぞれのAPI必要だ
  • 投稿方法は、フォームに書いた内容を送信しよう
    • 1つのフォームを作り、そこに記入してボタン押したら複数のSNSに反映されるようにしよう

 

必要な画面を抽出する

一通り条件、機能を洗い出したらどんな画面が必要か挙げて行きます。

ざっくり挙げてみます(おそらく、下に挙げた画面以外にも必要なものがあると思います)。

 

  • ログイン画面
  • 投稿画面
  • 投稿が正しくできたのか、経過をユーザーに教える画面

 

画面の作成

画面を挙げたら、実際に画面を書き出してみます。

画面を作成するというと、イラストレータなどのデザイナーが使うようなものを浮かべるかと思います。

 

イラストレータのようなデザイナー専用のツールを使う必要はありません。

 

筆者がオススメする画面作成ツールは、drawioです。

drawioには、以下の図ようなテンプレートがあるので、「どうやって作ったらいいの?」は軽減されます。

 

この工程が終わると、どんなものを作るのかイメージできるようになります。

 

 

ポートフォリオに作るのに必要な技術のピックアップ

ここからは、イメージしたポートフォリオをどのような手段で実現させるか決める段階です。

 

 

  • ポートフォリオをどのような手段で作るのか?
  • 作ったポートフォリオをどのように公開するのか?

 

いくつか例を記載します。

 

  • どのプログラミング言語を使うか(PHP、Javaなど)
  • laravelなどのフレームワークを利用するのか
  • 必要なAPIの抽出
    • フェイスブック、ツイッター、インスタグラムに同時投稿したいなら、それぞれのAPIをどのように使うのかの調査
  • データをどのように保存するのか
    • ほとんどの場合は、データベース(DB)を使うことになる

 

 

  • Herokuで公開する
  • AWSなどのWEBサーバーを利用して公開するのか?
  • Dockerを利用したインフラ作成
  • CircleCIを使った自動デプロイ、自動テスト

 

 

本番環境(公開する場所)を準備

ポートフォリオを公開する場所を準備します。

 

本番環境(作成したものを公開するサーバーなど)は、ポートフォリオを本格的に製作する前(プログラミングして実際に作る前)に用意することをオススメします。

 

その理由は、自分のパソコンでポートフォリオが動いたとしても、本番環境に入れた結果、動かないことが多々あるからです。

 

特に、開発PCがWindow、本番サーバーがLinuxの場合、ファイルパスの関係で動かないことがあります。

最悪、作り終わったあとに、かなりの作り直しが発生します。

そのことから、簡単なプログラムで良いので本番環境で動くことを確認することをお勧めします。

 

 

■筆者が、実務で体験した本番環境で動作しない問題

筆者は、過去にJavaのプロジェクトで、開発PCはWindows、本番サーバはLinxuという環境で開発しました。Windowsで動いたから問題ないと思って、そのままLinuxに反映させたら全く動かないという問題が発生しました。

しかも、Linuxに反映させたのが、納期日当日だったのでお客さんもかなりご立腹の様子でした。

 

あんな苦い思いは、二度としたくないし、このブログを読んでいる読者もしてほしくないですね。

 

 

データベース(DB)の設計

システム開発(ポートフォリオ)で一番の肝になるところは、データベースの設計になります。

DB設計は、データの格納方法を決めます。

この設計次第で、パフォーマンスが良いシステムになるのか決まります。

 

実運用するとデータが数万、数億行単位でデータが格納されていきます。

データがたまってから、データ構造を変えるのは、かなり難しくなります。

 

イメージとしては、

本棚にびっしに本を整理したあとに、本棚のレイアウトを変更するイメージでとらえると良いかもしれません。

一度入れたものを全て出して入れ替える必要があるので、そのための手間が発生します。

 

 

その結果、データベースの設計は大事と言えます。

 

※具体的なDB設計の方法はここでは取り上げません。

 

 

実装する

いよいよ、設計書を元にコードを書いてプログラムを作成していきます。

 

徐々に作品ができあがっていく様子を体感しながら、とり組めます。

プログラミングが好きな人だと、ぼっとうしてしまい1日10時間作業以上作業することも可能です。

 

 

テストする

実装が一通り終わったら、全機能をテストします。

 

質問者
テストするなんて当たり前じゃ無いの?
なんで筆者は、そんなことをわざわざ言うの?
テストをしてこない応募者が多いからです。

 

筆者は、応募者の書類選考をする立場にいます。

応募者が一生懸命に作ったポートフォリオを見ると、検索機能が機能しない(検索しようとしたらシステム側がエラーをはき出す)、ログインできないなどの不具合をよく見掛けます。

 

これらは、1度でもテストしていれば気付く内容です。

このような些細なミスで書類審査が通過しない人がたくさんいるため、もったいない気がします。

 

 

負荷テストはやらないほうが良い。

先ほどまでテストはやるべきという話をしました。

 

しかし、一つだけポートフォリオ作る段階では、やってはいけないテストがあります。

それは、「負荷テスト」です。

 

負荷テストは、サーバーにたくさんのリクエストをかけて、WEBアプリがどのくらいのパフォーマンスを発揮できるのか見るテストです。

 

 

WEBアプリをリリースする前に、1秒あたりどのくらいまでのリクエストなら耐えられるか(ユーザーが気持ちよく利用できるか)みるために実施されます。

 

テストの結果が出たらチューニングをしたりします。

 

なぜポートフォリオの作品に対してやらない方が良いかというと・・・

 

  • レンタルサーバーを使っている場合、リクエストが集中して他の利用者に迷惑がかかる(他の利用者のサービスもページの読み込みが遅くなるなどの影響が出る)
  • 従量課金型のクラウドサーバーの場合、利用料金が、万単位で一気に跳ね上がる。(awsで負荷テストをやったら1日で8万円かかったことがある)

 

その結果、ポートフォリオの段階では、負荷テストはオススメしません。

採用担当も「負荷テスト」をやっているかどうかまで問いません。

 

 

インターネット上に公開する

テストが終わったら、制作物を本番環境に反映させます。

そして、あなたが作ったポートフォリオをインターネット上に公開します。

 

これで転職活動の準備ができました。

 

 

ドキュメント作成

ポートフォリオが、一通り完成したら、ドキュメントを作成します。

ドキュメントは必須ではないですが、よりあなたのスキルをアピールできます。

 

最低限必要なドキュメントは以下の通りです

  • 利用するユーザ(個人的には一番重要だと思う)に関する記載
    • あなたが作ったポートフォリオは誰が使うのか明記します。
    • 利用するユーザが解決する問題の明記。
  • 画面設計書
    • ポートフォリオには、どのような画面があるのか、画面一覧表を記載します
  • DB(データベース)テーブル設計書
    • データベースのテーブル一覧があると良いです。
  • DBのER図
    • テーブル間の関連を明記します。
  • 使用した技術の解説
    • どのような技術(プログラミング言語、APIなど)を使ったのか記載します。
    • さらに、なぜその技術が必要になったのかも書くと吉です。
  • インフラ
    • システム構成図
    • デプロイ方法(Docker,CircleCIなど)

 

 

ポートフォリオは公開したら終わりではない

ポートフォリオは公開したら終わりではありません。

常に改善が必要です。

 

私が書類審査する中で「これはすごく良い!書類審査合格!」と思わせたものは、作って終わりでは無く、誰かに見てもらい改善していました。

 

誰かというのは、以下の例があります。

 

  • 友人
  • 両親や兄弟
  • プログラミングスクールのメンター
  • Twitter民

 

 

 

質問者
1人で製作していると独りよがりになることがほとんど。だから、誰かの意見は重要なんですね

 

ポートフォリオのサポートがほしいな

1人で、ポートフォリオ製作や勉強が続かない人におすすめなのが、プログラミングスクールを利用した、勉強・転職活動です。

プログラミングスクールの受講料は高額です。

しかし、スクールを利用すれば、短期間で転職に必要な知識を得ることができます。

また、わからないところが出てきてもメンターに質問できるので、すぐに解消します。

 

その結果、独学で起きがちな「挫折しやすい」を防ぐことができます。

今回は、ポートフォリオ作成のサポートがあるプログラミングスクールを紹介しますね。

\ポートフォリオ作成サポートあり!オススメプログラミングスクール6選!/

イメージ
スクール名 テックアカデミー ドットプロ Aidemy Premium Plan DMM WEBCAMP 侍エンジニア塾 CHATY
公式サイトに行く 公式サイト 公式サイト 公式サイト 公式サイト 公式サイト 公式サイト
学べる内容
  • WEB開発
  • AI(機械学習)
  • IOS,Androidアプリ開発
  • ゲーム開発
  • 数学・統計学
  • WEB開発(AIと組み合わせた講座あり)
  • AI(機械学習)
  • WEB開発(AIと組み合わせた講座あり)
  • AI(機械学習)
  • WEB開発
  • WEB開発
  • AI(機械学習)
  • WEB開発
特徴
  • 現役のエンジニアがメンターがうり!
  • 講座数が30以上と多く学べる内容が多い
  • 料金は10万円台からとリーズナブル
  • AIとWEB開発を同時に学べるコースあり!
  • 対面受講により理解しやすい。
  • 「問題解決能力」が身につく実践的な講義がウリ!
  • AIに特化したスクール!
  • 予定よりも早くカリキュラムが終わると、他のコースの学習も可能!
  • やる気がある人ほどお得なスクール!
  • 通学スタイルとオンラインスタイルの両方に対応している。
  • 現役のエンジニアが学習をサポートします。
  • オーダーメイド制になっていて、受講生に合わせたオリジナルの学習カリキュラムを用意しています
  • マンツーマンレッスンで最後まで挫折させないカリキュラム
  • サーバー側、フロント側、リアルタイム通信など、最新のスキルを身につけることができる!
  • 転職活動において他の応募者に差をつけたい人にオススメ!

 

 

 

まとめ

今回は、ポートフォリオを作るまでの一連の流れを述べました。

 

エンジニアになれるのかな?

どうしたらいいのかな?

そのように悩んでいたら時間が勿体ないです。

 

ポートフォリオ製作は、誰に役立つのか考えるところからスタートです。

 

もしも自分1人では無理だ。そのような場合は、伴奏してもらうのも一つの手段です。

\ポートフォリオ作成サポートあり!オススメプログラミングスクール6選!/

イメージ
スクール名 テックアカデミー ドットプロ Aidemy Premium Plan DMM WEBCAMP 侍エンジニア塾 CHATY
公式サイトに行く 公式サイト 公式サイト 公式サイト 公式サイト 公式サイト 公式サイト
学べる内容
  • WEB開発
  • AI(機械学習)
  • IOS,Androidアプリ開発
  • ゲーム開発
  • 数学・統計学
  • WEB開発(AIと組み合わせた講座あり)
  • AI(機械学習)
  • WEB開発(AIと組み合わせた講座あり)
  • AI(機械学習)
  • WEB開発
  • WEB開発
  • AI(機械学習)
  • WEB開発
特徴
  • 現役のエンジニアがメンターがうり!
  • 講座数が30以上と多く学べる内容が多い
  • 料金は10万円台からとリーズナブル
  • AIとWEB開発を同時に学べるコースあり!
  • 対面受講により理解しやすい。
  • 「問題解決能力」が身につく実践的な講義がウリ!
  • AIに特化したスクール!
  • 予定よりも早くカリキュラムが終わると、他のコースの学習も可能!
  • やる気がある人ほどお得なスクール!
  • 通学スタイルとオンラインスタイルの両方に対応している。
  • 現役のエンジニアが学習をサポートします。
  • オーダーメイド制になっていて、受講生に合わせたオリジナルの学習カリキュラムを用意しています
  • マンツーマンレッスンで最後まで挫折させないカリキュラム
  • サーバー側、フロント側、リアルタイム通信など、最新のスキルを身につけることができる!
  • 転職活動において他の応募者に差をつけたい人にオススメ!

 

最新情報をチェックしよう!
>プログラミングスクール検索・比較表サイト

プログラミングスクール検索・比較表サイト

ワンクリック、さらに詳細に条件を指定してプログラミングスクールの検索ができます。さらに比較表により特徴を細かく比較できる!

CTR IMG