クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

【Vue.js】Nuxt.jsで何ができるのか調べた(SSR、ルーティング、静的ファイル生成など)

Vue.jsの続きです。前回まではVue.jsのUIフレームワーク、Vuetifyにトライしました。今回からはWebアプリケーション開発のフレームワーク、Nuxt.jsにトライ。今回は概要を掴むために調べたことについて。それではいきましょう!

【目次】

前回の記事はこちら

※参考:【Vue.js】Vuetifyにパンくず、スライダー、タイル、アコーディオン、カレンダーを配置(v-carousel、v-carousel、v-card、v-expansion-panels、v-calendar) - クモのようにコツコツと

Nuxt.jsはVueアプリケーション生成フレームワーク

Vue.jsについて調べているとたびたび出てくる「Nuxt.js」。Nuxt.jsとはなんぞや?なんとなくVue.jsの基礎が身についたら次はNuxt.js、みたいな応用編程な位置付けに感じていた。

これを使うことで何が実現できるのかをイメージできないと、何から初めていいのかよくわからない。

公式サイトはこちら

※参考:Nuxt.js - ユニバーサル Vue.js アプリケーション

Nuxt.js は Vue アプリケーションを作成するフレームワークです。

※参考:はじめに - NuxtJS

Vue.jsによるWebアプリを作るためのフレームワーク。Vue.jsだけではWebアプリを作るには不十分ということか。

なお、先行して存在したReactのNext.jsと同じ位置付けで名前も似せているようだ。

※参考:Programmagick Blog | Engineer Blog

Nuxt.jsの構成

Nuxt.jsは下記のもので構成されている。

  • Vue 2
  • Vue Router
  • Vuex(ストアオプションを利用している場合に限る)
  • Vue Server Renderer(mode: 'spa' を利用している場合を除く)
  • vue-meta

うーん、単語だけ見てもちょっとまだわからない。

なお、Nuxt.jsを動かすのに必要なツールがいくつかあり、内部的に動いているとのこと。

バンドルやソースコードの分割やミニファイ化するために内部で webpack、vue-loader と babel-loader を使います。

以前のフロントエンドモダン環境で触れたwebpackやbabelがNuxe.jsと関連している!間接的にこれらのツールの理解にもつながるかもしれない。

※参考:フロントエンドのモダンな開発環境を作るために調べていること(追記あり) - クモのようにコツコツと

主要な機能

先ほどの公式サイトに書かれている主要な機能。

  • Vue ファイルで記述できること(*.vue)
  • コードを自動的に分割すること
  • サーバーサイドレンダリング
  • 非同期データをハンドリングするパワフルなルーティング
  • 静的ファイルの配信
  • ES2015+ のトランスパイレーション
  • JS と CSS のバンドル及びミニファイ化
  • head要素(title、metaなど)の管理
  • 開発モードにおけるホットリローディング
  • プリプロセッサ: Sass, Less, Stylus など
  • HTTP/2 push headers ready
  • モジュール構造で拡張できること

うーむ、、パッと読んだだけではまだイメージがしづらい。

できること

また、Nuxt.jsでできることとして下記の3点が挙げられている。

  • サーバーサイドレンダリング(ユニバーサル SSR)
  • シングルページアプリケーション(SPA)
  • 静的ファイルの生成

シングルページアプリケーション(SPA)はもともとVue.js、React、Angularなどを使う目的になったもの。ページ遷移せずにページ内容を変える。

※参考:三大フレームワークとかSPAとか仮想DOMとかわかりにくかったのでHellow Vue.jsしてみた! - クモのようにコツコツと

残り二つ、サーバーサイドレンダリング(SSR)と静的ファイルの生成が新しい概念。(後述します)

Vue.jsの弱点

Nuxt.jsを理解するのにWebだけだとイメージしずらかったので書籍を購入した。「Vue.js & Nuxt.js 超入門」という本。

※参考:https://www.amazon.co.jp/Vue-js-Nuxt-js超入門-掌田津耶乃/dp/4798056596

Nuxt.jsの解説の冒頭にVue.jsの弱点とそれを解決するためのNuxt.jsのメリットが書いてあった。まずはVue.jsの弱点から。

クライアントサイドのレンダリング

Vue.jsはブラウザ(クライアントサイド)側でレンダリングされてページが生成される。ユーザーがページを見る分には不便はないが、Googleのクローラーが読み込む際に問題が起こる可能性がある。最近はJSで生成されたコンテンツも読み込むようになってきているが、完全さは保証できない、とGoogle側も表明している。

今の Googlebot は JavaScript を実行できます。しかし、100%完全に JavaScript を実行してそのページのコンテンツをレンダリングできる保証は(残念ながら)ありません。

※参考:【Google SEO】JSフレームワークを使ったサイトではプリレンダリングを推奨 | 海外SEO情報ブログ

データの管理(コンポーネントの連携がしづらい)

Vue.jsのコンポーネントが増えてくると、データの管理が難しくなってくる。コポーネントは単体で完結していて、コンポーネント同士を連携させるのが難しい。

コンポーネントについては過去の記事を参照。

※参考:【Vue.js】コンポーネント事始め(グローバル登録とローカル登録) - クモのようにコツコツと

※参考:【Vue.js】コンポーネントにカウンターを仕込む(※dataオプションを無名関数に!) - クモのようにコツコツと

※参考:【Vue.js】コンポーネントにpropsオプションで値を渡す - クモのようにコツコツと

ルーティング管理

Vue.jsは1枚のページで完結する形になっている(SPA)。多数のページを生成する「ルーティング」の仕組みがない。

