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

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

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

以前まではSSRも高難易度技術だったようですが、Nuxt.jsの登場で手軽になり、またNuxt.jsは良く出来ている話を聞いたので、Nuxt.jsとAnime.jsで ポートフォリオ を作ってみました。

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

Nuxt.jsの優れた点

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

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

その点でNuxt.jsは最初から便利機能が色々入っており、環境構築の手間も省けて◎

以下のようにnode環境があれば、簡単に動作確認が可能です。

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

またRailsのような規約を重んじるフレームワークで、SSR環境やプラグイン・ミドルウェアも搭載。

用意された選択肢

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

それぞれの特徴は以下の参考書で丁寧にまとめられています。

結局何を選べば良いのか!? そのヒントが紹介されているので参考までに。

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

静的化といえば静的サイトジェネレーターとしてReactベースの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ストア

以下サンプルはVueのカウンターアプリ。

actionsによりstateがカウントアップされ、vuewで画面表示される一方向のデータフロー。

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

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

クラシックモード

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

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

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

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