VS Codeとローカル開発環境を構築する方法【MAMP/XAMPP対応】

Web開発を始めるなら、ローカル開発環境の構築は必須です！特にWordPressやPHPを使った開発では、サーバーにアップロードする前に 「ローカル環境でテストできる」 ことがとても重要。

そこで今回は、VS CodeとMAMP/XAMPPを使ってローカル開発環境を構築する方法 を、初心者でもわかりやすく解説します💡

こんな方におすすめ！

初めてローカル開発環境を構築する人
MAMP/XAMPPの使い方を知りたい人
VS CodeでWordPressやPHPを開発したい人
ローカル環境のメリット・デメリットを理解したい人

これを読めば、「ローカル開発環境って難しそう…」 と思っていた方でも、簡単に設定できるようになります！💻✨

ローカル開発環境とは？なぜ必要なのか？
1. 🔹 ローカル開発環境が必要な理由
VS Code＋MAMP/XAMPPを使うメリット
MAMP/XAMPPのインストールと設定
VS Codeのインストールと基本設定
WordPressをローカル環境で動かす方法
VS CodeでWordPressのファイルを編集してみよう！
まとめ：ローカル環境でWordPress開発を始めよう！
1. ✔ この記事の振り返り

ローカル開発環境とは？なぜ必要なのか？

ローカル開発環境とは、自分のパソコン上に「仮想のサーバー」を作ること です。これにより、ネットに接続しなくてもWebサイトやアプリを動かせます。

🔹 ローカル開発環境が必要な理由

サーバーに負担をかけずにテストできる
→ 直接サーバーにアップせずに、安全にコードを試せる！
インターネット環境がなくても開発できる
→ 出先やオフライン環境でも作業可能
サイトやアプリの高速開発が可能
→ 本番環境より動作が速く、快適に作業できる

つまり、ローカル開発環境を整えることで、 「ミスを減らし、効率的に開発できる」 のが最大のメリットです！💡

VS Code＋MAMP/XAMPPを使うメリット

VS CodeとMAMP/XAMPPを組み合わせることで、ローカル開発環境を より快適に 構築できます。では、どんなメリットがあるのか見ていきましょう！

✅ ローカル環境で安全に開発できる

本番サーバーに影響を与えずに、自由にコードを試せます。誤ってサイトを壊したり、データを削除したりする心配がないので、初心者でも安心して開発できます！

✅ サーバーとデータベースを手軽に管理できる

MAMP/XAMPPには Apache（サーバー）とMySQL（データベース）が含まれている ので、複雑な設定なしにローカル環境をすぐに構築できます。

✅ VS Codeの拡張機能で開発がスムーズに！

VS Codeには、開発を より効率化 するための 拡張機能 があります。例えば…

PHP Intelephense（PHPコード補完）
Live Server（ブラウザで即時プレビュー）
MySQL extension for VS Code（データベース操作）

これらを活用することで、より快適な開発環境が整います！✨

✅ コードのバージョン管理がしやすい

VS Codeには Gitと連携する機能 があり、開発の進捗を管理しやすくなります。変更履歴を記録して、過去のコードに戻すことも可能！

MAMP/XAMPPのインストールと設定

ローカル開発環境を作るには、まず MAMP または XAMPP をインストールする必要があります。どちらも ローカルサーバー（Apache）とデータベース（MySQL）を簡単に動かせる ソフトウェアですが、それぞれ特徴があります。

🔹 MAMPとXAMPPの違いは？どっちを選ぶべき？

	MAMP	XAMPP
対応OS	Mac / Windows	Mac / Windows / Linux
設定の簡単さ	簡単（初心者向け）	やや複雑（上級者向け）
PHPのバージョン切り替え	可能	可能
MySQLの管理ツール	phpMyAdminが利用可能	phpMyAdminが利用可能
特徴	GUIで直感的に操作可能	設定をカスタマイズしやすい

👉 初心者なら「MAMP」、自由に設定したいなら「XAMPP」がおすすめ！

MAMPのインストールと設定（Mac/Windows）

🔹 MAMPをダウンロード・インストール

公式サイト（https://www.mamp.info/）から MAMP & MAMP PRO をダウンロード
インストーラーを実行し、画面の指示に従ってインストール
インストール後、MAMPアプリを開く

🔹 MAMPの基本設定

MAMPを起動し、「Start Servers」をクリック
「Preferences（設定）」を開き、以下の設定を確認
- Apacheポート番号：80（デフォルトは8888だが、80にするとURLがシンプルに）
- PHPのバージョン：最新のものを選択
- MySQLの設定：root / root（デフォルト）
http://localhost/ にアクセスし、MAMPのダッシュボードが表示されればOK！

XAMPPのインストールと設定（Mac/Windows）

🔹 XAMPPをダウンロード・インストール

公式サイト（https://www.apachefriends.org/jp/index.html）から XAMPP をダウンロード
インストーラーを実行し、デフォルト設定のままインストール
XAMPP Control Panelを開く

🔹 XAMPPの基本設定

