目次
はじめに
今回、私が学習した教材は【Laravel x Vue.js】SPAクイズアプリケーションを作ってみよう！です。
かなりボリューム大・難易度も高めだったので、個人的な備忘録も兼ねて感想を書きます。
※以前もTechpitさんの教材は感想を書かせていただきました。
動機
購入したのは2月。当時は全然理解できなくて挫折。
ですが、LaravelとVue.js各々でポートフォリオ制作を終えた今、次なる挑戦はやはりLaravel+Vue一択。
スキル的にも2か月前に比べてだいぶ変わったはず。
そう思い、再びこの教材に挑戦してみました。
感想
この教材ではタイトル通りLaravel+VueでSPA開発を体験できます。(環境構築はMac)
私はWindows&XAMPP(SQLite⇒MySQL)に置き換えて挑戦しました。
良かった点
①Laravel-Adminを扱っている点。
以前から気になっていたのですが、これを扱う教材は初めてだったのでとても参考になりました。
②SPAかつ複数ページのサイト構築を学べる点。
以下は難しすぎて、頭を整理する際に作ったものです。笑
他でここまで教材にしてくれているのはこれくらいな気がします。⇒Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう
印象的だった点
・LaravelとVueをディレクトリを切り離して作成し、後程1つにまとめるという作り方。
・Login/Register含めすべてのビューをVue側で作成。機能面をLaravel側で実装している。
※追記※
・コントローラはAPI用のコントローラしかほぼ使わない。
・web.phpでのルーティングはコントローラのアクションメソッドを介さずにビューを返している。
・APIコントローラは多く作成するが、アクション自体はindexのみ。それに伴い、api.php側でも全て各コントローラ名@indexでビューを返している。
難しかった点
・webpackやら環境構築。設定面は見よう見まねでしか現状はできないです。
・複数ページに渡るSPA開発を1つのプロジェクトで扱う。コンポーネントファイルもたくさん作ります。
※有名なこちらの本(PHPフレームワーク Laravel実践開発)でもLaravelでのVue.js実装方法は説明されていますが、本当に導入部分の説明のみです。(コンポーネントファイル1つでの実装。Vue Routerも扱わない。)
・api.phpの組み込み(というより6章以降総じて難しい。)
・Laravel-Adminの実装
活用ライブラリ・機能など
CSS
JavaScript
browserSync、vue-social-sharing、Chart.js、vue-chartjs、Vue Router(グローバルビフォーガイド)、Axios、VeeValidate、vue-loading-overlay、vue-notification、
PHP
Carbon(日付計算)、Factory(自動ダミーデータ生成機能)、helpers(文字列ライブラリ)、Laravel-admin
その他
Font Awesome、SQLite(DB)、JSON Viewer、ngrok(windowsはこちらで対応、1周目は割愛した。)、Basic認証
おわりに
作りながら学べる系の教材としては、かなり難しい部類に入ると思います。
僕もまだ1周終えた段階で全然理解できていません。
ですが、これを理解したら何ができるだろうかと妄想を膨らませると非常にワクワクします。笑
※Laravel-Adminは作るアプリによってはToo muchな気もしました。GUIでDB弄れれば問題ない気もします。ここら辺も踏まえて復習していきます。
引き続き頑張ります◎
学習記録(※備忘録※)
ここからは個人的備忘録です。復習に活用します。
学び
・Laravel-MixはWebpack(ビルドツール)を扱いやすくしたもの。
・Sassで@importの@を記載することでnode_modulesのパスを省略できる(そのほかCSSを分割する際に利用されるらしい)
・npm run watchしないとVue側のファイルの変更が適用されない&画面の自動リロードをしてくれる。
・Chart.jsでのグラフ生成。データベースから引っ張ってくるとなるとPHPと連携になるためAPIの理解が必須。
・JavaScriptだけのルーティングの保護では、ブラウザ側でJavaScriptは書き換えられてしまう可能性があるため、サーバーサイドの保護も必須。
・Laravel側はフォルダ名/index.blade.phpでこれがそのままURLになるよう作られている。⇒後程Laravel側はweb.phpで読み込むファイルを共通化。
要復習部分
6章 APIの組み込み
・api.phpの活用 (お知らせ、カテゴリーチェック、クイズ、グラフ生成はAPI部分で実装)
Vueでのデータ取得にはページ遷移ができないのでAPIが必須。
・axiosの理解※書籍でもmountedフックは使ってたけどコードの書き方異なっていた。
7章 会員登録機能の作成
・JavaScript関連 async、await、Promiseの理解
8章 ログイン・ログアウト機能の作成
・コンソールでバリデートの確認ができずに画面遷移してしまう
9章 ランキング機能の実装とその他ページの作成
・総じて理解できていない。。。APIでの認証設定
その他(気になったことなど)
・同一ディレクトリで初めから制作できないか？？
(Laravelプロジェクト内にフォルダ作ればいけると思われ。npm関連でごっちゃにならなければOKなはず)
・js下にbootstrap.jsがある
・ヘルパ関数ありすぎ。
・Laravel-adminのビューはどこで生成？？⇒デフォルトではVendor内。 参考
・DBの改行に関して。自分のLaravelポートフォリオもできていなかった。次作る時は意識したい。 参考
コメントを残す