JavaScriptが動く3つの実行環境
JavaScriptは単体では動きません。言語を解釈してくれる「ホスト環境」が必要です。2026年の今、実務で使うホストは次の3つです。
- ブラウザ。主要ブラウザにはJavaScriptエンジンが組み込まれています(ChromeとEdgeはV8、FirefoxはSpiderMonkey、SafariはJavaScriptCore)。DevToolsにコードを貼り付ければそのまま動きます。
- Node.js。ブラウザの外でJavaScriptを動かすためのランタイムです。ターミナルから実行したり、サーバーサイドやビルドツールの中で使ったりします。
- オンラインのプレイグラウンドやエディタウィジェット(このページにあるようなものです)。中身は結局上のどちらかを、Web UIで包んだだけです。
言語そのものはどこでも同じ。違うのは コードから何に手が届くか です。ブラウザなら document や window が使えますし、Nodeならファイルシステムやネットワークを扱えます。自分の状況で始めやすい方から触ってみてください。あとから切り替えるのも自由です。
方法1:ブラウザのコンソールで実行する
JavaScriptを1行だけサクッと動かしたいなら、ブラウザのDevToolsコンソールが一番速いです。適当なWebページを開いて F12(Macなら Cmd+Option+I)を押し、Console タブをクリックして、こう打ち込んでみましょう。
各行を入力したら Enter キーを押します。コンソールは式の戻り値や、console.log に渡したものをそのまま表示してくれます。変数を定義したり、関数を呼び出したり、開いているページの状態を調べたりもできます。たとえば document.title と打てば、今のタブのタイトルが取れます。
コンソールが活躍するのはこんなときです。
- ちょっとしたコードを数秒で試したいとき。
- 実際のサイトの DOM をいじって確認したいとき。
- すでにページ上で動いているコードをデバッグしたいとき。
ただし、コンソールに打ち込んだ内容はタブを閉じた瞬間に消えてしまいます。残しておきたいコードは、ちゃんとファイルに書きましょう。
方法2:HTMLファイルに <script> タグで書く
JavaScript をウェブページの一部として動かしたいなら、HTML ファイルに埋め込むのが基本です。以下を index.html として保存し、ダブルクリックしてブラウザで開いてみてください。
<!doctype html>
<html>
<body>
<h1 id="title">読み込み中...</h1>
<script>
document.getElementById("title").textContent = "スクリプトからこんにちは";
console.log("スクリプトが実行されました");
</script>
</body>
</html>
<script>タグは、ブラウザに「ここからはJavaScriptとして実行してね」と伝えるためのものです。書いたコードはそのページの中身にアクセスできるので、document.getElementById(...)を使えば、同じページにある<h1>要素も取得できます。console.logの出力はDevToolsを開けば確認できます。
数行を超えるようなコードになってきたら、別ファイルに切り出して読み込ませるのが定番です:
<script src="app.js"></script>
<script> タグは <body> の終わり近くに置くか、defer 属性を付けておきましょう。こうすれば HTML のパースが終わってからスクリプトが実行されます。モジュール形式のスクリプトや読み込み順序の話は、モジュールの章でもう少し詳しく扱います。
方法3: ターミナルから Node.js で実行する
ブラウザを使わずに JavaScript を動かしたいとき——ファイル名を一括変更するスクリプト、ちょっとしたサーバー、サクッとデータを処理したいとき——は Node.js の出番です。nodejs.org からインストールして (LTS 版を選んでおけば安心)、動くかどうか確認してみましょう。
node --version
script.js という名前でファイルを保存します：
同じフォルダから、次のコマンドを実行します：
node script.js
出力はそのままターミナルに表示されます。HTMLもブラウザも、ビルドステップも不要です。ブラウザ外でのJavaScript開発は、だいたいこのスタイルが主流です。加えて、バンドラーやテストランナー、リンターといった、ブラウザ向けプロジェクトを取り巻くツール群もNodeで動いています。
ファイルを指定せずにNodeを起動することもできます。ターミナルで node と入力してEnterを押すだけで、対話型プロンプト(REPL)が立ち上がり、入力した行がその場で実行されます。ちょっとした動作確認に便利で、いわばブラウザのコンソールのターミナル版です。
方法4:このページ上のエディタで実行する
Coddyの editor-javascript ブロックはすべてその場で動くエディタになっています。コードを編集してRunを押せば、すぐに結果が見られます。インストールもセットアップも不要、タブを切り替える手間もないので、学習中にはいちばん手軽な選択肢です:
"world" を自分の名前に書き換えて、もう一度実行してみてください。編集して、実行して、出力を読む。これがこのチュートリアルで繰り返していく基本の流れです。
どの実行方法を選べばいい?
やりたいことに合わせて選びましょう:
- ワンライナーを試したい、開いているページを調べたい — ブラウザのコンソール。
- Webページ付きで何か作りたい — HTMLファイルに
<script>タグを書く。 - スクリプト、ツール、サーバーを書きたい — ターミナルから Node.js で実行。
- このチュートリアルを進めたい — ページ内に埋め込まれたエディタブロック。
初心者がハマりやすいポイントもいくつか押さえておきましょう:
- Node.js には
documentもwindowもありません。これらはブラウザ側の機能です。Node でdocument.getElementById(...)を呼ぶとReferenceError: document is not definedになります。 - ブラウザのコードからはファイルシステムにアクセスできません。ブラウザはセキュリティ上、ページをサンドボックスで隔離しているからです。ローカルのファイルを読みたいなら Node の出番です。
console.logはどの環境でも動きます。JavaScript における万能な「とりあえず出力する」手段です。
動作確認用のスクリプト
選んだ環境で、次のコードを実行してみてください。3行の出力が表示されれば、次のページに進む準備は完了です:
このスニペットには3つの機能が詰まっています。console.log、組み込みの Date オブジェクト、そしてアロー関数を使った配列メソッドです。それぞれについては、この先の章できちんと取り上げていきます。
次は構文とセミコロンについて
コードが実際にどこかで動くようになったところで、次に気になるのは JavaScript の構文そのものでしょう。文(ステートメント)と式(エクスプレッション)の違い、そして「行末にセミコロンを付けるか付けないか」という、いつまで経っても決着しない議論もあります。次章で見ていきましょう。
よくある質問
JavaScriptのコードはどうやって実行するの？
やり方は大きく3つあります。1つ目はブラウザのDevToolsを開いてコンソールに貼り付けてEnterを押す方法。2つ目はHTMLファイルに<script>タグで書いてブラウザで開く方法。3つ目はNode.jsをインストールしてターミナルからnode script.jsを実行する方法です。どれも動かしているのは同じJavaScriptで、実行環境が違うだけと考えればOKです。
JavaScriptファイルをコマンドラインから実行するには？
まずnodejs.orgからNode.jsをインストールします。コードをscript.jsとして保存したら、そのファイルがあるフォルダでターミナルを開き、node script.jsと打つだけ。console.log(...)の出力はそのままターミナルに表示されます。HTMLもブラウザも、ビルド環境も一切いりません。
ChromeでJavaScriptを実行するには？
適当なページを開いてF12キー（MacならCmd+Option+I）を押し、Consoleタブをクリックします。あとは式を入力してEnterを押せば、そのページに対してその場で実行されます。スニペットを試したり、DOMを確認したり、動いているサイトをいじってみるのに一番手軽な方法です。
