プログラミング

Node.jsとブラウザで動くJavaScriptの違いと書き方

  • このエントリーをはてなブックマークに追加
  • LINEで送る

どうも、こんにちわ!

JavaScriptについて調べてるあなたへ…

『JavaScriptってブラウザ以外で動くの?』

『そもそもNode.jsって何?』

『JavaScriptとNode.jsで書き方は違うの?』』

『あれ?JavaScriptってなんだっけ…』

このような疑問に答えます。


SEおっさん
SEおっさん
SE歴20年のオッサンが詳しく解説するぞい!
※保有資格
応用情報技術者/OracleMasterGold/Java EE Webコンポーネントディベロッパ/Pythonエンジニア認定データ分析/簿記2級

Node.jsとブラウザで動くJavaScriptの違い 

「ブラウザのJavaScript」と「Node.jsのJavaScript」の違いは、実行環境です。

Node.jsに搭載されたJavaScriptは、サーバ上でJavaScriptコードを解釈して実行します。

Webブラウザに搭載されたJavaScriptは、ブラウザ上でJavaScriptコードを解釈して実行します。

 

たろちゃん
たろちゃん
なんのこっ茶

だよねー
SEおっさん
SEおっさん


Node.jsとブラウザのJavaScript実行環境

私も初めはNode.jsとブラウザで動くJavaScriptの違いがピンと来ませんでした。

「ブラウザのJavaScript」と「Node.jsのJavaScript」の違いは、実行環境です。

  • Node.js…サーバ上でJavaScriptコードを解釈して実行
  • Webブラウザ…ブラウザ上でJavaScriptコードを解釈して実行

ちょっと次の図を見て下さい。イメージが伝わるわかるかな?

サーバで動くNode.jsとブラウザで動くJavaScriptは実行環境が違いますよね。

サーバ上ではNode.Jsでブラウザ上ではJavaScriptということです♪

 

従来のJavaScriptの実行環境は、クライアントのWebブラウザの一択。

ブラウザに搭載されたJavaScriptエンジンがJavaScriptコードを解釈して実行してました。

逆に言うと…

いくらJavaScriptに精通したプログラマがいても、Webブラウザでしか処理できなかったのです。

Webブラウザ上で実行できる事には限りがあります。

そこで、どっかのエライ賢者が考えました。

 

『JavaScriptがサーバで動いても良くね?』

 

そうして誕生したのがNode.jsです。

Node.jsのJavaScriptエンジンが、サーバ上でJavaScriptコードを解釈して実行します。

JavaScriptハサーバ上でも実行されるバックエンド技術としても有効な言語となったのです。

JavaScriptもPHPやPythonの同じバックエンド言語の仲間入りって訳じゃ。
SEおっさん
SEおっさん
たろちゃん
たろちゃん
JavaScriptは「Node.js」という大きな武器を手に入れた!
ってコトだね。

Node.jsは言語ではなくJavaScriptの実行環境

Node.jsは言語ではありません。サーバ上でJavaScriptが動く実行環境です。

「ブラウザのJavaScript」と「Node.jsのJavaScript」の違いは、実行環境です。

重要なのでもう一度

Node.jsは環境』です。

言語では無いことがポイントですよ~

たろちゃん
たろちゃん
ふーん。環境かぁ。
最後に「.js」って付いてるからライブラリと思ってた…

何度もしつこいですが、Node.jsはあくまでJavaScriptの実行環境です。

この実行環境であるNode.jsを使用したJavaScriptのライブラリがあるんです。

有名なところではReactとかVue.js・Nuxt.jsとか

扱うJavaScriptのライブラリがいっぱいあるから「.js」って付いてるのかもね。

Node.jsとブラウザで動くJavaScriptの書き方の違い

JavaScriptはプログラム言語です。

実行環境がブラウザでもNode.jsでもJavaScriptの書き方は基本的に同じ。共通です。

良く考えたら当たり前ですよね。

if文やfor文の構文、変数や関数の宣言などの書き方は全く変わりありません。

