Vue.jsよりもNuxt.js:使うべき理由とタイミング

Bornfight    
カスタムソフトウェア、デジタル製品、モバイルアプリ、Webサイト、インタラクティブインストールを作成するデジタルイノベーション企業
この記事は、著者の許可を得て配信しています。
https://www.bornfight.com/blog/nuxt-js-over-vue-js-when-should-you-use-it-and-why/

Nuxt.jsはVue.jsをベースに構築されたフロントエンドフレームワークで、サーバーサイドレンダリング、自動生成されたルート、改善されたメタタグ管理、SEO改善などの優れた開発機能を提供しています。

私たちのフロントエンドチームでは、クライアント側のメインテクノロジーとしてNuxt.jsを使うことはあまり考えていませんでしたが、最近、非常に特殊な機能を持つユニークなプロジェクトの依頼を受けて以来、Nuxt.jsを使うようになりました。私たちのチームのメンバーの何人かが初めてNuxt.jsを使ったので、このブログでNuxt.jsがどのように機能したのかを説明することにしました。

なぜVueよりもNuxt.jsを使うのか?

Nuxt.jsはフロントエンド開発者にとって多くのメリットがありますが、私たちがこのフレームワークを使う最終的な決め手になったのは、1つの重要な機能です。私たちのアプリケーションは、典型的な内部SPA(シングルページアプリケーション)ではないので、この機能を必要としています。その重要な機能というのは、ソーシャル共有機能と管理機能を含む公開型のWebアプリケーションです。

ソーシャル共有については、Nuxt.jsはメタタグの管理において大変優秀で、バックエンドから受け取ったデータに応じて、特定のカスタマイズ可能なソーシャル共有ウィンドウを簡単に作ることができました。以下はその一例です。

では、SEO改善はどのように行うのか?

SEOを改善させるために、Nuxt.jsではSSR(サーバサイドレンダリング)を利用しています。SSRはAJAXデータをフェッチし、Vue.jsのコンポーネントをサーバー(Node.js)上のHTML文字列にレンダリングします。すべての非同期ロジックが完了すると、それらを直接ブラウザに送信し、最後にスタティックなマークアップをクライアント上の完全にインタラクティブなアプリに提供します。この機能により、Google SEO パーサーを使って DOM 要素を通して素晴らしい解析を行うことができます。SEO パーサーは、ウェブサイトの DOM がロードされたときにすぐに、非常に速いスピードで DOM 要素を解析します。

一方、Vue.jsやReact、Angularなどのフレームワークで構築された典型的なSPAアプリケーションは、DOMがロードされた後にAJAXでバックエンドからデータをフェッチしているため、SEOパーサーはまだレンダリングされていないDOM要素があるため、すべてのDOM要素を解析することができません。AJAXのフェッチは非同期ですが、SEOのパースはそうではありません。


Nuxt.js SEO監査グレード


Vue.js SEO監査グレード

Nuxt.jsはVueとは異なるマインドセットを必要する

Nuxt.jsとVue.jsでは、ロジックの扱いが大きく異なります。主な違いは、Vueは常にクライアント側で動作しているのに対し、Nuxtはそうではないという点です。これが場合によっては大きな問題を引き起こす可能性があります。例えば、アプリケーションがロードされた直後にDOM要素を選択したい場合、アプリがNode.js側で動作している可能性がありますし、もちろんNode.jsにはDOM要素はありません。

ブラウザのローカルストレージにアクセスしても同じことが起こります。これが、Nuxt がローカルストレージよりもクッキーを使用している主な理由です。それらは常にアクセス可能だからです。

Vueの場合は、クライアント上で常に動作しているため、そのような問題が発生することはありません。そのため、そのような潜在的な問題に悩まされることはありません。

ここでは、Vue でこのタイプの潜在的な問題をどのように処理するのか、また Nuxt でどのように処理するのか、実際のコード例を見てみましょう。


Nuxt.jsのサーバー/クライアント処理

この写真で最も重要なのは、「作成された」メソッドの早期リターンです。Nuxt はグローバルにアクセス可能なオブジェクト 「process」 を持っており、これは現在サーバー側で実行しているのかクライアント側で実行しているのかを示しています。このコードの背後にあるロジックはソケット接続を管理することに重点を置いており、サーバー側にはDOMがないため、サーバー側で実行している場合はソケットイベントを受信した際に明らかにDOMを更新したくありません。これが Vue.js アプリケーションであれば、早期リターンの部分を除いてコードは同じです。

なぜなら、プロセスは常にクライアント上で実行されており、その特定のステートメントをチェックする必要がないからです


フォルダ構造を元にNuxt.jsが生成したルーター

