Twitter

Category

もっと見る

Tag

もっと見る

    HOME  >  Web開発 >  【Vue + Nuxt.js】Nuxt.jsとは？〜環境構築まで

Web開発

【Vue + Nuxt.js】Nuxt.jsとは？〜環境構築まで

【Vue + Nuxt.js】Nuxt.jsとは？〜環境構築まで

目次

  1. Nuxt.jsとは？
    1. Nuxt.jsでできること
    2. Nuxt.jsのメリット
  2. Nuxt.js環境構築
    1. Vue.js環境構築
    2. Nuxt.jsのプロジェクト作成
  3. まとめ

今回は、Vue.jsのフレームワークである、Nuxt.jsについて、概要説明から環境構築までを紹介していきたいと思います。

今までの記事ではvue-cliを使って、Vue.jsを扱ってきましたが、ここからはフレームワークであるNuxt.jsを使って、より効率的かつ実践的にVue.jsを扱っていきたいと思います。

それではいきましょう！

Nuxt.jsとは？

そもそもNuxt.jsとはいったい何なのか。

ここから解説していきたいと思います。

Nuxt.jsとはVue.jsのフレームワークです。

以前、Vue.jsはJavascriptライブラリの一つであると、書きました。

つまり、JavascriptライブラリがVue.jsであり、Vue.jsのフレームワークがNuxt.jsであるということになります。

Nuxt.jsはVue.jsをより効率的に使いやすくするために、作られたフレームワークで、様々なメリットがあります。

Nuxt.jsでできることとそのメリットについて少しご説明します。

Nuxt.jsでできること

Nuxt.jsで開発を行う際に、大きく分けて3つのモードを選択することができます。

それが下記です。

  • Universalモード
  • SPAモード
  • Generateモード

Universalモード

UniversalモードはSSR（サーバサイドレンダリング）が導入されています。

SSRとは、従来のブラウザ側（クライアント側）で実行されHTMLを描画するJavaScriptをサーバー内部で実行し、HTMLを描画するものです。

これによって、処理スピードを格段に飛躍させます。

また、UniversalはSPAでもあるため、ページ遷移などに関しても申し分がなく、爆速です。

また、SPAでデメリットとされた初期ロードが遅い問題は、SSRでは解消されます。

SPAモード

SPA（シングルページアプリケーション）のモードです。

今までの記事でも解説したような、単一のWebページで構成されたサイトのことで、ページ遷移などの際に、リロードを挟まないので、爆速でページ遷移します。

SPAのデメリットとしては、最初にサーバーから全てのページのリクエストを飛ばすため、初期ロードが遅いというものがあります。

Generateモード

Generateモードは、ブログや企業サイトなどの静的ページを運用する際に採用されます。

SSRなどに比べて、軽量で、データベースも必要とせず、運用が簡単です。

以上、3つのモードの解説をしました。

正直、UniversalモードはSPAであり、SSRであるので、SPAモードを選ぶメリットはないように感じてしまいます。ですので、SPAのアプリケーションやサイトが作りたい場合は、迷わず、Universalモードを選んでしまっていいと思います。

Nuxt.jsのメリット

SSRが導入されている

前述の通り、Universalモードを選ぶと、SSRが搭載されています。

SSRはNuxt.jsの大きなメリットの一つであると言えるでしょう。

SSRによって、より効率的で高速なアプリケーションを作ることができます。

3つのモードがあり、柔軟に導入ができる

前述の通り、Nuxt.jsには3つのモードがあります。

そして、それぞれメリットがあり、作るアプリケーションやサイトに応じて使い分けることができます。

学習コストが低い

これはVue.jsに言えることですが、とにかく学習コストが低いです。

公式のドキュメントもしっかりしており、日本語対応もしているため、詰まったら、公式ドキュメントで大体は解決することができます。

Vue.jsは他のフレームワークに比べて、かなりハードルが低いといえます。

ページURL生成が容易

普通のVue.jsではルーティングによって、URLを設定する必要がありましたが、Nuxt.jsではその必要がありません。

「pages」フォルダに生成したファイル名がそのままURLとなります。

通信速度がとにかく速い

SPAやSSRなどによって、とにかく軽量な動作のアプリケーションを作ることができます。

また、Nuxt.jsの容量は57KB程度であり、非常に軽量です。

これによって、ユーザーにかかるストレスがほとんど軽減されます。

PWAへの対応が簡単

PWAの対応がされています。

PWA（Progressive Web Apps）とはブラウザ上で動くWebアプリケーションであるにもかかわらず、プッシュ機能などのネイティブアプリのような機能が実装されているようなサイトのことです。

Nuxt.jsでは、このPWAの専用のモジュールをインストールするだけで、簡単に実装できます。

Nuxt.js環境構築

それでは実際に環境構築からプロジェクト作成まで行なってみましょう。

Vue.js環境構築

まず、Vue.jsを使えるようにするために、以下の2つのインストールが必要です。

  • Node.js
  • npm（or yarn）

こちらのインストールに関しては、以下記事で紹介していますので、そちらをご参照ください。

【Vue + vue-cli】Vue.jsとは？〜環境構築まで
https://www.dailyupblog.com/web_development/716/#chapter-2

Nuxt.jsのプロジェクト作成

あらかじめ、プロジェクト用のフォルダを作っておいてください。

今回、僕は「nuxt-test」というフォルダを作っておきました。

コマンドプロンプト（Macならターミナル）で、cdコマンドでこのフォルダ内に移動してください。

そして、下記コマンドを実行してください。

npx create-nuxt-app

上記コマンドを実行したら、下記質問が聞かれます。

Project name // プロジェクト名
Programming language // JavaScriptかTypeScriptか
Package manager// npmとyarnのどちらを使うか
UI framework // UIフレームワークの追加
Nuxt.js modules // axiosなど、パッケージのインストール
Linting tools // Lint（文法チェッカー）の追加
Testing framework // テストフレームワークの追加
Rendering mode  // シングルページアプリケーションとして動作させるか否か。
What is your GitHub username // GitHubのユーザー名
Version control system // バージョンコントロールの方法

全て任意ですが、僕はyarnを使うので、yarnを選び、Universalモードにするので、Universalを選択しました。

使用する言語はJavaScriptではなくTypeScriptにしました。

TypeScriptはデータの型を宣言するため、エラーを未然に防げるといった利点があります。

複雑なアプリケーション開発などでは、JavaScriptよりもTypeScriptの方が望ましいと言えます。

ですので、今回はTypeScriptを選びました。

また、UIフレームワークでは「Element」を選択しました。

Elementは便利なUIコンポーネントがたくさん詰まっています。

今後Elementについても沢山紹介していこうと思います。

それ以外はデフォルトにしました。

そうすると、データ一式が、フォルダ内に作成されます。

試しに、サーバーを起動してみましょう。

このプロジェクトフォルダ内で下記コマンドを実行してください。

//npmの場合
npm run dev

//yarnの場合
yarn dev

ブラウザで表示されたURL（localhost:3000）にアクセスしてみてください。

下記ページが表示されたら、成功です。

まとめ

今回は、Nuxt.jsの概要説明と環境構築について解説しました。

Nuxt.jsはとにかくSSRなどのおかげで、通信速度が速いので、多くのメディアサイトなどで採用されることが多いです。

また、PWAの開発にも優れているので、とても奥が深そうです。

それでは今回はここまで！

お疲れ様でした！

Nuxt.js公式
https://ja.nuxtjs.org/

関連記事

関連記事