Vue/Nuxt→React/Nextの共通点,差異,そして世界でのトレンド

教育関連のAIシステムをドイツで研究しているのですが、データ収集のためにインターフェースを作る必要が出てきました。そのために、React/Nextをやる必要が出てきたため、Vue/Nuxtの知識を再利用することを試みます。

日本と欧州でのトレンドが微妙に違う!

今ヨーロッパに留学しているのですが、ドイツではNuxtよりNextの方が圧倒的に優勢だそうです。一方、日本では、Nuxtの方もまだ耐えていると聞きます。

そのことを、Googleトレンドから定量的に見てみましょう：

東京とベルリンでの"Next.js", "Nuxt.js"の２キーワードの割合比較です。（１年間）

ドイツでは「Nextしか勝たん？」状態

日本でもNextが人気だが、Nuxtも頑張っている

参考：　全世界レベルでNextが流行っている？

あまりトレンドを追ってなかった自分ですが、こんな状態になっていたのですね。。。

Nuxt/Vueを勉強した自分からすると「ぴえん」なわけですが、乗るしかない、このビッグウェーブに。

Nuxt→Nextへ「転移学習」する

next-create-appで作ったプロジェクトは、nuxt-create-appで作ったプロジェクトと、フォルダの構成と各ファイルの中身の構成の点でも、類似性があるように思えます。ですので、from scratchからNext/Reactを学ぶのではなく、Nuxt/Vueの知識を活かそうと考えました。細かいところは、後で僕の脳内でファインチューンしたらいいので、共通点と差異をなんとなく把握するのがゴールです。

大まかな違いに着目

観察: Nextプロジェクトにあるファイルやフォルダ

いくつか気になったことだけ述べると：

• next.config.js

  • これはNuxtのnuxt.config.jsに対応するようです。

• pages/index.js

  • ページやコンポーネントを構成するファイルがNuxtでは.vueであったのに対し、Nextでは.js（typescriptを使わない場合）になるという違いがあるようです。

• pages/_app.js

  • Nuxtで存在したスラグがNextでも使えるようです。このファイルを除いたところ、具体的にどのようにパラメタを渡すのかは理解してませんが、個人的にスラグは使わないのでこの程度の理解にとどめておきます。

• pages/contents/

  • このフォルダ、nuxt/contentとか使ったことある場合はわかりやすいですね。つまり、 nuxt/contentと同様に静的なWebページ等を作りたい場合は、Nextでもcontentに.jsonなどのファイル格納して、スラグをいじればいいので、感覚的にはほとんど同じですね。ありがとうございます😂

観察: .jsファイルの構成要素

Vue/Nuxtでは<template></template>の中にマークアップをかき、<script></script>の中にVue独自のオブジェクトとdata, computed, methodsなどの関数やプロパティを記述します。一方で、Nextでは、それらは.jsファイルの中の関数に対応します。そのファイルの、ある関数の定義の中で、ローカル変数としてNuxtで言うところのdataで定義されいたような変数がNextでは記述されます。

さて、各.jsファイルの中を観察すると、関数ではテンプレート的なものを返しています。これが、Nuxtでの<template>に対応するものなのでしょう。これはJSXというものだそうです。

return (<Sushi fish="tuna">Clickable Sushi<Sushi/>)

JSXは例えば、以下のように変換されるとのことです。

React.createElement(
  Sushi,
  {fish: 'tuna'},
  'Clickable Sushi'
)

なんか見たことがある気がしましたが、DOMのdocument.createElementと似ていますね。
VanillaJS(古き良きJavaScript)の知識を再利用できるように設計していただいてありがとうございます。

document.createElementの形

document.createElement('ul', { is : 'expanding-list' })

React独自の概念らしきものに着目

.jsファイル内でreactからimportされているものの中で気になったのが、useState, useEffectの二つです。

観察: useState

なんかよく見るやつ

const [ sushiState, setSushiState ] = useState(‘fresh’)

=の左の[sushiState, setSushiState]はDestructuring assignmentだそうです。似たような機能はPythonにもありましたね。

[]内の左の変数sushiStateが何らかの状態を表す値を格納する変数で、右のsetSushiStateというセッターのような関数で、状態値を書き換えれるようです。また、useState()のargは初期値のようです。

例えば、sushiStateを変更したいときはこんな感じなのでしょう：

古びた寿司の状態を変更する

setSushiState('expired')

また、状態に応じて分岐をしたいときは、こんな感じでしょう：

寿司が食べれるかどうか分岐したいとき

if ( sushiState === ‘expired’ ){
   console.log('Sorry, this sushi is already dangerous to eat.')
   console.log('Please consider buying new one at Netto.')
}

変数の状態を変更する作業が、Nuxt/Vueとはやや違う気がしますね。
個人的には、値の更新にsetterを作ることができて、好きな名前をつけれるのが、処理がわかりやすくていいですね。

観察: useEffect

これもコードで見かけたのですが、おそらくレンダリングとは切り離したい処理を記述するのに使っていると思います。
イベントの登録等は適切に扱わないと、何度も何度もレンダリングごとに実行されてしまうので、そのためにイベント関連処理をuseEffectで用いているようです。

Nuxt/Vueでは直接addEventListenerを扱うことがなかったのですが、Next/Reactのコード見ている限りでは、VanilaJSのようなイベントを扱うことがありそうです。Nuxt/Vueでは、この手のことは考えることがなかったので、個人的にはuseEffectのユースケースについて、今度もう少し調べてみようと思います。

所感

• フォルダとファイル構成等は基本的に似ている。
• Next/Reactの方が、Nuxt/VueよりもVanillaJSに近い。
• JSXという概念や、stateに関する処理が、Nuxt/Vueとは異なり、注目する必要があるかもしれない。
• useEffectなどに関して、Nuxt/Vueよりもレンダリングのタイミングについて注意しないといけないのかもしれない。
  • Nuxt/Vueで考えることがなかったのは、次のどちらなんだろう？またわかったら記事書こうと思います。
    • (i)Nuxt/Vueが複雑なことをやってくれていた? or (ii)自分が浅い部分しか触ってなかった?

あなたの思う違いはなんですか？ぜひコメントへ！

記事を書くことで、記憶に定着するのが目的ではありますが、皆さんからのアドバイス等もいただけたら幸いです。
あなたの思う、Nuxt/Vue, Next/Reactの違いは？つまりやすいところはなんでしたか？
ぜひコメントでお教えください！（学ばさせていただきます）

そして、ぜひとも各フレームワークについての愛を語ってください！