XAMPPのダウンロード、インストール。開発環境を構築する

XAMPPとは？

XAMPPは、Apache、MySQL、PHP、Perlを組み合わせたオープンソースのローカルサーバー環境です。Windows、Linux、macOSなど、複数のプラットフォームで利用可能で、Web開発者にとって便利なツールです。

XAMPPのダウンロードとインストール

公式サイト（https://www.apachefriends.org/index.html）にアクセスし、利用しているOSに適したバージョンをダウンロードします。

XAMPPとは？
XAMPPのダウンロードとインストール

XAMPPのインストールと最初の設定ガイド
1. インストールの手順
  1. パブリック/プライベートネットワークの許可
2. XAMPPの初期設定
XAMPPの基本的な使い方

XAMPPのインストールと最初の設定ガイド

まずはこちらの公式サイトからXAMPPを入手してください。ダウンロードします。

インストールの手順

ダウンロードしたインストーラーをダブルクリックして起動します。

インストーラーが起動したら、「Next」をクリックして進めます。
インストールするコンポーネントを選択します。通常はデフォルトの設定で問題ありませんが、必要に応じてカスタマイズが可能です。

インストール先のフォルダを選択します。ご自身が管理している場所など指定してあげます。この時フォルダは空のフォルダにしないとインストールできません。通常は「C:\xampp」が指定されます。
言語を選択します。英語とドイツ語のどちらかになります。
インストールの準備が整った画面です。問題なさそうでしたら「Next」。確認などがあれば「Back」で戻ります。

「Next」をクリックし、インストールを開始します。

インストールが完了したタイミングでApacheの許可が出ます。

パブリック/プライベートネットワークの許可

この画面は、WindowsファイアウォールがApache HTTP Server（XAMPPに含まれるWebサーバー）へのアクセスをブロックしないようにするための許可を求めるものです。
表示数を増やすと詳細が確認できます。
Apacheがネットワーク通信を行うため、ファイアウォール設定が必要になります。
- プライベートネットワーク：ローカルでの開発環境が正常に動作します。
- パブリックネットワーク：通常選択する必要はありませんが、特別な設定がある場合のみ許可してください。

インストールが完了したら、「Finish」をクリックしてインストールを完了します。

XAMPPの初期設定

コントロールパネルの起動

インストールが完了すると、XAMPPコントロールパネルが自動的に起動します。これが、XAMPPを管理する中心的なツールです。

ApacheとMySQLの起動

コントロールパネルの「Apache」の隣にある「Start」ボタンをクリックしてApacheサーバーを起動します。

同様に「MySQL」の隣にある「Start」ボタンをクリックしてデータベースサーバーを起動します。

初回MySQL起動時に先ほどと同じく、Windowsファイアウォールの許可が確認されますので同じように設定します。

起動が成功すると、それぞれのモジュールのステータスが緑色で表示されます。

ポートの設定確認

XAMPPを初めて使用する際に、ApacheやMySQLが他のアプリケーションとポート番号の競合を起こすことがあります。その場合は、XAMPPのコントロールパネルで「Config」ボタンをクリックし、「Service and Port Settings」でポート番号を変更することができます。

※あくまでもポートが競合したり、どうしても変更したいケースのみ変更お勧めします。

ポート番号を指定したアクセス→http://localhost:8000
例えばポート番号を8000番に変更したい場合、ApacheのConfigを選択、httpd.confを開きます。

60行目くらいのListenの番号を変更します。

8000番ポートにアクセスできました。

XAMPPの基本的な使い方

ローカルホストへのアクセス

Apacheが正常に起動している場合、Webブラウザで「http://localhost/」と入力することで、XAMPPのウェルカムページにアクセスできます。これにより、サーバーが正常に動作していることを確認できます。

ポート番号を指定したアクセス→http://localhost:80
IPアドレスを使用したアクセス→http://127.0.0.1/

htdocsフォルダへのファイル配置

XAMPPの「htdocs」フォルダにWebサイトのファイルを配置することで、ローカル環境でWebサイトを開発・テストすることができます。デフォルトでは「C:\xampp\htdocs」にこの「htdocs」フォルダが存在します。htdocs内のファイル等ウェルカムページは削除してかまいません。

最初のWebサイトを公開してみよう

最初のWebサイトを作る準備

プロジェクトフォルダを作成

XAMPPのhtdocsフォルダを開きます。
mywebsiteという名前の新しいフォルダを作成します。

テスト用HTMLファイルを作成

フォルダ内にindex.htmlというファイルを作成。
以下の簡単なHTMLコードを記述して保存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
</head>
<body>
    <h1>Welcome to My First Website!</h1>
    <p>This is a test page created with XAMPP.</p>
</body>
</html>

HTML

ローカルホストで公開する

XAMPP Control Panelを開き、Apacheを「Start」します。
ブラウザを起動し、URLにアクセス→http://localhost/
mywebsiteをクリック

表示を確認

「Welcome to My First Website!」という見出しが表示されていれば成功です。

簡単なPHPスクリプトを試す

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP Test</title>
</head>
<body>
    <h1>PHP is Working!</h1>
    <p>Today’s date is: <?php echo date('Y-m-d'); ?></p>
</body>
</html>