.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. LaravelでVue.jsを利用する方法を解説|LaravelにおけるVue.jsのセットアップの仕方や使い方

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

  • Javascript
  • PHP
  • プログラミング言語
公開日時:   更新日時:
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プロジェクトのディレクトリに移動し、次のコマンドを実行してください。

    実は、このままでは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のコンポーネントが問題なく動作できていることになります。

    システム
    エンジニア
    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。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job