こんにちは、みみです。
先日、突貫工事でちょっとしたサイトを作る必要がありまして、折角なのでNuxt.js使ってみようかと思って、作ってみましたのでそのメモです。
Nuxt.js とは
Nuxt.js は Vue アプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。
https://ja.nuxtjs.org/guide
という訳で、Vue.js 公式と同じくかなり日本語化されているので特に私が再度説明することもないのですが。
Vue ぽくない、いわゆる全部入りなのでどうかなあとも思いますが、フレームワークとはそういうものなので、ともかく試してみました。
プロジェクトを開始
最初のほんとのお試しはcreate-nuxt-appを使うとざっくり仕組みが分かって良いと思いますが、色々と盛り込まれ過ぎなので、スクラッチから開始します。
好きな名前のディレクトリを作って、その中に package.json を作成。公式のフローに従って、npm run devしたらプロジェクト開始です！ http://localhost:3000 ですでにサイトが動いています。超かんたん。どのファイルでも編集して保存すれば即反映されていきます。超便利。
JSONを読み込ませて一覧表示してみる
同じフォーマットの画像とテキストを10個程度を表示するだけだったので、テンプレートにJSONを読ませて一覧表示させるようにしました。
こんな感じのフォーマットをpage/index.vueのtemplateタグ内に書いて、JSONも同じscriptタグ内に書いちゃう。
これ最初はJSONファイルを分けようと思ったのですが、画像の読み込みでハマったので同じファイルの中で今回は済ませました。
Nuxtでは（っていうかこれはwebpackの機能だけど）assetsディレクトリに画像を突っ込んで参照すると
1 KB 未満のすべてのファイルは Base64 データ URL としてインライン化されます。 それ以外の場合、画像/フォントは、対応するフォルダ（
https://ja.nuxtjs.org/guide/assets/#webpack-で取り扱う.nuxtディレクトリ下）にコピーされ、より良いキャッシュのためにバージョンハッシュを含む名前が付けられます。
というわけで、assets 内に画像ファイルを入れて良きにはからって貰おうと思ったらなかなかうまく行かず、JSONの中で require してしまうという力技で解決してしまったのだけれど、どうやるのがベストなのか知りたいところです。
CSS(SASS)を別ファイル化する
CSSも同じファイルに書けるのですが、開発しずらいし、コレまでのライブラリとかそのまま使いたいのでそれは別ファイル化しました。sassをassets以下に置いてnuxt.config.jsに指定すればOK。
Nuxtは遷移アニメーションが色々使えて良いのですが、そんな訳でついCSSで済ませてしまってあんまり使いませんでした。
静的ページを作るには
というわけで、だいたい出来たなーと思ったら、静的ページを生成してみましょう。
静的ページを生成するのは nuxt generate コマンドなので、"generate": "nuxt generate" を package.json に追記しておきます。あとは npm run generate を叩けば dist にファイルが作成されます。
そしてdist内に出来たファイルを適当なサーバー（別にNetlifyとかである必要はないです。今借りてるレンタルサーバーに適当なサブドメイン設定してあげたりしても全然だいじょうぶ。）のトップにぽいっとアップしてあげれば、もろもろ圧縮して最適化されたサイトの完成！
感想: Nuxt ha iizo.
ざっくりSPAとかSSGとかPWAとか何かそんな３文字見たり聞いたことあるぐらいの人でも、そういう感じのページがさくっと作れちゃう凄いやつです。
深く考えずに思い付いたプロトタイプをバーっと作るのとかにも良いと思う。もちろんしっかり作り込むことも出来るし。流行る理由がわかった気がしました。
