どうもこじらです。
Vue.jsからNuxt.jsへのプロジェクトの移行が完了しました。
期間は1週間で終わりましたが、ファイル数も多く、いろいろな問題が発生したので作業時間は40時間ぐらいかかりました…。
今回は、移行する前に分からなかったことや、移行時の具体的な作業内容について書いていきます。
Nuxt.jsってどうやって導入するの？
- Nuxt.jsってどうやって導入するの？
- そもそもNuxt.jsって何？プラグイン？
Vue.jsしか知らない人はまずここから始まると思います。
しかし、世の中の記事はこれを理解している前提で話を進めやがります。
これではNuxt.jsの実態がなかなか掴めませんよねぇ…。
Nuxt.jsを端的に表現するとしたら、Nuxt.jsはVue.js用のプロジェクトテンプレートって感じです。
Vue.jsのフレームワークみたいな？
そのため、「導入する」というより、「移行する」が正しいです。
楽に移行する方法は？
ここで、
「Vue.jsからNuxt.jsに移行する簡単な方法ってないの？」
という疑問が沸いてきますよね。
残念ながらそういった便利ツールはありません。
手動で
- Nuxt.jsをインストールしてプロジェクト作成
- ソース移行
- ソースを修正
- routerを構成
を行い、移行させていく必要があります。
面倒くさそうですよね。
ただ！この手間をかける価値は確実にあります！
（…いや、確実は盛ったかもな🤔）
具体的な作業内容
Vue.jsからNuxt.jsに移行する際の具体的な作業内容を書いていきます。
プロジェクト作成
npmの場合は
npx create-nuxt-app <project-name>
でNuxt.jsプロジェクトが作成されます。
実行すると質問攻めにあいますが、怖気づかず頑張って耐えてください。
その後は……まぁVue.jsをある程度理解している方が見ていると思うので初歩的な話は割愛します。
ソースを移動させる
Vue.js素使いの場合だと、vueファイルの配置場所はバラバラ、jsファイルもバラバラという状況になりがちですが、Nuxt.jsの場合は目的ごとの配置場所がきっちりと決まっています。
雰囲気だけ説明するとすると、以下のような対応表になります。
| Vue.js | Nuxt.js |
|---|---|
| main.js | middleware, plugins配下 |
| app.vue | layouts/default.vue |
| css等スタイルファイル | assets配下 |
| view配下 | pages配下 |
| components配下 | components配下 |
| store/index.js | store/index.js |
| router/index.js | なし |
という感じになります。routerが「なし」になっている部分に関しては後程説明します。
一番大変で難しいのは、main.jsに記述していた内容の移行ですね…。
この辺の詳細を知りたい場合は、下記のqiitaの記事を参考にしてもらえると良いと思います。
サーバ側で実行する処理部分を修正
Nuxt.jsを使用する場合はSSR（サーバサイドレンダリング：HTMLの生成をクライアント側で行わず、サーバ側で生成した後にクライアントに渡す仕組み）で使用するのが普通だと思います。
というか、その前提で書きますｗ
Vue.js素使いでSPAとして動かしている場合、すべてクライアント側で処理を行っていますよね。
そのソースを使って、そのままSSRとして動かそうとすると、
「documentがねぇ！」
「windowがねぇ！」
と怒られます。
理由はDOMを使ってHTML側にアクセスしようとしてるからですね。
これを直していく必要があります。
client-only
以下のようなHTMLにアクセスをしているコンポーネントがあるとします。
<DomDomAccessComponent />
これを
<client-only> <DomDomAccessComponent /> <client-only />
このようにclient-onlyタグで囲むと、このコンポーネントはクライアントのみで実行されます。
ちなみに、no-ssrというタグもありますが、こっちはclient-onlyの古いバージョンっぽいです。
厄介なのは、それではうまくいかないものも結構多いことです。。
その場合はプラグイン化させる必要があります。
やり方は公式にもありますし、私も過去記事で少し触れてるのである程度割愛します。
ちなみに、ソース上では
if (process.client) {
// クライアントだけで処理
}
if (process.client) {
// サーバだけで処理
}
というように書くだけで簡単に実現できます。
routerでの値の渡し方の見直し
router-linkで値を渡すとき、
- params
- query
の2パターンがありますよね。
Vue.js素使いの場合はこの辺が雑になりがちですが、Nuxt.jsだと実害が出てきます。
実害
まずですが、Nuxt.jsではrouter-linkで渡した値はpropsでは受け取れません。
以下のような記述方法に書き換える必要があります。
data () {
return {
id: this.$router.params
}
}
そして、一番の実害は動的ルートマッチングを使用したページに直接アクセスしたときに404になってしまうことです。
/user/:id
上記のようなルートに直接アクセスした場合ですね。
これもSSRに起因しています。
SSRの場合、サーバ側でHTMLを事前に生成しておきますが、動的ルートマッチング用のHTMLファイルは生成されないためです。
だってNuxt側も、「うーん、何ていうHTMLファイルを生成すればいいんだろう？」ってなりますもんね。
この対策方法は色々ありますが、paramsで渡していたものをqueryに書き換えるのがベストプラクティスかと思います。
/user/detail?id=123
みたいな形式ですね。
routerとpagesディレクトリ
Nuxt.jsではVue.js素使いの場合のroute/index.jsがありません。
pagesディレクトリに配置したファイルを見てNuxt.jsが自動でindex.jsを生成します。
最初は
「は？不便だなおい！どうにかしてくれよ！」
と思っていましたが、慣れると「これもアリだな🤔」と思えてきます。
index.vue、_idなどの名前を駆使してルーティングを作成していく訳ですが、この辺は都度調べて書いた方が良いと思うので、これも割愛します。
困ったタイミングで公式サイトを見てください。
ようこそNuxt.jsの世界へ
Vue.jsからNuxt.jsの移行は結構な手間ですが、やる価値は確実にあります。
Vue.jsの知識があれば、学習コストも低いです。
というか、Webアプリケーションを作成し、公開する予定の人は絶対にNuxt.jsで作るべきです。
SPAは作成が簡単でも、ホビー止まりです。
だって、OGP対策すらできないんですからねｗ
ページごとに動的にheadを定義できないのは支障が多すぎます。（支障が出ないとしたら作りが甘いんじゃないかとまで思う。）
まぁ、Nuxt.jsを使用しなくてもSSRは実現できるようですが、私程度の知識では無理でした。
私と同じ轍は踏んでほしくないので、公開する目的でVue.jsを使用している人は早めにNuxt.jsに切り替えてください。
本当面倒臭くなるのでｗ
この壁を乗り越えてモチベーションを保ち続けられるならいいですが、折れたらもったいないですからね。
まぁ、今回はこんな感じで
OGPの設定方法も色々苦戦したので、そのうち記事にしていきます。
こじらでした
じゃ
コメント