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

2019/11/3

こんにちはマツイです。現在、個人的に時間管理のために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

プログラミング技術

松井貴史

フリーランス・副業向けチームビルダーのためのプラットフォーム、MENTION（メンション）開発｜RUBYDESIGN.代表（http://rubydesign.jp）｜デザイナー&エンジニア｜趣味：旅行・サウナ・ポーカー・ワイン｜ビジネスライフハックもたまに｜提携や仕事の相談は気軽にDMください

Follow @matui_takafumi

類似記事

プログラミングをはじめて4ヶ月目の報告書

2018/9/24

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

2019/6/18

GridGuidを使用してグリッド設計プロセスを自動化する

2020/1/24

犬の課題・知識を共有するためのサービスの事前登録を開始。

2019/7/1