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

Archives Details

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

JavaScript

2017.10.09

この記事は最終更新日から1年以上が経過しています。

どもです。

先日は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が良い。」って話にはならないかと思いますので、その時その時で、一番環境にあったアーキテクチャ、フレームワークを選定して使って頂ければと思います。

ではではぁ。

Comment

Related Article

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

2017.10.09

フロントエンド開発が捗る JSON Serverについて

2017.07.10

技術書、参考書のしおりには【BOOK DARTS】がオススメ!

2017.07.01

会社で npm Private導入して、1ヶ月で8個ほどパッケージ作成したお話。

2017.06.02

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「実装編」

2017.03.26

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「環境構築編」

2017.02.21

Facebook製 JavaScript 関数ライブラリ。Immutable.js がいい感じ!

2016.07.31

【JS】フロントでレコメンドアルゴリズムを簡単実装できるJavaScriptライブラリ「RecommendJS」を公開しました。

2016.05.30

JavaScript ビット演算・ビットマスクについてまとめてみました。

2016.03.15

マテリアルデザイン対応!タッチ、クリックでエフェクト。RippleEffectJSを公開しました!

2016.02.01

CATEGORY LIST

LATEST NEWS

debian & Xserver XDSLで FireFoxが真っ白のページとなる件

Linux

2018.07.08

Kindle Fire HD 8 にLinuxを導入して扱えるようにする。超コスパ Linux タブレット構築方法!!

Linux

2018.07.04

Laravel 4 を PHP 7 環境へ移行したお話。

PHP

2018.06.10

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

仮想通貨(暗号通貨)の作り方 その2 (Gethの使い方)

暗号通貨、ブロックチェーン

2018.05.20

$PAC (パックコイン)Macでマスターノードを建てる方法

暗号通貨、ブロックチェーン

2018.05.14

ついに「ウェブ帳」リニューアルしましたぁ!!!(PC 版)

イベント

2018.05.07

Raspberry Pi 3 Model B+ 2018 ニューモデルを購入!!

RaspberryPi

2018.04.23

仮想通貨(暗号通貨)の作り方 その1

暗号通貨、ブロックチェーン

2018.04.09

iPad Proで開発を行いたい。

iPad

2018.03.29

CPU使用しすぎて、Conohaからサーバーシャットダウンされた件。

tool

2018.03.28

春の大掃除。VHSに続いて、カセットテープもデジタル化!microSD保存 MP3変換プレーヤーを使ってみた。

tool

2018.03.27

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US