Hiro こんにちは、Hiroです。
現在ワーホリでオーストラリアに来ています。
日本ではフリーランスのITエンジニアとして働いていました。
専門はLaravelで、バック8割フロント2割くらいです。
今回はプログラミングスキルを維持したいこと、昔のポートフォリオがかなり古いことからvue.js+Laravelのポートフォリオ作成を行いました。
正直React.jsとvue.jsは経験豊富というわけではないので、もっとスキルアップしていきたいと考えています。
要件定義、設計
まず何を作ろうかって話なんですが、
過去ホームページやアプリの修正に関わることも何度かありましたが、基本的に私の専門はWEBシステムです。
Laravelで案件に参画してると必然的にそうなるんですよね。。
一応勉強としてUdemyを参考にアプリを作ってみたりとか、ホームページを作ったりもしていますが、
今回はポートフォリオということで一旦「vue.js+Laravel」でCRUDがよく絡むWEBシステムを作ることにしました。
ちなみに実務経験はこんな感じです。
- 要件定義: 実務経験なし
- 基本設計: 実務経験あり（追加改修の部分のみ）
- 詳細設計: 実務経験あり
基本的にまぁ個人開発だから。。。って感じで作りました。
要件定義
今回作ることにしたのは「チルスポット検索サイト」です。
というのも、私の友人にチルが好きでチルスポットを探し求めている人がいたので、みんなのチルスポットをシェアするサイトがあったら面白いなと考えました。
当初は食べログのような評価サイトを想定していたのですが、下記の問題点があってSNS風にいたしました。
- 店舗と個人投稿での信用度や投稿の重みの違い
- チルスポットにはオーナーがいないため個人投稿になる
- 個人だと人気スポットが消えたり重複するから評価サイトにできない
- というか個人投稿だとそれはもうSNS？
結論、ポートフォリオだしSNSってことで作ろってことにしました。
基本設計
今回基本設計は画面設計のみにしました。
画面設計といってもちょっと手間なので、構成をさらっと書いただけです。
（こんなものを画面設計と呼ぶのはおこがましいです。。）
一応食べログをイメージしたサイトということで、作成したい機能は以下になります。
- ログイン認証
- 検索機能
- 投稿
- レビュー
- お気に入り
- 人気ランキング
だいたいそんな感じです。
詳細設計
今回詳細設計はDB設計とER図の作成だけ行いました。
個人開発なのでそこまで丁寧に設計する必要もないとは思うのですが、最低限データベース設計はしておきました。
また今回DB操作はLaravelのEloquentを利用するつもりだったので、ER図も作成しときました。
（ER図の作成ツールが初めて使ってみた+無料だと初回の1回きりで修正できなかったので一部未修正部分があります）
環境
- Laravel9
- PHP8
- Inertia
- vue3
- Tailwind
- MySQL
まずポートフォリオ作成にあたって、過去Laravel+vueの学習をしていた時に利用していた教材を元に環境構築を行いました。
Udemyでお世話になっている「世界のアオキ」さんというかたです。
過去Laravel+vueの現場に参画したことは2回ほどありますが、どちらもAPIで繋いでる感じでしたので、Inertiaはこの教材が初めてでした。
簡単にいうとLaravelでvueやReactを利用するために用意された機能です。（個人的にちょっとクセありに感じます）
vueは3系にしましたが、正直ネット上だと3系の情報量が少なく感じたので、エラーが出た時はある程度自己解決が必要でした。
実装
認証まわり
今回は食べログのようなサイトをイメージしていたので、下記の形に実装しました。
・基本的には登録なしで閲覧できる
・投稿したいときはログイン画面に飛ばす
InertiaだとルーティングはLaravel側で管理ができるので、いつも通りで楽ちんでした。
基本的に認証部分はLaravelの機能を利用しているため、特に苦労せず実装できたと思います。
画面作成
正直画面側にほとんど時間を使いました。
まずInertiaがちょっとクセありなので慣れるのに少し時間がかかったのと、
vue+Laravelの案件に0から参画した経験はないので、色々勉強になりました。
画面はシンプルに下記で実装しました。
- TOP画面
- 投稿一覧画面
- 投稿詳細画面
- マイページ
- ログイン画面
機能作成
まずは投稿機能です。
投稿はシンプルなフォームの実装と、画像の保存、GMA(Google Map API)との連携を行いました。
1つ目の難点は、投稿した画像のサイズを小さくしたいということで、ImageManager（PHPライブラリ）を利用したのですが、これがエラーでまくりで苦戦しました。
結論としてはPHPのPATHの向き先が開発環境のMAMPではなくPCの方に向いていたこと、php.iniの設定、ImageManagerのバージョンが変わって使い方が変わっていたこと、MAMPにImageManagerのインストールが必要だったことでした。
2つ目の難点が、GMA(Google Map API)の使い方がよくわからんってことでした。
今回GMPを利用してみたのは、今後マップを利用したアプリとかを作ってみたいなと考えているためです。
投稿欄に表示しているGMPの上に検索欄を作成して位置を検索できるようにしたかったのですが、これがずっとエラーでるし、調べてもvue3の記事は無いしで結局今回は見送りました。
妥協して単純にクリックしたところの座標を取得する機能だけ実装しました。
これは初めて利用したので仕方がないですね。。今後もっと使いこなせるようになりたいです。
他にはレビュー機能やお気に入り機能も実装しました。
そのレビューの人気ランキングなどの取得処理が少し厄介でした。
これは今回SQL操作を全部Eloquentで書きたいなとなんとなくこだわってやっていたのですが、どうしてもgroupByでエラーが出るので諦めてjoinで書きました。（Eloquentの限界を感じました。。）
またレビューサイトでよく見る評価の星を自分で作成して見るのは面白かったです。
他には検索機能、下書き機能、お気に入り機能、ページネーションなども実装しました。
これは毎度のことですが、けっきょく毎回画像パスのところでエラーが出るんですよね。
「/」がついてなかっただけでしたけど。
問題点
特に致命的でもないのでほっといてるものです
・サーバーサイドのバリデーションエラーの時に内容表示がない
・投稿するボタンを押してから遅いからローディング画面があるといい
・画像が溜まっていくことの容量問題を考慮してない
・投稿一覧で検索した時、ページネーションがでっぱなしになる
デプロイ
今回はポートフォリオということで、サブドメインを作成してそこにデプロイしました。
サブドメインへのLaravelプロジェクトのデプロイは経験があるのですんなりいきました。
jsやcssが読み込めないエラーには悩まされましたが。。
ドメインは下記になります。
ユーザー登録についてはメールの存在確認などありませんので、適当な架空の情報で登録できます。
まとめ
作ってみてわかったこと
・セキュリティの観点からなるべくユーザー情報を所持したくない
やっぱり個人開発となるとあまり開発にお金をかけたくないです。
なのでバカゲーとか掲示板のようなユーザー情報・登録のないサイトの方が維持費のコストがかからず管理も楽だなと感じました。
・ユニークで面白みがあるサイト
せっかく作るのだからただポートフォリオで終わるともったいないなと感じました。
特にターゲットを絞ったニッチなサイトやアプリであればリリースまでして見るのもありですよね。
今後について
現在オーストラリアで英語学習に励んでいます。
ただITエンジニアとしてのスキルを鈍らせないように、定期的に何か作りたいと考えています。
次は、「React.js, Typescript, Next.js」の今っぽい開発とかしてみたいですね。
あとはアプリも作成してみたいと思っています。
てことで次はリリースも視野に入れて作ってみようと思います。