開発環境の準備：VSCodeとChrome開発者ツールの使い方

※この記事はJavaScript初心者向けのものとなります。

開発環境の全体像と、なぜ環境が大事なのか

JavaScriptを学ぶとき、最初にやるべきことは「文法の暗記」ではなく、コードを書いて・動かして・すぐ確認できる環境を作ることです。この「開発環境」は、ただ文字を打つ場所ではありません。次のようなことをスムーズにするための“土台”です。

• エラーを早めに見つける
• コードを少し変えたらすぐ結果を見る
• 何が起きているか（原因）を調べられる

もし環境が整っていないと、小さなミスで長時間止まる、変更が反映されないなどが起きやすく、学習効率が一気に落ちます。結果として「何が悪いかわからない…」となって挫折しやすくなります。

さらにJavaScriptは、動く場所が大きく分けて2つあります。

• ブラウザ（クライアントサイド）：画面・ボタン・入力などを扱う
• Node.js（サーバーサイド）：裏側の処理や通信などを扱う

この2つは使える命令（API）が違うので、学習をスムーズにするには、扱いやすいツールを選ぶことが大事です。

本講座では、次の3つを基本セットとして進めます。

1. VSCode（コードを書く場所）
2. Google Chrome + DevTools（動かして調べる場所）
3. Live Server（サーバー経由で開き、自動で更新する仕組み）

また、Web開発のJavaScriptは単独で動くわけではなく、基本的に HTML（構造） と CSS（見た目） とセットです。VSCodeのように複数ファイルをまとめて管理できる環境にしておくと、作業が圧倒的に楽になります。

初心者のうちは、まず「自分のコードがブラウザで動いた！」という小さな成功体験がとても重要です。そのためにも、最初に環境を整える価値は大きいです。

なぜVSCodeがおすすめなのか

数あるエディタの中で、講座が VSCode（Visual Studio Code） をおすすめする理由はシンプルです。
無料で強力で、JavaScript学習に必要な機能が最初から揃っているからです。

初心者にうれしいポイント

• 無料で使える（始めるハードルが低い）
• 日本語化できる（迷子になりにくい）
• **色分け表示（シンタックスハイライト）**で読みやすい
• **入力補助（補完）**が効くのでタイプミスが減る
• 間違いの可能性を警告してくれる機能もある（学習に効く）

JavaScriptは、ある程度“ゆるい”言語で、間違った書き方でもエラーにならず動いてしまうことがあります（例：数値のつもりが文字列として結合される等）。だからこそ、エディタ側が警告してくれるのは大きな助けになります。

拡張機能でさらに便利になる

VSCodeは必要な機能を「拡張機能（Extensions）」で追加できます。
たとえば、後で使う Live Server も拡張機能として入れられます。

さらに、ファイルが増えても管理しやすく、検索も強く、Git連携もできるので、VSCodeは単なる“メモ帳”ではなく、開発の中心（司令塔）になります。

VSCodeのインストールと最初にやる設定

VSCodeのインストール自体は簡単ですが、最初に最低限の準備をしておくと学習がかなり楽になります。

インストール手順の考え方

1. 公式サイトからVSCodeを入れる（Windows / macOS / Linux）
2. 起動して表示を確認
3. もし英語なら「Japanese Language Pack」で日本語化

重要：作業フォルダ（ワークスペース）を作る

初心者がつまずきやすいのが「ファイルがバラバラになる」ことです。
必ず学習用のフォルダを作って、そのフォルダをVSCodeで開きます。

• 例：js-practice/
  • index.html
  • script.js
  • style.css

こうすると、HTML・CSS・JSをセットで管理できて迷子になりません。

あると便利な基本設定

• 保存時に整形（フォーマット）：インデントなどを整えて読みやすくする
• VSCodeのターミナル：将来Node.jsやnpmを使うときに役立つ（エディタ内でコマンド実行できる）

最初の動作確認

まずは index.html と script.js を作り、HTML側でJavaScriptを読み込みます。
これが「JSが動く環境が整った」状態です。

必須拡張：Live Server（導入すると学習が速くなる）

Live Serverは、学習効率を大きく上げる拡張機能です。できることは主に2つです。

1. 簡易Webサーバーで開ける（http://になる）
2. 保存したら自動でブラウザが更新される（オートリロード）

なぜWebサーバーが必要？

HTMLファイルを直接開くと URL が file:// になります。
この状態だと、セキュリティの都合で次のような機能がうまく動かないことがあります。

• fetch() で外部データを取る
• ローカルファイルへのアクセス絡み
• 一部のWeb API

Live Serverで開くと、http://127.0.0.1:5500 のような形になり、Webアプリっぽい実行環境で試せます。

オートリロードが効くと何が嬉しい？

本来は「保存→ブラウザへ→手動で更新」を毎回やります。
Live Serverなら「保存」だけで反映されるので、試行錯誤が速くなります。

導入方法：VSCodeの拡張機能で Live Server を検索してインストールするだけです。

ChromeとDevToolsを使う理由（起動方法も）

JavaScriptはどのブラウザでも動きますが、開発用には Google Chrome が特に便利です。理由は DevTools（開発者ツール）が強力だからです。

DevToolsでは、次のことができます。

• DOM（画面の構造）を確認・編集（Elements）
• ログやエラーを見る（Console）
• コードを止めて中身を見る（Sources）

DevToolsの起動方法

• Windows：F12
• Mac：Command + Option + I
• 右クリック → 「検証」

最初は Console と Elements をよく使います。

Consoleタブ：console.log()で“見える化”する

学習初期で一番使うのは Console です。
ここに結果を表示するのが console.log() です。

JavaScriptは「間違っていてもエラーにならず進む」ことがあり、結果だけ見ると気づけないことがあります。だから、途中の値を console.log() で出して確認する癖が重要です。

例：

let x = "5"; // 文字列
let y = 3;   // 数値
console.log(x + y); // "53"（足し算ではなく結合）

Consoleは「今何が起きているか」を見る場所なので、初心者ほど使いこなす価値があります。

HTMLとJavaScriptの連携：＜script＞タグで読み込む

JavaScriptをWebページで動かすには、HTMLに読み込み設定が必要です。
一般的には外部ファイルを読み込む形にします。

<script src="script.js"></script>

読み込み位置が重要（初心者のつまずきポイント）

DOM操作をするとき、HTMLの要素が読み込まれる前にJSが実行されると、要素が取得できずエラーになります。
初心者はまず、</body> の直前に置くのが安全です。

Live Serverの本当の役割（httpで動かす）

Live Serverの役割は「自動更新」だけでなく、file:// の制約を避けて、Webアプリに近い状態で動かせることです。
学習が進むと fetch() などを使うので、早めに導入しておくと安心です。

（発展）Node.jsとnpmはなぜ必要になるのか

学習初期は必須ではありませんが、将来以下の場面で必要になります。

• React / Vueなどの導入
• パッケージ（便利な部品）を追加
• サーバー側もJavaScriptで作る

Node.jsを入れると npm が使え、これが現代のJavaScript開発の標準ツールになります。

環境構築のゴール：最初の実行ができること

最後に「環境ができたか」を確認します。

1. VSCodeでフォルダを開き、index.html と script.js がある
2. Live Serverで開き、URLが http://... になっている
3. script.js に console.log("Hello"); を書く
4. DevToolsのConsoleに表示される

これができれば、次は文法学習に進めます。
最初は難しいものを作らず、変数・条件分岐・ループを console.logで確認しながら進めるのが最短ルートです。