独学でポートフォリオを作るまで【Laravel / Inertia / AWS / Docker / GitHub Actions】

Last updated at 2025-12-09Posted at 2025-12-07

はじめに

こんにちは！きょーすけと申します。

今回は、完全未経験の状態から初めてポートフォリオを開発した経験について、開発背景や学習教材などを紹介します。

ポートフォリオを作るにあたって、色々な方の素晴らしいポートフォリオ作成記事が参考になったので、今度は私の記事が誰かのためになることを祈ってます。

自己紹介
大学卒業後、新卒で商社に入社し、営業として2年ほど勤務しました。

その後、海外留学を目指して退職しましたが、コロナウイルスの影響で渡航を断念。

別の会社で人事・給与管理の業務に携わり、その後はオーストラリアで 2年間ワーキングホリデー生活を送りました。

前職では、チームの一人が Excel マクロを使って手作業の業務を自動化していた姿に強い衝撃を受けたことがきっかけで、エンジニアリングに興味を持ち始めました。

また、兄がエンジニアとして働いていたこともあり、

「自分も何かをつくり出せるようになりたい」

という思いから、留学中に独学でプログラミング学習を始めました。

学習期間は6ヶ月ほど、開発期間は3ヶ月ほどになります。

私自身、オーストラリアでワーキングホリデー制度を利用して2年間生活していました。ワーキングホリデー制度では、ビザを延長するために 1 年ごとに更新が必要で、更新には「政府指定の仕事（例：農場＝ファームでの就労）」に従事する必要があります。

私が初めてファームの仕事を探した際、「どのように探せばいいのか分からない」「信頼できる情報源がない」と非常に苦労しました。

実際、ファーム探しのプラットフォームはほとんど存在せず、現在でも多くの人が友人の紹介や口コミだけを頼りに探している状況です。当時の私と同じように、「情報不足によって苦労する人を少しでも減らしたい」という思いから、このアプリを開発しました。

このサービスが、ワーホリで訪豪する方々の不安を軽減し、安全かつスムーズにファームを探せる支えとなれば幸いです。

工夫した点

PCでもスマートフォンでも使いやすいサービスを実現するため、ウィンドウサイズに応じて、フォントサイズやスペースを適切な大きさに調整するなど、レスポンシブデザインをかなり意識して開発しました。

また、レビュー一覧（farm_rating）から平均スコアと 5〜1の新しいレビューを計算し、小数第1位までの平均値と 0.5 刻みの星アイコンを動的に表示しました。

メイン機能の使い方

管理画面

使用技術一覧

バックエンド

PHP 8.3.28
Laravel 12.0
Inertia.js（Laravel × React ブリッジ）

フロントエンド

TypeScript 5.9.2
React 18.2.0
Chakra UI 2.8.2
ビルドツール: Vite（Node.js 20.19.5）

テスト

PHPUnit

インフラ

AWS
- VPC
- Route 53
- Certificate Manager
- ALB
- ECS Fargate
- ECR
- RDS MySQL
- S3（画像ストレージ）
- SES（メール送信）
Nginx

環境構築

Docker / Docker Compose

CI / CD

GitHub Actions

認証

Laravel の認証機能（メールアドレス・パスワード認証）

主要対応一覧

ユーザー向け（フロントエンド機能）

機能

メールアドレスとパスワードを利用したユーザー登録 / ログイン機能
ユーザー情報変更機能
パスワード再設定機能（AWS SES によるメール送信）
ユーザー削除（退会）機能
ファームの 作成 / 更新 / 削除機能
ファームの 検索機能（条件検索）
ファーム一覧のページネーション機能
ファーム画像の 登録 / アップロード / 削除機能（S3 連携）
レビューの 作成 / 修正機能
レビュー評価の平均値算出機能
お気に入り（Favorite）機能
トースト通知（成功・エラー表示）
ローディング画面
モーダル画面の表示（画像拡大、レビュー詳細、検索条件変更など）
レスポンシブデザイン対応（スマホ / タブレット / PC）

非ユーザー向け（ゲスト向け）

ログインしていないユーザーでもファーム一覧・詳細を閲覧可能
未ログインユーザーが特定の操作を行おうとした時にログインを促すモーダル表示機能
ファーム検索機能の一部を利用可能

管理者向け

ユーザー・ファーム・レビューの登録数を一覧で確認
ユーザーが作成したファーム・レビュー情報の確認
問題のある投稿に対する編集・削除（モデレーション機能）
管理画面からのクイックアクセスによる円滑な運用

