未経験から独学でポートフォリオの完成まで【Laravel / MySQL】

はじめに

2024年1月から独学でプログラミングの学習を始め、
ポートフォリオが完成するまでにやってきたことをまとめたいと思います。

目次

1. ポートフォリオの紹介
2. 使用技術
3. 基本設計
4. 開発の進め方
5. 学び
6. 苦労したこと
7. 課題
8. 最後に

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

◾️サービスの概要
農業体験イベントの情報や農業に関する知識をブログを通じて発信するサービスです。農業に興味のある方や新たに始めようとする方々に向けて、情報を提供します。

◾️開発の背景
父の農業を手伝う中で、何か自分にもできることはないかと考え、このWebアプリケーションを作成しました。農業に挑戦したいがどこから始めればいいのか分からない人や、知識や技術を求めている人たちに、父の豊富な経験と知識を少しでも役立てたいという思いから、このアプリケーションを開発しました。

◾️工夫した点
◾️年配のユーザーでも直感的に操作できるよう、UI/UXに力を入れました。目的のページに最短で辿り着けるよう、ナビゲーションバーや主要リンクを配置しました。

◻️管理者
・今後のイベントや月毎のブログ投稿状況を把握できるよう、ダッシュボードに「今後のイベント予定情報」と「月毎のブログ投稿数」を表示するようにしました。

◻️ユーザー側
・「野菜ページ」を作成し、関連する情報にスムーズにアクセスできるよう、 野菜に関する記事や関連ページへの導線を整備しました。
・イベント一覧や詳細ページ、ヘッダーから予約ページへとすぐに アクセスできるよう、複数の予約リンクを設置して、ユーザーが興味を持った瞬間に 直感的に予約できる使いやすさを重視しました。

農業体験イベント一覧から予約

詳細ページから予約

農業体験イベント一覧と詳細ページから予約する際はイベントが選択された状態の予約ページに移動します

2. 使用技術

バックエンド
・PHP 8.2
・Laravel 11
・MySQL 8.0

フロントエンド
・HTML / CSS
・JavaScript

インフラ
・EC2（ Amazon Linux 2 ）
・Route 53
　RDS（ MySQL ）

環境構築
・Docker / Docker Compose

その他
・Git / Github
・PHPMyAdmin
・Visual Studio Code
・MacOS

3. 基本設計

◾️機能一覧
◻️ユーザー側
・イベント一覧、詳細、予約　機能
・ブログ一覧、詳細、機能
・やさい一覧、詳細、関連するブログ表示　機能

◻️管理者側
・ログイン機能
・今後のイベント表示機能
・月別ブログ投稿数カウント機能
・体験イベント一覧、作成、変更、削除　機能
・ブログ一覧、作成、変更、削除　機能
・やさい一覧、作成、変更、削除　機能
・予約一覧管理機能
・管理者追加機能

◻️テーブル設計

4. 開発の進め方

◾️何を作るのか
作成する目的や要件を明確にします
「こんなことができたらいいな」「こんなのが欲しいな」「こんなふうになればいいな」
例）
農業に挑戦したいがどこから始めればいいのか分からない人や、知識や技術を求めている人たちに、父の豊富な経験と知識を役立てるためのサービスを提供したい。

◾️必要な画面と必要な機能の紐づきの詳細化
例）
◻️農業体験イベント一覧ページ
・農業体験イベント一覧表示機能
・ページネーション機能
◻️農業体験イベント詳細ページ
・詳細ページ表示機能

◾️タスク管理のタイムラインビューを作成
例）

※notionで作成しました。

◾️開発
◻️実戦を想定してGitHubを使用し、ブランチを機能単位で分けながら開発を進めました。
◻️開発の効率とコードの品質を向上させるために、GitHubのプルリクエスト管理ツールであるpr-agentを導入し、自動でコードレビューを実施しました。

◾️デプロイ
本番環境へのデプロイはAWSのEC2（Amazon Linux 2）とRDS（MySQL）を用いて行いました。EC2でWebサーバーを立ち上げ、RDSをデータベースとして連携させることで、インフラ環境を構築しました。

5. 学び

各コントローラーで index, create, store, show, edit, update, destroy の各メソッドを何度も繰り返し実装することで、それぞれの役割を覚えることができました。
また、この過程を通じて、Webアプリケーションの全体構造や、特にMVCにおける役割分担について理解しました。

6. 苦労したところ

設計段階でテーブル設計に十分な時間をかけなかったため、開発中に必要なカラムや不要なカラムが発生し、何度も作り直すことになってしまいました。これを通じて、最初の設計に時間をかけることの重要性を学びました。
また、自分で書いたコードを後から振り返った際、一部説明できない箇所があり、関連する部分を実装する際に時間がかかってしまいました。そこで、忘れやすい部分についてはコメントアウトを使ってコードの説明を記載するようにしました。

7. 課題

トランザクションを正しく実装すること
検索機能の追加：今後、記事が増えることを見据えて
デプロイ：今回初めてデプロイを行いましたが、かなり時間がかかってしまいました。

8. 最後に

0からWebアプリケーションを作成する中で、多くのエラーに直面しましたが、それらを乗り越え、完成させた際には大きな達成感を得ました。また、知識は繰り返し実践することで定着することを実感し、今後も反復を重ねてさらに学びを深めていきたいと考えております。