Nuxt.jsはフォルダ構造に基づいて独自のルーターを生成しますが、Vue.jsの場合は手動で行わなければなりません 。しかし、どちらの原則も一長一短であることを覚えておいてください。自動生成されたルーターの長所は、作成が簡単で早いことです。ディレクトリとファイルを作成するだけで、Nuxtがすべての作業を行ってくれます。しかし、短所は、手動で書いたものよりもコントロール性や管理性が低いという点です。


Vue.js マニュアルルータ

Vue.jsを使えば、ルータに独自のロジックを簡単に追加したり、サービスをインポートしたり、手動で生成されたルータよりも多くのコントロールでルートを管理することができます。この原理には時間がかかり、より複雑になりますが、だからと言って必ずしも短所であるというわけではありません。

Nuxt はエンタープライズスケールのアプリケーションに対応してるか?

以前は、Nuxt.jsがエンタープライズスケールのアプリケーションに対応できていない主な要因は2つありました。

1.Typescriptに対応してない
2.サーバー側のエラー処理がよくない

プロジェクトの研究段階(半年ほど前)では、信頼できる Typescript のスタートキットやコンフィギュレーションがなく、それを使用するのはリスクを伴うものでした。 lintエラーや欠落した型がたくさんあったので、vanilla JS (ES6+) を使うことにしました。その間、Nuxt.jsが Typescript に対応するように劇的に変わり、新しいスタートキットやコンフィギュレーションが用意され、Typescript 関連の問題を心配することなく利用できるようになりました。

サーバー側のエラー処理がよくないというのは、Nuxt.js アプリケーションを開発しているときに、私たちが対処しなければならなかった最大かつ最も困難な問題でした。コードがNuxt.jsサーバー(Node.js)側で実行されている間、アプリケーションは非常に無関係なエラーメッセージを出してきていましたが、これらの同じエラーをデバッグして修正するのは非常に難しく複雑でした。デバッグをより簡単にするためには、Node.js 側でのエラーを特定の方法で処理する必要がありました。

Typescriptのサポートが向上し、SSRに対する理解が深まったことで、Nuxt.jsはミッドスケールやエンタープライズスケールのアプリケーションに対応できるようになりましたが、NuxtのNode.js側でのエラー処理やAJAX管理の改善など、まだまだ改善の余地があります。

Nuxt アプリケーションの構造

Nuxt.jsはVue.jsと非常に似たアーキテクチャを持っています。大きな違いは2つだけです。

1.ルーター
2.メインのApp.vueコンポーネント

Nuxtは、ページのディレクトリとファイル構造に基づいて、ルーターロジックとそのルートを生成します。例えば "about/index.vue" というディレクトリとファイルを作成すると、Nuxt.jsはそのページの "/about" というルートを自動的に生成します。アプリケーション内の他の場所でルートを設定したりコンフィギュアしたりする必要はありません。

ネストされたルートの場合、必要なのは親ディレクトリの中にディレクトリを作成することだけです。"about/me/index.vue"  "about/me" ルートを生成します。また、ダイナミックにネストされたルートやネストされたルートパラメータを作成するために必要なのは、サブディレクトリに接頭辞のlodashを付けて名前を付けることだけです。"user/_id/index.vue" は、ユーザーのIDに基づいてユーザーのダイナミックにネストされたルートを作成します。


Nuxt.jsページのディレクトリ構造

Nuxt.jsにはもう一つ、構造に関連した非常に興味深い機能があります。レイアウトです。Vue.jsアプリケーションにはメインのApp.vueファイルがあり、これがすべてのアプリケーションコンポーネントのメインのルートコンポーネントのラッパーとなっています。Nuxt.jsはレイアウトを使用しており、すべてのレイアウトがアプリケーションコンポーネントの個別のラッパーとして機能します。例えば、特定のページで異なる UI ライブラリ、グローバル CSS スタイル、font-family、デザイン システム、メタ タグ、その他の要素を使用したい場合、どのレイアウトを親ルート コンポーネントとして使用するかを設定できます。デフォルトでは、すべてのNuxt.jsページでdefault.vueレイアウトが使用されています。

Nuxt.jsのVuexは、通常のVue.js環境とほぼ同じストアモジュールを伴った構造になっています。このタイプの構造化はオプションですが、より良い構造化とコードメンテナンスのために強くおすすめします。すべてのストアは、アプリケーションのロジックとデータフローに基づいて構造化され、モジュール化されている必要があります。例えば、アプリケーションに認証ロジックが含まれている場合、ログイン、ログアウト、クッキー、トークン、ユーザーデータなど、すべての認証データとロジックを管理するための認証ストアモジュールを作成する必要があります。


Nuxt.jsストアモジュール構造

Nuxt.jsルートアプリケーション構造

まとめ

