【感想】Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう(8章まで)を終えて

はじめに

今回、私が学習した教材は、Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろうです。

個人的な備忘録も兼ねて感想を書きます。

※すべては終えていないので、改めて終えた段階で追記します。

※要するに難易度高いです。。。omg

(4/16 追記)

テストコード内にデータを入れ込んでるっぽい。

なのでLaravelのDBとの連携を学ぶには、テストの知識が必須で初学者には結構ハードルが高い気がします。

動機

TechpitさんでもLaravel+Vueの教材はあります。

ですが、Vuexも用いた教材はなく、Laravel+Vueのポートフォリオを作成するにあたって、幅広く学んでおきたかったからです。

※2か月前に1回挫折しているので再挑戦です。

感想

教材ではMac&Docker環境だが私はWindows&XAMPP(SQLite⇒MySQL)に置き換えて挑戦しました。

良かった点

・Vuexの使い方をアプリ制作の中で学べる(他にチュートリアルが見当たらない。。。)

印象的だった点

・環境はPostgreSQLで構築していたがテストにはSQLiteを用いる点。

・7章の認証状態の維持。LaravelとVueでは認証状態の処理方法が変わるので統一しないと挙動がおかしくなる。

難しかった点

・今回試さなかったものの、随時テスト機能を利用する点。(スキップするとそれはそれで理解が難しくなる。)

・今まで馴染みのなかったVuexをモジュール化もしてフル活用している点。

(・9章以降だが、いまいちDBとの連携のイメージが掴みにくい上に画像はS3に保存して更に難易度が上がる点。)

以下は頭の整理に作成した図です。

以前まとめたVuexの図も少し変えました。

おわりに

本当は16章まで終えてから記事を作るつもりでした。

ですが、8章まで終えて描画がされなくなってしまったので一旦ここまでで。。。

再度1から見直しながら挑戦しようと思います。(他のチュートリアルでもうちょい修行してからトライします。。。苦笑)

学習記録(※備忘録※)

ここからは個人的備忘録です。復習に活用します。

学び

・Vueインスタンスがapp.jsで生成されたタイミングでApp.vueを読み込みアプリが起動する。
※生成前にdispatchでstoreからアクションを呼び出すことはできる。

・SPAはJSONデータを元に画面の一部を書き換える。

・api.phpはAPIのルーティング。APIの機能を特定のアドレスに割り当てるのに利用する。

・SPA における Web API の場合は <input> 要素を設置することができない⇔Laravelの@csrf

・await で非同期なアクションの処理が完了するのを待つ。(※Promise の解決を待つ)

・コンソールでのVueDevToolの活用とクッキーの確認&削除

要復習部分

3章 SPA開発環境とVue Router

・webpack.mix.jsでのbrowserSyncの実装せず。　※npm run watchでロードが終わらない。。。

4章 認証API

・AIP用のルートでapp/Providers/RouteServiceProvider.phpを編集してる。セッションなど含むためミドルウェアグループをwebに設定。

4/20追記：これKarnel.phpを直接編集しても良いね。あとCSRFトークンはここで有効化してるのか！！

・phpunit.xmlのデフォルトのコードが若干違った。⇒これが原因か一応教材通したがテストしてもエラーが毎回起きた。。。

・トレイト(クラスの多重継承)に関して　Laravel学習帳

6章・7章(特に後半) 認証機能とVuex　※Storeで実装している。

・async,await,promice

・Store/auth.js内でaxiosの記述してる。

・トークン処理踏まえてformタグ内にログイン/会員登録機能の実装。タグ内でトークン用タグ記載。※TechpitSPA開発教材(7-5)も同様。

・Vue.js側の認証状態の維持(Laravel側はセッションで維持されてて不一致のパターン)、ミドルウェア
⇒ログインユーザーを返却するAPIを作成している。

8章 エラーハンドリング

※バリデーションエラーに行く前で表示されなくなる。

バリデーションエラー対策。

その他(気になったことなど)

・教材ではlaravelのバージョンが6.9だったがコマンドで指定できず。6.8で作成。

・Bootstrap.jsの存在。JSを動かすために使われている？？　参考　①　②
⇒この教材ではCSRF対策のために使われており、app.jsに記述して読み込んでいる。

参考