シングルファイル・Vueコンポーネントをつくる方法さてさて、これまでの記事ではVueコンポーネントやVueディレクティブの作り方を多数紹介してきました。Vueはとてもシンプルでありながら高機能で、われわれ開発者がほしがる機能をたくさん提供してくれています。今回テーマに選んだ「シングルファイル・コンポーネント」もそのひとつです。このシングルファイル・コンポーネントがどのようなものかというと、「Vueコンポーネントをひとつのファイルだけで管理できる機能」となります。ひとつのファイル内に各ブロックを設け、そこに直接HTML、JavaScript、CSSを書くことができます。そのため、いちいちバラバラにコードを書かなくていいですし、さらに1つのファイルで完結しているので保守管理もしやすいです。いうことで今回はシングルファイル・VueコンポーネントをLaravelでビルドして使う方法を紹介します。参考にしてみてくださいね。Mixを使ってビルドする必要があります。Mixが実行できる環境をつくっておいてください。installそして、今から作るコンポーネントがビルドできるようにresources/js/app.jsを開いて設定しておきましょう。今回はつくるコンポーネントはシンプルな赤いボタンで、名前は「RedButton」です。require('./components/RedButton.vue'));ちなみに、Laravelには初期状態でExampleComponent.vueというサンプル・コンポーネントが用意されています。require('./components/ExampleComponent.vue'));シングルファイル・Vueコンポーネントをつくるでは、実際にコードを書いていきましょう。resources/js/components/RedButton.vueというファイルを作成します。ここから各ブロックごとの説明していきましょう。それぞれ、以下のタグ内に書いていきます。CSS部分HTML(テンプレート)部分まずは見た目の部分になるHTMLを作っていきます。}}</button></template>内容としては、通常のボタンにonClick()を実行するイベントをつけ、さらにテキストにlabelという変数をバインディングしています。後でCSSを適用されるためにred-buttonというクラスも指定しています。JavaScript部分では、JavaScript部分です。}</script>HTML部分で必要になるlabelとonclick()を記述しています。ちなみにdataはコンポーネント内では関数として指定しないといけないので注意してください。最後にCSS部分です。}</style>ボタンの背景を「赤」、文字は「白」にしています。ビルドしてみるでは実際にビルドしてみましょう。次のコマンドを実行してください。productionです。ビルドが完了すると先ほどのコードはpublic/js/app.jsの中に組み込まれています。コンポーネントを実行してみるでは実際にRedButtonコンポーネントを実行してみましょう。以下のようなBladeテンプレートを作りページ表示してみてください。id="app">のID指定です。このIDはresources/js/app.jsの中でVueが使うように設定されています。ページにアクセスしたものを見てみましょう。うまく表示されました。こちらもうまくいきました。お疲れ様でした!注意すべきこと1点注意すべきことは、スタイルシートです。今回の例でもコンポーネントにスタイルシートを使いましたが、これは最終的にJavaScriptによって<head>〜</head>タグ内に差し込まれることになります。そのため、以下のようにボタン全体に設定をしてしまうと、別のものにまで影響を与えてしまうことになります。そのため、極力classかidを使ったCSS設定をするほうがいいでしょう。}</style>お疲れ様でした!ソースコードをダウンロードする実際に今回使った.vueファイルを以下からダウンロードすることができます。ビルドして試してみてください。シングルファイル・Vueコンポーネントおわりにということで、今回はLaravelでシングルファイル・Vueコンポーネントを使う方法を紹介しました。Mixでまとめてしまうのはあまり好きではない(保守がしにくくなるので)ですが、コンポーネントとして作っておくだけならビルド回数も少なくなりますし、.vueファイルは使い回しもしやすいので、使うのは結構肯定的だったりします。このテクニックで開発の効率化、省力化を進めてくださいね。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。