XAMPPをサクッとインストールする方法と使い方を徹底解説！

「PHPファイルをブラウザで確認するにはXAMPPが必要」と言われても、何から手をつけて良いかわかりませんよね？

この記事では、指示通りにやるだけでXAMPPがインストールでき、PHPファイルをブラウザで表示できるようになるまでを解説しています。

つまりこの記事を読めば、環境構築がサクッと終わり、メインのプログラミングやコーディング、WordPress学習に進めます♪

※Windowsを使った解説ですが、Macでもほぼ同じです。ただ、Macでは「MAMP」というアプリを使うのがおすすめなので、Macの方は以下の記事を参考にしてください。

⇒MAMPのインストールから使い方までを3ステップ解説！

XAMPP（ザンプ）とはWEB制作で必要なものをパッケージ化したもの

XAMPP（ザンプ）とは、WEBアプリケーション作成の際に必要な複数のソフトウェアを、マルッとひとつにまとめてパッケージ化したものです。

具体的には、Apache（アパッチサーバー）、PHP（ PHPプログラム）、MySQL（データベース）、Perl（Perlプログラム）がまとめて入っています。

中身についてはよくわからないと思うので、今の段階では「PHPファイルを自分のパソコンで表示するのに必要なものが全て詰まった宝箱」だと思ってもらえればOKです！

つまり、XAMPPだけインストールしておけば、WEBアプリケーションを自分のパソコンで作成できる環境が整うということです。

これが一種の「環境構築をする」ということですね。

PHPでサービス開発する人だけでなく、WordPressサイトでのWEB制作、PHPフレームワークの「Laravel（ララベル）」を使ったWEB制作でも利用されています。

もちろんPHPを勉強するという人も、PHPファイルを表示するために使っています。

ちなみにXAMPPの名前は、これらのソフトウェアの頭文字を取ってつけられていますよ♪

XAMPPのダウンロード & インストール方法

ここからは、実際にXAMPPをインストールしていきましょう！

画像や解説に沿ってやっていただければ意外と簡単にできますので、ひとつずつ進みましょう♪

①XAMPPの公式サイトからダウンロードしよう！

まずはXAMPPの公式サイトからXAMPPのファイルをダウンロードしましょう！

以下から公式サイトに飛んでください。

公式サイトに飛びましたら、「その他のバージョンについてはこちらをクリックしてください」をクリックします。

PHPのバージョンを選択してダウンロードする場合

「その他のバージョンについてはこちらをクリックしてください」を押すと、以下のページに飛びます。

WindowsPCなら「XAMPP for Windows」
MacPCなら「XAMPP for MAC」
LinuxPCなら「XAMPP for Linux」
の部分からダウンロードをしていきます。

ダウンロードしたいバージョンの青い「Download」ボタンをクリックしましょう。

ボタンをクリックすると以下画像のページに移動し、ダウンロードが始まり「xampp-windows-x64-x.xx.xx-1-VC15-installer.exe」というファイルがダウンロードされます（Macは表示が違います）。

これはインストールするためのものなので、フォルダやFinderからダブルクリックで開きましょう！

ダブルクリックをしてインストールをしようとすると、以下のようなWarning（警告）が出ますが、「OK」を押して進んでいただいて大丈夫です。

②XAMPPを自分のPCにインストールしよう！

ダウンロードができたら、次はXAMPPをパソコンにインストールしていきます。

先ほどの警告に対して「OK」をクリックすると以下画面が表示されますので、「NEXT」をクリックしましょう。

次に「select components」が表示されます。

「どのソフトウェアをインストールする？」と聞かれているだけなので、特に理由がなければデフォルトのまま（全てチェックされている状態）「NEXT」をクリックしましょう！

※すでにインストールされているソフトウェアはグレーで表示されますが、無視でOKです！

どこにインストールするかを聞かれるので、XAMPPをインストールしたいフォルダ（任意）を選択します。

Windowsだと「C:\xampp」という形が多いかと思いますが、

• Cドライブの容量を空けておきたい
• パソコンにドライブが複数ある（Dドライブ、Eドライブなど）

という状態なら、他のドライブにインストールしてもOKです。

Macの場合はApplicationsフォルダが一般的ですね。

インストール先を指定できたら「NEXT」をクリックしてください。

