Chapter 00

環境構築

ブラウザ DevTools と Live Server で JavaScript の開発環境を整えます。

15 min

このチャプターで学ぶこと

ブラウザの DevTools (Console, Elements) を使えるようになる
HTMLファイルにJavaScriptを読み込む方法を理解する
VS Code + Live Server で快適に開発できる環境を作る
console.log でデバッグする方法を覚える

環境構築

このコースではReactを学ぶ前提として必要なJavaScriptの知識を習得します。PHP/Laravelの開発経験があることを前提にしているので、「変数とは何か」「if文の書き方」といった基礎から説明はしません。その代わり、PHPとJavaScriptの違いや、ReactでよくつかわれるモダンなJavaScriptの構文を重点的に扱います。

まずは開発環境を整えましょう。LaravelではApacheやNginxのサーバーが必要でしたが、JavaScriptの基礎学習にはブラウザとテキストエディタだけあれば十分です。

このコースについて

対象読者

PHP/Laravelの開発経験がある
JavaScriptは少し触ったことがある（jQueryくらいなら使ったことがある）
Reactを学ぶための前提知識を身に付けたい

このコースで学ぶこと

PHPとJavaScriptの構文の違い
アロー関数・分割代入・スプレッド構文などのモダンJS構文
map, filter, reduce などReactで必須の配列メソッド
非同期処理（Promise / async-await）

このコースで扱わないこと

以下はPHPと共通の概念なので詳しい説明は省きます：

変数・定数の基本概念（var は使いません）
if / for / while などの制御構文の基礎
関数の基本的な定義方法
クラス（class 構文）

ブラウザの DevTools

JavaScriptの開発に欠かせないツールが**ブラウザのデベロッパーツール（DevTools）**です。PHPでは dd() や var_dump() でデバッグしますが、JavaScriptでは ブラウザのコンソール がそれに相当します。

DevTools を開く

ChromeまたはEdgeで DevTools を開く方法は3つあります：

F12 キーを押す
Ctrl + Shift + I（Macは Cmd + Option + I）
ページ上で右クリック →「検証」（または「要素を検証」）

Console タブ

Console タブは最もよく使うパネルです。JavaScriptのエラーメッセージが表示されるほか、console.log() の出力がここに表示されます。

PHPとの対比で考えるとこうなります：

PHP	JavaScript (DevTools Console)
`dd($variable)`	`console.log(variable)`
`var_dump($variable)`	`console.dir(variable)`
`dd($array)`	`console.table(array)`
エラーは画面に表示	エラーはConsoleに表示

Elements タブ

Elements タブでは現在のHTML構造を確認・編集できます。Laravelのbladeテンプレートがレンダリングされた結果を確認するのと同じ感覚で、JavaScriptがDOMを操作した結果をリアルタイムに確認できます。

💡 ショートカットを覚えよう

DevToolsを開いた状態で Ctrl + L（Macは Cmd + K）を押すとConsoleの内容をクリアできます。開発中はよく使うので覚えておきましょう。

HTMLファイルにJSを読み込む

それではファイルを作って実際に動かしてみましょう。好きなフォルダに index.html と main.js の2ファイルを作成します。

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>

  <!-- defer属性をつけてHTMLの末尾と同じタイミングで実行する -->
  <script src="main.js" defer></script>
</body>
</html>

main.js

// まずはコンソールにメッセージを出力してみる
console.log("JavaScriptが読み込まれました！");

📝 defer 属性とは

<script> タグに defer 属性を付けると、HTMLのパース（解析）が完了してからJavaScriptが実行されます。defer なしでは <head> の中にscriptを置くとHTML要素よりも先にJSが実行されてしまい、まだ存在しないDOM要素を操作しようとしてエラーになることがあります。

LaravelのBladeでいえば @vite() ディレクティブに相当します。LaravelのViteインテグレーションも内部的にモジュールとして読み込むことで同様の問題を回避しています。

index.html をブラウザで開き（ダブルクリックでOK）、DevToolsのConsoleタブを確認してください。「JavaScriptが読み込まれました！」と表示されれば成功です。

⚠️ ファイルパスに注意

src="main.js" は index.html と同じフォルダにある main.js を読み込むという意味です。サブフォルダに置く場合は src="js/main.js" のようにパスを合わせてください。

console のデバッグメソッド

console にはいくつかの便利なメソッドがあります。PHPのデバッグ関数と対比しながら見ていきましょう。

console.log() — 基本的な出力

const name = "山田太郎";
const age = 30;

// PHPの echo "名前: $name" に相当
console.log("名前:", name);

