Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

【Vuejs】ルーティング制御について徹底解説(vue-router, vuex)

vue.js

スポンサードリンク
　

f:id:ShotaNukumizu_1000:20211218162349j:plain

おはようございます。Shotaです。

Vuejsを勉強している中で、

😥「routerがいまいちよく理解できない....」

🤨「Vueのルーティングってどのように機能するの...？」

このように考えている方も少なくないでしょう。

そこで、今回の記事ではVuejsのルーティングの制御を以下の3つに絞って解説していきます。

  • vue-router

  • vuex


それでは早速、本題に入りましょう。



ルーティングとは

ルーティングとは、URLごとに違うコンポーネントを表示する機能の実装に用います。また、大規模なプロジェクトになるとコンポーネントも複雑になっていき深いコンポーネント同士のデータの連携は非常に複雑になります。そのため、なるべくシンプルにデータの受け渡しを行うために状態管理の実装が必要になります。

ルーティングは小規模開発や個人開発等でSPA(Single Page Application)を構築する上で非常に重要な概念なので、詳細に解説します。


SPA(Single Page Application)とは

SPA(Single Page Application)とは、単一のページでコンテンツの切り替えを行うWEBアプリケーションを指します。

SPAはブラウザによるページ遷移をせずにコンテンツの切り替えを行うことで、使いやすさを大幅に向上させられます。(専門用語でUXと呼ばれます)

従来のWEBアプリでは遷移時にページ全体が大きく変更しますが、SPAではJavaScriptを用いてページ内のHTMLの一部を差し替えてコンテンツを切り替えているので、ページ遷移を高速にできます。


vue-router

Vue RouterとはVuejsを利用したSPA構築で、ルーティング制御をするための公式プラグインです。

Vuejsとvue-routerを使った簡単なSPAの構築は驚くほど簡単です。Vue.jsのコンポーネントを使ってアプリケーションを構成していきます。vue-routerを混ぜ込むためには、コンポーネントとルーティングをマッピングさせてvue-routerに表示させる場所を知らせるだけです。


導入


HTML

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="main.js"></script>

<div id="app">
    <h1>Hello Vue</h1>
    
    <p>
        <router-link to="/one">Go to One</router-link>
        <router-link to="/two">Go to Two</router-link>
    </p>

    <router-view></router-view>
</div>

  • Vuejsでは、ナビゲーションにrouter-linkコンポーネントを活用します。

  • Vuejsでは、リンク先をtoプロパティに指定します。

  • デフォルトで<router-link>は<a>タグとして認識されます。

  • ルートと一致しているコンポーネントは<router-view>タグに格納されます。


JavaScript

main.js

const One = { template: '<p>ONE</p>' }
const Two = { template: '<p>TWO</p>' }

const routes = [
    { path: '/one', component: One },
    { path: '/two', component: Two },
]

const router = new VueRouter({
    routes
})

const app = Vue.createApp({
    router
}).$mount('#app')


これで非常に簡単なSPAが完成します！


余談：認証を確認する

認証済みであることを要求するページコンポーネントに対して、下記のようにルートメタフィールドを追加します。

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/sign-in',
      name: 'sign-in',
      component: loadView('PageSignIn')
    },
    {
      path: '/',
      name: 'home',
      component: loadView('Home'),
      meta: { requiredAuth: true } //Homeコンポーネントの表示には認証が必要と定義する
    }
  ]
})

// main.jsに追加する処理
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiredAuth)) {
    Auth.currentAuthenticatedUser() // 認証済みのユーザが存在するかどうかをチェックする関数
      .then(() => {
        next()
      })
      .catch(error => {
        console.error(error)
        next({
          path: 'sign-in',
          query: {redirect: to.fullPath}
        })
      })
  }
  next()
})

挙動は以下のようになります。

①認証チェック
ページ遷移先のルートにおいてrequireAuthがtrueとなっている場合、Auth.currentAuthenticatedUser()が実行されます。

②認証チェックの結果に基づいたページ遷移の実行
認証済みユーザが存在しない場合、サインインページにリダイレクトされます。一方で、認証済みユーザが存在する場合は正常にページ遷移が行われます。


vuex

Vuexはデータを一元管理できるライブラリです。Vuejsで、親コンポーネントから子コンポーネントへのデータの受け渡しだけであればシンプルですが、複数のコンポーネントをまたいでのデータ管理は煩雑になってしまいます。

そこで、Vuexライブラリを用意することでよりシンプルで直感的なデータの管理ができます。そのため、ある程度以上の規模の開発ではほぼ必須と言ってもいいぐらいの利用されるライブラリです。

Vuexを利用したアプリケーションの中心にある概念はストア(store)です。ストアは、基本的にアプリケーションの状態(state)を保持するためのコンテナです。

用意は非常に簡単で、ストアオブジェクトの初期状態といくつかのミューテーションを準備するだけです。


導入

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        }
    }
})

これでstore.stateでストアオブジェクトの状態を参照でき、またstore.commitメソッドで状態の変更を行うことができます。

store.commit('increment')
console.log(store.state.count)

その際に、store.state.countを直接変更する代わりにmutationをコミットする理由は、状態の変更を明確に追跡するためです。

このようにコーディングすることで、コードを読む時にアプリケーションの状態がどのように変更するのかを論理的に考えやすくするようにしています。


まとめ

今回の記事では、Vuejsのルーティング制御についてvue-routerやvuexを中心に詳細に徹底解説しました。

今回の記事を参考に、Vuejsのルーティング制御について理解を深めていただければ幸いです。

今回の記事はこれで終了です。

【参考サイト】

Vue Router

qiita.com