IT

【XAMPP】PHPとMySQLの開発環境を構築する方法

PHPの開発環境は、XAMPPを使うとApache・MariaDB(MySQL互換)・PHPをまとめて入れられます。インストールからVSCodeの準備、htdocsでのプロジェクト作成、ローカルでの表示確認までを画面つきで紹介します。

この記事の結論: PHPの開発環境をパソコンに作るなら、Webサーバー(Apache)・データベース(MySQL互換のMariaDB)・PHPをまとめて入れられるXAMPPが手軽です。XAMPPを入れてApacheを起動し、htdocsフォルダーに作ったプロジェクトをVSCodeで開いて編集すれば、ブラウザで http://localhost/プロジェクト名/ を開いて動きを確かめられます。

PHPを使用して、アプリを開発するには、XAMPP(ザンプ)をインストールし、PHPとMySQL環境を構築する必要があります。
この記事では、XAMPPを利用して、PHPとMySQLの環境構築を行い、アプリの立ち上げまでご紹介できたらなと思います!
ぜひ最後までご覧ください!

①XAMPPとは

XAMPPとは、アプリ開発をローカル環境に構築することができたり、開発に必要なツールを一括でインストールすることができたりする有能なパッケージです。

主なメリットとしては、

・初心者でも簡単にアプリ開発環境を構築することができる
・AWSやAzureといったクラウドサーバーにもインストールできる

などが挙げられます!

XAMPPの主な特徴について、簡単にご紹介しますね!

クロスプラットフォームに対応

XAMPPの「X」とは、「クロスプラットフォーム」のことを意味し、

・Windows
・Mac
・Linux

など、多くのOSに対応し、同じように環境構築を行うことができます。
それぞれのOSでインストールするモジュールが異なるので、それは後にご説明しますね!

Apache

XAMPPの「A」とは、最も一般的で広く使われているオープンソースのWebサーバーソフトウェアである「Apache」のことを意味しています。

Apache HTTP Server(通常は単にApacheと呼ばれます)は、1995年にリリースされ、その後も世界中の多くのウェブサイトで使用されています。

Apacheは、セキュリティ機能、ドキュメントとコミュニティサポートが豊富といったメリットあり、信頼性や柔軟性の高いことが主な特徴です。

Maria DB(MySQL)

XAMPPの「M」とは、人気なデータベースシステムの「Maria DB」を意味しています。

MariaDBは、MySQLの互換性を持つオープンソースのリレーショナルデータベース管理システム(RDBMS)です。MySQLの元々の開発者であるMichael “Monty” Widenius(マイケル・モンティ・ウィデニウス)によって開発され、MySQLのコードベースから派生しています。

今回は実際に、世界でも人気のあるMySQLを使用できるように環境構築を行うので、使用できるようになると他のアプリケーションの開発でも活かすことができます!

PHP

XAMPPの「P」とは、アプリ開発に使用される「PHP」と「Perl」を意味しています。

PHP(PHP: Hypertext Preprocessor)は、主にウェブ開発に使用されるスクリプト言語であり、HTMLに埋め込むことで、動的サイトの開発に役立ちます。PHPは、1994年にラスムス・レルドルフによって開発され、その後急速に広まり、現在も広く使用されている言語です。

Perl(Practical Extraction and Reporting Language)は、テキスト処理やシステム管理などの用途に適したスクリプト言語です。ラリー・ウォールによって開発され、初期のUNIX環境で広く使用されました。Perlは、強力な文字列操作機能や正規表現、データ処理の機能を備えており、ウェブ開発やシステム管理、テキスト処理などの多岐にわたる用途で利用されます。

②XAMPPのインストール

実際にXAMPPをインストールして、環境を構築しましょう!
下記のリンクからXAMPPの公式ページにいってください!

XAMPP Install

OSを選択してインストール

ここで使用されているOSを選択して、下記からダウンロードしましょう

