Nuxt.js をもっと早く知りたかった話

　ちょうど一年ほど前に仕事で初めて Vue.js を触り SPA アプリを作りました。スケジュールきつきつの中、素早くリリースさせるために Vue.js で SPA を取り入れはしたものの、環境構築周りや実装面がおざなりになってしまった経験がありました。納期は間に合いましたし反響もよかったので後悔はしていないのですが、色々反省すべき点はありました。
（TypeScript 導入したかったなあ）

　そんなことがありつつ、最近 Web アプリ作ろうと目論んでいまして、 「どういう技術スタックを採用するか」を考えている中で以下の課題が出てきました。

😇 Web フロントエンド周りの知識は乏しい
😇 TypeScript 使いたいけど環境構築には時間かけたくない
😇 React よりは Vue.js の方がまだ経験がある分とっつきやすい
😇 各種ツールやFWについて一つずつ勉強してリリースが延びるのも嫌だ

　この課題を解決してくれるものがあったらい……あった！！！！！

Nuxt.js - ユニバーサル Vue.js アプリケーション

　と、見つけたのが Nuxt.js です。正直名前は聞いたことがありましたが何かは知りませんでした。そういやどういうやつなんだろと調べてみたら何ということでしょう、挙げた課題を全部吸収してくれるではありませんか！

　Vue.js + TypeScript で SPA が実現できて、トランスコンパイル等の環境構築やJest によるテスト環境構築もやってくれて、Vuetify  や Bootstrap 等の UI フレームワークも導入してくれる。すごすぎる。 create-react-app でもそこまでやってくれないのに……！

　公式サイトのインストールのまま、コマンドを叩く。

npx create-nuxt-app my-app

　デフォルト値で良い部分はEnterを押し、TypeScriptなど選ぶべきところは選び、好みでUI フレームワークやツールを選択するだけ。

Project name (my-app)
Project description (My impressive Nuxt.js project)
Author name (dafujii)
Choose programming language (Use arrow keys) TypeScript
Choose the package manager (Use arrow keys) Yarn
Choose UI framework (Use arrow keys) None
Choose custom server framework (Use arrow keys) None
Choose the runtime for TypeScript (Use arrow keys) Default
Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
 (*) ESLint
 (*) Prettier
Choose test framework (Use arrow keys) Jest
Choose rendering mode (Use arrow keys) Single Page App
Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection) jsconfig.json (Recommended for VS Code)

　各種インストールが終わり、プロジェクトが作成されたら以下の表示に。

🎉  Successfully created project my-app

 To get started:

       cd my-app
       yarn dev

 To build & start for production:

       cd my-app
       yarn build
       yarn start

 To test:

       cd my-app
       yarn test


 For TypeScript users.

 See : https://typescript.nuxtjs.org/cookbook/components/

　四の五の言わずに VSCode 立ち上げて中の統合ターミナルで操作すりゃいいんだよ！

code ./my-app

yarn dev

　ブラウザで以下のURLにアクセスすれば……。

http://localhost:3000/

　すごい、何もしてないのにできた。ディレクトリ構成も説明が特になくてもそれっぽく分かるようになってますし、ドキュメント読まずにやりたいことを実現できそうな雰囲気をプンプン匂わせてますね。

　もっと早く知りたかった。1年前なら実際にプロダクトに反映できていたかもしれないし、1か月前に知ってもこれを使ってフロント部分を作っていたような気がしています。

　すごいなあ、と関心はするんですが Nuxt.js で満足せずに 似たような名前の Next.js も調べた方がよさそうですね。また違う発見がありそうです。

　「言語やフレームワークやツールを使いたい」のではなく、それらはあくまでも道具であって、「課題を解決するものを作りたい」から使うんです。

Nuxt.jsビギナーズガイド