LaravelでVue.jsを利用する方法を解説｜LaravelにおけるVue.jsのセットアップの仕方や使い方

Laravel

Javascript
PHP
プログラミング言語

公開日時: 2021-09-15 　更新日時: 2022-06-01

LaravelでVue.jsを利用する方法を解説｜LaravelにおけるVue.jsのセットアップの仕方や使い方

この記事でわかること

システム エンジニア: LaravelでVue.jsを利用する方法を教えてください。

プロジェクト マネージャー: LaravelでのVue.jsのセットアップなどについて紹介します。

【初心者向け】LaravelでVue.jsを利用する方法を解説

現在のWebアプリでは、サーバーサイドだけでなく、フロントエンドでのフレームワーク利用もまた、当たり前に行われる様になりました。こうしたフロントエンドフレームワークをLaravelで利用することも多いでしょう。

本記事では、PHPのフレームワークであるLaravelで、フロントエンドフレームワークであるVue.jsの”導入・基本的な使い方”について解説します。初心者向けに執筆しておりますので、初めて導入される方は、ぜひ本記事を皆様の学習や開発の参考にしてください。

Laravelとは？

Laravelは、2012年にリリースされた、PHPフレームワークです。この数年の間にLaravelは着実にPHPの世界に浸透し、広まってきました。現在では、PHPのデファクトスタンダードの地位を確立したと言っても過言ではないでしょう。

Laravelは、いわゆる「MVCフレームワーク」と呼ばれるものです。Model（モデル）、Controller（コントローラー）、View（ビュー）の各機能に分けて整理し、これらのパーツをうまく使い分けてアプリケーション開発していくことになります。

また、Laravelの学習コストはとても低く、PHPの基本的なルールを習得していれば、すぐに使いこなせる様になるでしょう。さらに、多くの機能を有していて、簡単なコードで各種の機能をすぐに仕える様になりますから、それも人気の一つでしょう。

Laravelについてより詳しく知りたい方は、公式サイトにて知見を深めてください。

Vue.jsとは？

Vue.jsは、JavaScriptのフレームワークです。

今まであれば、jQueryというフレームワークが主体で使われていたのですが、開発の主体がサーバーサイドからフロントエンドに移りゆく中で、その処理をページ一つで完結させるにはjQueryでは難しくなってきました。

そこで登場したのが、Vue.jsやReactといった新しいフレームワークです。

HTML全体の要素の構成のことをDOM（Document Object Model）と言いますが、それらの対応を自動で行ってくれますし、jQueryよりも記述が短く簡単であるため、それらのフレームワークが広まることとなりました。

Vue.jsのメリットとしては、
1.気軽に使える
2.DOM操作を自動で行ってくれる
3.学習コストが比較的に低い
4.シンプルで書きやすい
などいったことが挙げられるでしょう。

Vue.jsは小・中規模のアプリケーション開発に向いていますが、大規模開発には向いていません。大規模開発を考えている場合、それに対応しているReactやAngularといったフレームワークを使ったほうが良いでしょう。

Vue.jsを利用する

では、早速Vue.jsを利用していきましょう。

※Laravel5.8以降を想定しています
※Macを使用しています
※composerを導入している前提で進めます

Vue.jsに限らず、ReactやAngularなどのフロントエンドフレームワークを利用した開発を行う場合は、「Node.js」を用意しておく必要があります。

Laravelでフロントエンドフレームワークを利用する場合には、Node.jsのパッケージ管理ツール（npm）を使って必要なソフトウェアを管理します。よって、事前にNode.jsをインストールするところから始まります。

Node.jsのインストールについては、以下のサイトを参考にしてください。

続いて、Vue.jsのセットアップです。Vue.jsのセットアップについては、とても簡単です。なぜなら、Laravelではデフォルトで設定が済んでいるからです。

初期段階ではまだVue.jsを使うためのパッケージが組み込まれていないので、ターミナル上でご自分のLaravelプロジェクトのディレクトリに移動し、次のコマンドを実行してください。

npm install

1	npm install

実は、このままではVue.jsは動作しません。実際には、ビルドが必要になります。次のコマンドを実行しましょう。

npm run dev

1	npm run dev

これで、Laravelプロジェクトのビルドが実行されます。ビルドでは、スタイルシートとスクリプトを単一ファイルにまとめて最適化してくれます。

最適化されたファイルは/public/js/app.jsと/public/css/app.cssに出力されます。これで、Vue.jsが使えるようになります。

Vue.jsをLaravelで使ってみよう！

では、Laravelで使ってみましょう。

Laravelには標準で「ExampleComponent」というVue.jsのコンポーネント（構成要素）が用意されています。これは、/resources/js/components/ExampleComponent.vueというファイルとして用意されています。

※サンプルとして、/resources/js/componets/というフォルダに配置しています。ここに用意することで、コンポーネントが自動的に認識され、使えるようになります。

では、早速使ってみましょう。

ここでは、サンプルとしてHelloControllerを用意して頂き、また、/resources/views/hello/にindex.blade.phpというファイルを準備して下さい。

ルーティングは、/routes/web.phpに「Route::get(‘/hello’, ‘HelloController@index’);」とします。ただし、プロジェクトによって記述の仕方は違うかと思いますので、そこは適宜調整してください。

