JavaScriptプログラムの実行方法まとめ！ブラウザ・Node.js・コンソールの使い方
生徒
「JavaScriptを書いたけど、動かし方が分かりません。どうやって実行するんですか？」
先生
「JavaScriptは主に三つの方法で実行できます。まずはブラウザ、次にNode.js、そして開発者ツールのコンソールですよ。」
生徒
「三つもあるんですね！どれがいいんですか？」
先生
「目的に合わせて選ぶといいです。初心者向けにそれぞれのやり方を詳しく紹介しますね。」
1. ブラウザでJavaScriptを実行する方法
最も手軽でプログラミング未経験の方におすすめなのが、ブラウザ（ChromeやFirefox、Edgeなど）にJavaScriptを書いて実行する方法です。
方法は簡単で、HTMLファイルに<script>タグでJavaScriptコードを書きます。次にファイルをブラウザで開くと、コードが動きます。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<body>
<script>
console.log("ブラウザで実行しています！");
</script>
</body>
</html>
このように書いたHTMLファイルを保存して、ブラウザで開いて開発者ツールのコンソールを見ると、
ブラウザで実行しています！
と表示されます。
2. 開発者ツールのコンソールで直接書く
HTMLファイルを編集する前に、JavaScriptを試してみたい場合は、ブラウザの開発者ツール（Consoleタブ）に直接コードを書いて実行できます。
Windowsなら F12、Macなら command + option + I を押して、Consoleタブに
console.log("こんにちは！テスト中");
と入力すると、その場で実行され、出力されます。すぐに試せるので便利です。
3. Node.jsを使ってブラウザなしで実行する
Node.jsは、JavaScriptをブラウザ以外の「普通のパソコン」で直接実行できる環境です。開発者ツール不要で、プログラムが作りやすくなります。
まずNode.jsを公式サイトからインストールしてください（Windows・Mac両対応）。
次に、任意のフォルダにhello.jsという名前のファイルを用意して、
console.log("Node.jsで実行しています！");
と書いて、保存します。そのあと、コマンドプロンプトやターミナルで
node hello.js
と入力すると、
Node.jsで実行しています！
と出力され、プログラムが動いたことが確認できます。
4. 実行環境の違いを理解しよう
ブラウザとNode.jsでは、利用できる機能に違いがあります。
- ブラウザ：画面に文字を表示したり、クリックなどの操作に反応できます。
- Node.js：ファイルを読んだり、ネットワーク通信、サーバーとのやり取りなどが可能です。
最初はブラウザで画面に出力する方法を覚えて、そのあとNode.jsにも進むのが自然な流れです。
5. どの方法が初心者におすすめ？
プログラミング未経験なら、最初は
- ブラウザ＋開発者ツールのコンソールで手軽に試す
- HTMLファイルに
<script>を書いて実行 - 慣れてきたらNode.jsで本格的にプログラムを書く
この流れで学ぶと、迷わず自然に身につきます。
6. 実行できないときは
うまく動かないときは、まずエラーメッセージを見ることが大切です。
例えば「ReferenceError: ○○ is not defined」と出たら、○○という変数が定義されていないという意味です。エラーの行番号を見て、変数を正しく書き直す練習をすると慣れていきます。
7. 練習と確認が上達の鍵
実際に手を動かして、コードを書いて実行することで、プログラミングの感覚が育っていきます。
まずは数行のコードで「動かすこと」を体験してみましょう。そのあと、少しずつ機能を増やしていくと、自信がついてきます。
まとめ
JavaScriptの実行方法について学んだことを振り返ると、主に三つの実行環境があることがわかりました。ひとつはブラウザ上でHTMLファイルに<script>タグを使って実行する方法、ふたつめはブラウザの開発者ツールのコンソールで直接コードを試す方法、そして三つめはNode.jsを利用してブラウザなしで実行する方法です。それぞれの特徴を理解することが、初心者でもスムーズにJavaScriptの学習を進めるコツとなります。
ブラウザでの実行
ブラウザではHTMLファイルにJavaScriptを書き込み、画面表示やコンソール出力で結果を確認できます。手軽に試せるので、プログラミング未経験の方におすすめです。例えば、次のように書くと、コンソールに文字が出力されます。
<script>
console.log("ブラウザでJavaScriptを実行しています！");
</script>
開発者ツールのコンソールで直接試す
ブラウザのコンソールはすぐにコードを試せる環境です。小さなコードを手軽に実行でき、動作確認やデバッグにも便利です。例えば以下のように入力します。
console.log("開発者ツールのコンソールで実行中");
Node.jsでの実行
Node.jsを使えば、ブラウザがなくてもJavaScriptを実行できます。ファイル操作やネットワーク通信など、より高度なプログラムを書くことが可能です。例えば、hello.jsというファイルに次のように書き、ターミナルで実行できます。
console.log("Node.jsでJavaScriptを実行しています！");
コマンドは node hello.js です。
実行環境の違いを理解する
ブラウザでは画面操作やクリックイベントの処理が得意で、Node.jsではファイル操作やサーバー処理が得意です。それぞれの特徴を理解して、用途に応じた実行環境を選ぶことが大切です。
生徒
「先生、今日JavaScriptの実行方法を三つも覚えましたが、どれから使うのがいいですか？」
先生
「まずはブラウザで<script>タグを使う方法と、開発者ツールのコンソールで直接試す方法から始めるといいですね。手軽にコードを動かして確認できるので、学習効率が上がります。」
生徒
「Node.jsはまだよくわかりませんが、どんなときに使えばいいんですか？」
先生
「Node.jsはファイルの読み書きやサーバー通信など、ブラウザではできないことをしたいときに使います。初心者はまずブラウザで基本を覚え、慣れてからNode.jsに挑戦すると自然にステップアップできます。」
生徒
「なるほど、まず手軽に試して、慣れたら本格的にNode.jsで書くという流れですね。」
先生
「そうです。そして、コンソールでエラーが出たときには、エラー内容をよく読んで原因を確認する習慣をつけると、効率よくプログラミングを上達できます。」
生徒
「エラーの行番号を見て変数やコードを修正することも大事なんですね！」
先生
「その通りです。繰り返し実行して確認することで、少しずつJavaScriptの感覚が身についていきます。」
この記事を読んだ人からの質問