次に「Bitnami for XAMPP」についての説明です。

「Bitnami for XAMPPについてもっと知りたいでしょ？」と誘われていますが、ほとんどの人が必要ないかと思うので、心を鬼にしてチェックを外しましょう。

最後に、「XAMPPをインストールするけど、いいわよね？」と聞かれるので、もちろん「NEXT」をクリックします。

「NEXT」をクリックしたら以下画面が表示され、インストールが開始されます。

お使いのPCのスペックや電波環境にもよりますが、2～10分ほどで終わるでしょう。

このように表示されたら、XAMPPはあなたのものです。

この後XAMPPを実際に動かしてみるので「Do you want to start the Control Panel？（せっかくだしコントロールパネル、開くよね？）」にはチェックを入れておきます。

そして、「Finish」を押したらインストール完了です。

XAMPPの使い方

XAMPPは「サーバー」と「データベース」を起動させれば、基本的な操作は終わりです。

まずはコントロールパネルを開きましょう！

XAMPPを使うときは、毎回コントロールパネルを開く必要があります。

開き方は簡単で、XAMPPをインストールしたフォルダに行き、XAMPPを選択し、その中の「xampp-control.exe」をダブルクリックするだけです。

すると、以下画像のようなコントロールパネルが開きます。

あとは、「Apache」と「MySQL」の「Start」を押すだけです。

チェックボックスにチェックが入れば起動完了となります。

Apache（アパッチ）が起動しない場合の解決策

ここでは、「XAMPPはインストールできたけど、Apacheのstartを押しても起動しない…」というよくあるエラーについて集めてみました！

エラーが出た場合、上記画像の緑枠部分にエラーの詳細が書いてあります。

これをコピーして、Googleの検索窓に貼り付けましょう。

解決策が出てきますよ♪

Skype（スカイプ）をインストールしていませんか？

最も多いエラーの原因が、「スカイプをインストールしているためにApacheが起動しない」ということ。

なぜスカイプを入れているとApacheが起動しないかというと、スカイプとXAMPPの「ポート」というものが同じだからです。

ポートとはアプリの識別番号のことで、ポート番号が被っていると「同じやつ2人いるからどっち開けばいいかわからんわ。エラー出しとこ。」とPCが困ってしまうのです。

解決策は、スカイプのポート番号を変更すればOKです。

スカイプを起動し、「ツール」→「設定」と進み、接続をクリックしましょう。

「上記のポートに代わり、ポート80と443を使用」のチェックボックスを外して、保存します。

あとは、もう一度Apacheを再起動すれば動くはずです。

その他のXAMPPが動かない時の解決策リスト

⇒インストールしたフォルダが良くないのかも

⇒「XAMPPを管理者として実行する」をしてみる

⇒Mac標準搭載のApacheがポートを使っている

表示したいファイルの設置場所

ブラウザでPHPファイルを開くには、XAMPPの「htdocsフォルダ」に開きたいPHPフォルダを設置する必要があります。

そのため、XAMPPを使ってWEB制作をおこなう場合は、htdocsにフォルダを配置しましょう！

XAMPPの直下にhtdocsはあるので、探してみてくださいね。

以下の画像のように、htdocsの中にはフォルダをいくつも作成可能です。

複数のWEBサイトを作る場合も安心ですね♪

hosts（ホスツ）ファイルを設定しよう！

ここまででXAMPPのインストールと使い方を学んできました。

上記が設定できた状態は、PHPファイルを開く土台ができた状態です。

さてここからは、「作成したPHPファイルをブラウザで表示できるようにする」ための設定をおこないます。

その第一歩として「hosts（ホスツ）ファイル」の設定をしていきましょう！

hostsファイルの場所

Windowsの場合

Windowsの場合、hostsファイルは以下にあります。

C:\Windows\System32\drivers\etc\hosts

▼見つからない場合はこちらの記事も参考にしてください。

⇒hostsファイルの開き方・設定方法

hostsファイルはわりと深い階層にあり、アクセスするのが面倒なので、デスクトップにhostsのショートカットをおくのがおすすめです。

▼hostsショートカットの作成方法▼

⇒hostsを管理権限で編集するショートカットを作成する

Macの場合

Macの場合は以下にあります。

/private/etc/hosts

