Vue.jsの使い方・laravelで活用するための方法

Vue.jsは、Javascriptで人気のフレームワークになります。https://amela.co.jp/%e3%82%b7%e3%83%b3%e3%83%97%e3%83%ab%e3%81%aa%e9%96%8b%e7%99%ba%e3%81%aa%e3%82%89vue-js%ef%bc%81javascript%e3%81%ae%e4%ba%ba%e6%b0%97%e3%83%95%e3%83%ac%e3%83%bc%e3%83%a0%e3%83%af%e3%83%bc%e3%82%af/以前にもVue.jsについては触れてきましたが、この人気のVue.jsは、PHPのフレームワークであるlaravelと一緒に使いたいという人が多いようです。今回は、そんなVue.jsの具体的な使い方や、laravelの関係について見ていきたいと思います。現在はまだ・Vue.jsしか学んだことが無い・laravelしか学んだことが無いという人であっても、覚えておいて損はない情報でしょう。

Vue.jsとは

冒頭でも触れたように、以前にVue.jsについて詳しく触れてきましたので、簡単にだけ触れておきます。Vue.jsとは、JavaScriptのフレームワークの1つです。Vue.jsは初心者でも比較的簡単に習得できます。HTMLと文法が似ているため、HTML学習経験者なら気軽にコーディングを身に着けることができるでしょう。「HTMLしか知らないけど、JavaScriptを用いて動的なWebサイト作りに挑戦してみたい」という方には、オススメしたいフレームワークです。Vue.jsには以下の特徴があります。・軽量・シンプルである・管理しやすいコンポーネント・直感的なリアクティブシステム

Vue.jsの使い方

では、具体的にVue.jsの使い方を見てみましょう。

HTMLにリンクタグを追加する方法

Vue.jsはHTMLコード内に、たった一行追加するだけで簡単に使い始めることができます。<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>これだけで準備OKです。このリンクタグをHTMLに挿入することで、Vue.jsの文法やライブラリを自由に使えるようになります。

Vue.jsを書いてみよう

Javascriptのオブジェクト指向形式で、表示させたいデータや処理を記述していくのがVue.jsの基本的な文法です。例えば、Vueインスタンスは、下記のような形で作成します。var msg = new Vue ({el: '#msg',data: {message:'Hello world'}});このようにmsgという名前でインスタンスを作ってみました。インスタンス内のelオプションでは、このインスタンスを使用するHTMLの場所を指定します。この例では「HTML上でidがmsgのところに、msgインスタンスを使います」という指定をしているのです。「#」ならid、「.」ならclassというところも、CSSのセレクタと文法が同じです。インスタンス内のdataオプションでは、使用したいデータを指定します。ここでは、まずは簡単にHello worldと表示させてみましょう。HTMLを下記のように書いてみます。<div id="msg">{{ message }}</div>これでidがmsgになっているdivタグ内の、messageの場所にHello worldが表示されるというわけです。もちろんただ表示させるだけでなく、Vue.jsには簡単に動的な処理を記述できる書式がたくさん用意されています。公式ドキュメントを参考にVue.jsで出来ることを調べながら、Webアプリケーションを作っていくことができます。

OSにインストールする方法

npmコマンドを用いて、Vue.jsをOSにインストールした上で使用することもできます。npmとは、Node Package Managerの略で、JavaScriptをサーバーサイドで動かせるようにする実行環境「Node.js」でパッケージ管理をする仕組みになります。このnpmを利用することでVue.jsもOSにインストールすることが出来ます。ただVue.jsの公式ドキュメントでは、Node.js ベースのツールについて詳しくない初心者については、この方法は推奨されていません。Node.jsの学習経験がない方は、前述の「HTMLにリンクタグを追加する方法」でVue.jsを使用した方がよいでしょう。大規模なWebアプリケーションを作りたい場合は、このOSにインストールする方法が有効です。

Vue.jsとlaravelの連携

先程までは、Vue.jsを単体で利用する想定でお話していました。続いては、Vue.jsをlaravelで利用することについて触れていきます。

laravelとは

laravelは代表的なPHPのフレームワークです。PHPはJavaScriptと同様、Webアプリケーション開発で使用される言語です。JavaScriptがユーザのブラウザ内で処理がおこなわれるクライアントサイド言語であるのに対し、PHPはWebサーバ上で処理がおこなわれるサーバサイド言語です。laravelはMVCモデルを採用しています。MVCとは、プログラムを・Model（モデル）・View（ビュー）・Controller（コントローラ）の3つに分けて構成することで、効率よくシステム開発を進められるようにした手法です。MVCモデルを採用することで、どこにどのような処理を書けばいいかが明確になるため、開発経験が浅くても混乱しづらく学習コストが低くなります。現在、laravelは世界的に大きなシェアを占めており、多くのWebアプリケーションがlaravelを導入して開発されています。Vue.jsと同様、近年その手軽さや扱いやすさから人気を集めてきました。

フロントエンドはVue.js、バックエンドはlaravelという作り方

最近では、フロントエンドのフレームワークとしてVue.jsを、バックエンドのフレームワークとしてLaravelを導入する開発が増えています。フロントエンドとは、Webアプリケーションのうちユーザが直接触れる部分を指します。一方バックエンドとは、サーバ側の処理やデータベースの処理など、ユーザの目に直接触れない部分を指します。フロントエンドにおいてもバックエンドにおいてもフレームワークを導入することで、開発コストを抑えながら、再利用性の高いWebアプリケーションを開発できます。Vue.jsはlaravelで導入しやすいフレームワークの一つです。laravelをインストールした際に同時にインストールされる「package.json」ファイル内にVue.jsで使用するパッケージが全て記載されています。そのため、laravelでVue.jsを使いたい場合は「npm install」コマンド一つで簡単にインストールできます。

laravelでVue.jsを使ってみよう

ここでは、laravelでVue.jsを使う具体的な方法を解説します。まずはcomposerコマンドを用いてlaravelのインストールを行います。laravelはパッケージ管理ツールとしてcomposerを導入しています。このためcomposerコマンドだけで、開発に必要となるライブラリやパッケージを一括してインストールできます。laravelのインストールが完了したら、パッケージ「laravel/ui」をcomposerコマンドを用いてインストールします。laravelプロジェクト内の「package.json」に「vue」と「vue-template-compiler」が記載されていればVue.jsのインストール準備が完了です。次はコマンド「npm install」でVue.jsをインストールします。先ほどの章の終わりでも少し触れたコマンド「npm install」では、package.json内に記載のあるパッケージがインストールできるため、Vue.jsを使うためのライブラリも含めて一気にインストールできるというわけです。Vue.jsのインストールが完了したら、次はビルドです。コマンド「npm run dev」でlaravelプロジェクトをビルドすることで、インストールしたVue.jsが使えるようになります。以上でlaravelでVue.jsを使う準備は完了です。laravelでは「blade.php」が、MVCモデルでいうViewの部分を担っており、このbladeファイルにHTMLやCSS・JavaScriptを記載していきます。上記の準備が完了したら、bladeファイルを編集することで、Vue.jsのプログラミングが可能になります。

フレームワークでの開発ならAMELAに

今回は、人気のフレームワークVue.jsの使い方や、laravelとの関係性についてみてきました。近年のシステムは複数のフレームワークを同時に利用する必要性があるなど、非常に複雑になっており、「Vue.jsのエンジニアだけ不足している」といったように、一部分の機能の修正が自社では困難になるケースも見られます。そんな時は、是非AMELAにご相談下さい。実務経験を積んだ優秀なエンジニアを多数抱えており、特にJavaScriptは非常に得意とするジャンルになります。