なぜVue.js ? Laravelで Vue.js を使う理由と導入方法。

こんにちはマツイです。 現在、個人的に時間管理のためにSlackを使った勤怠管理システムを作っております。 ロジックは、Slackに登録したスラッシュコマンドを叩くと、グーグルのスプレッドシートに記載してくれて、Slackのボットがリアクションしてくれる仕組み。 実際に仕事でも使ってますが、稼働時間が見える化できて非常に便利です。色々アイデアも湧いてきております。 せっかくならとスプレッドシートではなく、もっとUIを入れて作りこみたいなと思い、実装を行っている段階。 今回はフロントをVue.jsで実装する事になりました。ですが、そもそもなぜVue.js使うの?導入理由は何?という事とLaravelでのVue.jsの導入方法をご紹介します。

Vue.jsを導入する理由

今回導入した理由が下記です。
  • ・学習コストが低い
  • ・無限スクロールをさせるためデータバインディングが必要だった
  • ・サーバサイドで全てレンダリングするのは重い
  • ・シンプルで書きやすい
現時点では、静的ファイルをデータ型に変換している所までなのですが、html/cssやjavascriptの理解があれば、使いやすいように思います。 データバインディングってなんだって方はコチラをご覧ください。 理由をもっと知りたい方はこの記事もオススメです。 vue.jsを使う人の思想を知りたいです(できればサーバーサイドメインの開発者目線の意見で)

導入方法

前置き長くなりましたがこちらから導入方法になります。

Vue.jsをインストール

Laravel5.6以降から、初めからpackage.jsonにVue.jsで使用する一通りのパッケージが記載されているので、npm installするだけで使用できるようになります。念のためpackage.jsonを確認してみるのもいいかもしれません。

blade.phpの編集

次に、blade.php側を編集します。まずは、CSRFトークンをhead内metaタグにセットします。
<meta name="csrf-token" content="{{ csrf_token() }}">
さらに下記もhead内に追加。{{mix(‘パス’)}} でアセットパスをコンパイルしていい感じにしてくれます。
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
ドキュメントに書かれている内容は添付画像。 次に表示さるための設定
<div id="app"> 
 <!-- example-component 部分を読み込む-->
  <example-component></example-component>
</div>
そして、</body>タグの近くに下記を追記。head内に書くと言う記事も見かけますが、bodyの閉じタグ近くがいいようです。
<script src=" {{ mix('js/app.js') }} "></script>

vue.jsのコンポーネント作成

resources/js/components/ExampleComponent.vue内に コンポーネントを作成します。コンポーネント内は、 <template></template>内にhtmlを書いていきます。例えば、こんな感じで。
<template> 
 <div class="container">
  <div class="row justify-content-center">
   <div class="col-md-8">
     <div class="card card-default">
      <div class="card-header">
       Example Component
      </div>
     <div class="card-body"> 
      I'm an example component. <br> <span class="test">{{ test }}</span>
     </div>
    </div>
  </div>
 </div>
 </div> 
</template>
{{ test }}で受け取ったデータを表示する。受け取る情報は <template></template>の下に追記。
<script> 
 export default {
  props: { test: String, }, 
  mounted() { 
   console.log('ExampleComponent mounted.') 
   },
  }
</script>
※上記の記述は、コチラのサイトからお借りしてます。

コンポーネントの読み込み

resources/js/app.jsを編集してコンポーネントを読み込みます。
require('./bootstrap'); window.Vue = require('vue'); 
Vue.component('example-component', require('./components/ExampleComponent.vue').default); const app = new Vue({ el: '#app' });
ここで、[ExampleComponent.vue]→[example-component]という表記に変換しています。
Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Vue.jsのコンパイル

ここまで完了すればビルドして、ブラウザを確認してみてください。
$ npm run dev
松井 貴史
顧問・パートナー型の受託専門WEBデザイナー兼ディベロッパー。UXUI改善運用からWEBシステム開発までワンストップで提供しています。自身でもデザイナー発!個人開発者として日々の気づき、アクション、考え、ノウハウをTwitterで発信中。オンラインゲームSAKETUMA開発

類似記事

デザイナーがプログラムを学ぶとなぜ価値が上がるのか?

デザイナーがプログラムを学ぶとなぜ価値が上がるのか?

UI設計

デザイナーは、UIデザインに関わりながらプログラムを学べる。

GitHubを使ったプロジェクトの始め方

Sassの導入とgulp4でコンパイルして自動監視する方法