Apache Friendsの公式サイト。Windows・Linux・OS X向けのXAMPPのダウンロードボタンが並ぶ

↓

クリックして、開きます

ダウンロードしたディスクイメージの中の「xampp-osx-8.2.4-0-installer.app」

下記のエラーが表示された方は、「Eject Disk Image」を選択して、設定を開いてください!

macOSで「開発元を検証できないため開けません」と表示されたXAMPPのインストーラーの警告

「Open Anyway」を選択して、再度ダウンロードしたファイルを開いてみましょう!

macOSのシステム設定「プライバシーとセキュリティ」で「Open Anyway(このまま開く)」を押す画面

Passwordを入力して、Unlockすれば、開くと思います!

設定の変更を許可するため、ユーザー名とパスワードを入力する画面

↓

「Next」を選択

XAMPPのセットアップウィザードの最初の画面

↓

「Next」を選択

インストールするコンポーネントを選ぶ「Select Components」の画面

↓

「Next」を選択

インストール先(/Applications/XAMPP)を示す「Installation Directory」の画面

↓

「Next」を選択

インストールの準備ができたことを示す「Ready to Install」の画面

これでXAMPPのインストールは、完了です!

③VSCodeのインストール

VSCode(Visual Studio Code)は、Microsoftが開発した無料で使用できるコードエディターです。主にアプリケーションの開発やプログラミング学習など、幅広い場面で使用されます。

VSCodeは軽量で高速な動作を特徴とし、豊富な拡張機能やカスタマイズ可能な設定を提供しているため、PHP以外にも、さまざまなプログラミング言語やフレームワークに対応しています。

VSCodeは、Windows、macOS、Linuxなどのさまざまなプラットフォームで利用可能であり、自分の好みや作業に適した環境を構築できます。

VSCodeのURL

実際にVSCodeをインストールして、環境を構築しましょう!
下記のリンクからVSCodeの公式ページにいってください!

VSCode Install

インストールが完了したら、アプリケーションを起動して、この画面が表示されたらインストール完了です!

インストール後に起動したVisual Studio Codeのようこそ画面

④htdocsでプロジェクトを作成

XAMPPのhtdocsディレクトリ(通常はXAMPPのインストールディレクトリ内にある)は、ローカルサーバーに配置されたウェブサイトやアプリケーションのファイルを格納する場所になります!

これにより、開発する側はローカルでウェブサイトやアプリケーションを開発し、実際にブラウザで確認することができます。htdocsディレクトリ内のファイルは、Apacheサーバーによって配信されるため、開発者が作成したウェブページやアプリケーションは、ブラウザからアクセス可能となります。

XAMPPの保管場所を開く

②でインストールしたXAMPPアプリケーションを起動し、「Open Application Folder」をクリックします。
(WindowsとLinuxは、表示形式が異なるので、似たような部分を探してみてください)

XAMPPの管理画面(Welcome)で「Open Application Folder」を選ぶ

htdocsフォルダーを開く

XAMPPの保管場所を開いたら、htdocsフォルダーを選択して、オープンします。

XAMPPのフォルダー(xamppfiles)の中のhtdocsフォルダー

↓

ここで実際にファイルを追加して、アプリ開発を行えます!
(個人で追加したフォルダがありますが、それは無視してください)

htdocsフォルダーの中身

新規プロジェクトファイルの作成

上記のhtdocs内に、アプリ開発用の新規ファイルを追加しましょう!
私は「SampleApp」として、追加します。

htdocsの中に新しく作った「SampleApp」フォルダー

⑤ローカルサーバーを開いてみる

ローカルサーバーは、自分のコンピュータ上でウェブアプリ開発を行うための仮想的なサーバーです。インターネットに接続されていなくても使用することができるのが特徴です。

ローカルサーバーを使うと、実際のウェブサービスと同じように開発を進めることができ、インターネット上に公開されることがありません。

