ポートフォリオ）PHP/LaravelでWebアプリを作成した。（2025/4/16　フロントエンドコース更新）

# １．はじめに
### 目的
ポートフォリオとして作成したWebアプリケーションの紹介記事です。(2025/4/16基準 フロントエンドコースのポートフォリオも更新しました。)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4022208/ad7457cd-cda3-4329-b18a-0c845d1e257f.png)


# ２．目次
・はじめに
・目次
・自己紹介
・作成したWebアプリケーションの説明
・機能一覧
・使用技術
・なぜこのポートフォリオを作成したのか
・今後の課題
・さいごに

# ３．自己紹介
大学卒業（文系、４年）
販売職、事務職で９年以上働いた
Excelの機能を使って業務を効率化することが大好き
趣味はゲーム、読書など
韓国出身

# ４．作成したWebアプリケーションの説明

### 概要

### 毎日使うサービスとしてのアイデア
せっかくサービスを作るなら、日常的に継続して使えるものが理想だと考えました。
「毎日記録をつけられるものは何か？」と考えたとき、仕事をしながら毎日飲むコーヒーに着目し、コーヒーの摂取記録ができるWebサービスを作成しました。

### サービス概要：「Coffice Check」
サービス名は「Coffice Check」です。
リンクはこちら
→https://original-winter-shadow-223.fly.dev/

テストアカウント
Email:user@example.jp
password:password
※テスト用アカウントを使わず、新規登録を行なってもらっても大丈夫です。

「Coffee」と「Office」を組み合わせた“Coffice”という造語に、毎日のコーヒー記録をチェックするという意味を込めました。

### 利用の流れ
ユーザーは会員登録・ログインを行い、その日飲んだコーヒーの種類や数量を記録します。
日々のコーヒー消費を可視化することで、ちょっとした楽しみや習慣の管理に役立てられるサービスです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4022208/4caebaae-c384-4298-b9ce-1e50f8d7b10a.png)


# ５．機能一覧

### 投稿機能
新規投稿
投稿の削除


### ユーザーページ機能
ユーザーのフォロー数、フォロワー数、投稿一覧を表示
表示されているユーザーがログイン中のユーザー自身でなければ、ユーザーをフォロー・フォロー解除するためのボタンが表示
タイムラインでフォローしたユーザーの投稿も表示

### 認証機能
ユーザ登録、ログイン、ログアウト

### レスポンシブ対応
全画面対応しています。

【iPhone SE】

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4022208/4e3d83b0-1c63-4cbf-82e3-ab5bf0d581b5.png)

【Samsung Galaxy S8】

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4022208/edddf058-e6af-4d81-9c48-df1f9cc31bc1.png)

# ６．使用技術
### フロントエンド
HTML
CSS

### バックエンド
PHP 
Laravel 
MySQL 

### その他
Git / GitHub
diploy
superbase

## サイトマップ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4022208/8d89cc41-4e9d-4fce-abe3-fa12a10a1bed.png)


## DB設計
### データベース図（ER図）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4022208/32e6a5c4-af50-4694-891c-602ac9a20617.png)

## テーブル
個別のテーブルについて、以下のとおりです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4022208/092c05ae-0f76-4a60-9eb7-505a1e5e9135.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4022208/2cda0ad0-e2d2-481f-be21-a6846f02a861.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4022208/eceed492-2c10-4bff-819a-970b5d42d4a9.png)

# 7. なぜこのポートフォリオを作成したのか
就職活動において不可欠だと考えたこと、そして、この業界で継続的に活躍できるかを確かめるためWebアプリケーションを作成しました。

### 作成時に意識したこと・苦労したこと
完成させることを最優先にしました。
どのような形であれ、最後まで仕上げることを最優先にし、途中で挫折しないよう努力しました。途中で投げ出すことが最も良くないと考え、粘り強く取り組みました。

### Laravelの構造理解に苦戦
Laravelの仕組みを理解するのに時間がかかりました。
教材を読むだけではなかなか理解が深まらず、実際にオリジナルWebサービスを作成しながら学ぼうとしましたが、思い通りに実装できず、頻繁にエラーが発生しました。
特に、データベースのテーブル設計と、それをサイト上でどのように実装するかが難しく、解決に多くの時間を費やしました。

### 試行錯誤を重ねた学習方法
理解を深めるために、二度ほど最初から作り直し、構造を再確認しました。
また、テーブル設計をすべて整えた後に実装を進めることで、ようやく期待通りに動作するようになりました。この経験を通じて、「最初から順序立てて進めることが最も重要である」ことを学びました。

### 問題解決への取り組み方
メンタリング制度を活用しながらも、すぐに質問するのではなく、まずは自分で調べ、試行錯誤したうえで解決できない場合に質問するように心がけました。
仕事においても、自ら学び取る姿勢が成長を加速させること、そして「すべての問題を周囲が解決してくれるわけではない」というメンターの言葉を意識しながら取り組みました。

# ８．今後の課題

自分の知識がまだ浅いことを痛感しており、今後取り組む分野について継続的に学習する必要性を強く感じています。
メンターの方々にも「入社後、どのくらいの期間、退勤後も勉強を続けましたか？」と質問したところ、多くの方が少なくとも1年間は学習を続けていたと伺いました。その言葉を受け、私も改めて学び続ける姿勢を大切にしていこうと決意しました。

## 学習期間
### PHP/Laravelコース
スクールの正式な開始は11月ですが、社会人として限られた時間の中で学ぶため、他の受講生よりも早く10月から受講を開始し、約1ヶ月分のカリキュラムを先行して進めました。さらに、1月24日まで学習を継続し、すべての課題を完了させました。

### フロントエンドコース
1月27日から4月20日まで学習を継続しており、現在はJavaScriptとjQueryを学習中です。今後はTailwind CSS、Vue.js、Firebaseの習得を予定しています。学習が完了次第、オリジナルのWebサービスを制作する予定です。

2025/4/16　現在
フロントエンドコースの学習が完了しました！
こちら完成させたオリジナルサイトになりますのでよろしければご覧くださいませ。

https://ivoryrat46.sakura.ne.jp/
Email:user@example.jp
password:123Password!

# さいごに
私が想像していた以上に、プログラミングは難しいと感じています。
しかし、自分が手を加えるたびにウェブサイトが変化し、進化していく様子を見ると、大きな喜びを感じます。

エンジニアの世界は広く、技術の進歩も非常に速いです。
同じ場所にとどまるのではなく、常に自分を磨き、学び続け、成長し続けたいという思いから、エンジニアという新たな職業に挑戦することを決意しました。

現在はスクールでの学習に集中しており、修了後もYouTubeの動画や書籍を活用しながら、LaravelやJavaScriptについてさらに深く学んでいきたいと考えています。

最後までお読みいただき、ありがとうございました。