JavaScript入門：ブラウザーとNode.jsで実行する方法と基本文法

JavaScriptを学ぶとき、最初に押さえたいのは「ブラウザーで実行する方法」と「Node.jsで実行する方法」の2つです。同じJavaScriptでも、起動のしかた、結果を見る場所、利用できる機能が異なります。この記事では代表的な2つの実行環境を並べて体験し、同じファイルで変数・型・条件分岐・繰り返しを学びます。

JavaScriptの主な実行方法はブラウザーとNode.js

ブラウザー：Webページを動かす実行環境

Chrome、Edge、Firefox、SafariなどにはJavaScriptを実行する仕組みが組み込まれています。ブラウザーの開発者ツールで短いコードを試したり、HTMLからJavaScriptファイルを読み込んだりできます。ボタン操作や画面の書き換えを学ぶなら、まずブラウザーを使います。この記事のブラウザー用の例にNode.jsのインストールは必要ありません。

Node.js：ブラウザーの外で動かす実行環境

Node.jsは、JavaScriptをパソコンやサーバー上で実行するための実行環境です。ターミナルからファイルを実行し、自動処理、ファイル操作、Webサーバーなどを作れます。Node.jsはJavaScriptとは別のプログラミング言語ではありません。HTMLを用意せずにプログラムだけを動かせる点が、ブラウザーとの大きな違いです。

共通の文法と環境固有の機能を分ける

• 共通して学べる文法：const、let、if、for...of、関数、配列、オブジェクト。
• ブラウザーで使う機能：documentによるHTML操作、ボタンのクリックイベントなど。
• Node.jsで使う機能：process.argvによるコマンドライン引数の取得、node:fsによるファイル操作など。
• 結果の確認場所：ブラウザーでは開発者ツールのConsole、Node.jsでは実行したターミナル。

console.log()は両方の環境で使えます。まずは画面操作やファイル操作を含まないコードを両方で実行し、「言語の文法は同じで、周囲の機能が違う」と理解しましょう。JavaScriptの実行環境はこの2つ以外にもありますが、入門ではこの2つを押さえると学習を進めやすくなります。

実行方法1：ブラウザーでJavaScriptを動かす

Consoleで1行のコードを試す

Chromeで新しいタブを開き、開発者ツールのConsoleを表示します。Windows・LinuxではCtrl + Shift + J、MacではCommand + Option + Jを使えます。Consoleの入力欄へ次のコードを自分で入力し、Enterキーを押してください。

console.log('ブラウザーでJavaScriptを実行できました');

Consoleにメッセージが表示されれば成功です。その下にundefinedが表示される場合がありますが、これはconsole.log()の戻り値で、エラーではありません。ConsoleにはJavaScriptを書きます。後で登場するnode basics.jsのようなターミナル用のコマンドは入力しません。

HTMLからJavaScriptファイルを読み込む

繰り返し実行するコードはファイルへ保存します。作業用のjavascript-practiceフォルダーを作り、テキストエディターでindex.htmlとbasics.jsを同じ場所に保存してください。拡張子が誤って.txtにならないよう注意します。

javascript-practice/
  index.html
  basics.js

index.htmlには次の内容を保存します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JavaScriptの実行練習</title>
  <script src="./basics.js" defer></script>
</head>
<body>
  <h1>JavaScriptの実行練習</h1>
  <p>実行結果は開発者ツールのConsoleで確認します。</p>
</body>
</html>

まずbasics.jsには次の1行を保存します。

console.log('JavaScriptファイルを実行できました');

index.htmlをブラウザーで開き、Consoleを表示してページを再読み込みします。メッセージが表示されれば、HTMLからファイルを読み込めています。deferを付けた外部スクリプトはHTMLの解析後に実行されます。console.log()はWebページの本文を書き換える命令ではないため、結果はConsoleで確認してください。

この例は通常のスクリプトなので、HTMLファイルを直接開いて試せます。後の学習でimportやfetch()を使う場合は、ファイルの直接表示では制約が生じるため、ローカルのHTTPサーバーを使う構成に進みます。

実行方法2：Node.jsでJavaScriptを動かす

Node.jsをインストールして確認する