ファインダーを選択 → メニューバーの「移動」 → 「フォルダを移動」 → 「/private/etc」を選択して「移動」 → hostsファイルを探す

Macの場合は上記の流れでhostsファイルを見つけられます♪

また、ファインダーを選択した状態で「Cmd + Shift + G」のショートカットキーを使えば、すぐにフォルダを移動可能なので、試してみてくださいね！

▼以下記事もご参考になるかと思います。

⇒【macOS】hostsファイルの場所と編集方法、書き換え方法

hostsファイル編集時の注意点

Windowsのhostsファイル変更方法

windowsの場合、hostsファイルは管理者権限を使って開かないと、保存することができません。

そのため、メモ帳を管理者権限で開きます！

上記の流れで簡単に実行可能なので、hostsファイルを編集するときはこの流れを覚えておくと良いでしょう♪

またウイルスソフトによっては、セキュリティの観点から、hostsファイルの保存を禁止させるものもあります。

例えば、Aviraというウイルス対策ソフトだと、設定画面で「Windows hostsファイルの書き込みを防ぐ」のチェックボックスを外しておかないといけません。

hostsファイルが開けたら、『hostsの設定方法』に進みましょう▼

Macのhostsファイル編集方法

Macの場合はhostsファイルの編集方法が3つありますが、Mac標準搭載のツール「ターミナル」を使ったやり方が1番簡単かと思います。

はじめのうちは戸惑いますが、ターミナルを使えるようにすると便利なことが多いので、ぜひトライしておきましょう！

※ターミナルとは、「コマンド」と呼ばれる命令文を使って、自分のパソコンの設定などを変更するために使うツールです。

ターミナルでhostsファイルを開こう！

Finder→アプリケーション→ユーティリティの中にターミナルがあります。

ターミナルを開いたら、以下を入力してenterを押しましょう。

sudo vi /private/etc/hosts

パスワードの入力を求められるので、Macのパスワードを入力してください。

これでターミナル内にhostsファイルが表示されました。（以下のような画面が表示されればOKです）

「i」を叩いて編集できるようにしよう！

キーボードで「i」を叩く（押す）と「INSERT」という表示が下にでます。

この状態が編集できる状態です。

何を書くかについては後で詳しく解説するので、今は試しに「127.0.0.1 anshinweb.localhost」と記述しましょう。

「control + C」でインサートモードを終了しよう！

「127.0.0.1 anshinweb.localhost」と記述したら、「control + C」を叩きます。

こうすることで、編集モード（インサートモード）が終了されます。

「:wq」で保存しよう！

最後に、「:wq」というキーを叩けばhostsファイルは保存されます♪

「:（半角コロン）」wqです。

これでhostsファイルを編集・保存できました。

hostsの設定方法

hostsファイルの設定方法は、「IPアドレス（127.0.0.1）」を記述し、その横に「ドメイン名」を記載するだけです。

例えば、

127.0.0.1 yahoo.jp

と追記して保存すると、yahoo.jpにアクセスした時に、あなたのローカルパソコン（127.0.0.1）にアクセスされるようになります。

「127.0.0.1」と「yahoo.jp」の間には半角スペースが必要なことに注意しましょう。

追加する際の例を挙げます。

anshinweb.localhostというURLを追加する場合は、

127.0.0.1 yahoo.jp
127.0.0.1 anshinweb.localhost

という形で下に追記していきます。

127.0.0.1 yahoo.jpを残したままにすると、yahoo.jpにアクセスできなくなるので、消しておきましょう。

以下画像のようになっていればOKですよ。

文頭の#（シャープ）はコメントアウトです。

メモを残したい時に使うと良いでしょう。

anshinweb.localhostは、任意のURLで大丈夫です♪

ローカルで表示するためのドメインと認識しやすいよう、「サイト名」+「.localhost」と記載するのがおすすめです。

vhostsの設定をしよう！

vhostsは「virtual host（バーチャルホスト）」というもので、「ふたつ以上のWEBサイトを扱う運用方法」のことです。

最初から意味を理解する必要はありませんが、1つのIPアドレスで複数のサイトを運用する場合はvhostsの設定が必要だと覚えておきましょう！

これからいくつもローカルでサイトを作ると思いますが、新規サイトを立ち上げるたびにvhostsの設定が必要となります。

