本記事は、NuxtとNodeの違いを
わかりやすく解説します
Nuxt.jsとNode.jsって、
名前が似ていてわかりにくいですよね
本記事では具体的な例を使って、
初心者でもわかるように解説します!
対象読者
・Nuxt.jsとNode.jsと違いを知りたい
・Nuxt.jsを詳しく知りたい
・Node.jsを詳しく知りたい
NuxtとNodeは標準技術です
遅れを取らないために、理解しましょう!
- Nuxt.jsとNode.jsの違い
- Nuxt.jsとは?
- Node.jsとは?
- Nuxt.jsとNode.jsの勉強方法
本記事の結論
Nuxt.jsとNode.jsの違い
- Nuxt.js … アプリケーションフレームワーク
- Node.js … サーバサイドのJavaScript実行環境
↓具体的に、解説
副業でVueを始める方法を解説
副業してない人はモッタイナイ!
コロナ状況化だからこそ、
稼ぎながら、スキルを身につけるチャンス!
副業で、失敗を避ける方法や探し方を解説
↓
↓さっそく、一緒に見ていきましょう!
Nuxt.jsとNode.jsの違いとは?
Nuxt.jsとNode.jsの違いは、こちら↓
Nuxt.jsとNode.jsの違い
webアプリケーションフレームワーク
(webサイトを作るための便利な仕組み)
サーバサイドのJavaScript実行環境
↓1つずつ、解説します!
Nuxt.jsとは、アプリケーションフレームワーク
Nuxt.jsとは、
フロントエンドのアプリケーションフレームワークです。
フロントエンドアプリケーションフレームワークとは、webサービスを作るときの便利な仕組みのことです。
Nuxt.jsのルールに沿って、ファイルを新規作成&実装して、サーバを動かせばwebサイトが完成します。
東京都のコロナ感染症サイトはNuxt.jsで作られています。
→ 東京都コロナ感染症サイト
Nuxtについては、
こちらで詳しく解説
ちなみに、フロントエンドアプリケーションフレームワークの呼ばれ方はいろいろあります
- フロントエンドフレームワーク
- FEフレームワーク
- フレームワークなど
Nuxt.js理解のポイント
- Nuxt.jsとは、フロントエンドアプリケーションフレームワークのこと
- 簡単にwebサービスを作ることができる
- 有名なサイトでは『東京都のコロナ感染症サイト』がNuxt.jsで作られている
もっと理解した人におすすめの本
↓次は、Node.jsについて解説
Node.jsとは→サーバサイドのJavaScriptの実行環境
Node.jsとは、
サーバサイドのJavaScriptの実行環境です。
わかりにくいですね!笑
→ 具体的に説明します!
JavascriptとNode.jsの違い
ブラウザ上で実行される言語
(PCでは実行できない)
JavaScriptをPCやサーバ上で実行できるもの
Node.jsの具体例(JavascriptとNode.jsの違い)
JavaScriptとは、ブラウザ上で実行できる言語
JavaScriptは、ブラウザ上でプログラムを実行できる言語です。
JavaScriptのファイルを書いて、HTMLと一緒にブラウザに載せると実行できますよね。あれです!
もしくは『右クリック→検証』でConsoleタブで下記を打つと実行できます
# tmpという名前の変数に、文字列を入れる
tmp="Nuxt.jsとNode.jsの違い"
(エンターを押して、実行)
# tmpを表示する
cosole.log(tmp)
Node.jsとは、PCやサーバ上でJavaScriptを実行できるようにする環境
Node.jsとは、ブラウザだけではなくPC上でJavaScriptを実行できるようにしたものです。
Node.jsを使うメリット
- いちいちブラウザで実行する手間が省ける
- ブラウザでは実行が難しいものを実行できる
→ Node.jsとは『PCやサーバ上で実行できるようにする設定』です
Node.jsを利用するには、Node.jsをインストールする必要があります。
→ 参考:MacにNode.jsをインストール
Nuxt.jsとNode.jsの違いのまとめ
Nuxt.jsとNode.jsの違いを簡単にまとめた表↓
Nuxt.js | Node.js | |
---|---|---|
特徴 | フロントエンドフレームワーク | サーバサイドのJavascript実行環境 |
メリット | webサービスを簡単に作ることができる | ブラウザ以外でJavaScirptを実行することができる |
参考書 | Vue.js&Nuxt.js超入門 | Node.js超入門 第3版 |
Nuxt.jsとNode.jsの勉強方法
Nuxt.jsとNode.jsの違いがスキルを身につけて使えるようにしましょう!
Nuxt.jsとNode.jsの
勉強方法を解説します↓
Nuxt.jsとNode.jsの勉強方法
- 公式チュートリアルを使った勉強方法
→ 上級者におすすめ
→ 難易度:高 - 本を使った勉強方法
→ 初心者〜中級者におすすめ
→ 難易度:中 - 動画を使った勉強方法
→ 初心者におすすめ
→ 難易度:低
↓それぞれ、詳しく解説
1. 公式チュートリアルを使った勉強方法(上級者向け)
公式チュートリアルを使った勉強方法を解説します
Nuxt.jsの公式チュートリアルの進め方
Nuxt.jsの公式チュートリアルはよくできています!
「勉強は公式サイトで十分です!」
1から順番にやりましょう。
また、実際に手を動かしながらやることをお勧めします。
さらに、Typescriptで書く方法を一緒に学びましょう。
→ 理由 … TypeScriptが標準技術のため
またNuxt.jsからAPIを使うためには『Axios』というHTTPクライアントを使うのが一般的です。そちらもチュートリアルを使って勉強しましょう。
(HTTPクライアントとは、APIをコールするためのもの)
Nuxt.jsをチュートリアルで
勉強するポイント
- 1番から順番に作りながら学ぶ
- TypeScript化も一緒に学ぶ
勉強サイトまとめ
Node.jsの公式チュートリアルの進め方
Node.jsの公式チュートリアルは、進めにくいです。
そのため、本を使った勉強方法がおすすめです。
2. 本を使った勉強方法(中級者向け)
本を使った勉強方法を解説します。
Nuxt.jsの本の勉強方法
Nuxt.jsはVue.jsをセットで覚える必要があります。
詳しくはこちら
→ NuxtとVueの違いを5分で解説
Node.jsの本の勉強方法
Node.jsは本で詳しく解説されています。
そのため、本に沿って環境構築、仕組みを理解しましょう!
3. 動画を使った勉強方法
最近は動画を使った勉強方法を紹介します。
Nuxt.jsの動画教材
Nuxt.jsの動画教材(ベストセラー)動画では、基本的な内容から応用的なサイト作成まで学習を行います。
動画教材の内容
- 開発環境構築
- Nuxt.jsの仕組み
- HTMLの表示方法
- APIの連携
- SPAアプリの作成
正直、開発環境と仕組み理解に加えて、APIとSPAを一気に勉強できるのは効率的
Node.jsの動画教材
Node.js + Express で作る Webアプリケーション 実践講座(ベストセラー)Node.jsの動画でも、webアプリケーションを作りながら学びます。
Expressとはwebサーバのことで、
Nodeを使うならExpressを使うのが一般的です。
動画教材の内容
- 開発環境構築
- Node.jsの仕組み
- NodeとExpressの理解
- リクエストレスポンスの学習
Nodeは、本やサイトでまなぶのはむずい。。
動画ではよくまとまっているので、時間のない人におすすめ
Nuxt.jsとNode.jsの勉強方法のまとめ
Nuxt.jsとNode.jsの勉強方法
- 初心者 … 動画で、サクッと理解する(挫折しない)
- 中級者 … 本で、必要な時に理解する
- 上級者 … 公式サイトで、自分で理解する
Nuxt.jsとNode.jsの違いは環境orフレームワーク!
今回はNuxt.jsとNode.jsの違いを解説してきました。
Nuxt.jsとNode.jsの違い
- Nuxt.js … フロントエンドアプリケーションを作るためのフレームワーク(便利な仕組み)
- Node.js … サーバサイドのJavaScript実行環境
エンジニアに注目があつまり、Nuxtの求人が増えています。
スキルを身につけてNuxtのエンジニアになる前に、
失敗しない求人の選び方を理解しましょう
求人には地雷案件もあるので、正しく選びましょう
地雷案件はやめるのも大変なので、入る前にブロックする
こちらの記事で紹介しています。
→ Vue/Nuxt.jsのおすすめ求人サイト(失敗しない案件の選び方)