Node.js公式ダウンロードからサポート中のLTS版をインストールします。インストール後にターミナルを開き直し、次のコマンドを実行します。WindowsではPowerShellやWindows Terminal、Macではターミナルを使えます。

node --version

vから始まるバージョン番号が表示されれば準備完了です。この記事では外部パッケージを使わないため、npm installやnpm initは不要です。

同じbasics.jsをターミナルから実行する

ターミナルでjavascript-practiceフォルダーへ移動します。次のcdのパスは例なので、実際に作成したフォルダーのパスへ置き換えてください。空白を含むパスは引用符で囲みます。

cd "実際の保存場所/javascript-practice"
node basics.js

ターミナルに「JavaScriptファイルを実行できました」と表示されれば成功です。Node.jsはbasics.jsを直接読み込むので、index.htmlを開く必要はありません。コードを変更したら保存して、もう一度node basics.jsを実行します。ブラウザーでの再読み込みに相当する操作です。

対話モードで短い式を試す

引数なしでnodeを実行すると、REPLと呼ばれる対話モードに入ります。表示された>の後ろで1 + 2を入力すると3が返ります。終了するときは.exitを入力します。>は入力待ちを示す記号なので、自分で入力する必要はありません。

ファイルを実行するnode basics.jsは通常のターミナルで使います。REPLの中に入力してしまった場合は、いったん.exitで戻ってください。

変数と値の型を理解する

constとletを使い分ける

再代入しない変数はconst、後から別の値を入れる変数はletで宣言します。constは変数への再代入を禁止しますが、オブジェクトの中身を変更できなくするものではありません。

文字列と数値を区別する

文字列の"100"と数値の100は異なります。+は文字列の連結にも使われるため、計算前に型を意識します。比較には、型変換を行わない===を基本として使います。

次のコードでbasics.jsの内容を置き換えて保存します。ブラウザーではindex.htmlを再読み込みし、Node.jsではnode basics.jsを実行してください。同じファイルを変更せずに両方で使えます。

const learner = '花子';
let completed = 0;
const scores = [80, 65, 92];
const passingScore = 70;

for (const score of scores) {
  if (score >= passingScore) {
    completed += 1;
    console.log(`${score}点：合格`);
  } else {
    console.log(`${score}点：復習`);
  }
}

const total = scores[0] + scores[1] + scores[2];
const average = total / scores.length;

console.log(`${learner}さん：${scores.length}科目中${completed}科目合格`);
console.log(`平均点：${average.toFixed(1)}`);
console.log('100' + 20); // 10020
console.log(Number('100') + 20); // 120
console.log('100' === 100); // false

両方の環境で同じ結果になることを確認する

ブラウザーのConsoleとNode.jsのターミナルに、次の値が同じ順序で表示されます。表示色や補助情報は環境によって異なります。

80点：合格
65点：復習
92点：合格
花子さん：3科目中2科目合格
平均点：79.0
10020
120
false

条件分岐と繰り返しを読む

ifで処理を分ける

score >= passingScoreがtrueなら合格側、そうでなければ復習側を実行します。=は代入、===は比較です。条件式の中で意図せず代入していないか確認してください。

for...ofで配列の値を取り出す

for...ofでは配列の要素を順に取り出します。例のcompleted += 1は、現在の値へ1を加えて保存する処理です。

このプログラムでは80点と92点が合格となり、合格数は2、平均点は79.0です。toFixed(1)の戻り値は表示用の文字列です。後で数値として計算する値と、画面に表示する文字列を区別します。

空の値と数値変換に注意する

null・undefined・NaNを区別する

nullは値がないことを明示するときに使います。undefinedは値が設定されていない場合などに現れます。NaNは数値として計算できなかった結果を表し、NaN === NaNはfalseです。判定にはNumber.isNaNなどを使います。

入力文字列を確認してから変換する

空文字列をNumberへ渡すと0になります。入力のない状態を0点と誤解しないよう、空欄を先に確認します。次のコードは別ファイルparse-score.jsとして保存します。

function parseScore(input) {
  if (typeof input !== 'string' || input.trim() === '') {
    throw new TypeError('点数を文字列で入力してください。');
  }
  const score = Number(input);
  if (!Number.isFinite(score) || score < 0 || score > 100) {
    throw new RangeError('点数は0以上100以下の数値にしてください。');
  }
  return score;
}

