TS-Tech
JavaScript/TypeScript

ブラウザと Node で JavaScript を動かす

約 7 分
  • 環境構築

ブラウザと Node で JavaScript を動かす — JavaScript Tips

フレームワークやビルドツールなしで、JavaScript を「動かす」方法は大きく 3つ あります。ブラウザの開発者ツール（コンソール）、HTML の <script> タグ、そして Node.js のコマンドラインです。本番デプロイや React / Next.js は扱わず、学習用の最小実行環境に絞ります。

参考: MDN — JavaScript · Node.js — Run JavaScript Everywhere · Chrome DevTools — Console

目次

  1. なぜ「動かし方」から始めるか
  2. ブラウザのコンソールで試す
  3. HTML と script タグ
  4. Node.js の CLI で実行する
  5. 3つの方法の使い分け
  6. うまくいかないとき

なぜ「動かし方」から始めるか

JavaScript はもともとブラウザ向けの言語として生まれましたが、今は Node.js によってサーバー側や CLI ツールでも広く使われています。どちらも同じ言語仕様（ECMAScript）に従いますが、動かす場所によって使える API が違います。

実行場所 主な用途 使える API の例
ブラウザ 画面操作・DOM document, window, fetch
Node.js ファイル処理・CLI fs, path, process

最初に「どこで動かすか」を意識しておくと、document や window が Node では使えない、といった混乱を避けられます。

flowchart TB  subgraph browser["ブラウザ"]    C["DevTools コンソール"]    H["HTML + script"]  end  subgraph node["Node.js"]    N["node ファイル名.js"]  end  JS["同じ JavaScript 文法"] --> browser  JS --> node

ブラウザのコンソールで試す

いちばん手軽なのは、ブラウザの開発者ツールです。Chrome / Edge / Firefox いずれでも使えます。

手順（Chrome / Edge の例）

  1. 任意の Web ページを開く（about:blank でも可）
  2. F12 または Ctrl+Shift+I（Mac は Cmd+Option+I）で DevTools を開く
  3. Console タブを選ぶ
  4. 下部の入力欄にコードを書いて Enter

試してみるコード

console.log("Hello, JavaScript!");1 + 2;typeof "hello";

console.log はメッセージを表示します。式だけを書いた行（1 + 2 など）は、結果がその場で表示されます。値を確認したいときは console.log(...) で包むとよいです。

コンソールの長所・短所

長所 短所
インストール不要 コードをファイルとして残しにくい
即座に結果が見える 長いプログラムには向かない
DOM をその場で触れる ページをリロードすると消える

数行の実験や、typeof や配列メソッドの挙動確認には最適です。

HTML と script タグ

ブラウザで「ちゃんとした」スクリプトを動かすには、HTML ファイルに <script> を書きます。

最小の HTML 例（index.html）

<!DOCTYPE html><html lang="ja"><head>  <meta charset="UTF-8" />  <title>JS 練習</title></head><body>  <h1 id="title">こんにちは</h1>  <script>    const el = document.getElementById("title");    el.textContent = "JavaScript が動きました";    console.log("script 内から実行");  </script></body></html>

開き方

  • エクスプローラーで index.html をダブルクリックする
  • または VS Code / Cursor の Live Server などの拡張でローカルサーバー経由で開く

file:// で開いても動きますが、後の fetch 学習ではローカルサーバーが必要になることがあります。

外部ファイルに分ける

<script src="main.js"></script>
// main.jsfunction greet(name) {  return `こんにちは、${name} さん`;}console.log(greet("太郎"));

HTML と JS を分けると、エディタの補完や Git 管理がしやすくなります。

script の配置

  • <body> の末尾に置くのが無難（DOM が読み込まれたあとに実行される）
  • <head> に置く場合は defer 属性を付けると、HTML 解析後に実行されます
<script src="main.js" defer></script>

Node.js の CLI で実行する

Node.js はブラウザ外で JavaScript を実行するランタイムです。ファイル操作やターミナル向けの学習に向いています。

インストール確認

node -v

v22.x.x などバージョンが表示されれば OK です。未インストールの場合は nodejs.org から LTS を入れるか、Docker で Node イメージを使う方法もあります。

最初のファイル（hello.js）

// hello.jsconst message = "Node から実行";console.log(message);const sum = (a, b) => a + b;console.log("3 + 5 =", sum(3, 5));

実行

node hello.js

期待する出力

Node から実行3 + 5 = 8

Node には document がありません。代わりに fs（ファイルシステム）や path などの組み込みモジュールが使えます。

// read-file.js（同じフォルダに test.txt を置いて試す）import { readFileSync } from "node:fs";const text = readFileSync("test.txt", "utf-8");console.log(text);

この例は ES モジュール（import）です。package.json に "type": "module" を書くか、ファイル名を .mjs にすると動きます。Node でもブラウザでも モジュール形式は実務で頻出 なので、慣れておくとよいです。

対話モード（REPL）

node

プロンプト > が出たら式を入力できます。終了は .exit または Ctrl+D（Windows は Ctrl+Z のあと Enter）です。

3つの方法の使い分け

方法 向いていること 向いていないこと
コンソール 1〜数行の実験、DOM の即確認 再利用・チーム共有
HTML + script DOM 操作、小さな UI の学習 サーバー処理、大量のファイル
Node CLI ロジック単体、ファイル I/O、CLI ブラウザ API（window など）

おすすめの学習フロー

  1. コンソールで文法や式の結果を確認する
  2. 少し長くなったら main.js に書いて Node で実行する
  3. DOM が必要になったら index.html + script に移す
flowchart LR  A["コンソールで試す"] --> B[".js ファイルに保存"]  B --> C{"DOM が必要？"}  C -->|はい| D["HTML + script"]  C -->|いいえ| E["node で実行"]

フレームワークを使わない段階では、npm プロジェクトを作らなくても node hello.js だけで十分です。TypeScript を足すときに package.json を整えればよいです。

うまくいかないとき

症状 原因の例 対処
コンソールに何も出ない console.log を忘れている 表示したい値を console.log(...) で包む
Uncaught ReferenceError: document is not defined Node で DOM API を使っている ブラウザ用コードは HTML / コンソールで実行する
node が認識されない Node 未インストール or PATH 未設定 node -v を確認。再インストールまたは Docker 環境を使う
HTML を開いても script が動かない パス typo、JS の構文エラー DevTools の Console にエラーが出ていないか確認
import でエラー CommonJS デフォルトの Node "type": "module" を package.json に追加するか .mjs にする
日本語が文字化け 文字コード不一致 HTML に <meta charset="UTF-8" />、ファイルを UTF-8 で保存
Live Server なしで fetch が失敗 file:// の制限 ローカルサーバー経由で開く

エラーメッセージは英語でも、ファイル名・行番号・エラー種別（ReferenceError など）を読めば手がかりになります。わからなければメッセージをそのまま検索すると早いです。

関連: MDN — console · Node.js — Running JavaScript

シェア