蚊帳の中の日記

ゆるく生きてます

Nuxt.jsを初めて触った

3連休最後は公式のドキュメントを見ながらNuxt.jsで遊んだ。

ja.nuxtjs.org

github.com

yarnもしくはnpxを使ってちゃちゃっとプロジェクトの土台を作れて、始めるのはとても楽だった。 ちょい概念として予習したほうが良さそうなのが、Flux。Actionとかdispatcherとか、データをstoreに置いてviewに反映さえるとか、Fluxアーキテクチャのフローは先に知っておくと良さそう。

f:id:kayamelo151515:20190211214522p:plain

ちゃっと作って。。。

f:id:kayamelo151515:20190211214539p:plain

わーーい。すぐに画面ができた。

使ってみて

最初に触ってみて思ったのが、ファイル構造がわかりやすいということ。それぞれが何の役割を持っていて、何をするのか?をパッとディレクトリ構造を見ればわかるし、細かい設定はだいたいnuxt.config.jsを見ればわかる。
Vueを勉強し始めた時は、以下のVue.js入門を読みながら進めたのだけど、Nuxt.jsを触りながらのほうがより実践的にVue.jsの知識を習得しやすかったかな〜とか思ったりもした。

kayanaka.hatenablog.com

先程、ファイル構造がわかりやすいと言ったように、ルーティングごとにpages配下にvueファイルを置けばnuxtがファイルを読んでいって対応したルーティングを作ってくれる。基本的にRailsみたいにconfig/route.rbとか作らなくて良い。動的にルーティングも_show.vueみたいにアンスコを頭に入れれば出来る。

pages以外にも、layouts, middlewares, plugins, modules, components, static, storeといったディレクトリがある。

ディレクトリ構造 - Nuxt.js

layoutsは想像の通りデフォルトのレイアウトテンプレートを置くところ。エラーのレイアウトのテンプレートも用意しておけば、エラー時にNuxtが良しなにエラーの方のテンプレートを呼び出してくれる。

staticsはその名の通り静的ファイルを置いておくディレクトリなんだけど、webpackで扱うパターンと、単に置いておいて管理するパターンの両方が出来る。

アセット - Nuxt.js

middlewaresはルーティング前に制御したい処理を書いておく。
外部プラグインなどはpluginsに置いていき、VueのインスタンスやVueストアにInjection(注入)して使うことが可能。
modulesはNuxt.jsのコアをどんどん拡張していくことが出来る。多分、もっとサービスの機能を増やしていくとなると、このあたりのディレクトリをいじっていくことになるのかなと思う。

store(VuexStore)についてはクラシックモードとモジュールモードの2つがある。サーバサイドから初期値などを取得したい時はnuxtServerInitとかに処理を書くと良さそう。

nuxt.config.jsが肥大化していきそうな予感

初めて触ってみて、middlewareやpluginを読み込んだり、ヘッダー情報を書き込んだり、グローバルなcssを読み込んだり、環境ごとのビルドを設定したりと、いろんなことを設定できるコアのファイルとしてnuxt.config.jsってのがあって、これがプロジェクトルートに置いてある。 結構これの設定が重要で、アプリーケーションが大きなるに連れて、このconfigファイルを大きくなりそう。。。