console.log(parseScore(' 85 ')); // 85
try {
  parseScore('未入力');
} catch (error) {
  console.log(error.message);
}

この例も両方の環境で使えます。Node.jsではnode parse-score.jsを実行します。ブラウザーではindex.htmlのsrc="./basics.js"をsrc="./parse-score.js"へ変更して再読み込みします。85と「点数は0以上100以下の数値にしてください。」が表示されます。throwはエラーを発生させ、try...catchはそれを受け止めます。詳しい関数の書き方は次回扱います。

環境固有の機能も試して違いを理解する

ブラウザー専用：ボタンで画面を書き換える

同じフォルダーにbrowser.htmlとbrowser.jsを作ります。以下をbrowser.htmlへ保存してください。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ボタンの練習</title>
  <script src="./browser.js" defer></script>
</head>
<body>
  <h1>ボタンの練習</h1>
  <button id="greet" type="button">あいさつする</button>
  <p id="message" aria-live="polite">まだクリックしていません。</p>
</body>
</html>

以下をbrowser.jsへ保存します。

const button = document.querySelector('#greet');
const message = document.querySelector('#message');

button.addEventListener('click', () => {
  message.textContent = 'こんにちは、JavaScript！';
});

browser.htmlをブラウザーで開いてボタンを押すと、ページの文章が変わります。document.querySelector()でHTMLの要素を選び、addEventListener()でクリック時の処理を登録しています。ここでは動作を体験できれば十分です。詳しくはDOM・イベントの記事で学びます。このファイルを通常のNode.jsで実行すると、documentがないためエラーになります。

Node.js専用：実行時に名前を渡す

次のコードをgreet-node.jsへ保存します。

const name = process.argv[2] ?? 'ゲスト';
console.log(`こんにちは、${name}さん！`);

ターミナルで実行します。

node greet-node.js 花子

「こんにちは、花子さん！」と表示されます。process.argv[2]はファイル名の後ろに渡した最初の引数です。名前を省略してnode greet-node.jsと実行すると、??によってundefinedの代わりに「ゲスト」を使います。このprocessはNode.jsの機能なので、通常のブラウザーでは利用できません。

実行できないときの確認ポイント

nodeが見つからない・ファイルが見つからない

command not foundや「認識されていません」と表示される場合は、Node.jsのインストールとターミナルの開き直しを確認します。解消しなければ、インストール先にPATHが通っているか確認してください。Cannot find moduleなどが出る場合は、現在のフォルダー、ファイル名、保存済みかどうかを確認します。今回の例に外部パッケージの追加は必要ありません。

documentやprocessが定義されていない

document is not definedは、ブラウザー用のコードをNode.jsで動かしたときなどに発生します。process is not definedは、その逆の組み合わせで起こります。文法だけでなく、そのコードがどちらの実行環境を前提としているか確認してください。

ブラウザーに結果が出ない・変更が反映されない

• console.log()の結果はページ本文ではなくConsoleを見ます。
• JavaScriptファイルを保存してから、HTMLを表示したタブを再読み込みします。
• scriptのsrcとファイルの保存場所・大文字小文字が一致しているか確認します。
• Consoleに赤いエラーがある場合は、最初のエラーから確認します。
• Consoleでconstやletを再宣言してエラーになった場合は、ページを再読み込みしてから試します。

練習と次のステップ

自分で変更する

• 同じbasics.jsをブラウザーとNode.jsで実行し、結果を比較します。
• 合格点を90点へ変えて、結果を予想してから実行します。
• 点数の配列を変更します。要素数を変えると、現在の合計計算が3科目専用だとわかります。
• parseScoreへ" "、"0"、"100"、"101"を渡して境界の動作を確認します。

関数へ処理をまとめる

次は関数・スコープ・モジュールで、配列の長さが変わっても使える関数を作ります。全体の学習順はJavaScriptの記事一覧で確認できます。

参考資料

• MDN：文法とデータ型
• MDN：制御フローとエラー処理
• Node.js：ダウンロード

• Chrome DevTools：ConsoleでJavaScriptを実行する
• MDN：script要素
• Node.js：ブラウザーとの違い
• Node.js：コマンドラインでの実行
• Node.js：REPLの使い方