Vue.js-Laravelを使用して、ファイル管理について簡単に書いてみた
なぜファイルを分けるのか
チュートリアルなんかでよく見かけることがありますが、htmlとcssとJavaScriptとphpなどのコードを一つのファイルに書いてある例があります。それは、チュートリアルとしては、一つのファイルでコードを書いたほうがページにまとめやすい・記事を見た人がみやすいなどの説明のためにそうしていることがほとんどです。
実践の場ではそのまま使ってはいけないほうが多いと思います。このページは記述量が少ないから、一つのファイルに書いてしまおうなどとしてしまうと、htmlとcssとJavaScriptとphpを同じファイルにあり、そのページのすべての部品の機能も同じファイルに記述された状態だと、この機能を足してほしいといったときに、どんどんファイルの記述量が肥大化していきます。問題としては、コードを管理しにくかったり、初めて見る人が理解するのに時間がかかってしまうなどがあります。
それをなるべく防ぐ方ためにファイルを分けます。ファイルを分けることを抽象化といいます。
ファイルの分け方もいろいろあります。例えば、Vue.jsでは単一ファイルコンポーネントという考え方があり、それはページの部品ごとにファイルを分けて、ページを作るときに、部品を一つずつ引っ張ってくることで、再利用性が高く、管理もしやすく、はじめてコードを見た人も理解がしやすくなります。他には、cssとJavaScriptとHtmlは別ファイルで管理するやり方などもあります。
今回はVue.jsを使って、下の例で、単一ファイルコンポーネントを体験してみます。
例をこなして体験してみる
Laravelプロジェクト配下で、コマンドnpm installをたたいて、Vue.jsを使うための準備を整えます。
- laravel Vue.js docker-compose環境構築
- laravelにVue.jsを入れる前の、5分間の事前学習
環境が整えられたら、LaravelでVue.jsを使って、表示してみます。
(ファイル分けないで)(もともと用意されているwelcome.blade.phpを編集します)
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Vue.js</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css">
<script src=" {{ asset('js/app.js') }} "></script>
</head>
<body>
<div id="sampleDiv">
<sample-component></sample-component>
</div>
<script>
Vue.component('sample-component', {
template:'<h1>今日も最高！！</h1>'
});
const vue = new Vue({
el: '#sampleDiv',
});
</script>
</body>
</html>
Vue.jsのコンポーネントを使用して、このページではsample-componentという部品を利用しています。Vue.jsコンポーネント
まず、bladeだけを分けてみます。
構造
resources -- js
|
-- lang
|
-- sass
|
-- views -- layouts -- app.blade.php
|
-- welocome.blade.php
layoutsフォルダを作成し、その下にapp.blade.phpを作成します
(さらにheader.blade.phpとして、headerを別に分ける方法もあり)
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Vue.js</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css">
<script src=" {{ asset('js/app.js') }} "></script>
</head>
<body>
@yield('content')
</body>
</html>
もともとのwelocome.blade.phpからbodyの中身を@yield('content')に変えました。何がいいかというと、ページを複数作成するときに、app.blade.phpの中に記述していることは@extendsで再利用ができるという点で何回も記述しなくてすみます。
それでは、welcome.blade.phpを編集します。
@extends('layouts.app')
@section('content')
<div id="sampleDiv">
<sample-component></sample-component>
</div>
<script>
Vue.component('sample-component', {
template:'<h1>今日も最高！！</h1>'
});
const vue = new Vue({
el: '#sampleDiv',
});
</script>
@endsection
@extendsで引き継ぐbladeを指定しています。先ほど@yieldで指定したところへ、@sectionから@endsectionまでの中身を挿入しています。画面を表示すると、先ほどと同じように「今日も最高！！」と表示されています。
それでは、単一ファイルコンポーネントを利用してみます。
先ほどの構造のjsディレクトリの詳細
js -- components -- ExampleComponent.vue
| |
-- app.js -- SampleComponent.vue
|
-- bootstrap.js
LaravelでVue.jsを使用する際にresources/js/app.jsをpublic/jsにコンパイル(出力)するため、npm run devをたたきますが、npm run devはwebpack.mix.jsの内容を見て、出力してくれます。webpackは複数のjsファイルが存在したとき、それの依存関係を解決し、一つのファイルにまとめてくれる便利なものです。今回でいえばnpm run devをたたけば、一つのファイルにまとめてくれます。
SampleComponent.vue作成
<template>
<p>
{{message}}
</p>
</template>
<script>
export default {
data: () => {
return {
message: '今日も最高！！'
}
}
}
</script>
Vue.jsのコンポーネントの決まりとして、タグの中に書きます。子コンポーネントなので、dataは関数です。
bladeでVue.jsのデータ変数を使う際は、@{{}}を使うのですが、.vueファイルのため{{}}内に書けます。
@extends('layouts.app')
@section('content')
<div id="app">
<sample-component></sample-component>
</div>
@endsection
id:appはもともと、app.jsに登録されているので、使用できます。idを変える場合はapp.jsに書くかwelocome.blade.phpでVueインスタンスを新たに作る必要があるため、今回記述量の少ないこちらを採用しました。
app.jsを編集します。
// Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('sample-component', require('./components/SampleComponent.vue').default);
exampleは使わないので、コメントアウトして、sample-componentを使うため、登録します。app.jsの下にid:appの記述があると思います。require default
npm run dev
これでwelcome.blade.phpを表示すれば、表示されると思います。
Author And Source
この問題について(Vue.js-Laravelを使用して、ファイル管理について簡単に書いてみた), 我々は、より多くの情報をここで見つけました https://qiita.com/shibaHaya/items/74c199bf00404e15cbbb著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .