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が多少崩れる。
インフラ構成図
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