このブログはプログラム開発や学習などの際に役立つ知識や情報を発信するエンジニアのためのトータル技術ブログです。
ご意見やご要望にも積極的に答えていきますので、お気軽にお問い合わせください。

記事へのリクエストはこちら

Vue Router×Laravel Mixでフロントエンドの画面遷移を行う方法

JavaScript
スポンサーリンク
きつね先生
きつね先生

本日はVueRouterとLaravelMixをつかった画面遷移の方法を勉強しましょう!

わんぽち
わんぽち

VueRouterとかLaravelMixってなんだわん?

きつね先生
きつね先生

簡単に言うとSPAを構築するための専用のルータですね!

にゃんみ
にゃんみ

LaravelとVue.jsの組み合わせが難しいから早く知りたいにゃ

 

こんにちは!あっきーです!

最近はSPAの開発手法を学んでいますので基礎としてVue Routerを使ったフロントエンドでの画面遷移の実装方法を記事にしました。

設定にはライブラリのLaravelMixを使用します。

LaravelMixを使用することでvueコンポーネント、SCSSなどのコンパイルの仕組みが提供され、webpackの設定作業が省かれるのでお試しによさそうです。

「SPA × API」でのアプリケーション構築をこれから始める人はご参考程度に読んでみてください。

では、まとめていきます。

 

スポンサーリンク

Laravelプロジェクトの作成

 

以前の記事でまとめてますので下記の記事を参照してプロジェクトの作成を行ってください。

・Laravelプロジェクトの作成

AWS Cloud9 で Laravel を使ってみた。【環境構築】
こんにちは!あっきーです! 近頃はプログラミングもWeb系でしたら、専らフレームワークを使っての開発が主流になってきましたね。 僕もつい先日から PHP のフレームワーク Laravel を始めました。 Web系の企業に興...

 

・データベースの設定

AWS Cloud9 で Laravel を使ってみる【データベース構築】
こんにちは!あっきーです! Webサイトではデータベースの構築って絶対必要ですよね! でも、データベースってコマンドラインで構築したり、phpMyAdmin などの専用の管理画面から構築したりで結構大変です。データベース専門のエンジ...

 

フロントエンド側の初期設定

 

工程は以下になります。

 

1. npmのインストール
2. 初期リクエストのルーティング
3. テンプレートファイルの作成
4. JavaScriptの記述
5. npmのコンパイル

まずは「Hello World」を出力します。

順に説明してきます。

 

npmのインストール

 

npmインストールの前に「package.json」を必要に応じて編集しましょう。

 

・プロジェクト名/package.json

"devDependencies": {
    "axios": "^0.18",
    "cross-env": "^5.1",
    "laravel-mix": "^4.0.7",
    "vue": "^2.5.17",
    "resolve-url-loader": "^2.3.1",  追加
    "vue-template-compiler": "^2.5.21"  追加
}

 

bootstrapやjQueryなど使わないパッケージは削除しました。

必要/不必要なパッケージの記述をしましたらパッケージをインストールします

 

・npmのインストール

$ npm install

 

インストールしましたらビルド時の設定としてLaravelMixのファイルを編集します。

 

・プロジェクト名/webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js') //Vueコンポーネントのコンパイル
  .version();  //キャッシュ対策

 

初期リクエストのルーティング

 

SPAはAjaxによる非同期リクエスト→jsonデータのレスポンスを繰り返しますが初期リクエストのみHTMLをレスポンスします。

なので初期画面のルーティングはLaravelで行います。

 

・routes/web.php

Route::get('/{any?}', function () {
    return view('index');
})->where('any', '.+');

 

ワイルドカード(?)をanyパラメータに持たせ、whereメソッドにどんな文字列でも良い(.+)正規表現を記述することでルート(/)またはパスにアクセスしたらindexテンプレートを返すというルーティングになってます。

 

テンプレートファイルの作成

 

以下のファイルを作成します。

 

・resources/views/index.blade.php

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config('app.name') }}</title>
    <!-- Scripts -->
    <script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>

 

まずはルートテンプレートとして要素を1つだけ設置しておきます。

 

JavaScriptの記述

 

先ほど作成したテンプレートファイルの要素に対しての処理を記述していきます。

以下のファイルを編集してください。

 

・resources/js/app.js

import Vue from 'vue'

new Vue({
    el: '#app',
    template: '<h1>Hello world</h1>'
})

 

1.vueコンポーネントを定義(import)
2.要素(app)をマウントしてHello world表示

以上の処理を行っています。

 

npmのコンパイル

 

コンパイルして表示確認していきます。

