こんにちは、しょうぞうです。
最近、phpの勉強をし始めました。
Laravelアプリで何か作ろうと思って、とりあえずTodoリストを作ってみようと思い作成しました！
完成品はこんな感じです。
今回の開発で勉強になったこと
Componentの値の受け渡し
Vue.jsではコンポーネントというかたまりを何度も利用することができます。
ヘッダー、サイドバーなど何度も使うような部品を再利用することができます。
また、コンポーネント同士で親子関係を構築して、親の値を子に受け渡すこともできます。
何度も同じ記述をしなくていいので、楽です。
このComponentの考え方は、Reactにも通じるものがあるので意識して勉強するとほかのフレームワークにも応用できる気がします。
Vue2とVue3で違うこと
今回参考にしたYouTubeでは、Vue2で作成していたのですがVue3でやると少しやり方が違っていたので、結構ハマりました。
例えば、Vue3ではメインのjsの部分が以下のようになっていたり
webpack.mix.jsのmix.jsの部分に.vue()をそれぞれ追加しないとnpm run hotが使えなかったり
初心者すぎて、これ気づくだけでもかなり時間かかりました・・・
今回使ったコマンド
- php artisan make:model 名前 -cmr
これでModel, migrations, Controller全部作成できました。
かなり便利なのでは？ - php artisan migrate
これだけで、migrationsに設定した内容でdbにテーブルを追加することができる、すごい。 - php artisan cache:clear, config:clear, route:clear, view:clear
今回の開発では、これのおかけでエラーが治ったとかは結果としてなかったが何度も使用したので備忘録的に記載しておきます - npm run hot
JavaScriptの一部が変更されたときにページをリフレッシュしてくれる
これ一回やるだけで、変更した内容がすぐに反映されて便利。
まとめ
今回、PHPの勉強ひいてはLaravelの勉強をしようと考えてこのTodoリストアプリを作成してみました。
が、ふたを開けてみたらほとんどVue.jsがメインのような感じになってしまいました。
Laravelでは最低限データベースからデータを取得・追加・削除することぐらいで、主な処理はフロント側で行っています。
SPA(Single Page Application)では、フロントがメインになりがちなのではないかと調べていたら、LaravelとVueで比重がVueに偏るパターンもあるそうです（参考記事）
Laravelの勉強をしたいならフロントはフレームワークを使わないほうがいいかもしれませんね
次回は、チャットアプリを作ってみたいと思います！
コメント