// 複数の値をまとめて出力できる
console.log("名前:", name, "年齢:", age);

// オブジェクトもそのまま渡せる
const user = { name: "山田太郎", age: 30 };
console.log(user);

console.table() — 配列・オブジェクトを表形式で表示

const users = [
  { id: 1, name: "山田太郎", role: "admin" },
  { id: 2, name: "鈴木花子", role: "editor" },
  { id: 3, name: "田中一郎", role: "viewer" },
];

// PHPのdd($users)よりも見やすいテーブル形式で表示される
console.table(users);

console.table() は配列やオブジェクトをスプレッドシートのような表形式で表示します。PHPの dd() よりも視覚的に見やすく、大量のデータを確認するときに重宝します。

console.error() — エラーを赤く表示

// 通常のログ
console.log("処理が完了しました");

// エラーとして赤く表示（スタックトレースも表示される）
console.error("エラーが発生しました:", "ファイルが見つかりません");

// 警告として黄色く表示
console.warn("この機能は非推奨です");

console.dir() — オブジェクトの詳細を表示

const element = document.querySelector("h1");

// PHPのvar_dump()に近い、オブジェクトの全プロパティを展開して表示
console.dir(element);

console.dir() はDOM要素やオブジェクトのプロパティをすべて展開して表示します。console.log() がDOM要素をHTML形式で表示するのに対し、console.dir() はJavaScriptオブジェクトとして表示するのが違いです。

💡 console.log のフォーマット機能

console.log はCSSでスタイルを当てることもできます。開発中に目立たせたいログに使えます。

// %c の後にCSSを指定する
console.log("%c重要なログ", "color: red; font-weight: bold; font-size: 16px;");

Live Server で自動リロード

毎回ファイルを保存してブラウザを手動で更新するのは面倒です。VS Codeの Live Server 拡張機能を使うと、ファイルを保存するたびにブラウザが自動でリロードされます。

インストール方法

VS Codeを開く
左サイドバーの拡張機能アイコン（四角が4つ並んだアイコン）をクリック
検索ボックスに「Live Server」と入力
Ritwick Dey 作の「Live Server」をインストール

使い方

インストール後、index.html を VS Code で開いた状態で：

右クリック → 「Open with Live Server」
または右下のステータスバーにある「Go Live」ボタンをクリック

ブラウザが自動で開き、http://127.0.0.1:5500 のようなURLでページが表示されます。main.js を編集して保存すると、ブラウザが自動でリロードされます。

📝 Live Server と開発サーバーの違い

Live Serverは静的ファイルをそのままブラウザに配信するシンプルなHTTPサーバーです。後でReactを学ぶときに使う npm run dev（Viteの開発サーバー）はビルド処理も行うより高機能なサーバーです。JavaScriptの基礎学習には Live Server で十分です。

✍ やってみよう：はじめての console.log

以下の手順で動作確認をしてみましょう。

新しいフォルダを作成する（例：js-practice）
その中に index.html と main.js を作成する
index.html に以下を記述する：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>JS練習</title>
</head>
<body>
  <h1>JS練習</h1>
  <script src="main.js" defer></script>
</body>
</html>

main.js に以下を記述する：

// 自己紹介を出力してみよう
const myName = "あなたの名前"; // ← 自分の名前に変えてみてください
const favoriteLanguage = "PHP";
const learningNow = "JavaScript";

console.log(`こんにちは！私は${myName}です。`);
console.log(`普段は${favoriteLanguage}を使っていますが、今は${learningNow}を学んでいます。`);

// 配列をテーブルで表示してみよう
const skills = [
  { language: "PHP", level: "上級" },
  { language: "Laravel", level: "中級" },
  { language: "JavaScript", level: "初級" },
];

console.table(skills);

Live Server で開き、DevToolsのConsoleタブで出力を確認する

テンプレートリテラル（バッククォートと ${}）については次のチャプターで詳しく説明しますが、まずは動かしてみてください。

まとめ

このチャプターでは以下を学びました：

DevTools はJavaScriptのデバッグに必須のツール。PHPの dd() に相当するのが console.log()
<script src="main.js" defer></script> でJSファイルを読み込む。defer を付けるとHTMLの解析完了後に実行される
console.log()、console.table()、console.error()、console.dir() を使い分けてデバッグする
Live Server を使うとファイル保存時に自動リロードされて開発が快適になる

次のチャプターでは、PHPを知っている人のためにJavaScriptの構文の違いを集中的に学びます。アロー関数や分割代入など、Reactで頻繁に登場するモダンな構文を一気に習得しましょう。