0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Node.js/Vue.js/Nuxt.jsとは

Last updated at Posted at 2022-11-24

はじめに

仕事で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ファイルの名前にアクセスするだけでページが表示されます。

参考サイト

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?