PHPをお使いになる会社のインターンが決まったので、これを気にLaravel、Vue.jsを使ってポートフォリオを作成しました。

ポートフォリオ

URL: https://fishing-spot.herokuapp.com/ (Herokuでデプロイ中)

Fishing Appとは、釣りスポットを投稿し、釣りスポットにコメントして釣果などを共有するアプリです。また、釣りスポットにおすすめの釣り方を選択することもできます。さらに、カレンダーで釣りの予定、記録をすることができ、このアプリ１つで満足できます。

制作背景

１，初心者に釣りの知見を広めてほしいため

現在は釣りの技術が発展しており、釣りを始める人が日々増加しています。しかし、初心者の場合、どこで釣りができるかわからない、どんな釣り方があるのかわからないという方々がほとんどだと思います。そこで、釣りスポットを投稿し、このアプリを通して全国の様々な釣りスポットを紹介してほしいと考えました。また、その釣りスポットに最適な釣り方を知り、釣果などを共有し合って、より多くの人方々に釣りの知識を深めてほしいと思います。

2，釣りの予定、記録を管理できるように

釣行前には天気、道具などのチェックをすることが多く、1度行った釣り場は今後のために特徴を覚えることも多いです。そのため、釣りスポットを投稿したり、カレンダーに釣りの予定や記録を入れて覚えやすくするためにも、このサービスを開発しようと思いました。

工夫した点

Laravel、Vue.js を用いた完全 SPA
AWS、Docker、Github Actions の導入
個人的な「経験」による釣りスポットや釣り方の的確な説明
GoogleMap API で釣りスポットの位置を表示、OpenWeatherMap API で天気予報を表示
初学者なりにリファクタリングを重視（Fat Controller や Fat Model にならないよう調整、ファイルを分けるなど）

使用技術

HTML / CSS
Javascript(Vue.js)
Bootstrap
PHP 7.3
Laravel 8.29.0
MySQL 8.0.23
AWS(ECS, Fargate VPC, Route53, S3)
Docker/docker-compose
Nginx
PHPUnit
VScode

機能一覧

ユーザー機能

ユーザーの新規登録
プロフィール画像の追加
ユーザー情報の編集
（ゲストユーザー）ゲストログイン

フォロー機能

ユーザーをフォロー、フォロー解除
フォロー、フォロワー一覧表示

釣りスポット一覧

人気の釣りスポット一覧
フォローしたユーザーの釣りスポット一覧
新しい順に投稿された釣りスポット一覧

釣りスポット投稿機能

GoogleMapで釣りスポットの位置表示
関連する釣り方、タグも追加可能
画像複数選択可能（３つまで）

天気予報機能

釣りで重要な天気予報を表示（全国の天気を選択可能）

お気に入り機能

釣りスポットのお気に入り登録
釣りスポットのお気に入り解除
お気に入りした釣りスポットの一覧

検索機能

釣りスポット名や所在地、関連する釣り方をキーワードに検索
関連するタグから検索
検索した釣りスポットの一覧

コメント機能

釣りスポットのコメントの新規投稿（画像付き）、削除
コメントの一覧

釣り方機能

釣り方名とその内容、画像表示
その釣り方におすすめな釣りスポットを表示

カレンダー機能

釣りの予定・記録を作成、編集、削除
釣りの予定・記録をカレンダーに表示
釣りの予定・記録の日付は移動可能

テスト機能

PHPUnitによるテスト(Tests: 86)

懸念、気になっている点

リファクタリングが不十分か
ページネーションが少し質素
携帯だと画像をタップして拡大できない
メイン機能を使用するにはログインする必要がある。
safariだと天気予報APIがうまく読み込まれない、UIが多少崩れる。

インフラ構成図

![infra.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/848640/08367481-1149-cbf8-1e33-6916815ed6f1.png)

ER図

ポートフォリオ作るまでにかかった期間

2月〜3月：PHP（Laravel）、JavaScript（Vue.js）学習
4月〜6月：ポートフォリオ作成
6〜7月：他の用事、作業
8月：デプロイ

家族・友人からのフィードバック

携帯でも見やすい
単純でわかりやすい
トップページで簡単にサービスについて説明されていて、迷わず使えた
投稿した画像の表示が遅い
投稿したコメントが探しにくい
携帯だとトップページの行き方が少しわかりにくかった

ポートフォリオ作成に使った参考教材

教材	内容
Progate、YouTube	PHP、JavaScript学習
PHP、JavaScript本格入門	PHP、JavaScript学習
Techpit（Laravel(+Vue.js)でSNS風Webサービスを作ろう！）	Laravelの基礎、Vue.jsとの組み合わせを学習
Techpit（Laravelでテスト駆動開発を学ぼう！）	PHPUnit（テスト駆動開発）の学習
Udemy（Vue.js入門決定版！jQuery を使わない Web 開発 - 導入からアプリケーション開発まで体系的に動画で学ぶ）	Vue.jsの基礎
Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう	Laravel＋Vue.jsの完全SPA
公式マニュアル	わからないとき、気になるとき
Qiita	わからないとき、気になるとき

これからの学習、挑戦したいこと

PHP、JavaScriptのさらなる理解
フレームワークなしでアプリを開発し、各機能の仕組みを詳しく知る

github : https://github.com/akira-iguchi
Twitter : https://twitter.com/iguchan_4649