【ITニュース解説】Introducción a JavaScript: Conceptos básicos del Navegador y Node.js
2025年09月13日に「Dev.to」が公開したITニュース「Introducción a JavaScript: Conceptos básicos del Navegador y Node.js」について初心者にもわかりやすく解説しています。
ITニュース概要
JavaScriptはWebページを動的にする言語で、ブラウザ内で動き、DOM操作やユーザーイベント処理を行う。Node.jsを使うとブラウザ外で動作し、サーバー構築やファイル操作などバックエンド開発も可能だ。幅広いWeb開発で利用される。
ITニュース解説
JavaScriptは、ウェブサイトをより動的でインタラクティブにするために生まれたプログラミング言語である。オブジェクト指向という考え方に基づき、データとそれを操作する機能をひとまとめにして扱うことができ、また動的型付けという特徴を持つため、変数の型を事前に宣言する必要がない。主にウェブ開発でその真価を発揮し、ウェブページの構造や内容を強力に操作できる幅広い機能と柔軟性を提供する。さらに、Node.jsという技術が登場してからは、サーバーサイドでもJavaScriptを動作させることが可能になった。これにより、他の言語で構築されるバックエンドシステムと同様に、高速性、非同期処理能力、そしてプログラムを小さな部品（モジュール）に分けて管理できるという特徴を活かし、サーバー側の開発にもJavaScriptが利用できるようになった。
JavaScriptは元々、ウェブブラウザ内で動作するように設計された。ブラウザ上でJavaScriptが動くことで、ウェブサイトに生命が吹き込まれ、ユーザーの操作に応じたインタラクティブな動きやアニメーション、動的な挙動が実現される。現在使われているすべてのモダンなブラウザには、JavaScriptのコードを解釈して実行するための「JavaScriptエンジン」が内蔵されており、これによりウェブ上のさまざまな機能が実現されている。しかし、JavaScriptの活躍の場はブラウザ内だけにとどまらない。Node.jsの登場により、JavaScriptはブラウザを介さずに、直接コンピュータ上で実行できるようになった。この進化が、サーバーの構築、ファイルの管理、そしてブラウザの枠を超えた多様なアプリケーション開発にJavaScriptが利用される道を開いたのである。この記事では、JavaScriptの伝統的な実行環境であるブラウザと、新しい実行環境であるNode.jsの双方について、同じ言語がどのように異なる環境で使われるのかを探る。
まず、ブラウザでのJavaScriptの実行方法から見ていこう。これは最も伝統的な方法であり、ウェブ開発の基本となる部分である。実際に試すには、まず作業用のフォルダを作成し、そのフォルダをVisual Studio Codeのようなテキストエディタで開くことが推奨される。次に、index.htmlという名前のHTMLファイルと、script.jsという名前のJavaScriptファイルを作成する。そして、script.jsに記述したJavaScriptのコードをHTMLファイルから読み込む設定を行う。
例えば、index.htmlには以下のような最小限のHTMLコードを記述する。
1<!DOCTYPE html> 2<html lang="es"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Mi Primera Práctica en JavaScript</title> 7</head> 8<body> 9 <!-- JavaScript se cargará al final --> 10 <script src="script.js"></script> 11</body> 12</html>
このHTMLコードの<script src="script.js"></script>という部分が重要である。これは、script.jsという名前のJavaScriptファイルをHTMLに組み込むためのタグで、src属性にJavaScriptファイルの場所を指定する。この例ではindex.htmlと同じフォルダにあるscript.jsを読み込む設定になっている。
次に、script.jsファイルには以下のJavaScriptコードを記述する。
1console.log('Hola Mundo Desde Script.js')
このコードは、console.log()という関数を使って、指定されたメッセージをブラウザの開発者ツールに表示する機能を持つ。
これらのファイルを保存した後、index.htmlファイルをウェブブラウザで開く。直接ファイルをダブルクリックするか、エディタの機能でブラウザで開くことができる。画面には特に何も表示されないが、次にブラウザの開発者ツールを開く。Windows/LinuxではF12キーまたはCtrl + Shift + I、macOSではCmd + Option + Iを押すことで開くことができ、その中の「Console（コンソール）」タブを選択すると、「Hola Mundo Desde Script.js」というメッセージが表示されているはずである。これが、ブラウザでJavaScriptが実行された証拠である。
コンソールへのメッセージ出力はデバッグに非常に役立つが、JavaScriptはウェブページの見た目を操作することもできる。もう少しインタラクティブな例を見てみよう。index.htmlの<body>タグを以下のように変更する。
1<body> 2 <h1 id="title">¡Bienvenido!</h1> 3 <button onclick="changeText()">Clickeame</button> 4 <script src="script.js"></script> 5</body>
そして、script.jsファイルの内容を以下のように変更する。
1function changeText() { 2 const title = document.getElementById("title") 3 title.textContent = "¡Hiciste click en el botón!" 4}
この変更後、index.htmlを再度ブラウザで開くと、「¡Bienvenido!」という見出しと、「Clickeame」というボタンが表示される。このボタンをクリックすると、見出しのテキストが「¡Hiciste click en el botón!」に変化する。この例では、JavaScriptがHTMLの要素（DOMと呼ばれる、ウェブページの構造を表すモデル）を操作し、ユーザーのクリックというイベント（出来事）に反応している。これらはブラウザで動作するJavaScriptにおいて最も重要な概念の二つである。
console.log以外にも、JavaScriptにはユーザーにメッセージを表示する方法がある。例えば、alert("¡Hola Mundo!")と書くと、ブラウザにポップアップメッセージが表示される。また、prompt("¿Cuál es tu nombre?")と書くと、ユーザーに値の入力を求めるポップアップが表示される。これらは簡単な実験には便利だが、実際のプロジェクトでは、ウェブページの内容を直接更新したり、開発者ツールのコンソールを使用したりすることが一般的である。
開発者ツールのコンソールは、メッセージの表示だけでなく、プログラムのエラーや警告が表示される場所でもある。もしJavaScriptのコードが意図した通りに動作しない場合、まずコンソールを確認することがデバッグ（問題解決）の第一歩となる。コンソールは開発者にとって非常に強力な味方となるだろう。
ここまでの説明で、あなたはブラウザでJavaScriptを実行する方法、メッセージやエラーを記録する方法、ウェブページを操作（DOM操作）する方法、そして単純なユーザーイベントを処理する方法の基礎を理解したことになる。これらはJavaScriptの学習において強固な基盤となる知識である。
次に、JavaScriptをブラウザの外で実行する方法、Node.jsについて見ていこう。これまで見てきたように、JavaScriptはブラウザ内で動作するが、Node.jsの存在によって、JavaScriptはブラウザの外、つまりあなたのコンピュータ上で直接実行できるようになった。Node.jsは、JavaScriptを実行するための「実行環境」であり、これによってバックエンドサーバー、API（アプリケーション間でデータをやり取りする仕組み）、ファイルの処理ツールなど、ブラウザ単独ではできない多岐にわたる機能を持つアプリケーションをJavaScriptで開発することが可能になる。
Node.jsのインストールは非常に簡単である。公式サイト（https://nodejs.org）にアクセスし、「Long-Term Support（LTS）」と表示されているバージョンをダウンロードしてインストールする。LTS版は、ほとんどのユーザーに推奨される安定版である。インストールウィザードの指示に従い、デフォルトの設定でインストールを進めればよい。インストールが完了したら、ターミナル（WindowsではコマンドプロンプトやPowerShell、macOS/Linuxではターミナルアプリ）を開き、node -vと入力してEnterキーを押す。正しくインストールされていれば、インストールされたNode.jsのバージョン番号（例：v20.0.0）が表示されるはずである。
Node.jsを使って最初のスクリプトを実行してみよう。新しいフォルダを作成し、その中にapp.jsという名前のファイルを作成する。そして、そのファイルに以下のJavaScriptコードを記述する。
1// app.js 2console.log("Hola Mundo Desde Node.js")
ファイルを保存したら、ターミナルを開き、app.jsファイルがあるフォルダに移動する。そして、node app.jsと入力してEnterキーを押す。すると、ターミナルに「Hola Mundo Desde Node.js」というメッセージが表示されるだろう。これで、あなたはブラウザを使わずにJavaScriptをコンピュータ上で実行できたことになる。
ブラウザで実行するJavaScriptと、Node.jsで実行するJavaScriptには大きな違いがある。ブラウザ内のJavaScriptは、ウェブページの構造であるDOM（Document Object Model）にアクセスしたり、ユーザーのクリックなどのイベントを処理したり、alert()やprompt()のようなブラウザ固有のAPIを利用したりできる。しかし、Node.jsの環境には、これらのDOMやブラウザ固有の機能は存在しない。その代わりに、Node.jsはファイルシステム（コンピュータ上のファイルを読み書きする機能）、コンピュータのOSに関する情報、そしてネットワーク（ウェブサーバーを作成したり、HTTPリクエストを処理したりする機能）といった、コンピュータの低レベルな機能にアクセスする能力を提供する。
Node.jsで最も一般的な用途の一つが、シンプルなウェブサーバーの作成である。組み込みのhttpモジュールを使った非常に簡単なウェブサーバーの例を見てみよう。server.jsという名前のファイルを作成し、以下のコードを記述する。
1// server.js 2const http = require("http") 3 4const server = http.createServer((req, res) => { 5 res.writeHead(200, { "Content-Type": "text/plain" }) 6 res.end("Hola Mundo Desde Mi Servidor En Node.js!") 7}) 8 9server.listen(3000, () => { 10 console.log("Servidor corriendo en http://localhost:3000") 11})
このコードは、HTTPリクエストを処理するシンプルなウェブサーバーを作成し、ポート3000で待ち受ける。クライアントからのリクエストに対して、「Hola Mundo Desde Mi Servidor En Node.js!」というテキストを返す。
このファイルを保存した後、ターミナルを開き、server.jsファイルがあるフォルダに移動する。そして、node server.jsと入力してEnterキーを押す。すると、ターミナルに「Servidor corriendo en http://localhost:3000」というメッセージが表示される。これはサーバーが正常に起動し、リクエストを待ち受けていることを意味する。
次に、ウェブブラウザを開き、アドレスバーにhttp://localhost:3000と入力してEnterキーを押す。すると、ブラウザの画面に「Hola Mundo Desde Mi Servidor En Node.js!」というテキストが表示されるはずである。これで、Node.jsを使ってローカルコンピュータ上にウェブサーバーを構築し、ブラウザからアクセスすることに成功したことになる。サーバーを停止するには、ターミナルでCtrl + Cキーを押す。
ここまでの学習で、あなたはNode.jsのインストールと実行方法、ブラウザで動作するJavaScriptとNode.jsで動作するJavaScriptの主な違い、そしてNode.jsを使ってシンプルなウェブサーバーを作成・実行する方法の基本的な理解を得たことになる。
結論として、この記事を通じて、JavaScriptを二つの異なる環境で実行する方法を学んだ。一つはブラウザ内で実行する方法で、ここではウェブページとインタラクションし、ユーザーイベントを処理し、DOMを更新する能力を持つ。もう一つはNode.js内で実行する方法で、ここではJavaScriptがコンピュータ上で直接動作し、ファイルシステム、ネットワーク、サーバーといったコンピュータのリソースと連携できる。これら二つの側面を理解することは非常に重要である。なぜなら、JavaScriptはユーザーインターフェース（フロントエンド）から、その裏側で動作するサーバーロジック（バックエンド）まで、ウェブ開発のあらゆるレイヤーを駆動できる数少ない言語の一つだからである。