【感想】【Laravel x Vue.js】SPAクイズアプリケーションを作ってみよう！を終えて

<h2>はじめに</h2>
今回、私が学習した教材は<a href="https://www.techpit.jp/p/laravel-vue-quiz">【Laravel x Vue.js】SPAクイズアプリケーションを作ってみよう！</a>です。

かなりボリューム大・難易度も高めだったので、個人的な備忘録も兼ねて感想を書きます。

<h2>動機</h2>
購入したのは2月。当時は全然理解できなくて挫折。

ですが、LaravelとVue.js各々でポートフォリオ制作を終えた今、次なる挑戦はやはりLaravel+Vue一択。

スキル的にも2か月前に比べてだいぶ変わったはず。

そう思い、再びこの教材に挑戦してみました。
<h2>感想</h2>
この教材ではタイトル通りLaravel+VueでSPA開発を体験できます。(環境構築はMac)

私はWindows&amp;XAMPP(SQLite⇒MySQL)に置き換えて挑戦しました。
<h4>良かった点</h4>
<span style="color: #ff0000;">①Laravel-Adminを扱っている点。</span>

<img class="alignnone wp-image-1170" src="https://chobimusic.com/wp-content/uploads/2020/04/laravel-admin.jpg" alt="" width="755" height="353" />

以前から気になっていたのですが、これを扱う教材は初めてだったのでとても参考になりました。

<span style="color: #ff0000;">②SPAかつ複数ページのサイト構築を学べる点。</span>

以下は難しすぎて、頭を整理する際に作ったものです。笑

<img class="alignnone wp-image-1171" src="https://chobimusic.com/wp-content/uploads/2020/04/a.jpg" alt="" width="1012" height="756" />

他でここまで教材にしてくれているのはこれくらいな気がします。⇒<a href="https://www.hypertextcandy.com/vue-laravel-tutorial-introduction">Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう</a>
<h4>印象的だった点</h4>
・LaravelとVueをディレクトリを切り離して作成し、後程1つにまとめるという作り方。

・Login/Register含めすべてのビューをVue側で作成。機能面をLaravel側で実装している。
<h4>難しかった点</h4>
・webpackやら環境構築。設定面は見よう見まねでしか現状はできないです。

・複数ページに渡るSPA開発を1つのプロジェクトで扱う。コンポーネントファイルもたくさん作ります。
※有名なこちらの本(<a href="https://www.amazon.co.jp/PHP%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF-Laravel%E5%AE%9F%E8%B7%B5%E9%96%8B%E7%99%BA-%E6%8E%8C%E7%94%B0%E6%B4%A5%E8%80%B6%E4%B9%83-ebook/dp/B07WW45Q1X/ref=pd_aw_sbs_351_2/358-1374179-2756728?_encoding=UTF8&amp;pd_rd_i=B07WW45Q1X&amp;pd_rd_r=c514ba34-3955-428b-b635-1303db04aee2&amp;pd_rd_w=4wfwY&amp;pd_rd_wg=pJ7rW&amp;pf_rd_p=1893a417-ba87-4709-ab4f-0dece788c310&amp;pf_rd_r=G7VW1QTMEA4YA38AEFHH&amp;psc=1&amp;refRID=G7VW1QTMEA4YA38AEFHH"><span id="ebooksProductTitle" class="a-size-extra-large">PHPフレームワーク Laravel実践開発</span></a>)でもLaravelでのVue.js実装方法は説明されていますが、本当に導入部分の説明のみです。(コンポーネントファイル1つでの実装。Vue Routerも扱わない。)

・api.phpの組み込み(というより6章以降総じて難しい。)

・Laravel-Adminの実装
<h2>活用ライブラリ・機能など</h2>
<h4>CSS</h4>
Bootstrap3、<a href="https://sass-lang.com/">Sass</a>、※<a href="https://en.bem.info/">BEM規約</a>
<h4>JavaScript</h4>
browserSync、<a href="https://www.npmjs.com/package/vue-social-sharing">vue-social-sharing</a>、<a href="https://www.chartjs.org/">Chart.js</a>、<a href="https://vue-chartjs.org/ja/">vue-chartjs</a>、<a href="https://router.vuejs.org/ja/guide/advanced/navigation-guards.html#%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E3%83%93%E3%83%95%E3%82%A9%E3%83%BC%E3%82%AC%E3%83%BC%E3%83%89">Vue Router(グローバルビフォーガイド)</a>、<a href="https://github.com/axios/axios">Axios</a>、<a href="https://logaretm.github.io/vee-validate/">VeeValidate</a>、<a href="https://www.npmjs.com/package/vue-loading-overlay" target="_blank" rel="noopener noreferrer">vue-loading-overlay</a>、<a href="https://www.npmjs.com/package/vue-notification">vue-notification</a>、
<h4>PHP</h4>
Carbon(日付計算)、Factory(自動ダミーデータ生成機能)、helpers(文字列ライブラリ)、<a href="https://laravel-admin.org/docs/#/">Laravel-admin</a>
<h4>その他</h4>
Font Awesome、SQLite(DB)、JSON Viewer、ngrok(windowsは<a href="https://qiita.com/Esfahan/items/74e71edfe17d9935d47e">こちら</a>で対応、1周目は割愛した。)、Basic認証
<h2>おわりに</h2>
作りながら学べる系の教材としては、かなり難しい部類に入ると思います。

僕もまだ1周終えた段階で全然理解できていません。

ですが、これを理解したら何ができるだろうかと妄想を膨らませると非常にワクワクします。笑

※Laravel-Adminは作るアプリによってはToo muchな気もしました。GUIでDB弄れれば問題ない気もします。ここら辺も踏まえて復習していきます。

引き続き頑張ります◎