システム / インフラ

Docker による開発環境のコンテナ化
AWS を利用した本番環境構築
- VPC / ALB / ECS Fargate / ECR
- RDS MySQL
- S3（画像ストレージ）
- Route53（DNS ホスティング：お名前.com で取得したドメインを委譲）
- Certificate Manager（SSL化）
- SES（パスワードリセットメール）
お名前.com によるドメイン取得
Nginx によるフロントリバースプロキシ構成

バックエンド

Laravel 12
Inertia.js（Laravel × React ブリッジ）
PHPUnit によるバックエンドテスト
Laravel Pint による PHP コードフォーマット
Laravel Sanctum による認証

CI / CD

CI（継続的インテグレーション）：GitHub Actions
- PHPUnit テストの自動実行
- Docker イメージのビルド & Docker Hub へのプッシュ
CD（継続的デリバリー／継続的デプロイ）：ECS Fargate
- 新しい Docker イメージを自動的に ECS タスク定義へ反映
- ECS サービスを更新し、本番環境へ自動デプロイ

フロントエンド

React / TypeScript
Chakra UI による UI コンポーネント
Vite による高速ビルド
Axios を使った API 通信

テスト / セキュリティ

クロスブラウザテスト

PC
- Windows10 / 11: Google Chrome / Firefox / Edge
- macOS: Google Chrome / Firefox / Safari
スマートフォン
- Android: Google Chrome
- iOS: Safari

苦労した点/難しかった点

レビュー平均値・星評価をリアルタイム集計
- レビュー一覧（farm_rating）から平均スコアと 5〜1の新しいレビューを計算し、
  小数第1位までの平均値と 0.5 刻みの星アイコンを動的に表示しました。
  
  useMemo で不要な再計算を避けつつ、最大件数を基準にした棒グラフで
  評価の偏り（どの★が多いか）も可視化しました。

インフラ構成図

ER図

2. ポートフォリオ作成までに学習したこと

ここでは、ポートフォリオ作成までに使用した教材について紹介します。

所要時間も記載しましたが、あくまでも参考程度にしてください。

Progate

Javascript / PHP / SQL / Git / コマンドラインのコースを学習しました。

昔にHTMLとCSS・Javascriptを学習したことがあるので、Javascriptから学習を始めました。
かなり苦戦しました。特に道場コースでは、要件だけ与えられて自由にコーディングできるのですが、初回はうろ覚えなので何度もスライドに戻り確認を繰り返しての学習となりました。

ほぼ何も見ずに、道場コースを自力でクリアできるようになれば、この段階の学習としては十分だと思います。

所要時間

約40時間

独学エンジニア

PHP / Linux / Git / GitHub / Docker / データベース / SQLを学習しました。

独学エンジニアでは、動画を見ながらハンズオンで学ぶスタイルで、多くの基礎技術を幅広く網羅できます。
月額1,000円（税抜）ととてもリーズナブルでありながら、内容は丁寧でわかりやすく、学習者視点で作られていると感じました。

実践課題も豊富で、当時はかなり苦戦した記憶があります。
ただ、その “手を動かしてアウトプットする時間” が、自分にとって大きな成長につながりました。
難しくても自分で書いてみることで、理解が一段深まったと実感しています。

所要時間

約450時間

Udemy

【Laravel11】クイズアプリを作りながら自力でアプリ開発する力を身につけよう【用件定義・設計〜プログラミングまで】
約50時間

ここで初めてLaravelに触れ得たので、フレームワークの便利さに感動しました。

【React18対応】モダンJavaScriptの基礎から始める挫折しないためのReact入門
約30時間

Reactの教材では、JavaScriptとReactを利用して同じtodoリストを作成しました。
ここでもReact利用すると簡単に作成できることが実感できたのでオススメの教材です。

今回初めてUdemyを使ってみたのですが、新たに学ぶ言語を学習するのには、動画教材は分かりやすくてハードルが低いので、かなりおすすめです。

所要時間

約80時間

YouTube 【この1本で完結】LaravelとReact入門基礎マスター講座【Docker,Inertia】

Udemyで学習したLaravelとReactを組み合わせてサイトを作成しました。

とても実践的な内容となっており、私のポートフォリオで利用している星のレビューもここで紹介されたものになります。

YouTubeで無料ですが、8時間と充実した内容となっておりますが、時々、説明が乏しいことがありますので、記事や生成AIを活用しながら理解を深めました。

所要時間

約70時間

AWS Skill Builder — Cloud Practitioner Essentials（Japanese）

