はじめに
仕事でNuxt.jsを使ったのですが、その際にNode.js/Vue.js/Nuxt.jsがそれぞれ何なのかわからず、自分なりに調べたことをここにまとめておこうと思います。
情報量としてはまだまだ少ないので、メモレベルの内容になります。
Node.jsとは
Node.jsとはJavaScriptをサーバー側で動作させる実行環境です。
特徴としては、大量の同時接続をさばけることで「ノンブロッキングI/O」方式を採用しているそうです。
(ここについては、詳しく理解できていないので参考URLを貼っておきます。)
※参考:https://www.kagoya.jp/howto/it-glossary/develop/nodejs/
また、従来はフロント側とサーバ側で言語が分かれていたのが、同じ言語で開発ができるという点でも非常に注目されています。
Vue.jsとは
Vue.jsというのはJavascriptを用いてフロントエンドの開発を行うNode.jsのフレームワークとなります。
逆に、フロントエンドのフレームワークとしてはExpress.jsがあります。
※上記は一例で、他にもたくさんフレームワークはあります。
Nuxt.js(ナクスト)とは
Vue.jsのフレームワークです。
Vue.jsがUI等のフロントエンド向けのフレームワークであるに対し、
Nuxt.jsはUI以外のWebアプリケーション開発に必要な機能が最初から組み込まれていて、以下はその例になります。
・SSR(サーバサイドレンダリング)
まず、Vue.jsはクライアント側でレンダリングするSPA(Single Page Application)です。
ですが、Nuxt.jsはサーバ側でレンダリングする SSR(Server Side Rendering)や、ビルド時に全コンテンツを含んだ静的ファイルを生成するSSG(Static Site Genaration)も設定することができます。
・ルーティング
まず、Vue.jsの場合ルーティング設定をするために、ソース内にコードを複数記述する必要があります。
ですが、Nuxtはそういった手間が必要ありません。
デフォルトでルートディレクトリ配下に「pages」というディレクトリができていて、そこにVueファイルを配置して、vueファイルの名前にアクセスするだけでページが表示されます。
参考サイト