最近、ソフトウェアでアプリケーションを作るとき、 固有のフレームワークを使うのがごく当然のこととなっている。 この場合、フレームワークとは、ソフトウェアフレームワークのことである。 ではソフトウェアフレームワークとは何かというと、 アプリケーションを作るときに必要な機能が一通り備わっている環境のこと、 と理解している。Wikipedia には詳しい解説があるが、まずは私の中では上記の簡単な定義ですませる。
問題はその一通り、が表す範囲が狭いか広いか、深いか浅いか、簡単か複雑か、 その他いろいろな要因があるのだと思う。
唐突だが、自分が疑問に思ったところが始めたい。 あるソフトウェア開発に携わっていて、Nuxt という文字が飛び込んできた。Nuxt とは何か。 調べると、Nuxt として単体表記するよりは、Nuxt.js のように拡張子 .js をつけて呼ぶことがほとんどである。 そこで Nuxt.js を調べると、Vue.js アプリケーションを作成するためのフレームワーク、とある。 では、Vue.js とは何か。コンピュータを使っていると、X を調べるために Y が必要で、 そのためには Z を導入しなければならない、という「ヤクの毛刈り」が待っている。 そういうものだと割り切って、心を落ち着けよう。 なお、Nuxt は「ナクスト」と読むのだろう。「ヌクスト」ではないはずだ。
さて、Vue.js とは、View 側に特化したライブラリ、ということである。 こんどは View 側ということばが出てきている。View 側とは何か。View ではない側があるのか。 またヤクの毛刈りをしないといけないのか。自分の理解を超えているが、とりあえず落とし前をつけておくと、 X 側といったときに、この場合は背景にソフトウェアアーキテクチャーパターンが想起されているものとする。 古典的には MVC (Model-View-Controller) モデル（パターン）であり、そして Vue.js が活躍する現代では、 MVVM パターンが代表的である。MVVM とは、Model-View-ViewModel を意味する。 なお、Vue.js は「ヴュージェイエス」と読むのだろう。ドットは読まなくていいはずだ。
せっかくなので、MVVM について説明しよう。個別パターンが担うものは次の通りである。
Vue.js にはプログレッシブレブフレームワーク、という別の定義がある。こんどは、 フレームワークという定義が出てきている。どうしてだろう。すでに Nuxt.js がフレームワークをもっているのに、 フレームワークの上にフレームワークが載っているのか？ そういうフレームワークの定義はありか？
こういうときの言い訳は巧みである。まず、Vue.js は、厳密な意味でのフレームワークではない、 とどこかに書いてあった（どこに書いてあったかは忘れた）。 厳密な意味のフレームワークとは何か。これはあくまで私個人の理解である。 Wikipedia の「ソフトウェアフレームワーク」の記述を参考にした、 「メインループ」あるいは「イベントループ」をアプリケーション側が持てば、 それは厳密な意味でのフレームワークであり、もし持たなければフレームワークではなく、 単なるライブラリである、という理解である。じゃあ、 このメインループやらイベントループやらは何かということになるが、ここで私の思い込みを入れれば、 「いうことをやれ」といえる側が狭義のフレームワークであり、 「いわれたことをやる」だけなのが狭義のライブラリである。
Vue.js と Nuxt.js の関係に戻ろう。Vue.js はそのときどきで都合よく「ライブラリ」といったり、 「フレームワーク」といったりする。ライブラリというのは、先ほど述べたように、View だけで成り立っている、 という意味だろう。ではフレームワークといっていいのか。厳密な意味でのフレームワークではないが、 親和性の高い狭義のフレームワークならあるよ、 だったら、Vue.js をフレームワークといってもまちがいとはいえないのではないか。 そのような考えをもっているのだと思う。そして、親和性の高いフレームワークとして、Nuxt.js がある、 と考えればいいだろう。
Nuxt に話を戻そう。Nuxt.js とは、Vue.js アプリケーションを作成するための （狭義の）フレームワークである。特に、シングルページアプリケーションを作るのにうってつけのようだ。 なんだろう、シングルページアプリケーションとは。 以下、シングルページアプリケーション (Single Page Application) のことを、 頭文字をとって SPA と呼ぶ。SPA とは、その名前の通り、 単一の HTML ページを取得し、以後はその単一ページをユーザのアクションにより、 取得したページを更新する、というアプリケーションをいう。
ここで古い人間である私は思い出した。 最近の Web のページは、「次のページ」、「前のページ」という概念がないものが多くなった。 たとえば、日付順に新しい記事がから徐々に下に向かって古い記事が出てくるページがある。 では古い記事を見ようとして下のほうにスクロールしていくと、下にスクロールしたころを見計らって、 アプリケーションが裏で読み込みを開始し、しばらくすると、 実はさらにスクロールする余地が新たに表示されるインターフェースになっているのだった。
古い人間である私は、多くの情報を表示するには、１画面に表示される情報をページ単位で集約し、 ページをまさに本のように前後にめくることでしかできないと思っていたのだった。 私自身は積極的には使わなかったが、このような手法を「面繰り」という人はシステム屋に多かった。
Nuxt.js の特徴として、サーバサイドレンダリングへの対応が可能、といううたい文句が使われる。 では、サーバサイドレンダリングとはなんだろう。以下、 サーバサイドレンダリング（Server-Side Rendering）を SSR と呼ぶことにする。 なお、このように英語だけの略語が多いのがこのコンピュータ業界の特徴であるが、 これにめげてはコンピュータ業界では食っていけない。もちろん、 このコンピュータ業界にも略語が分からない人はいるが、 その人は管理職になったのでこのようなことばを覚える必要がなくなっただけのことであり、 管理職になっても顧客や下請や部下や上司との間の交流のために、 仕事の範囲によっては必要な略語を使うことはあるが、意味は不正確なこともままある。
Vue.js における SSR とは、Vue.js のコンポーネントを事前にサーバ側で HTML として出力 （レンダリング）しておき、 ユーザ側からの初回アクセス時にレンダリングした HTML ページをサーバ側から返す、 という手法をいう。ここでレンダリングとは、複雑な画像や表示をモデルから計算して表示する、 というほどの意味である。
サーバ側のレンダリングがあるならクライアント側のレンダリングもあるのか、 と言われればその通りで、何も考えなければ、そのほうが容易に実現できる。 言い換えれば、クライアント側のレンダリングより SSR のほうが、 開発の労力が増大する、ということである（なお、クライアントサイドレンダリングのことを、 CSR と略すことはほとんどない。CSR とくれば、ふつうはコンピュータとは関係のない、 Corporate Social Responsibility 、すなわち企業の社会的責任を表すことばだからだろう。
さて、Nuxst.js を使うにはどうすればよいのだろうか。 ものの本には、Vue CLI を使う、とある。Vue CLI とは、 Vue.js 向けのアプリケーション開発環境をセットアップする機能を提供する、 公式のコマンドラインツールである。なお、開発環境のセットアップ機能以外の機能も Vue CLI には含まれることを付け加えておく。
まりんきょ学問所 ＞ コンピュータの部屋 ＞ フレームワークの呪縛