Nuxt.jsで簡単なWebアプリを作成するチュートリアル(ルーティング,ファイル構成,CLI)【Vue.js】

SPA(シングルページアプリケーション)を簡単に作成できるjavascriptフレームワークVue.js。そのVue.jsを使ってSSR(サーバーサイドレンダリング)が実現できるNuxt.jsを初めて体験してみました!

今回は、Nuxt.jsのインストールやプロジェクトの作り方、ファイル構成、ルーティングの仕方などを紹介します。

Nuxt.jsはSSR以外にも使える?

Nuxt.jsはVue.jsで作成するWebアプリをSSRするだけのツールだと思っていました(笑)

しかし実際は、

  • ES6・ES7のトランスパイル
  • jsやcssファイルの整備
  • cssプリプロセッサのサポート
  • 開発環境提供(ライブリロード等)

などなど、SSR(サーバーサイドレンダリング)以外の便利な機能を提供するVue.jsベースのjavascriptフレームワークでした。

create nuxt appでプロジェクトを作成

SSR以外にもたくさん便利な機能があるNuxt.jsのプロジェクトは【create-nuxt-app】を使えば一瞬で作成できます。

まずは、create-nuxt-appコマンドを使用できるようにするために、以下のコマンドをターミナルで実行しましょう。

これで、ローカルPCに【create-nuxt-app】コマンドがインストールされました。

その状態で、

を実行します。そうすると

プロジェクト名やプロジェクト概要など、使用するツールなどが対話式で聞かれますが、すべてEnterで大丈夫です!(ちゃんと設定すれば、axiosやESLintなどをプロジェクト作成時に設定できます)

上記コマンドで作成されたディレクトリに入り【npm run dev】コマンドを実行し、ブラウザからhttp://localhost:3000にアクセスしましょう。

この画面が表示されたら成功です!

ファイル構成

create-nuxt-appで作成したプロジェクトのファイル構成はこの通りで、Viewの描写に使うディレクトリは

  • layouts
  • pages
  • components

の3つです。

今回は、ルーティングやリンク、Viewの描写だけで簡単なWebアプリを作成するため、上記3つのディレクトリを修正します。

基本的なルーティング

Vue.jsのVue-routerを使う場合、router.jsなどのルーティングファイルを作成して、パス(URL)とcomponentを指定して、ルーティングを作成します。

しかし、Nuxt.jsの場合は、pagesディレクトリ配下のファイル構成でルーティングを設定します。

例えば、newsページを「/news/」というURLで作成する場合、

このようなディレクトリ・ファイル構成にすることで自動でNuxtがルーティングを設定してくれます。

パラメーター付きのルーティング

newsページのルーティングは実装できました。次は、パラメーター付きでnews詳細ページを表示する方法を紹介します。

先程作成したnewsディレクトリ配下に「_id.vue」というファイルを作成します。その状態で、ブラウザから「/news/1」にアクセスすると、_id.vueファイルが描写されます。

また、パラメーターをファイル内で取得する方法はVue Routerと同じく「$route.params.id」で取得できます。

上記のように_id.vueファイルを作成して、「/news/10」にアクセスすれば、10とブラウザに表示されます。

ルーティングバリデーション

Nuxt.jsの場合、パラメーターつきルーティングをする際に、バリデーション設定をできます。

先程作成したnews詳細ページのルーティングの場合、もしidが数字じゃない場合エラーにしたいとします。

このようにvalidateメソッドを使用して、条件を規定すれば、パラメータが不正の値だった場合、エラーページを表示することができます。

 

Nuxt.jsの場合は、Vue.jsのVue RouterのようにルーティングファイルでURLを規定するのではなく、ファイル構成でURL構成を作成していきます。

ルーティングルールをフレームワークの方で規定してくれるので、すべての人が同じように同じルールでプロダクトを作ることができます。

layoutsディレクトリ

pagesディレクトリは各ルーティングで読み込まれるファイル一覧でした。

一方、layoutsディレクトリは全ページで使用されるテンプレートファイルを規定するディレクトリです。

例えば、「/lauouts/default.vue」ファイルにヘッダーを追加した場合、

全ページにヘッダーが追加されます。

また、ページによってlayoutsファイルを変更したい場合、

といった形で、layoutsファイル名を指定すればページごとにlayoutsを変更できます。(この例の場合は、/layouts/news.vueがレイアウトとして使われます。)

componentsディレクトリ

componentsディレクトリは各ページやlayoutで使用されるパーツを格納するディレクトリです。

プロジェクトを作成した状態ですでにLogo.vueコンポーネントが作成されています。

様々なページで繰り返して使われる共通パーツをcomponentsディレクトリ内に配置してプロジェクトを作成していきます。

リンク(nuxt-link)

Nuxt.jsの場合、HTMLタグのaタグでリンク設定をしてしまうとSPAの遷移(必要なDOMのみを変更する)ではなく、すべてのリソースを再度通信して取得してしまいます。

しかし、「<nuxt-link to=”/news”>News</nuxt-link>」というように、nuxt-linkを使用すれば、変更されるDOMのみ再描写し通信量を節約し、ページ表示速度を向上させることができます。

Vue Routerのrouter-linkのように、Nuxt.jsのプロジェクトではnuxt-linkを使用するようにしましょう。

Vue.jsが使えればNuxt.jsも使える!

ルーティングの設定やリンクの設定の仕方などNuxt.js特有の記法を覚える必要はありますが、Vue.jsでWebアプリを作れる方ならばNuxt.jsはすぐに使えるようになるイメージでした。

Vue.jsはもう1年ぐらい使い、かなり使い方もわかってきたので、これからはNuxt.jsでプロジェクトを作成し、ブログで使い方を紹介していこうと思いますので、ぜひ、また遊びに来てください!

ABOUTこの記事をかいた人

新卒でノマドワーカー(webデザイナー)として独立し、半年で月収100万円を達成する。その後、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んできました。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは、お金のことを考えずに、様々な企業でエンジニア修行をさせていただきながら、複数のメディアやアプリとweb制作事務所を運営しています。 趣味は株式投資(米国・日本株メイン)で、トレードを楽しむ日も多いです!