構文や宣言などの基本的な文法が違ったら同じJavaScript言語とは言えませんよね。

JavaScriptで書かれたプログラムをJavaScriptエンジンが解釈して実行するのです。

実行環境がブラウザでもNode.jsでもJavaScriptエンジンは同じように解釈して実行します。

たろちゃん
たろちゃん
じゃぁ、何が違うの?


JavaScriptエンジンに実行環境による特有の機能があるからです。

ブラウザではHTML上で実行するから意味のある機能が追加されています。

JavaScriptエンジンはDOMを介してレンダリングエンジンと連携して実行されるのです。

具体的な書き方の例をあげれば…

DOMを操作するgetElementByIdです。


また、

Node.jsにはNode.js Code Modulesというサーバー上で実行する機能が追加されています。

具体的な書き方の例をあげれば…

「サーバー上のファイル読込み処理」です。

Webブラウザによるクライアント側でファイル読み込みはセキュリティ上禁止されており、サーバ上でのみ許されるのです。

たろちゃん
たろちゃん
だんだん解ってきたぞ!

Node.js はV8というJavaScriptエンジン上に作られています。

ちなみに、V8はGoogleが開発するオープンソースのJavaScriptエンジンで車のエンジンから命名されています。

なんかオシャレですね。

Node.jsとReact・Vue.jsの違い

Node.jsはサーバ上でのJavaScriptの実行環境です。

ReactやVue.jsはNode.jsを使用したJavaScriptのライブラリです。

つまり、

Node.jsは環境でReactやVeu.jsはJavaScriptライブラリです。

明確な違いがありますね。

もう少し、Noede.jsとReactの関係や利用シーンについて掘り下げて行ってみましょう。

Node.jsはサーバ上でのJavaScriptの実行環境です。

SEおっさん
SEおっさん
では、サーバとは何じゃ?
Webサーバとか?かな?
たろちゃん
たろちゃん
SEおっさん
SEおっさん
惜しい。半分正解!
50点

ここで言うサーバとは、Node.jsをインストールしたマシンです。

SEおっさん
SEおっさん
では、マシンって何じゃ?
物理サーバかな
たろちゃん
たろちゃん
SEおっさん
SEおっさん
またまた。半分正解!
50点

ここでいうマシンとは…

Node.jsをインストールできるマシン全てを指します。

物理サーバや仮想サーバ・パソコンがマシンということになりますね。

たろちゃん
たろちゃん
え!?パソコンも含まれるの?
Oh! Yes!
SEおっさん
SEおっさん

パソコンでもNode.jsをインストールしたら実行できるのです。

つまり、

パソコンにNode.jsをインストールしたら、サーバと同じようにJavaScriptを実行できるってこと。

Node.jsはパソコンでも実行できるので、

ReactやVue.jsを使ったWebアプリケーションの開発が自分のPCでできる

という訳です。

ここに大きなNode.jsの利用価値があるんですね♪

ReactやVue.jsの便利なライブラリ・フレームワークを使うと、開発効率が大幅にアップします。

たろちゃん
たろちゃん
でも、リリースはどうするの?

もちろん、サーバにアップロード・デプロイしてリリースします。

パソコンに皆をアクセスさせる訳には行きませんよね。

ReactでBuildすると、Node.jsを利用しないJavaScriptへ変換されます。

具体的にいうと…

React特有のIndex.jsxがindex.htmlに置き換わって、普通のブラウザで実行できるファイルにコンバートされます。

イメージとしてはコンパイルのイメージですね。

機械語へ変換される訳ではないですが、通常のWebブラウザが解釈できるJavaScriptへ変換されます。

これで、サーバ側にNode.jsがインストールされていなくても、Webブラウザで動作するわけです。

もちろん、サーバにはApacheなどのWebサーバはインストールする必要はありますが、Node.jsはインストールする必要はありません。

逆に言うと…

サーバにNode.jsをインストールすれば、ReactでBuildせずに開発環境で動いたjsxファイル等をそのままデプロイしても動きます。

開発PCからサーバへデプロイするイメージ図です。

ちなみに、