初めてNuxt.jsプロジェクトを開発する場合、SSRの知識なしにVue.jsのバックグラウンドを持っている場合、最初は混乱して複雑になることは間違いありません。しかし、他の技術と同じように、習得には時間がかかるものです。Nuxt.jsフレームワークの力とメリットを真に理解するには、間違いを犯すことも必要であり、多くのコード行も書かなければいけません。私としては、次のNuxt.jsプロジェクトを心待ちにしています。そのプロジェクトでは、以前取り組んだNuxt.js + Typescriptプロジェクトの障害に悩ませられることなく、得た知識を(できればTypescriptも)使うことができるでしょう。

Nuxt.jsについてもっと詳しく知りたい方は、次のソースをチェックしてみてください。

1.Udemy コース: Nuxt.js – Vue.js on Steroids
2.freeCodeCamp の記事: クライアント側 vs.サーバー側のレンダリング

Nuxt.jsは非常に強力なフレームワークで、多くの便利な機能を備えており、フロントエンドアプリケーションの開発をより簡単に、そしてより楽しいものにしてくれます。しかし、すべてのタイプのクライアント側のアプリケーションやWebサイトに最適だということではないので、ご注意ください。

Nuxt.jsとVue.jsのどちらを使うべきかというメインの質問に答えるためには、それぞれの長所と短所を知っておく必要があります。従ってその質問の答えは、「それぞれの長所と短所を知っておく必要があり、また、プロジェクトの種類や目標、要件に応じて、どちらか一方を使うタイミングを知る必要がある」です。

Nuxtは、サーバー側のレンダリング機能によるSEOの改善、オートジェネリックルーターによる迅速な開発、優れたコンフィギュレーションオプションとメタタグメソッドによるパブリックシェア機能と管理、プレレンダリングされたページによる自動コード分割など、Vue.jsでは不可能な、または非常に複雑で実現できない機能を持ち合わせています。次のプロジェクトでこれらの機能が必要な場合、Nuxt.jsを選択することが最善策です。

一方で、目標が内部製品、拡張されたコード管理とカバレッジ、典型的なクライアント側SPA、SEOレートとパフォーマンスの必要性がない、汎用的なソリューションよりも手動のコードロジックである場合は、これらすべてを処理する点でNuxt.jsよりもはるかに優れているVue.jsを選択する方がよいでしょう。


コメントを読む

新着ピック  






















新着ニュース

SQL レベルのメトリクス をサポートしたパフォーマンスインサイトで高負荷状態のDB稼働を確認してみた | Developers.IO

『それ、楽しくしましょ ちょっとだけ』~ファシリテーションで自分の強みを探してみた!~ | Developers.IO

[備忘録] Kinesis FirehoseのLambdaによるデータ変換について | Developers.IO

ECS Task DefinitionをActionsで自動更新する | Developers.IO

ECS Task DefinitionをActions...

DevelopersIO / 5時間前


アップル、Apple 名古屋栄と福岡の営業を5月27日より再開--客もスタッフもマスク着用で

「4Gスマホ」おすすめ3選ソフトバンク編 人気機種はもちろん2画面やコスパ重視モデルも【2020年春最新版】

「Yahoo! MAP」、最短20分前の街の混雑状況をヒートマップで表示可能に

【小ネタ】服にバーチャル動画を映す時の注意点 #zoom | Developers.IO

Fin-JAWS 第13回 PCI DSS と AWS の混ぜご飯レポート #finjaws #jawsug | Developers.IO

Fin-JAWS 第13回 PCI DSS と AWS...

DevelopersIO / 8時間前


首相「接触確認アプリ使って」 “緊急事態宣言解除後のカギ”と呼びかけ

マーベラス、中国テンセントの子会社が筆頭株主に--資本業務提携を締結

[Amazon SageMaker] イメージ分類(Image Classification)において、データセットの解像度が、学習及び、検出結果に与える影響について確認してみました | Developers.IO

東京ディズニーリゾート、グッズのネット販売に対応 チケットなしでも購入可 イベント限定品は「方法を模索中」

伊藤忠、ラズパイ活用の体温検知デバイスを発売 AIによる顔認識も

shellで学ぼう!プログラミングがちょっと上手になる(かも)Tips集!! | Developers.IO

ソニー、ドコモらが医療分野のIT活用で協業へ VRを使った“バーチャル面会”など検討

楽天ペイ、アプリ内で「Suica」が利用可能に--楽天カードからのチャージで0.5%還元

マストドン「mstdn.jp」、6月30日に終了 「中傷に対する法制強化に対応できない」

「CEATEC 2020」もオンライン開催へ

Amazon QuickSight へのアクセスをアクセス元で制限する場合の対応方法 | Developers.IO

もっと見る
記事をPICKする
会員登録
Register
記事をPICKする

会員登録すると、もっと便利に利用できます。