ApacheとMySQLを「Start」ボタンで起動
http://localhost/ にアクセスし、XAMPPの管理画面が開けばOK

MAMP/XAMPPの動作確認

✔ Apache（Webサーバー） が動いているかチェック！

ブラウザで http://localhost/ にアクセスして、MAMP/XAMPPの管理画面が表示されれば成功🎉

✔ MySQL（データベース） が動いているかチェック！

http://localhost/phpmyadmin/ にアクセスし、phpMyAdminが開けばOK！

VS Codeのインストールと基本設定

MAMP/XAMPPの準備ができたら、次は VS Code（Visual Studio Code） をインストールして、ローカル開発がしやすい環境を整えていきます！

VS Codeのインストール（Windows / Mac 共通）

まずは、公式サイトから VS Code をダウンロードしましょう。

🔗 VS Code公式サイト：https://code.visualstudio.com/

🔹 インストール手順

上記のリンクから、自分のOSに合った「ダウンロードボタン」をクリック
ダウンロードしたファイルを開いて、画面の指示に従いインストール
インストール完了後、VS Codeを起動！

👉 これでVS Codeの準備ができました✨

VS Codeの基本設定（初心者向けおすすめ設定）

VS Codeは初期状態でも使えますが、開発をスムーズにするための設定 をしておくと便利です！

🔹 まずは「日本語化」しよう（まだ英語の人向け）

左の「拡張機能マーク（四角が4つ並んでいる）」をクリック
検索バーに Japanese Language Pack と入力
「Install（インストール）」ボタンをクリック
インストール完了後、VS Codeを再起動すれば 日本語化完了！ 🎉

👉 英語が苦手な人は、まずはこれを設定すると使いやすくなります！

必須の拡張機能（プラグイン）をインストール

VS Codeには、作業を快適にする「拡張機能（プラグイン）」があります。WordPressやPHPの開発には 以下の3つが必須 なので、インストールしておきましょう！

📌 おすすめ拡張機能

✅ PHP Intelephense（PHPのコード補完を強化）
✅ Live Server（ファイルを保存すると、ブラウザで自動更新）
✅ MySQL extension for VS Code（データベースを操作できる）

🔹 インストール方法

左の「拡張機能マーク」をクリック
検索バーに拡張機能の名前を入力
「インストール」ボタンをクリック
インストール完了後、VS Codeを再起動すればOK！

👉 これで開発がグッと楽になりますよ✨

MAMP/XAMPPとVS Codeを連携する設定

ローカル環境でスムーズに開発するために、MAMP/XAMPPとVS Codeを連携 させましょう！

🔹 まずはローカルフォルダを作成

MAMP/XAMPPの「htdocs」フォルダを開く（ここにプロジェクトを作成）
- MAMP：/Applications/MAMP/htdocs/
- XAMPP：C:\xampp\htdocs\（Windows） / /Applications/XAMPP/htdocs/（Mac）
htdocs 内に、新しいフォルダを作成（例：myproject）

🔹 VS Codeでフォルダを開く

VS Codeを開く
「ファイル」→「フォルダーを開く」 を選択
先ほど作成した htdocs/myproject を選択して開く

👉 これで、VS Codeでローカル開発ができる準備が整いました！🎉

WordPressをローカル環境で動かす方法

ここからは、MAMP/XAMPPを使ってWordPressをローカル環境で動かす手順 を解説します！これができれば、サーバーを使わずにWordPressのカスタマイズやテーマ開発が自由にできます✨

1. WordPressをダウンロード＆設置する

まずは、公式サイトから WordPress本体 をダウンロードして、ローカル環境に設置しましょう。

🔹 ダウンロード＆設置手順

WordPress公式サイト（https://ja.wordpress.org/download/）から最新のWordPressをダウンロード
ダウンロードしたZIPファイルを解凍
解凍した wordpress フォルダの名前を変更（例：mywordpress）
そのフォルダを MAMP/XAMPPの「htdocs」フォルダの中」に移動
- MAMP → /Applications/MAMP/htdocs/mywordpress
- XAMPP → C:\xampp\htdocs\mywordpress（Windows） / /Applications/XAMPP/htdocs/mywordpress（Mac）

📌 これでWordPressのファイルをローカル環境にセットできました！

2. データベースを作成する（phpMyAdminを使用）

WordPressを動かすには、データベース（MySQL） が必要です。ここでは、phpMyAdminを使ってデータベースを作成します💡

🔹 MAMP/XAMPPでデータベースを作成する手順

ブラウザで http://localhost/phpmyadmin/ にアクセス
「データベース」タブをクリック
新しいデータベースを作成（例：mywordpress_db）
文字セット（照合順序）を utf8_general_ci に設定して「作成」ボタンをクリック

👉 これでデータベースが準備完了！

📌 デフォルトのデータベース情報（MAMP/XAMPP）

項目	MAMP	XAMPP
データベース名	さっき作成したもの（例：mywordpress_db）	さっき作成したもの（例：mywordpress_db）
ユーザー名	root	root
パスワード	root（初期値）	なし（空白）
ホスト名	localhost	localhost

