.net column
.NET開発者のためのブログメディア

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

2021年09月15日

SE
LaravelでVue.jsを利用する方法を教えてください。

PM
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プロジェクトのディレクトリに移動し、次のコマンドを実行してください。

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

これで、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の中身です。

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

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

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

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

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

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

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

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

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

SE
Vue.jsについてや、Laravelでleft

PM
今回紹介した方法を参考に、実際にコードを書いて使い方をマスターしましょう。

おわりに

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

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

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

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags