JavaScriptの始め方！開発環境の構築手順とコンソールの使い方
Webサイトに動きをつけたり、高度なWebアプリケーションを開発したりする際に欠かせないプログラミング言語がJavaScriptです。
今回は、初心者でも迷わずに始められるよう、JavaScriptの開発環境を構築する手順と、開発に必須のツールである「コンソール」の基本的な使い方を丁寧に解説します。
JavaScriptの開発環境に必要なツール
JavaScriptの開発を始めるために必要なツールは、主に以下の2つです。
- テキストエディタ：コードを書くためのソフト
- Webブラウザ：書いたコードを実行して結果を確認するソフト
これらが揃えば、すぐにJavaScriptのプログラミングを始めることができます。
おすすめのエディタは「Visual Studio Code（VS Code）」
テキストエディタはパソコン標準のメモ帳でも代用できますが、開発効率を高めるためにはプログラミング用のエディタが必須です。
現在、世界中で最も広く使われているのが、Microsoftが開発している「Visual Studio Code（以下、VS Code）」です。コードの色分けや自動補完など、開発をサポートする機能が豊富に備わっています。
おすすめのWebブラウザは「Google Chrome」
JavaScriptの動作確認には、開発者向けの機能（デベロッパーツール）が充実している「Google Chrome」を使用するのが一般的です。
開発環境の構築手順
それでは、実際にVS Codeを使ってJavaScriptを動かすための環境を構築していきましょう。手順は以下の3ステップです。
1. 作業用のフォルダを作成する
まずは、プログラムのファイルを保存するためのフォルダをパソコン上の任意の場所（デスクトップなど）に作成します。フォルダ名は半角英数字で「js-study」などとしておくと管理しやすくなります。
2. VS Codeでフォルダを開く
VS Codeを起動し、メニューの「ファイル」＞「フォルダを開く」から、先ほど作成した「js-study」フォルダを選択して開きます。
3. HTMLファイルとJavaScriptファイルを作成する
JavaScriptをブラウザで動かすために、土台となるHTMLファイルと、プログラムを書き込むJavaScriptファイルの2つを作成します。
VS Codeのエクスプローラー画面から「新しいファイル」アイコンをクリックし、以下の2つのファイルを作成してください。
index.html（HTMLファイル）script.js（JavaScriptファイル）
ファイルが作成できたら、それぞれのファイルに以下のコードを記述して保存（Ctrl + S などのショートカットキーを利用）します。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScriptの練習</title>
</head>
<body>
<h1>JavaScriptのテスト</h1>
<script src="script.js"></script>
</body>
</html>script.js
console.log("JavaScriptが正しく読み込まれました。");HTMLの記述方法や基本構造について詳しく知りたい場合は、[HTMLの基本構造とタグの役割をやさしく解説]を参考にしてください。
コンソールの基本的な使い方
JavaScriptの動作確認やデバッグ（エラーの修正）に欠かせないのが、Webブラウザに搭載されている「コンソール（Console）」機能です。
コンソールを表示する方法（Google Chrome）
作成した index.html をGoogle Chromeで開きます（ファイルをブラウザにドラッグ＆ドロップすると開けます）。
画面が開いたら、以下のいずれかの方法でデベロッパーツールを開き、「コンソール（Console）」タブを選択します。
- 画面上の何も無いところで右クリック ＞「検証」を選択し、上部メニューの「コンソール」をクリック
- Windowsショートカット：
F12またはCtrl + Shift + I - Macショートカット：
Cmd + Option + I
正しく設定できていれば、コンソール画面に「JavaScriptが正しく読み込まれました。」と表示されます。
console.logを使った出力
先ほど script.js に記述した console.log() は、カッコ内のデータやメッセージをコンソールに表示するための命令です。
値が正しく取得できているか、処理がどこまで進んでいるかを確認する際に非常に頻繁に使用されます。
エラーメッセージの見方
プログラムに記述ミス（構文エラーなど）があると、コンソールに赤文字でエラーメッセージが表示されます。
例えば、関数名を間違えた場合は以下のようなエラーが表示されます。
Uncaught ReferenceError: XXX is not defined（XXXという変数は定義されていません）
エラーメッセージの右側には、エラーが発生したファイル名と行数（例：script.js:5）が表示されるため、どこを修正すればよいかが一目で分かります。
効率的なトラブルシューティングの手順については、[JavaScriptでエラーが出たときの原因特定と対処法]で詳しく解説しています。
コンソールで直接JavaScriptを実行する方法
コンソールは、メッセージを確認するだけでなく、その場で直接JavaScriptのコードを入力して実行することも可能です。
1行ずつ実行する
コンソールの入力欄（> マークの右側）にコードを入力し、Enterキーを押すと、その場で結果が返ってきます。
実行例：計算を行う
10 + 20コンソールに上記を入力してEnterキーを押すと、即座に 30 という結果が表示されます。
複数行のコードを実行する
条件分岐（if文）や繰り返し処理（for文）など、複数行にわたるコードを入力したい場合は、Shift + Enterキーを押すことで、改行しながらコードを入力できます。
実行例：条件分岐を行う
const score = 80;
if (score >= 70) {
console.log("合格です！");
}コードを入力し終えたら、最後にEnterキーを押すことで一連の処理が実行されます。
JavaScriptの基本的な文法や、変数・条件分岐の使い方については、[JavaScriptの基本文法：変数・定数と条件分岐の基礎知識]にて網羅的に解説しています。
まとめ
JavaScriptの開発環境は、テキストエディタ（VS Code）とWebブラウザ（Google Chrome）があれば、簡単な手順ですぐに構築できます。
また、コンソールはプログラムの動きを視覚的に把握し、エラーを解決するための非常に強力なツールです。開発環境が整ったら、実際にさまざまなコードをコンソールに出力しながら、JavaScriptの学習を進めていきましょう。
関連記事
- [JavaScriptの基本文法：変数・定数と条件分岐の基礎知識]
- [HTMLの基本構造とタグの役割をやさしく解説]
- [JavaScriptのエラー原因特定と対処法！初心者向けデバッグの基本]