Amazon が提供している無料の AWS 学習ツールです。

クラウドの基本概念から、AWS でリクエストがどのように処理されるかといった仕組みまで、コーヒーショップの例えを用いて非常にわかりやすく解説されています。

また、EC2 インスタンスの作成などを実際のコンソール画面で操作しながら学べるため、AWS の基礎を実践的に理解するうえでとても役立ちました。

書籍

PHPフレームワーク Laravel 実践開発
約10時間

移動時間などのスキマ時間も活用したいと思い、書籍での学習も取り入れました。

この本では、動画学習では触れられていなかった Request クラス・Collection・ページネーションなどの仕組みが丁寧に解説されており、Laravel の理解を大きく深めることができました。実際に、ページネーション機能はこの書籍を参考に実装しています。

図解即戦力 Amazon Web Servicesのしくみと技術がこれ1冊でしっかりわかる教科書
約10時間

AWS の基礎を体系的に理解するために読んだ一冊です。

タイトルの通り図解が非常に多く、VPC の仕組みやネットワークの流れなどが視覚的に理解できる構成になっているため、IT未経験者でも読み進めやすい内容でした。

AWS Skill Builder と併用して学ぶことで、クラウドの基礎がより明確に整理できたと感じています。

所要時間

約20時間

3. ポートフォリオ作成の進め方

サービスの検討(2025年9月中旬)

まず最初に、どんなサービスを作るかを考えました。
留学の経験を活かした作品を作りたいと考えていたので、ある程度決めていたのですが、どんな作品があるのかQiitaやプログラミングスクール(フィヨルドブートキャンプ)やQuitaなどで公開されているポートフォリオ記事を片っ端から読んでみることにしました。

初めてのサービス作成は、とても苦労するので

・どうしてこのサービスを作成しているか
・このサービスを通してどんな方にどんな役に立ってほしいか

という想いがあると作成意欲を維持できるため納得できるまで十分に時間を割いて、サービスの検討を行うことをおすすめします。

初めてのサービス開発は想像以上に大変で、途中で壁にぶつかることも多いです。
その中で制作意欲を保つためには、以下のような「軸」がとても重要だと感じました。

なぜこのサービスを作るのか（背景・問題意識）
誰の、どんな課題を解決したいのか（価値・目的）

この2つが明確になると、迷ったときやつまずいたときに「自分が作りたい理由」に立ち返ることができます。
そのため、私は納得がいくまで十分に時間を使い、サービスの方向性を固めることにしました。

ER図作成(2025年9月中旬)

ここまでで、概ねどんなサービスを作るのか決まってきたと思います。

そこで、忘れないうちにER図を書いて、システム的にどうやってそのサービスを実現するのか具体的に考えます。

ER図の作成は、書いたことのない人からすると難しく感じますが、実際に書いてみると、そこまで難しいものではないので、恐れずに分かるところからどんどん書いていきましょう！

ER図を書くにあたって、参考になった記事と、簡単に製図できるおすすめの無料サービス(draw.io)について、リンクを貼っておきます。

サービスの開発(2025年9月下旬〜11月下旬)

ここまでの準備を終えたら、後はひたすら開発していくだけです。

その際に、タスク管理に便利なGitHubのIssuesを使うことをおすすめします。
Issuesを使うことで、どのファイルの修正がどのタスクと紐づいているのか簡単に確認できるのと、タスクを一つずつCloseしていくのは、達成感があってモチベーションを保ちやすいのでおすすめです。

ベータ版ユーザーテスト(2025年11月下旬〜12月初旬)

サービスが出来上がったところで友達に協力してもらい、実際に使ってみてもらった率直な感想を教えてもらいました。
そして、機能修正や機能追加を行い、ブラッシュアップしました。

自分では改善点に気が付かないことがあるので、リリース前に一度は他の人に確認してもらった方が良いと思います。

README追加(2025年12月初旬)

開発が全て終わり、READMEを追加しました。

採用担当者に見られることを意識して、いかに分かりやすくサービスのことを伝えられるかに焦点に当て、書くのが良いかと思います。

私は、最初どのように書いたら良いか分からなかったので、他の方のポートフォリオのREADMEやQiitaの記事を参考にしました。
インフラ構成図は、似たようなインフラ構成の図を参考にして、ER図を書く時に使ったdraw.ioを使って書きました。

4. ポートフォリオ作成に役立ったサービス

ここでは、まだ紹介していないサービスの内、特に役立ったサービスに絞って紹介します。

