イイダリョウのブログ。【Vue.js】Nuxt.jsで何ができるのか調べた(SSR、ルーティング、静的ファイル生成など)2019-09-18【Vue.js】Nuxt.jsで何ができるのか調べた(SSR、ルーティング、静的ファイル生成など)JSVue.jsの続きです。前回まではVue.jsのUIフレームワーク、Vuetifyにトライしました。今回からはWebアプリケーション開発のフレームワーク、Nuxt.jsにトライ。今回は概要を掴むために調べたことについて。クモのようにコツコツとNuxt.jsはVueアプリケーション生成フレームワークVue.jsについて調べているとたびたび出てくる「Nuxt.js」。Nuxt.jsとはなんぞや?なんとなくVue.jsの基礎が身についたら次はNuxt.js、みたいな応用編程な位置付けに感じていた。これを使うことで何が実現できるのかをイメージできないと、何から初めていいのかよくわからない。アプリケーションを作成するフレームワークです。NuxtJSVue.jsによるWebアプリを作るためのフレームワーク。Vue.jsだけではWebアプリを作るには不十分ということか。先行して存在したReactのNext.jsと同じ位置付けで名前も似せているようだ。BlogNuxt.jsの構成Nuxt.jsは下記のもので構成されている。利用している場合を除く)vue-metaうーん、単語だけ見てもちょっとまだわからない。Nuxt.jsを動かすのに必要なツールがいくつかあり、内部的に動いているとのこと。以前のフロントエンドモダン環境で触れたwebpackやbabelがNuxe.jsと関連している!間接的にこれらのツールの理解にもつながるかもしれない。先ほどの公式サイトに書かれている主要な機能。readyモジュール構造で拡張できることうーむ、、パッと読んだだけではまだイメージがしづらい。できることまた、Nuxt.jsでできることとして下記の3点が挙げられている。SSR)シングルページアプリケーション(SPA)静的ファイルの生成シングルページアプリケーション(SPA)はもともとVue.js、React、Angularなどを使う目的になったもの。ページ遷移せずにページ内容を変える。クモのようにコツコツと残り二つ、サーバーサイドレンダリング(SSR)と静的ファイルの生成が新しい概念。(後述します)Vue.jsの弱点Nuxt.jsを理解するのにWebだけだとイメージしずらかったので書籍を購入した。※参考:https://www.amazon.co.jp/Vue-js-Nuxt-js超入門-掌田津耶乃/dp/4798056596Nuxt.jsの解説の冒頭にVue.jsの弱点とそれを解決するためのNuxt.jsのメリットが書いてあった。Vue.jsの弱点から。クライアントサイドのレンダリングVue.jsはブラウザ(クライアントサイド)側でレンダリングされてページが生成される。ユーザーがページを見る分には不便はないが、Googleのクローラーが読み込む際に問題が起こる可能性がある。最近はJSで生成されたコンテンツも読み込むようになってきているが、完全さは保証できない、とGoogle側も表明している。実行してそのページのコンテンツをレンダリングできる保証は(残念ながら)ありません。海外SEO情報ブログデータの管理(コンポーネントの連携がしづらい)Vue.jsのコンポーネントが増えてくると、データの管理が難しくなってくる。コポーネントは単体で完結していて、コンポーネント同士を連携させるのが難しい。コンポーネントについては過去の記事を参照。クモのようにコツコツとルーティング管理Vue.jsは1枚のページで完結する形になっている(SPA)。多数のページを生成する「ルーティング」の仕組みがない。ルーティングについてはPHPのフレームワークLaravelに出てきた概念。「○○.html」という静的なファイルを物理的に用意せず、動的にページを生成する。クモのようにコツコツとNuxt.jsのメリット次にNuxt.jeのメリット。上記のVue.jsの弱点を拡張するプログラムがいくつか出ているが、それらを一つ一つインストールするのは手間が多いため、全部そろえてパッケージ化したのがNuxe.js。SSR」を使うとサーバサイドレンダリング(SSR)ができる。それによってGoogleのクローラーにも確実に読まれる。ページ表示の速度も速くなるメリットがある。SSRの公式サイトはこちら。インターネットの遅さや遅いデバイスでは、コンテンツの再生時間が短縮されます。サーバサイドレンダリングを実現するためには、サーバ側にNode.jsの環境が必要になる。レンタルサーバはデフォルトではNode.js環境はないことが多く、FirebaseやHerokuなどのPasSの方が導入がしやすい。レンタルサーバとPaaSの違いについてはこちら。クモのようにコツコツとHerokuについては過去に何度か触っている。クモのようにコツコツとNuxt.js公式サイトにはいくつかのデプロイ(公開)方法が書かれている。Herokuを使った方法。超入門」ではFirebaseによるデプロイ方法で解説されていた。ブログなお、サーバレスとはサーバかないと言う意味ではなく、サーバの管理が不要という意味。キュービストブログデータ管理(コンポーネントの状態管理)Nuxt.jsに組み込まれるライブラリ「Vuex」を使うとデータ管理ができる。これによって複数の散らばったコンポーネントを一元管理することができる。Vuexを調べていると「状態管理」というキーワードが目に入る。何の状態?と思っていたが、コンポーネントを管理するという意味のようだ。VuexはReactのReduxと同じ位置付けであり、そのReduxもFluxを参考に作られているとのこと。QiitaFluxはMVCなどのようなアーキテクチャの一種。Router」を使うとルーティング管理ができるようになる。用意されたディレクトリの中に「.vue」拡張子のファイルを追加すると新たなページが生成できる。Routerプロジェクトの生成ビルド(静的ファイル生成)Nuxt.jsにはプロジェクトを生成するための専用プログラムが用意されており、その中には静的ファイル(HTMLファイル)を制しするビルドも用意されている。静的サイトってよく聞くけど、いつも普通に作っているHTML手打ちのサイトが静的サイトじゃん、って思っていた。「静的サイトジェネレーター」はHTMLの手打ちサイトとは違う。exlair.net「HUGO」「Hexo」「Jekyll」などが有名で、ページ構成はテンプレ化されており、中のコンテンツの部分はマークダウンで作れちゃったりする。そこからローカル環境でHTMLページが生成されて、あとはできあがった静的なファイルを本番環境にアップする。type」もローカル環境で静的なページを生成して本番環境にアップする、という仕組みだった。かたつむりくんのWWW静的サイトにするメリットはあらかじめページが作られているのでページの表示が早い。本番環境にNode.jsが不要なのもメリット。デメリットはログイン機能など動的な生成の用途には使えない点がある。SPA・SSR・静的化の選択の判断基準については下記の記事がとてもわかりやすかった。Qiita最後にということで、今回はNuxt.jsの概要をざっと掴みました。次回からは実際に何か作り始めてみようかと思いますが、環境構築をどうするか思案中。ローカル環境だけでNodeで作ってスクリーンショットを撮るか、Herokuにデプロイするか、Firebaseにトライするか、など。導入の簡易さとブログ記述の簡易さで比較検討したく思います。06:11Tweet関連記事2020-01-07【Vue.js】vuex-persistedstateでデータをローカルストレージに保存するVue.jsの続きです。JSフレームワークReact、はじめました。今回は初回...2019-12-20【Vue.js】Vuexのミューテーション(mutations)に設定した処理を実行するVuexの続きです。前回はVuexストアのステートに保管したデータ...2019-12-11【Vue.js】Vuexのストアに値を保管してコンポーネントに表示するVuexの続きです。前回はVuexが何を管理しているのか調べました...2019-12-03【Vue.js】Vuexの「状態管理」はいったい何の状態を管理しているのか調べたVue.jsの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。