以下のコマンドを実行します。

 

$ npm run dev

 

ルート(/)または適当なパスを追加してアクセスすると「Hello world」が表示されることが確認できます。

 

コンパイルのを自動で行う

 

おまけですがコンパイルを自動でおこなうためには「browser-Sync」というツールを使用します。

先ほどのnpmのインストール時に行ったファイルを以下のようにして行います。

 

・プロジェクト名/package.json

"devDependencies": {
    ※省略
    "browser-sync": "^2.26.3",
    "browser-sync-webpack-plugin": "2.0.1", 
}

 

上記の記述を追加した状態でインストールします。

 

・プロジェクト名/webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
  .version();
  .browserSync('my-domain.dev');  //追加

※自分の環境に合わせて()内は変更します。

 

設定しましたら以下のコマンドを実施します。

 

$ npm run watch

 

これにより監視モードでコンパイルが走るため、一度コンパイルを行えばファイル変更が行われるたびに自動的にコンパイルを実施してくれます。

 

Vue Routerでの画面遷移

 

工程は以下になります。

 

1. Vue Routerのインストール
2. コンポーネントの作成
3. ルーティング

 

Vue Routerのインストール

 

以下のコマンドを実施します。

 

$ npm install -D vue-router

 

インストールが完了しますと「package.json」にVue Routerの情報が追加されています。

 

コンポーネントの作成

 

以下3つのファイルを作成します。

 

・resources/js/App.vue

<template>
  <div>
    <main>
      <div class="container">
        <RouterView />
      </div>
    </main>
  </div>
</template>

 

・resources/js/pages/Example.vue

<template>
  <h1>Page1</h1>
</template>

 

・resources/js/pages/Example2.vue

<template>
  <h1>Page2</h1>
</template>

 

1.resources/js/App.vue:
   ルートコンポーネント。テンプレートファイル作成時に記述した要素(app)に表示されるパーツを<RouterView />で定義する。

2.Example.vue:
ページコンポーネント。<RouterView />で定義された切り替わるパーツ。Example2.vueも同様。

 

ルーティング

 

最後に作成したコンポーネントのルーティングを行います。

以下のファイルを作成します。

 

・resources/js/router.js

// 1.
import Vue from 'vue'
import VueRouter from 'vue-router'

// 2.
import Example from './pages/Example.vue'
import Example2 from './pages/Example2.vue'

// 3.
Vue.use(VueRouter)

// 4.
const routes = [
  {
    path: '/',
    component: Example
  },
  {
    path: '/example2',
    component: Example2
  }
]

// 5.
const router = new VueRouter({
    mode: 'history',
    routes
})

// 6.
export default router

 

1.vueコンポーネント/VueRouterの定義
2.ページコンポーネントの定義
3.ルートコンポーネントを有効にする
4.パスのマッピング
5.インスタンスの生成
6.インスタンスのエクスポート

以上のような処理を行います。

 

続いて先ほど「Hello world」を表示したテンプレートファイルに対する処理の変更をしていきます。

 

・resources/js/app.js

import Vue from 'vue'
import router from './router' // 追加 1.
import App from './App.vue' // 追加 2.

new Vue({
  el: '#app',
  router, // 追加 3.
  components: { App }, // 追加 4.
  template: '<App />' // 追加 5.
});

 

1.router.jsでエクスポート内容を定義
2.ルートコンポーネントの定義
3.ルーティングの定義を読み込む
4.ルートコンポーネントの宣言
5.ルートコンポーネントの表示

以上の処理になります。

ルートコンポーネントを表示していますのでマッピングしたパス(/),(/example2)を変更することで連動したページコンポーネントにフロントエンド側で切り替わります。

 

さいごに

 

最後まで読んでいただきありがとうございます。

次はAPIについて書ければと思います。SNS連携なども行いたいので外部APIの使い方などもまとめていけたらなと。

この記事を気に入っていただけましたらTwitterdでもプログラミングに関してのツイートをリアルタイムでしていますので
ご一緒にフォローもお願いします。

スポンサーリンク
あっきー

元キャバクラ店長から未経験でエンジニアに転職した異端児。

「週4の5時間勤務、月収100万円」を実現させ、ゆるりと生きることを目標に日々パソコンと奮闘している。

自分の経験を元に、未経験からでも挫折しないプログラミングの勉強方法や最新技術や情報などを発信していきます。

あっきーをフォローする
JavaScriptLaravelPHPVue.js
\良い記事だったらシェアしてね!/
スポンサーリンク
駆け出しエンジニアのつぶやき