Nuxt.js で遊んでました

最近、フロントエンド界隈で SSR が流行ってきているようで、気になって調べていたら Nuxt.js なるものを見つけました。

今回はこれを使って、ネコ画像を延々スライドショーするだけのサービスを作って遊んでみました。

以下がそのサイトです。

Nuxt.js を使った感想

楽チン。

ほとんど初めて Vue.js を触るのに、興味本位で Nuxt.js もまとめて勉強がてらにサービスを作りました。
公式のドキュメントが充実しているおかげで、ほとんど苦なく作れたと思います。

インストールも楽チンで、これだけで終了。

$ npm i --save nuxt

起動やビルドなどを考慮して package.json にこれを書いておけば、

{
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  }
}

こんな感じで出来ちゃうのは、初心者にとってもありがたかったです。

$ npm run dev                   # 開発モードで起動
$ npm run build; npm run start  # 本番モードでビルド＆起動
$ npm run generate              # 静的ファイルの生成（dist）

非同期通信のための axios とか、アイコンを使うための font-awesome とかを Nuxt.js で使うためのプラグインも充実していました。

それがオフィシャルで作られていて、こうしてまとめられているから安心ですね。

スライドショーをするために Swiper も、良い感じでコンポーネント化されていたのも幸せ。

静的ファイルの生成が、本当に嬉しみ。

これで生成した dist をホスティングサービスに載せるだけで、Web ページを立ち上げられちゃうのは素敵すぎました。

Netlify を使っていて、これの設定は少しだけ。
Netlify に関しては、以下の記事が素敵で分かりやすかったです。

これをやっておけば、 GitHub の master ブランチに push するだけでデプロイされちゃう楽チンさ。
もうダメになっちゃいそう。

まだ RC とはいえ、触り心地は最高でした。
これからも継続して触って、ガンガン覚えていきたいと思います。

ただ、今回作ったサービスに関しては、規模を小さくしすぎてコンポーネントの数が多くて、初回ロード時にゴリゴリ DOM 生成するようなものだったら、より恩恵を受けられたかもですね。