このサイトは、只今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

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

2020.01.31

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

2020.01.24

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

2019.10.21

正規表現 先読み後読み 論理積

2019.07.28

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

2019.06.22

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

2019.03.24

Nuxt.js と auth-module (@nuxtjs/auth)で、JWT(JSON Web Tokens)& OAuth 認証 ログイン

2019.02.21

ブラウザフィンガープリントは、Cookieの代用となるのか? JSライブラリ Fingerprintjs2など。

2019.02.03

Vue.jsでSPA、Vuex使用するなら Nuxt.jsが超絶便利な件。

2018.12.23

CATEGORY LIST

LATEST NEWS

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

JavaScript

2020.01.31

まだ間に合う!!ラズベリーパイ購入なら「RSコンポーネンツ」で!最大40%オフの年に1度の大特価期末セール中!

RaspberryPi

2020.01.25

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

JavaScript

2020.01.24

TSUKUMO の初売りでNAS (Synology DiskStation DS218j)購入!!

イベント

2020.01.04

Mac用 エミュレーター 「OpenEmu」が、V2.2リリース!GameCube対応して更に神アプリ進化!

Game

2020.01.01

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻その2

Game

2019.12.31

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻

Game

2019.12.14

MacでWindowsアプリ(TeraPad)を動かす(Wine 4.0.3)

mac

2019.12.08

kindleストア7周年記念セール中!技術書なども40%OFF以上でお買い得!(11/7まで)

イベント

2019.10.28

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

JavaScript

2019.10.21

Arduino IDEとArduino接続して、サクッと設定。

電子工作

2019.08.15

ついに、M5Stack Gray 購入!! その他諸々、購入したボードの振り返りなど。

電子工作

2019.08.12

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US