生成AI
変数名などの適切な命名、サービス名などのアイデア出し、テストコードのサンプル作成、リファクタリング、エラー調査など、様々な場面で利用しました。

回答の精度も非常に高く、調べる時間を大幅に削減できるので、まだ使ったことがない方は、ぜひ使ってみることをおすすめします。

Canva

ブランドロゴやLPのメインビジュアル作成に利用しました。

デザイン初心者の私でも、簡単に利用できるほど直感的なUIになっているので、おすすめのデザインサービスです。

メイン画像はCANVAのAI画像生成機能で作りました。
携帯のデザイン部分は、「phone frame」と検索して携帯の枠のデザインを利用しました。

このようにデザインが苦手な方でも、簡単に作れますのでよかったら使ってみてください。

5 .これからポートフォリオを作る方へのアドバイス

ここでは、これからポートフォリオを作る方へ向けて、私が個人開発で得た経験を元に、僭越ながらアドバイスさせていただきます。

必要な機能だけに絞ること
たくさん実装したい機能が思い浮かぶのは良いことだと思いますが、その機能は本当に必要なものか、実装前によく吟味してみてください。

私の例を挙げると、ファームだけでなく、工場やホスピタリティも対象にする予定でした。
あったら絶対便利だと思ったのですが、冷静になって考えてみると、初めての開発で複雑にしすぎてもと思い、今回は実装しないことにしました。

結果的には、ファームに特化したアプリとなりしっかりとしたコンセプトのもと作成できたので、この時の判断は正しかったと思っています。

もしも、開発後に不必要な機能だったことに気づいたとしても、その時に費やした時間は返ってきません。
必要な機能を見定めて、優先順位の高いもの順に、小さく積み上げるように開発することをおすすめします。

規則正しい生活と適度な運動

最後に、一番基本的なことですが、規則正しい生活と適度な運動が何よりも大切です。

私は、社会人になってから、体調を崩したことがほぼありませんでしたが、退職をしてからは体調を崩すことがかなり多くなりました。
原因は、極度の夜型生活による自律神経の乱れと、外出する機会が減ったことによる運動不足だと感じていますが、これは他の方にも起こり得る問題だと思うので注意しましょう。

ポートフォリオ作成は、少なくとも数ヶ月はかかる長期戦ですので、継続して進捗を出し続けるためにも、体調管理には気をつけてください。

おわりに

ポートフォリオは、インフラ構築やUI / UXを向上するためのデザインなど全て自分で考え作成します。全ての作業が初めてのため、1つの機能を実装するだけ1日、数日かかる場合もあり簡単なものではありません。しかし、自身で作り上げてきた経験と通して数多くのことを学ぶことができます。
開発途中は辛いと感じたりネガティブな感情になることもありましたが今では本当に諦めずにやって良かったなと思っています。

これからポートフォリオを作る方もきっと大きな壁に直面することがたくさんあると思いますが、0から苦しい思いをしてサービスを作った経験は、いつか必ず役立つ時が来ると思いますので頑張ってください！

そして、疲れてやる気が出ないと感じた時があれば、気分転換に友人と遊んだり、一人で不安を感じるのではなく誰かに話してください。
きっと、リフレッシュしてまた頑張れるはずです。

なかなかの長文記事になってしまいましたが、最後までご覧いただきありがとうございました。
みなさんにとって、参考になった情報が何か一つでもあれば幸いです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

独学でポートフォリオを作るまで【Laravel / Inertia / AWS / Docker / GitHub Actions】

はじめに

目次

1. ポートフォリオの紹介

サービス概要

開発背景

工夫した点

メイン機能の使い方

管理画面

使用技術一覧

バックエンド

フロントエンド

テスト

インフラ

環境構築

CI / CD

認証

主要対応一覧

ユーザー向け（フロントエンド機能）

非ユーザー向け（ゲスト向け）

管理者向け

システム / インフラ

バックエンド

CI / CD

フロントエンド

テスト / セキュリティ

苦労した点/難しかった点

インフラ構成図

ER図

2. ポートフォリオ作成までに学習したこと

Progate

独学エンジニア

Udemy

書籍

3. ポートフォリオ作成の進め方

サービスの検討(2025年9月中旬)

ER図作成(2025年9月中旬)

サービスの開発(2025年9月下旬〜11月下旬)

ベータ版ユーザーテスト(2025年11月下旬〜12月初旬)

README追加(2025年12月初旬)

4. ポートフォリオ作成に役立ったサービス

Canva

5 .これからポートフォリオを作る方へのアドバイス

規則正しい生活と適度な運動

おわりに