3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

はじめに

今回、私が学習した教材は【Laravel x Vue.js】SPAクイズアプリケーションを作ってみよう!です。

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

動機

購入したのは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側で実装している。

難しかった点

・webpackやら環境構築。設定面は見よう見まねでしか現状はできないです。

・複数ページに渡るSPA開発を1つのプロジェクトで扱う。コンポーネントファイルもたくさん作ります。
※有名なこちらの本(PHPフレームワーク Laravel実践開発)でもLaravelでのVue.js実装方法は説明されていますが、本当に導入部分の説明のみです。(コンポーネントファイル1つでの実装。Vue Routerも扱わない。)

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

・Laravel-Adminの実装

活用ライブラリ・機能など

CSS

Bootstrap3、Sass、※BEM規約

JavaScript

browserSync、vue-social-sharingChart.jsvue-chartjsVue Router(グローバルビフォーガイド)AxiosVeeValidatevue-loading-overlayvue-notification

PHP

Carbon(日付計算)、Factory(自動ダミーデータ生成機能)、helpers(文字列ライブラリ)、Laravel-admin

その他

Font Awesome、SQLite(DB)、JSON Viewer、ngrok(windowsはこちらで対応、1周目は割愛した。)、Basic認証

おわりに

作りながら学べる系の教材としては、かなり難しい部類に入ると思います。

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

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

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

引き続き頑張ります◎

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?