Node.jsはjsってついてるからライブラリと間違いやすいですね。

ReactやVeu.jsのライブラリを扱うからjsって付いてるのかもしれません。

まとめ!Node.jsとブラウザで動くJavaScriptの違い

いかがでしたでしょうか?

Node.jsとブラウザで動くJavaScriptの違いや書き方を解説いたしました。

では、振り返ってみましょう!

「ブラウザのJavaScript」と「Node.jsのJavaScript」の違いは、実行環境です。

  • Node.js…サーバ上でJavaScriptコードを解釈して実行
  • Webブラウザ…ブラウザ上でJavaScriptコードを解釈して実行

 

「ブラウザのJavaScript」と「Node.jsのJavaScript」書き方の違う点は、実行環境による特有の機能。

ブラウザのJavaScript
  • ブラウザではHTML上で実行するから意味のある機能が追加
  • JavaScriptエンジンはDOMを介してレンダリングエンジンと連携して実。

【具体的な書き方の例】

  • DOMを操作するgetElementById
Node.jsのJavaScript
  • Node.jsにはNode.js Code Modulesというサーバー上で実行する機能が追加

【具体的な書き方の例】

  • サーバー上のファイル読込み処理

本記事を要約すると…

Node.jsはサーバ上のJavaScript実行環境で、ブラウザはクライアント上のJavaScript実行環境

ってことです!

SEおっさん
SEおっさん
ここまで読んでくれてありがとう!

プロフィールの詳細

【あきらめんな】未経験からプログラマーに転職する3つの方法!

未経験という理由であきらめてませんか?


『お金は無い!!』

『プログラマに変身したい!!』

『自由に転職活動を行いたい!!』

 

そんな、あなたには…
内定辞退しても無料が消滅しない0円スクール がオススメです。

無料のプログラミングスクールは数多くありますが、
「斡旋企業へ就職しなければ無料が消滅する」
というスクールが乱立しています。

斡旋された企業の内定を辞退したら、高額なお金を支払わなければならないのです。

 

斡旋先がブラック企業かもしれません
(まともなスクールなら無いとは思いますが…)

あなたが自ら動いた転職活動で、理想の企業から内定をもらえたらどうしますか?
苦労して勝ちとった理想の企業を選んだら、スクールから高額な支払いが待っているなんて…



『うぉーー』

ですよね。

 

0円スクール は内定辞退しても無料の条件は消滅しません。

分かりやすく言うと「ハローワークの職業訓練」みたいなものです。
おすすめする理由が、なんとなく分かりましたか?

もし仮に、あなたが0円スクールへ入学すれば…

  1. 現場に必要なスキルを3ヶ月で学習

    プログラミングの基礎からアプリ開発まで

  2. マナー講座の受講

    挨拶・礼儀、来訪・往訪マナーや電話応対練習
    報連相の重要性

  3. IT業界で働く上で必要な情報セキュリティについて学習
  4. 希望があれば株式会社ブレーンナレッジシステムズの正社員として積極的に雇用

    就職率は9割以上、断ってもOK
    自分でも就職活動して良い企業を探すことができる。

このようなことが無料でGetできます。
プログラマとして年収・やる気アップさせるチャンスです。

今はどこの企業もIT技術者不足に悩んでいます。

0円スクールで見事にプログラマへ転職した後、
プログラマとして経験を積めば、再転職で更なる年収アップが期待できる。
そんな現実的な世界があなたを待っています。

ひと言だけ付け加えさせてもらうなら、
プログラマとしてのスキルアップに試行錯誤は必要ですよ。
また、それも楽しかったりします(^^;

とりあえず、伝えたいのは


未経験という理由であきらないで!
無料の一歩を踏み出そう!!


ということです。

正直、ここでは伝えきれないので、0円スクール をクリックした方が早いです。
あなたに合うプログラミングスクールか吟味してみて!

体験入学・説明会も開催しています。
迷っていたら、あなたの目と耳で実際に確認してみてください

  • このエントリーをはてなブックマークに追加
  • LINEで送る

コメントを残す

*