LVLPATH

日本最強無料プログラミングスクール

ポートフォリオ作成

STEP6: ポートフォリオ作成

🔰 概要

STEP6ではSTEP5で作ったウェブアプリ（ウェブアプリ作成の知識）をベースにSTEP7の仕事応募のためのポートフォリオを作っていきましょう。

✅ 作成期間の目安

  • 1.5ヶ月 ~ 2ヶ月

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

image

STEP1: 題材決め

1日1~2時間 * 5~10日ぐらいかけて題材を決めていきましょう。

  • 自分が興味があるテーマ
  • ワンチャン個人開発でヒットしそうなテーマ
  • なんかちょっと便利そうなツール

題材決めのコツとしては自分が興味があるテーマがおすすめです。

興味があるテーマの場合、面接の時の話題作りになりますし、逆にオリジナルではない〜クローンアプリとかは量産型すぎて試行錯誤や創意工夫感が伝わらないのでおすすめできません。

STEP2: 技術スタック決め

STEP5で勉強した内容を使って使う技術などをざっくりと決めていきましょう。

ただ実際のところ、未経験枠での応募の際にはnext.jsでサーバーサイドとフロントエンドを作ってそれをVPSかEC2かvercelあたりにデプロイするぐらいで十分ではあります。

CI/CD整備してローカルの環境構築はdocker-composeでAWSにデプロイ、みたくモダンにするのもいいですが、かけられる時間と要相談が必要です。

STEP3: 調べながら作る

締切の期日を決めて作っていきましょう。

ポートフォリオ作ってる最中も勉強することは多いはずなので不明点などは適宜調べて、アウトプットベースでインプットしていくスタンスで作っていくのが重要です。

ポートフォリオ作成を通して技術力を上げることで技術面接での受け答えなどにも役立ちます。

STEP4: デプロイしてネットに公開

ローカル環境だけで起動する状態だと書類とかで出せないので、ネットに公開しましょう。

ドメインを取得してAWSのEC2かVPSかvercelなどにデプロイすればOKです。

最初はイマイチ全体像が掴めないので難しく感じがちですが、ドメインへのリクエストがlocalhostの特定のportやらに紐づくような設定をするという作業が必要になるだけです。

DNSやnginxなどの情報を調べながらやることになります。

✅ ポートフォリオ作成に関するTips

image

①: ある程度は割りきってざっくりと作る

細かい部分にこだわりすぎると終わらなくなるので、ある程度割り切ってポートフォリオの作成をして完成させるのが重要です。

特にUI側などの調整やバックエンドのパフォーマンスを意識しすぎることや、モダンでイマドキな技術構成に寄せようとしすぎるなどはかなり工数がかかるので注意が必要です。

②: ざっくりとした締切を意識する

ポートフォリオを作ることは仕事に応募するための手段なので、あまり時間をかけすぎてしまうのは微妙です。

ポートフォリオを作る過程で技術的に勉強にはなりますが、技術力を高めるという側面では実務に入ってからコードレビューなどをもらいながら技術力を高めるほうが成長スピードは早くなります。

締切を大雑把に決めてその期日までに少し雑でも一旦作り終えて仕事へ応募していくことが重要です。

③: 技術スタックなどはある程度妥協する

  • CI/CD整備してGitHub Actionsなどを使って自動でデプロイ
  • Pushされたら自動でテストを実行する
  • 単体テストや結合テスト、E2Eテストを書く
  • AWSなどのクラウドにデプロイして、フロントエンドとサーバーサイドを分ける
  • ローカル環境はdocker-composeを使う
  • コンテナオーケストレーション(k8sなど)を使う
  • マイクロサービスアーキテクチャで作る
  • Reactはパフォーマンスを意識してmemo化など行う

こういったプロダクションで使われるような技術スタックや技術を全て網羅しようとするとポートフォリオの作成が終わらなくなります。

なので技術スタックはある程度のところで妥協することが本当に重要です。

④: 取り入れたい技術領域

  • ドメイン取得してデプロイ
  • GitとGitHubでバージョン管理
  • OAuth or 暗号化とメール送信を使った会員登録ログイン機能（できれば）
  • フロントエンドUIライブラリ（MUIなど）
  • フロントエンドフレームワーク(React, Vue, Angularなど)
  • データベース（MySQLなど）
  • サーバーサイドフレームワークでサーバー側をAPI化(Django, Flak, Express, Ruby on Railsなど)

入門時におすすめの技術スタック

✅ 参考動画

*2倍速などで概要をざっくり知るのがおすすめです

✅ STEP6でやること

  • 5~10日ぐらいかけて題材決めをする
    • 自分が興味があるテーマでオジリナルで自分で考えて作るのが重要
  • 1.5~2ヶ月ぐらいかけてポートフォリオを作ってデプロイする
    • 不明点を適宜勉強しながら作ってデプロイする
お問い合わせ