環境構築もSSRもSPAも簡単!? フロント初心者にも易しいNuxt.js

以前までのReactやVueって、フロントの最先端を走る人の専売特許と勝手なイメージを持ってましたが、最近ではvue-cliやNuxt.jsの登場により、学習コスト要で面倒なwebpackやbabelにも関わりやすくなり、私のような下の中レベルのエンジニアにも随分と扱いやすくなった印象です。

昔必須だった低レイヤ技術も、優れた技術者や大企業が意識せず使えるようにしてくれるので、技術を知らなくてもそれなりの物が作れる時代、危うさを感じながらも「はてブ」を覗いていると、特定分野で最先端を走る方の意見としてSPAの重要性に触れる記事を多く目にします。

以前までSSRは高難易度の技術だったようですが、Next.jsやNuxt.jsの登場で随分と手軽になり、また特にNuxt.jsを良く出来ている話を聞いたので、試しに少し触ってみました。

ちなみにNuxtはReactベースのNextにインスパイアされたらしく、ナクストと呼ぶそうです。

Nuxt.jsの優れた点

Nuxt.jsはVue.jsを拡張させたフレームワークの一つ。

Nuxt.js公式ホームページ

私がSPA開発で最初に触れたのはReactですが、その当時は自分で一から環境構築(npmやwebpack等)する必要があり、色々覚えることあって面倒だなぁと感じていました。

それがNuxt.jsでは最初から便利な機能が色々入ってるし、とにかく環境構築の手間が省けて◎。

上に紹介した記事にも書かれている通り、SSRのための環境も揃っており、ディレクトリ構造に応じて自動的にルーティングしてくれたり、静的ファイルの作成も可能です。

Nuxt.jsの環境構築

環境構築は以下コマンドで簡単に出来ます。

環境構築後は以下コマンドでアプリケーションが起動。

用意された選択肢

Nuxt.jsではビルドの選択肢としてSPA・SSR・静的化の3つが用意されています。

そもそもSSRと静的化とは!?ですが、公式HPが詳細をまとめてくれています。

サーバサイドレンダリング(SSR)とは

SSRは文字通りサーバサイド側でレンダリングさせる機能で特徴は以下のとおり。

◾️メリット

・検索エンジンのクローラが完全に描画されたページを直接解析するのでSEO向上

・インターネットの遅さや遅いデバイスでは、コンテンツの再生時間短縮

◾️デメリット

・Node.jsの動作環境が必要であり、サーバー側に負荷がかかる

静的化は.vueファイルから.htmlを作成し、一般的なwebページとして表示されるので、SPAの欠点も克服しつつ、SSRより高速でホスティング先の候補も増えます。

結局何を選べば良いの!?

以下にヒントが紹介されているので参考までに。

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

静的化といえば静的サイトジェネレーターとしてRaectベースのGatsbyやVueベースのVuePressなどあるので、静的コンテンツであればこれらを検討するのもアリ。

Reactベース静的サイトジェネレータGatsbyの真の力をお見せします

VuePressはMarkdown作成に特化した静的ジェネレーター

Hello World

ざっくりディレクトリ構造を確認しましたが、デフォでpageやstoreがあったり、routerがpagesに集約され、Vueに比べて多少変わっていますが、Vue触ってれば難しい事は無いかな。

まずはルーティングの基礎確認ですが、ディレクトリとファイルを作ると自動的にルーティングが作成、pages/test.vueを作成すれば、指定URL(/test)でHello Worldが表示可能。

pagesでは開発を容易にするキーが幾つか用意されており、asyncDataは最も重要なキー。

asyncDataはサーバーサイドやページ遷移の度に呼び出され、API取得したデータをページコンポーネント内で使用する場合に利用しますが、公式でも3つのサンプルが紹介されてます。

1.Promiseを返す

2.async/awaitを使う

3.コールバックを使う

最近ではasync/awaitを使うのが多いでしょうか。

Vuexストア

状態管理をしてくれるVuexストアについて、詳細がgithubで解説されています。

Vuexとは!?

以下のサンプルプログロムはVueカウンターアプリで、actionsによりstateがカウントアップされ、vuewで画面表示される一方向の単純なデータフロー。

もし他のvueが同じ状態(state)に依存すると単純さは崩壊してしまうので、コンポーネントから状態共有を抽出し、グローバル領域(Vuex)で管理するために利用されるのがVuex。

小規模(例えばコンポーネントが少ない簡易Webサイト)であればVuexが無くても困らないでしょうけど、中規模から大規模になるとVuexによる状態管理が望ましい模様。

クラシックモード

ちなみにNuxtではクラシックとモジュールの2つの方法が用意されています。

今回はクラシックモードで状態管理されている変数が呼び出せるか確認。

まずstoreディレクトリに以下ファイルを作成。

先程作成したHello Worldプログラムでstateを呼び出します。

画面上でcounter変数のボタンが表示され、ボタン押下の度にインクリメントされます。

Nuxt + Animeでポートフォリオ作成

折角Nuxtを触ったのでAnime.jsと組み合わせて簡易ポートフォリオを作ってみました。

TaNA’s Portfolio

ちょっとgithub pagesへのアップに手こずりましたが、随分楽に作れます。