こんにちは。りまりま団のもふもふです。これはNuxt.js Advent Calendar 2018の17日目の記事です。
本当はVue.jsのKUSOアプリをNuxt.jsに書き換えて比較しようと思っていたのですが、スマブラで全キャラクターを出すのに注力しすぎたコミックマーケットの原稿で力尽きたため、予定を変更してお送りします。
なぜこのエントリを書くのかというと、Nuxt.jsはVue.js以上に実装例が少なく、いざプロジェクトを作成しよう！というときに色々参考にできるものがあると嬉しいなと思ったからです。特にディレクトリ構成は気になりますよね。Nuxt.jsはディレクトリ構成を参照してルーティングを行なってくれるためです。
実装例
hackernews
ニュースサイトをNuxt.jsで実装したリポジトリです。リンクから実際のサイトを見ることもできます。
nuepress
Nuxt.jsとWordPress APIを利用してブログを構築したリポジトリです。コンポーネントの作り方だけでなく、Nuxt.jsでどのように他のAPIを呼び出すかも参考にできそうです。
nuxtjs.org
Nuxt.js公式ドキュメントのリポジトリです。文章ではなく、公式ドキュメントのWebアプリケーション自体がNuxt.jsで作られています。本文はMarkdownで管理されており、Nuxt.jsの静的コンテンツをデプロイする機能を用いて公開されています。
nuxt-firebase-suns-example
Nuxt.js + FirebaseでよくあるSNSのクローンを作成したリポジトリです。作者の@potato4dさんはNuxt.js Advent Calendar 2018の作者です。
nuxt-api-example
VuexとaxiosをNuxt.jsで利用するWebアプリケーションの実装例です。Vuexとは、Vue.jsのアプリケーションでデータの状態を管理するためのライブラリです。axiosはHTTP/HTTPS通信をするために利用するライブラリです。
Vuexは私も利用しているのですが、Vuexの書き方がわからない + Nuxt.jsで書くときの書き方がわからないの2重苦です。すでに完成しているリポジトリの動作を見ながら書き方を参考にできるのは、初心者としてはとてもありがたいですね。
nuxt-api-example
AWSのサービス（Lambda + API Gateway + S3）をNuxt.jsで利用する例です。特にS3はデータストレージとして利用する機会が多いと思いますので、参考にできる人は多いと思います。
まとめ
GitHubでNuxt.jsを検索した結果から、普段の業務で利用する技術に近しそうなリポジトリをピックアップしてお送りしました。実装例はまだ少ないなと思うのと同時に、Netlifyを使って実装したアプリケーションを公開している人が多い事に驚きました。実装されたものと実際のコードを比較できるのはとても便利ですね。
Nuxt.js、来年も盛り上がりそうですね。Vue.jsとNuxt.jsのどちらを選択すれば良いか迷ってしまうのですが、複数人で開発する場合は規約とフォルダ構成でルーティングをやってくれるNuxt.jsのほうが便利そうだなあと感じました。ただ、実際に使ってみるとNuxt.js特有のあれこれを気にするのはビルドとデプロイ時くらいで、普段はVue.jsで開発を進めているような印象を受けました。他の記事を読んで勉強しようと思います。