ルーティングについてはPHPのフレームワークLaravelに出てきた概念。「○○.html」という静的なファイルを物理的に用意せず、動的にページを生成する。

※参考:【Laravel】ルーティングファイル(routesディレクトリのweb.php)にページを直書きしてみる - クモのようにコツコツと

Nuxt.jsのメリット

次にNuxt.jeのメリット。上記のVue.jsの弱点を拡張するプログラムがいくつか出ているが、それらを一つ一つインストールするのは手間が多いため、全部そろえてパッケージ化したのがNuxe.js。

サーバサイドレンダリング

Nuxt.jsに組み込まれているライブラリ「Vue SSR」を使うとサーバサイドレンダリング(SSR)ができる。それによってGoogleのクローラーにも確実に読まれる。また、ページ表示の速度も速くなるメリットがある。

Vue SSRの公式サイトはこちら。

※参考:Vue.js サーバサイドレンダリングガイド | Vue SSR ガイド

検索エンジンのクローラが完全に描画されたページを直接解析するため、SEO が向上します。 特にインターネットの遅さや遅いデバイスでは、コンテンツの再生時間が短縮されます。

ただし、サーバサイドレンダリングを実現するためには、サーバ側にNode.jsの環境が必要になる。レンタルサーバはデフォルトではNode.js環境はないことが多く、FirebaseやHerokuなどのPasSの方が導入がしやすい。

レンタルサーバとPaaSの違いについてはこちら。

※参考:Webサービスを公開するためのサーバ仕様比較(VPSとクラウドサービス) - クモのようにコツコツと

Herokuについては過去に何度か触っている。

※参考:ローカル→Sourcetree→GitHub→Herokuに同期する方法(黒い画面不要!) - クモのようにコツコツと

Nuxt.js公式サイトにはいくつかのデプロイ(公開)方法が書かれている。Herokuを使った方法。

※参考:Heroku へデプロイするには? - NuxtJS

なお、書籍「Vue.js & Nuxt.js 超入門」ではFirebaseによるデプロイ方法で解説されていた。

FirebaseによるNuxe.jsの公開方法の記事

※参考:Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する - DMM inside

Firebaseは「サーバレス」というキーワードでよく見るので興味津々なツール!

※参考:5分でサーバレスを体験! Cloud Functions for Firebase を使ってみよう | SiTest (サイテスト) ブログ

なお、サーバレスとはサーバかないと言う意味ではなく、サーバの管理が不要という意味。

※参考:サーバーレスとは? 簡単な事例をまじえてわかりやすく解説! – キュービストブログ

データ管理(コンポーネントの状態管理)

Nuxt.jsに組み込まれるライブラリ「Vuex」を使うとデータ管理ができる。これによって複数の散らばったコンポーネントを一元管理することができる。

Vuexの公式サイトはこちら

※参考:Vuex とは何か? | Vuex

Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。

Vuexを調べていると「状態管理」というキーワードが目に入る。何の状態?と思っていたが、コンポーネントを管理するという意味のようだ。

なお、VuexはReactのReduxと同じ位置付けであり、そのReduxもFluxを参考に作られているとのこと。

※参考:Redux入門【ダイジェスト版】10分で理解するReduxの基礎 - Qiita

FluxはMVCなどのようなアーキテクチャの一種。

※参考:Fluxとはなんなのか - Qiita

ルート管理

Nuxt.jsに組み込まれるライブラリ「Vue Router」を使うとルーティング管理ができるようになる。あらかじめ用意されたディレクトリの中に「.vue」拡張子のファイルを追加すると新たなページが生成できる。

公式サイトはこちら

※参考:紹介 | Vue Router

プロジェクトの生成ビルド(静的ファイル生成)

Nuxt.jsにはプロジェクトを生成するための専用プログラムが用意されており、その中には静的ファイル(HTMLファイル)を制しするビルドも用意されている。

静的サイトってよく聞くけど、いつも普通に作っているHTML手打ちのサイトが静的サイトじゃん、って思っていた。しかし、「静的サイトジェネレーター」はHTMLの手打ちサイトとは違う。

※参考:静的サイトジェネレーターの比較とHugoに決めた理由 | exlair.net

「HUGO」「Hexo」「Jekyll」などが有名で、ページ構成はテンプレ化されており、中のコンテンツの部分はマークダウンで作れちゃったりする。そこからローカル環境でHTMLページが生成されて、あとはできあがった静的なファイルを本番環境にアップする。

なお、WordPressの前に定番だったCMS「Movable type」もローカル環境で静的なページを生成して本番環境にアップする、という仕組みだった。(WordPressはサーバ側でページを生成する)

※参考:Movable Type で作る静的な動的Webサイト | Movable Type | かたつむりくんのWWW

静的サイトにするメリットはあらかじめページが作られているのでページの表示が早い。本番環境にNode.jsが不要なのもメリット。しかしデメリットはログイン機能など動的な生成の用途には使えない点がある。

SPA・SSR・静的化の選択の判断基準については下記の記事がとてもわかりやすかった。

※参考:Nuxt.jsを使うときに、SPA・SSR・静的化のどれがいいか迷ったら - Qiita

最後に

ということで、今回はNuxt.jsの概要をざっと掴みました。次回からは実際に何か作り始めてみようかと思いますが、環境構築をどうするか思案中。とりあえずローカル環境だけでNodeで作ってスクリーンショットを撮るか、Herokuにデプロイするか、Firebaseにトライするか、など。導入の簡易さとブログ記述の簡易さで比較検討したく思います。それではまた!


※参考:Vue.jsの習得のためにやったことまとめ
qiita.com