httpd.confはどこにあるの？

httpd-vhosts.confは、XAMPPフォルダの以下にあります。

【Windowsの場合】
C:\xampp\apache\conf\httpd.conf

【Macの場合】
/Application/XAMPP/etc/httpd.conf

httpd.confの編集場所

Windowsの場合はCtrl + F、Macの場合はcommand + Fで下記のコードを探してみましょう。

#でコメントアウトされているので、先頭の#を削除します。

これでhttpd-vhosts.confでの設定が適用されます。

削除が完了したら保存して、httpd-vhosts.confを編集していきましょう。

【Windowsの場合】
#Include conf/extra/httpd-vhosts.conf
↓
Include conf/extra/httpd-vhosts.conf

【Macの場合】
#Include etc/extra/httpd-vhosts.conf
↓
Include etc/extra/httpd-vhosts.conf

httpd-vhosts.confはどこにあるの？

httpd-vhosts.confは、XAMPPフォルダの以下にあります。

【Windowsの場合】
C:\xampp\apache\conf\extra\httpd-vhosts.conf

【Macの場合】
/Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf 

vhostsの記述方法

以下をコピーした上で、httpd-vhosts.confに追記します。

意味もひとつずつ見ていきましょう！

# 安心ウェブ
<VirtualHost *:80>
    DocumentRoot C:/xampp/htdocs/anshin/
    DirectoryIndex index.php index.html
    ServerName anshinweb.localhost
    <Directory "C:/xampp/htdocs/anshin">
        order deny,allow
        allow from ALL
    </Directory>
</VirtualHost>

※スペースを全角で入力しないようご注意ください。

#はコメントアウト

# の後ろはコメントアウト（メモ）として使えるので、任意の文字を書いてOKです（どのサイトのvhosts設定かわかるようにするのが吉）。

DocumentRootはアクセス時に表示されるフォルダ

DocumentRoot（ドキュメントルート）というのが、anshinweb.localhostにアクセスした時に表示されるフォルダです。

上記でhttpd-vhosts.confを保存すると、anshinweb.localhost/test.htmlにアクセスした際に、C:/xampp/htdocs/anshin/test.htmlが表示されます。

ドキュメントルートはよく出てくるワードなので、ぜひ覚えておきたいですね！

DirectoryIndexは指定フォルダの中のどのファイルを表示させるかを決める

DirectoryIndexというのは、http://anshinweb.localhost/にアクセスした時に表示させるファイルです。

index.php index.htmlという書き方が一般的ですので、これは上記のままで良いでしょう。

この指定により、DocumentRootで指定したフォルダのindex.phpかindex.htmlを最初に表示するよう指定しています。

ServerNameはhostsで発行したドメイン名と紐付ける

ServerNameは、紐づけるドメインです。

あなたがhostsで設定したドメインを入力してください。

Directoryはフォルダのアクセス権限を指定している

Directoryの後ろのフォルダも、DocumentRootと同様に設定しましょう。

order deny,allowなどはアクセス権限などを指定しているだけなので、そのままの記述でOKです。

# 安心ウェブ
<VirtualHost *:80>
    DocumentRoot C:/xampp/htdocs/anshin/
    DirectoryIndex index.php index.html
    ServerName anshinweb.localhost
    <Directory "C:/xampp/htdocs/anshin">
        order deny,allow
        allow from ALL
    </Directory>
</VirtualHost>

# webgui.localhost
<VirtualHost *:80>
    DocumentRoot C:/xampp/htdocs/webgui/ ←変更箇所
    DirectoryIndex index.php index.html
    ServerName webgui.localhost ←変更箇所
    <Directory "C:/xampp/htdocs/webgui"> ←変更箇所
        order deny,allow
        allow from ALL
    </Directory>
</VirtualHost>

ローカルでもhttps（SSL）に対応させる場合の設定方法

ローカルでもhttps（SSL）でアクセスしたい場合は追加で設定が必要です。

※SSL化でエラーが出る可能性が高いので基本は設定しないでOKです！

PHPでOpenSSLを有効にしよう！（php.iniファイルを使います）

xampp\phpの下にある「php.ini」というファイルをエディターで開きましょう。

そして、下記の行がコメントアウトされていないことを確認してください。