以下、index.blade.phpの中身です。

<!DOCTYPE HTML>
<html lang="ja">
<head>
  <title>Index</title>
  <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
  <meta name="csrf-token" content="{{ csrf_token() }}"> //CSRFトークンの追加
</head>

<body style="padding : 10px;">
  <h1>Index</h1>
  <p>{{$msg}}</p>

  <div id="app">
    <example-component></example-component> //コンポーネントを組み込むタグ
  </div>

  <script src="{{ mix('js/app.js') }}"></script> //コンポーネントタグの後に記述してください！

</body>
</html>

<!DOCTYPE HTML>

<head>

<title>Index</title>

</head>

<h1>Index</h1>

<example-component></example-component> //コンポーネントを組み込むタグ

</div>

</body>

</html>

では、続いてHelloController@indexメソッドを記述します。

public function index()
{
  $data = [
        'msg' = 'This is vue.js text,',
  ];
  return view('hello.index', $data);
}

public function index()

{

$data = [

'msg' = 'This is vue.js text,',

];

return view('hello.index', $data);

}

アプリケーションの動作確認をしましょう。まずは、忘れずにターミナル上で「npm run dev」でビルドしましょう。その後、「php artisan serve」を実行してアクセスします。

サーバー実行時、「npm run watch」を行っておくと、スクリプトの書き換えを自動実行してくれるようになります。そうすると、「サーバー停止→ビルド→サーバー実行」といった作業を繰り返す必要がなくなります。

コマンド実行後、ブラウザ上に「This is vue.js text,」と表示されていれば大丈夫です。

次に、コンポーネントを作成します。/resources/js/components配下にMyComponent.vueという名前でファイルを作成します。そして、次のように記述しましょう。

<template>
  <div class="container">
    <p>{{ msg }}</p>
    <hr>
    <input type="text" v-model="name">
    <button v-on:click="doAction">click</button>
  </div>
</template>

<script>
export default {
  data:function() {
    return {
      msg:'please your name?',
      name:' ',
      }:
  },
  methods:{
    doAction:function() {
      this.msg = 'Hello, ' + this.name;
    }
  }
}
</script>

<hr>

<button v-on:click="doAction">click</button>

</div>

</template>

export default {

data:function() {

return {

msg:'please your name?',

name:' ',

methods:{

doAction:function() {

this.msg = 'Hello, ' + this.name;

}

</script>

v-model=’name’で入力フィールドの値にモデルを設定し、on:click=”doAction”でボタンにdoActionメソッドを設定しています。

続いて、コンポーネントの登録を行いましょう。/resources/js/app.jsを開き、適当なところに次の文を追記しましょう。

Vue.component('my-component', require('./components/MyComponent.vue').default);

Vue.component('my-component', require('./components/MyComponent.vue').default);

これで登録できました。次は、登録したMyComponentをindex.blade.phpに組み込みます。先ほどの<div id=”app”>に以下の様に記述します。

<div id="app">
    <my-component> //exampleの部分をmyに変更する
  </div>

<my-component> //exampleの部分をmyに変更する

</div>

ブラウザをリロードして更新しましょう。すると、入力フォームが表示されるはずです。入力フィールドに任意の名前を入力してボタンをクリックしてみてください。メッセージが表示されるはずです。これで、Vue.jsのコンポーネントが問題なく動作できていることになります。

システム エンジニア: Vue.jsについてや、Laravelでleft

プロジェクト マネージャー: 今回紹介した方法を参考に、実際にコードを書いて使い方をマスターしましょう。

おわりに

Vue.jsのコンポーネントの利用については、いくつかのポイントを押さえておけば比較的簡単に行えるでしょう。

1.コンポーネントファイルは、/resources/js/components/配下にvueファイルとして作成する
2.作成したコンポーネントは、/resources/app.js内でVue.componentメソッドを使って登録する
3.コンポーネントの利用は、HTMLにコンポーネントに対応するタグを記述して行う

これらのことさえ理解できていれば、簡易的ではありますが、Vue.jsを利用することができます。

以上で初心者向けのVue.jsのセットアップについて解説していきました。これらはあくまでも基本的な使い方の説明なので、自分自身で手を動かし、様々な実装に取り組んでみてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

LaravelでVue.jsを利用する方法を解説｜LaravelにおけるVue.jsのセットアップの仕方や使い方

【初心者向け】LaravelでVue.jsを利用する方法を解説

Laravelとは？

Vue.jsとは？

Vue.jsを利用する

Vue.jsをLaravelで使ってみよう！

おわりに

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

LaravelでVue.jsを利用する方法を解説｜LaravelにおけるVue.jsのセットアップの仕方や使い方

【初心者向け】LaravelでVue.jsを利用する方法を解説

Laravelとは？

Vue.jsとは？

Vue.jsを利用する

Vue.jsをLaravelで使ってみよう！

おわりに

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

Laravel入門｜PHPフレームワークによるWebサイトの作成方法について解説！

phpフレームワークlaravelでできる使い方や特徴とは？

LaravelでのSeederの使い方｜クラス定義やデータ登録のコード例

LaravelでのLoggingの使い方とは？基本的な使い方やログについて紹介！

Laravelでのsessionの扱い方とは？sessionを学んで正しく扱おう！