はじめに
就活用のポートフォリオサイトでの開発環境についてまとめました。
開発環境
[ PC ]
・Windows 11 Home
[ ローカル ]
・XAMPP 8.2.4
[ 言語・フレームワーク ]
・PHP 8.1.12 (cli)
・Node.js 18.14.2
・Laravel 10.24.0
・Vue.js 3.3.4
・tailwindcss 2.2.17
[ ツール ]
・Composer 2.5.2
・vite 4.4.6
[ ライブラリ ]
・Vue Cropprer 0.6.2
・Pinia 2.1.6
[ テスト ]
・Postman 10.20.7
本番環境
レンタルサーバーでサクラサーバーを使用。
まだデプロイが完了していません。
DBをコマンドラインから操作、WEBから制作したサイトが表示できるものの、500エラーが発生しています。
LaravelとVueを別々のプロジェクトで作成
今回は、laravelとVueプロジェクトを別々に作成しました。
全て同じプロジェクトでまとめると、ファイル量が多く管理が大変だからです。
LaravelでAPIを作成して、VueからPiniaを通してAPIを叩くという手法が、個人的に分かりやすいディレクト・ファイル構成であり、管理しやすかったらです。
Laravel内にVueがあるパターンもUdemyで学習しましたが、分離している方が好みでした。こちらの方が「セッションで簡単に認証を実証できる」、「CORSを気にしなくていい」というメリットがあるようですが、経験が浅いためあまり分かっていません。
Laravelを選んだ理由
求人でもよく目にするCakePHPとも悩みましたが、小規模開発であり、まだ入れたい機能が固まりきれていないいないため、柔軟性の高いLaravelを選びました。
Vueを選んだ理由
Vueの前にjQueryを触っていましたが、jQueryは記述を簡略化するだけですので、VueかReactに行こうしたいなと思ったのがきっかけです。
ポートフォリオということもあり、小規模開発でソート機能や検索機能も付けたかったため、必要なライブラリを都度導入するVue.jsを選択しました。
tailwindcssを選んだ理由
tailwindcssを使う前は、SCSSを好んで使っていましたが、tailwindcssは直感的にレスポンスデザインにも対応できて使いやすいため、採用しました。
class名を考えるのに時間がかかったり、被らないように長い名前を付けてしまいガチだったので、その点でもtailwindcssも方が自分に合っています。
また、Bootstrapも考えましたが、柔軟性に劣るため、tailwindcssにしました。
開発してみて
LaravelでMVCモデルの実装→Postmanでテスト→Vueでフロント実装、という順で開発を進めるとエラーが発生したときに、Laravel側に問題があるのか、Vue側に問題があるのか、すぐに発見できて実装を進めやすかったです。
テストの大切さが分かりました。
苦労したこと
Laravel×Inertia
最初はLaravel×InertiaのUdemy講座を受講しました。
その後、ポートフォリオを実際に開発しようとして、エラーがでると検索しても記事が少ないことに気づきました。
なかなか開発が進まず、Inertiaは現場でもあまり使われないということを知り、Inertiaを使うことを断念しました。
Laravelに少し慣れたらまた使ってみようかな。という思いはあります。
Laravel×Vue2/Vue3
次にLaravel×Vueで開発しようとしましたが、Vue2と3のバージョンの違いを分かっておらず、混合して書いていたため、何度もエラーを出しました。
マニュアルをきちんと読むことの大切さを学びました。
UdemyでVue3の講座を受講
Vue3を学び直すため、Udemyで日本人の講座を受講するもポートフォリオを制作すうえで、内容が充分でないと物足りなさを感じました。
その後、外国人の方のLaravel×Vue3の講座を見つけ受講しました。こちらの講座でPostmanやPiniaも同時に学ぶことができました。
外国人の方の講座ですので、言語の違いに抵抗がありましたが、いざ受講してみるとあまり気にならず、とても良い講座に出会えてよかった。と思うことができました。
今後
本番環境にデプロイすることはもちろんですが、クックパッドのAPIを導入したり、Pythonで写真に写る料理の識別を作ったり、チャット機能を導入したり、とまだまだやってみたいことが多いです。
Laravel×Vueでどこまで開発できるか、などもまだあまり分かっていないのですが、作ってみたいと思ったものは挑戦していきます。