このシリーズについて
「JavaScript入門」は1本1テーマで進む全20回の基礎シリーズです。第1回では、JavaScriptを書く前に必要な環境と、コードを実行する場所を整理します。
JavaScriptは、ブラウザでもNode.jsでも動きます。最初にこの違いを知っておくと、後で「同じJavaScriptなのに動く場所が違う」ことで迷いにくくなります。
今回確認すること
この記事では、学習用の最小構成だけを準備します。
| 確認するもの | 目的 |
|---|---|
| ブラウザのConsole | すぐに1行のJavaScriptを試す |
| Node.js | ターミナルでJavaScriptファイルを実行する |
| VS Code | ファイルを書いて保存する |
本番環境のビルド設定やフレームワークは扱いません。まずは、1つのファイルを確実に動かすことを優先します。
Step 1: ブラウザのConsoleを開く
このステップでは、インストールなしでJavaScriptを試せる場所を確認します。
Chrome、Edge、Firefoxなどのブラウザで任意のページを開き、開発者ツールのConsoleを表示します。
- macOS:
Cmd + Option + J - Windows/Linux:
Ctrl + Shift + J
Consoleに次を入力してEnterを押します。
console.log("JavaScriptを始めます");
画面に同じ文字が表示されれば成功です。
ポイント: Consoleは実験場です。短い式やメソッドの動きを確認する場所として使います。
Step 2: Node.jsを確認する
Node.jsを使うと、ブラウザを開かずにターミナルからJavaScriptファイルを実行できます。
ターミナルで次を実行します。
node --version
v20.x や v22.x のようなバージョンが表示されれば、Node.jsは利用できます。表示されない場合は、Node.js公式サイトからLTS版をインストールしてください。
npm --version
npm はNode.jsと一緒に入るパッケージ管理ツールです。入門の最初は深く使いませんが、後半でライブラリを使う時に必要になります。
Step 3: VS Codeで作業フォルダを作る
学習用フォルダを作り、VS Codeで開きます。
mkdir javascript-basic
cd javascript-basic
code .
code . が使えない場合は、VS Codeを起動して「File > Open Folder」から javascript-basic を開いてください。
Step 4: 最初のファイルを実行する
VS Codeで main.js を作り、次を書きます。
console.log("Node.jsで実行しました");
ターミナルで実行します。
node main.js
次のように表示されれば成功です。
Node.jsで実行しました
最初の目標は、エディタで書いたファイルをターミナルから実行できる状態にすることです。
ブラウザとNode.jsの違い
| 実行場所 | 得意なこと | 使えないものの例 |
|---|---|---|
| ブラウザ | 画面操作、DOM、クリックイベント | Node.js専用のファイル操作 |
| Node.js | CLI、サーバー、ファイル処理 | ブラウザの document |
同じJavaScriptでも、実行場所によって使える機能が違います。入門前半はNode.jsでも確認できる文法を学び、後半でブラウザの画面操作に進みます。
よくあるエラー
| エラー | よくある原因 | 確認する場所 |
|---|---|---|
node: command not found | Node.jsが未インストール | Node.jsをインストールしたか |
Cannot find module | ファイル名や場所が違う | pwd と ls で現在地を確認 |
| 何も表示されない | console.log を書いていない | main.js の保存状態 |
次のステップ
JavaScript入門 #2 - Hello Worldとconsole.log で、出力・コメント・実行の流れを確認します。
まとめ
JavaScriptは、ブラウザとNode.jsの両方で実行できます。最初はConsoleで短く試し、学習用ファイルはNode.jsで実行すると確認が簡単です。次回以降は、この環境を使って文法を1つずつ動かします。