👉 この情報は、次の「WordPressのインストール」で使うのでメモしておきましょう！

3. WordPressのインストール（セットアップウィザード）

データベースの準備ができたら、WordPressをセットアップしましょう！

🔹 セットアップ手順

ブラウザで http://localhost/mywordpress/ にアクセス
言語を選択（日本語を選ぶ）
「さあ、始めましょう！」をクリック
データベース情報を入力（先ほどメモした情報を入力）
- データベース名：mywordpress_db
- ユーザー名：root
- パスワード：root（MAMPの場合）/ 空白（XAMPPの場合）
- データベースのホスト名：localhost
- テーブル接頭辞：wp_（そのままでOK）
「送信」をクリックし、「インストール実行」を押す
WordPressの管理情報を設定（サイトタイトル、ユーザー名、パスワードなど）
「WordPressをインストール」ボタンをクリック！
完了！http://localhost/mywordpress/wp-admin/ にアクセスしてログイン 🎉

📌 これでWordPressをローカル環境で動かすことができました！

VS CodeでWordPressのファイルを編集してみよう！

ローカル環境でWordPressが動くようになったら、VS Codeを使ってテーマやプラグインをカスタマイズ してみましょう！🎨💻

1. WordPressのフォルダをVS Codeで開く

まず、WordPressのファイルを編集できるように、VS Codeでプロジェクトを開きます。

🔹 フォルダを開く手順

VS Codeを起動
「ファイル」→「フォルダーを開く」 を選択
MAMP/XAMPPの htdocs 内にある WordPressフォルダ（例：mywordpress） を選択
VS CodeにWordPressのフォルダが読み込まれ、ファイル一覧が表示される

📌 これでWordPressのファイルを編集する準備が完了！

2. WordPressのテーマをカスタマイズする

WordPressのデザインを変更したい場合は、テーマのファイルを編集 します。

🔹 テーマファイルの場所

mywordpress/wp-content/themes/使用中のテーマ名/

例えば、デフォルトテーマの「Twenty Twenty-Four」を編集するなら、以下のフォルダ内のファイルを開きます。
📁 wp-content/themes/twentytwentyfour/

🔹 よく編集するファイル

ファイル名	役割
`style.css`	サイトのデザイン（CSS）
`functions.php`	テーマの機能を追加
`header.php`	ヘッダー部分
`footer.php`	フッター部分
`single.php`	投稿ページのデザイン

👉 例えば、style.css を開いて以下のコードを追加すると、サイトの背景色が変更されます！

body {
  background-color: #f0f0f0;
}

編集が終わったら、「保存（Ctrl + S / Cmd + S）」 を押し、ブラウザで http://localhost/mywordpress/ をリロードして変更を確認しましょう！✨

3. WordPressのプラグインを編集する

テーマだけでなく、プラグインのカスタマイズ もできます！

🔹 プラグインファイルの場所

mywordpress/wp-content/plugins/

👉 独自のプラグインを作成する場合

wp-content/plugins/ 内に 新しいフォルダ（例：my-plugin） を作成
その中に my-plugin.php というファイルを作成
以下のコードを追加して保存

<?php
/*
Plugin Name: My Custom Plugin
Description: これはカスタムプラグインのサンプルです。
Version: 1.0
Author: あなたの名前
*/

function my_custom_function() {
    echo "<p>このテキストはカスタムプラグインによって追加されました！</p>";
}
add_action('wp_footer', 'my_custom_function');

WordPress管理画面の「プラグイン」から、このプラグインを 有効化 すると、ページのフッターにメッセージが表示されます！

📌 これで簡単なカスタムプラグインを作ることができました！🎉

4. VS Codeのデバッグ機能を活用する

PHPコードを編集するときに、エラーを発見しやすくするために デバッグ機能を有効化 すると便利です！

🔹 `wp-config.php` でデバッグモードをONにする

VS Codeで wp-config.php を開く
以下のコードを探して、false を true に変更

define('WP_DEBUG', true);

保存後、WordPressでエラーが発生した際に、画面上にエラー内容が表示されるようになる

👉 これでコードのミスを素早く発見できます！

まとめ：ローカル環境でWordPress開発を始めよう！

これで、VS CodeとMAMP/XAMPPを使って ローカル環境でWordPressのテーマやプラグインを編集する方法 を学びました🎉

✔ この記事の振り返り

MAMP/XAMPPをインストールしてローカル環境を構築
WordPressをローカル環境にインストールして動作確認
VS Codeを設定してWordPressのファイルを編集できるようにする
テーマやプラグインをカスタマイズして、オリジナルのサイトを作る！

👉 ローカル環境なら、サーバーに影響を与えず安心して開発できます！
ぜひこの記事を参考にして、自分だけのWordPressサイトを作ってみましょう✨

💡 さらに開発を効率化するには？

VS Codeの拡張機能おすすめ12選！初心者でも作業効率が劇的にUPする方法
VS Code初心者必見！基本の使い方と便利な設定まとめ

👉 もっと効率よく開発するなら、お問い合わせもどうぞ！
📩 コーディングの相談・依頼はこちら 💻✨