実はどちらかというとバックエンド側の人間なのですが、最近はフロントエンドが求められる時代になってしまったので何度かフロント開発をする羽目に。ひよっ子の似非エンジニアを待ち受けていたのは膨大なライブラリと無限のドキュメントでした―――

毎回言っている気がしますがお久しぶりです。フロントエンドはどんどん新しいライブラリやらフレームワークやらが出て大変ですね、濁流です。
先日とある内部システムを作らないといけない事がありそこで初めてVue.jsもといNuxt.jsを使ったような人間なのですが、こういう初心者にとって何が大変かというと「ライブラリやらフレームワークやらが多すぎる」、そして「その分だけドキュメントも多すぎる」、一番困ったのが「ライブラリ/フレームワークがそれぞれすごい勢いで更新されていくものだからQiita等のチュートリアルが古くて動かない」ということ。どうしてGitHubからcloneしたものが動かないの…（よくある）
ということで現時点での覚書をしておこうかなと思った次第ですが、よく考えたらこの記事もすぐ古の遺物になってしまうので、もしこんなところまで漂流してきてしまった方がいらっしゃいましたら泣きながら一緒に最新ドキュメントを探す旅に出ましょう。

パッケージマネージャとかを入れる

Nuxt.jsを動かすにはNode.jsが必要で、Node.jsにはパッケージマネージャという便利なものがあるそうなので入れて行きましょう。パッケージマネージャには大きくnpmとyarnの2つがありますが、どうやら後発のyarnの方が優れている（詳しくは知らない）と言われていますのでyarnを使うことにしましょう。インストール方法に関してはご丁寧に公式がWindows、macOS、Linux各ディストロごとのチュートリアルを用意して下さっています。

Nuxt.jsのテンプレートを用意する

これまた様々な方法があって動いたり動かなかったりしたのですが、結局自分で机引っ叩きながらやるより使える便利なものは使ったほうがいい！ということでcreate-nuxt-appを利用します。一応GitHubリポジトリとかあるのですが何がすごいってこれ別に導入作業とかしなくてもコマンド打つだけで使えるんですね…

yarn create nuxt-app <project name>

で現在のフォルダに新しくプロジェクトフォルダが作成されます。便利。
実行すると対話形式で色々効かれていくので、入力したり必要なコンポーネントを選択したりしましょう。

yarn create nuxt-app hoge
...
create-nuxt-app v2.9.0
✨  Generating Nuxt.js project in hoge
? Project name hoge
? Project description My phenomenal Nuxt.js project
? Author name rexent_gx
? Choose the package manager Yarn
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework None
? Choose rendering mode Single Page App

以上でおしまいです。楽ちん！
あとはcdでプロジェクトフォルダ内に入りyarn devで開発用サーバーが起動できます。デフォルトであればlocalhost:3000にアクセスしてちゃんと表示されれば大丈夫です。

5分で雛形が作れちゃうのね…すごいや…
create-nuxt-appは様々なUIフレームワークに対応しているので、create時に使いたいフレームワークを選択してやればそれに応じたテンプレートを生成してくれます。
このUIフレームワークってのも凄いですね、一瞬でそれっぽい見た目になる。HTMLとCSSで殴り合いをしていたことしかない自分にとってはなんというか時代の流れを感じました。