文頭の「;（セミコロン）」がついていなければOKです。

// セミコロン付いてるとだめ
;extension=php_openssl.dll

// ↓以下のようにしましょう！

// セミコロン付いてなければOK
extension=php_openssl.dll

通常は有効になっているので、ほとんどの人は触らなくて良いかと思います。

httpd-vhosts.confファイルに追記

xampp\apache\conf\extraと進んで、その下の「httpd-vhosts.conf」ファイルを開きます。

ファイルの最後に以下を追記しましょう！

<VirtualHost *:80>
    DocumentRoot C:/xampp/htdocs/anshin/
    DirectoryIndex index.php index.html
    ServerName anshinweb.localhost
    <Directory "C:/xampp/htdocs/anshin">
        order deny,allow
        allow from ALL
    </Directory>
</VirtualHost>
# ここから追加
<VirtualHost *:443>
    SSLEngine on
    SSLCertificateFile conf/ssl.crt/server.crt
    SSLCertificateKeyFile conf/ssl.key/server.key
    DocumentRoot C:/xampp/htdocs/anshin/
    DirectoryIndex index.php index.html
    ServerName anshinweb.localhost
    <Directory "C:/xampp/htdocs/anshin">
        order deny,allow
        allow from ALL
    </Directory>
</VirtualHost>
# ここまで追加

これで「https://〇〇.localhost」でもアクセス可能となります。

※ただし、最初は「この接続ではプライバシーが保護されません」といったエラー表記が出ます（詳しくは後述します）。

vhostsの設定後はApacheの再起動が必須

vhostsの設定は新規サイトを追加するたびにおこないますが、httpd-vhosts.confを保存しただけでは反映されません。

httpd-vhosts.confに修正を加えたら、必ずApacheの再起動をするようにしましょう！

Apacheの再起動方法

Apacheの再起動は、コントロールパネルの「Apache」の「Stop」をクリックし、少し待って「Start」に切り替わるので、再度「Start」をクリックするだけで完了です（XAMPPを毎回閉じる必要はありません）。

これで、httpd-vhosts.confに追記した設定が反映されます。

スタートした時にエラーが出てapacheが起動しなかった場合は、httpd-vhosts.confに何らかの記載ミスがありますので、見直しましょう。

うまく動けば、完了です！

実際にブラウザでPHPファイルを表示させてみよう！

これまでの作業で、PHPファイルをブラウザで表示する準備が整いました。

試しに、あなたがhttpd-vhosts.confで設定したフォルダにPHPファイルを配置していきましょう！

以下のコードを書いたindex.phpを作成してみてください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>XAMPPのインストールデモ</title>
  </head>
  <body style="background: orange; color: white;">
    <?php
      echo 'XAMPPのインストールからブラウザでの表示までできたぜ！';
    ?>
  </body>
</html>

上記ファイルを、htdocs内に作ったフォルダに配置します。

本記事の例の通りに作っている場合は、htdocs/anshinフォルダですね！

そして、http://anshinweb.localhost/にアクセスします。

※ブラウザによっては、localhostの後ろのスラッシュ（/）まで入れないと表示されないことがあるので、注意が必要です。

HTTPSの場合は、設定が正しくても以下のような画面が出ます。

（ブラウザによって多少画面に違いがあります）

この場合は「site01 にアクセスする（安全ではありません）」をクリックすればOKです！

ブラウザで以下の画像のように文字を表示できたら完成となります！

ちゃんと表示されましたか？

うまく表示されない場合は、もう一度このページを見返してみましょう！

ここまでできれば、あとはあなたのやりたい放題です。

PHPファイルの他、HTMLやCSS、画像ファイルなんかも配置できるようになります！

phpMyAdminの開き方

最後に、データベースに触れるために「phpMyAdmin」の開き方について学習しましょう！

PHPでWEBサービスを作成していると「データベース」に触れる機会が増えてきますし、WordPressサイト作成にいたっては必ず必要だからです。

データベースを操作するには「phpMyAdmin」というツールを使います。

コントロールパネルからphpMyAdminを開こう！

XAMPPのphpMyAdminは、コントロールパネルから開くことができます。

MySQLの右にある「Admin」をクリックするだけです。

以下のような画面に移れば、phpMyAdminの表示が完了です♪