2019.8.19
Vueでカクテルデータベースをリファインする話
結局なんかよくわからんけどうごいたので、制作再開です(笑)
laravelを再インストールしたら参照エラー治りました。なんだったんだ･･････。そんなコアなファイルいじってないんだけどな･･････
メモしておくべき点としては、こういうjavascriptの記述が必要、ってことぐらいですかね。
csrf_tokenの値がVue側かLaravel側、どっちかから拾えてないことが原因だとは思うんですけど、あんまり深く調べてないです。
ちょろっと言いましたが当面の目標はカクテルDBのリファインです。致命的なバグを抱えたままなのにずっと放置されてるのを修繕するきっかけとして･･････あとカクテル動画も投稿再開しましたしね。
基本的な動作はすでに作ってあるし、そんなにおかしいところはないのでフロントエンド側だけどうにかしたらいいかな、って感じです。
ということで、まずやることとしては、構成要素で分ける(コンポーネント化)ですね。やってみましょう。
まず、明らかに必要なのは、ルートコンポーネント、つまり大枠ですね。
これは常に表示される領域、つまりカクテルDBだとヘッダー部分を抱えるコンポーネントのことになりそうです。
ここで、まず問題になってくるのがローカルCSSとグローバルCSSですね。
データベース全体で共通して使うCSSと、特定のページでしか使わないCSSって分けることが多いと思うんですが、そういうのってどうやってvueで定義するんですかね？と。
javascriptでゴリゴリ動的に書いちゃう方法って絶対によくないと思うので、なにか賢い実装があるはずなので調べます。
と、そこでそもそもVueファイルはdiv,style,scriptが三位一体になったファイルだったってことを思い出します。
ここでstyle部分に複数指定ができれば、できないことはなくなるわけですね。
で、この答えを探すのもだいぶ苦労しましたが@importを使えば事実上なんでもできそうですね。
普段は2つ以上のローカルCSSを用いることって僕はないんですが、フォーム用のCSSと＋αでなにか、みたいな構造になった時に、分割されたファイルを複数読み込めないと詰むので･･････(笑)
ファイル分割といえばもうひとつ気になるものがあります。ルーティングファイルの分割ですね。
ぜんぶapp.jsに書けば動くっちゃ動くんですが、見た目キモいのでルーティングはルーティングで分けて記述したいところです。さてどうしよう、といったお話です。
いちおこんなとこを参考に、作ってみましょーーーか。
で、いろいろ試してみてたどり着いたのがこんな感じのファイルです。
window.Vue = require('vue');
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes.js';//ルーティング
require('./bootstrap')
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes: routes()
});
const app = new Vue({
router,
el: '#app'
})
まずapp.jsです。routerの中身だけを切り出したいというオーダーなので、その中身をすべてroutes.jsというのに移動させたいわけです。
ここでモジュールのインポートをするわけですが、これがimportですね。import文って単にファイルを読み込んでるだけかと思ったんですが、phpのそれとはちょっと使い勝手が違うようなので調べるハメになりました。
一応訳すと、これはデフォルトモジュールのインポートという扱いになりますので、routes.jsの中のメソッドをroutesという名前で呼び出す、っていう意味になります。
んで、じゃあroutes.jsの中身ですね。
import index from './components/index.vue';
import about from './components/about.vue';
import so from './components/so.vue';
import bar from './components/bar.vue';
export default function () {
return [
{
path: '/', // このパスにアクセスしたら
name: 'home',
component: index // このコンポーネントを呼ぶ
},
{
path: '/About',
name: 'page1',
component: about
},
{
path: '/So',
name: 'pagex',
component: so
},
{
path: '/Mo',
name: 'pagen',
component: bar
}
]
};
モジュールの使い方としてはこんな感じですね。defaultインポートの場合はメソッドに名前をつけないのが特徴ですね。代わりにdefault宣言をします。
で、インポート時に自分でつけた重複しないような名前を使い、関数呼び出しする、みたいなイメージです。
今回の場合はオブジェクトをそのまま返せばいいので、こんな感じにやればオッケーって感じですね。
似たようなものを増産していくことで、階層ごとにルーティングファイルを分けたり、っていう使い方もできそうですね。
これでルーティングに関してはすっきりしたので、今度はまた別の話をできたらなーって思います。