このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2017.10.09

Vue.js + SSR (Universal JavaScript)環境を、「NUXT.js」でサクッと構築する方法。

どもです。

先日はAngular4のSSR (Universal JavaScript)環境を構築する方法でしたが、今回は「Vue.js」となります。

なんだかんだで、「Vue.js」はやっぱり使いやすいですよねー。

当方もゲーム制作でガンガン利用しております。

という事で、今回は、今人気急上昇の「Vue.js」のSSR (Universal JavaScript)環境構築していくのですが、「NUXT.js」を利用することで、ホントに拍子抜けするぐらい簡単に用意できちゃいますので、そちらの手順を紹介させていただきますー。

NUXT js

NUXT Universal Vue.js Applications

公式ページ

Nuxt.jsはサーバーサイドレンダリングを用いたVue.jsアプリケーションを簡単容易に作成するためのフレームワークで、非同期データ、ミドルウェア、ルーティングなどを管理するために必要な設定のほとんどを抽象化されている模様です。

AngularAngular Universalや、ReactNext.jsなどと同様の位置づけかと思います。

また、Nuxt.jsはVue.js 2.0に加え、Vue-RouterVue-MetaVuex(ストアオプションを使うときのみ)をインクルードしている様で、SSR環境を作るために個別に必要な各種ライブラリーを手作業でインクルードして設定するなんて手間もいらないようになっております。

便利ですね〜。

なにはともあれ、早速使って行きましょう。

vue-cli インストール

テンプレート生成の為「vue-cli」を用いて生成します。

github

vue-cli

$ npm install -g vue-cli

npmコマンドで、グローバルにインストールします。

この「vue-cli」は多機能で、様々な事が事が、今回は割愛させて頂きます。

(githubのREADME.mdに書かれていますので、そちらを見て頂ければと。)

テンプレート生成

vue-cli」をインストールすると「vueコマンド」が使用出来ますので、「vueコマンド」でSSR環境を生成。

$ vue init nuxt/starter vue-ssr

すると、「Project name、Project description、Author」などが聞かれますが、とりあえず全部リターンで良いでしょう。

すると、完了して以下の様なHelpが出ますので、そのまま入力。

 

To get started:   

     cd vue-ssr

     npm install # Or yarn

     npm run dev

 

順番に実行。

$ cd vue-ssr
$ npm install
$ npm run dev

npm run dev」コマンドを入力すると、ビルドとサーバーを立ち上げるプロセスとなり、「http://localhost:3000」をブラウザで開くと。

ジャーン。

上記の様に表示します。

これで、もうSSR環境が用意されていると言う。。

超簡単ですね! ><

拍子抜けしちゃいますよね。

Angularの回と同様にMetaを変更してみる

このままだとあれなので、

前回のAngular4をSSR化。同様に、Metaが変更するように修正していきたいと思います。

全ページで読み込むファイルとなる、layouts/default.vueを修正していきます。

こちらには簡易のナビゲーションリンクを追加します。

layouts/default.vue

<template>
  <div>
    <ul>
      <li>
        <nuxt-link active-class="is-active" to="/" exact>Home</nuxt-link>
      </li>
      <li>
        <nuxt-link active-class="is-active" to="/about" exact>About</nuxt-link>
      </li>
    </ul>
    <nuxt/>
  </div>
</template>

続いて、pagesディレクトリに「about.vue」ファイルを追加します。

こちらの「pagesディレクトリ」は、NUXTの監視対象となっているため、ファイルを追加してサーバーを再度立ち上げる必要もありません。

 

pages/about.vue

<template>
  <p>About Page</p>
</template>

<script>
  export default {
    head: {
      title: 'About',
      meta: [
        { hid: 'description', name: 'description', content: 'About Page' }
      ]
    }
  }
</script>

最低限の記述を行いました。

では、確認しましょう。

ナビゲーションの「About」をクリックで、Aboutページへ遷移し「title」「metaのdescription」も変更されているのが確認できます。

Angularと比較すると、非常に簡単に行えるのが分かりますね。

今回は、本当に最低限の事しか行っていないのですが、より詳細を知りたい方は、こちらNUXTjs公式ガイドを参照して頂ければと思います。

NUXTjs公式ガイド

https://ja.nuxtjs.org/guide

最後に

と、SSR環境を作ってきたのですが、UAもフロントで取得してPCとSPでcomponentを切り分けたいなぁ。と思ったのがキッカケで、そうなると、やはり「SSR(Universal、isomorphic javascript)」環境にしなければならなくて、まぁ半分致し方なしのところもありました。

まだ、生のJSで保守性にかける所もありますので

TypeScript化(Vue Class Component化)

UA判別 component切り分け

etc..

等を行って行こうかと思います。

全部が全部「SSRが良い。」って話にはならないかと思いますので、その時その時で、一番環境にあったアーキテクチャ、フレームワークを選定して使って頂ければと思います。

ではではぁ。

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。