そのため、プライバシーやセキュリティの心配がなく、自由に実験やテストを行うことができます。

プロジェクトをVSCodeで開く

④でhtdocsに作成した新規プロジェクトファイルを、VSCodeで実際に開いてみましょう!

htdocsのプロジェクトファイルを、VSCodeへドラッグ&ドロップをすることで、簡単に開けます!
(VSCodeの[ File -> Open Folder] から開いても問題ありません)

htdocsのSampleAppフォルダーをVSCodeにドラッグ&ドロップして開く

↓

作成したSampleAppが、VSCodeに追加されました

VSCodeのエクスプローラーにSAMPLEAPPフォルダーが追加された画面

Apacheサーバーを起動

②でインストールしたXAMPPのmanager-osx.appを起動し、「Apache Web Server」をStartします
(インストール直後であれば、開いていると思います)

XAMPPの「Manage Servers」でApache Web ServerがRunningになった画面

起動していない方は、こちらから開いてください

XAMPPフォルダーの中のmanager-osx.app

PHPファイルを追加して、ブラウザを開く

VSCode上で、プロジェクトファイルの中に、「index.php」のファイルを追加しましょう

VSCodeでSampleAppの中にindex.phpを作り、見出しのHTMLを書いた画面

コードは、なんでも大丈夫ですが、簡単なサンプルとして、貼り付けておきますね!

html
<h1>SampleApp</h1>
<h2>Sample</h2>
<h3>App</h3>

index.phpファイルを追加できたら、ブラウザを開いてサーバーのセットアップは完了です!

http://localhost:80/sampleapp/

ブラウザで http://localhost/sampleapp/ を開き、SampleAppの見出しが表示された画面

上記URLで開かない方は、Apache Web Server -> Configure のPort番号を確認し、置き換えてから、URLに貼り付けてください!(筆者の環境では、下の画面のとおり80番でした)

Apache Web Serverの「Configure」画面。Portは80

まとめ

XAMPPを使用することで、手軽にローカル環境を構築し、開発をスムーズに行うことができますが、
PHPとMySQLの開発環境を構築した今回の手順は、ウェブ開発者として、重要なスキルの1つとなります。

この記事では、XAMPPのインストールからApacheを使用して、ブラウザの起動、PHPファイルの配置をご紹介しました。今後は、MySQLの環境構築やアプリ開発についても紹介していきますので、ぜひ興味がある方は参考にしてみてください!

インスタやXで、質問にも対応しますので、気軽にご連絡ください!

株式会社bundlyzeでは、業務システムを要件定義から開発・保守運用まで一貫して手がけています。学習から一歩進んで、社内で使う仕組みを自分たちで作るか、既製のサービスを使うかで迷ったときの考え方は、SaaSかオーダーメイドか|業務システムの選び方にまとめています。

よくある質問

XAMPPに入っているPHPのバージョンは?

XAMPPはPHPのバージョンごとに配布されています。2026年10月2日時点で、公式のダウンロードページではWindows版・Linux版は8.2.12、macOS版は8.2.4が最も新しい版でした(Apache Friends のダウンロードページ、2026年10月2日確認)。macOS版は更新が止まっているように見えるので、Macで新しいPHPを使いたい場合は、ほかの方法も比べてみてください。

XAMPPでMySQLを使うには?

XAMPPに入っているのは、MySQLと互換性のあるMariaDBです。XAMPPの管理画面でApacheと同じように「MySQL」(macOS版では「MySQL Database」)を起動すると使えるようになり、ブラウザで http://localhost/phpmyadmin/ を開けば、画面からデータベースやテーブルを作れます。

XAMPPとVSCodeはどう組み合わせればいいですか?

役割を分けて使います。XAMPPはPHPを動かすサーバー、VSCodeはコードを書くエディターです。htdocsの中に作ったプロジェクトのフォルダーをVSCodeで開いて編集し、保存したらブラウザで再読み込みして確かめる、という流れになります。