XAMPPをインストールする

インストールするXAMPPのバージョン

下記のページから「PHP7.2.5」以上のXAMPPをダウンロードします。

今回は「LARAVELバージョン5.5」をダウンロードします。それに伴い「LARAVELバージョン5.5」が対応している、「PHP7.2.5」以上のXAMPPをダウンロードし、ローカル開発環境として使用します。xamppのインストール画面では、phpのバージョンごとにインストールするxamppを選択するようになっているのですが、「PHPバージョン8系」では「LARAVEL5.5」が使えない可能性がありますので、「PHPバージョン7系」のXAMPPをインストールしてください。

<a href="https://www.apachefriends.org/jp/download.html">https://www.apachefriends.org/jp/download.html</a>

<figure class="wp-block-image">
    <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634288217.png" alt="XAMPPインストールページ">
</figure>

インストール手順

ダウンロードした「XAMPP-windows-installer.exe」をクリックして、インストールを開始します。

exeファイルがダウンロードできたら、起動しインストールを行います。

<figure class="wp-block-image">
    <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634288414.png" alt="XAMPP_installer.exeファイルアイコン">
</figure>

通常インストール時には「Cドライブ/programfile/」にソフトがダウンロードされますが、programfileに解凍してしまうと、トラブルが多く不便なので、今回はCドライブの直下にダウンロードを行います。

OKを押して、ダウンロード先の選択画面に進みます。

<figure class="wp-block-image">
    <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634288653.png" alt="「ProgramFiles配下にダウンロードは避けて下さい」の警告文">
</figure>

スタート画面です。Nextボタンを押して次の画面へ進みます。

<figure class="wp-block-image">
    <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634288904.png" alt="XAMPP_SetupWizardのスタート画面">
</figure>

次はインストールするツールを選びます。基本的に全部インストールでOKです。

<figure class="wp-block-image">
    <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634289154.png" alt="ダウンロードソフト選択画面">
</figure>

次にインストール先のフォルダです。デフォルトでCドライブ直下にインストールするようになってますので、このままでOK。

<small>※制作を進めていくと1G以上のサイズになってしまうこともあるので、ダウンロード先をDドライブに変更しても動作に問題はありません</small><br><br>

続けて言語設定です。

「English」を選択して「Next」をクリックしましょう。

<figure class="wp-block-image">
    <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634289295.png" alt="XAMPPコントロールパネル言語選択画面">
</figure>

BitnamiというPHPとMySQLのセットになっているツールなど、XAMPPに搭載されているツール説明機能紹介の文が表示されます。

「Next」をクリックして、進みます。

<figure class="wp-block-image">
    <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634290719.png" alt="BitnamiやDrupalなど、XAMPPに搭載されているツールの説明画面">
</figure>

続けて「Next」をクリックしていくとインストールが実行されます。

<figure class="wp-block-image">
    <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634290819.png" alt="XAMPPのインストール画面">
</figure>

XAMPPを起動して、コントロールパネルが表示されるとインストール完了です。

画像のように上から『Apache』『MySQL』の「Start」ボタンをクリックして起動しましょう。

<figure class="wp-block-image">
    <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634290875.png">
    <figcaption></figcaption>
</figure>

Apacheが起動できない場合

Apacheが起動できない場合、別のソフトが同じポート番号を使っている可能性があります。

<p></p>上の画像でPort80と表示されている通り、80番をXAMPPは使ってます。例えば、Skypeなども80番を使用している事が多いので、Skypeを使ってる場合は終了(Quit)してから試してみてください。それでもダメなら、その80番を使ってるアプリを探して終了してからApacheを起動しましょう。
<p></p>

<p>ブラウザに「http://localhost/」と入力し、XAMPPにアクセスしてみましょう。
このように表示されれば、XAMPPの仮想サーバーがちゃんと動いているということが確認できます。</p>
<figure class="wp-block-image">
    <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634291428.png" alt="XAMPPダッシュボード画面">
</figure>

ブラウザで確認する

「XAMPP/htdocs/」に配置したファイルを確認するときは、ブラウザに「http://localhost/」で始まるURLを入力することで、XAMPPのApacheサーバーを経由して確認することができます。

<p>(例)「XAMPP/htdocs/test/test.php」を作成して、ブラウザからそのファイルを確認する時</p>

<div class="code-snippet">
    <div class="where-file">階層構造<br></div>
    <div class="hcb_wrap">
        <pre class="prism undefined-numbers lang-php">XAMPP<br>

└ htdocs

└ test

└ test.php

この場合は、「http://localhost/test/test.php」のように、htdocs配下からがlocalhost以降のパスになるように記述します。

※直接ブラウザにphpファイルをドラッグドロップしても、ブラウザがphpを処理できないので、ソースコードがそのまま表示されてしまいます。

ブラウザで確認の際は、上記のURLで開いてXAMPPのApacheサーバーを通して確認しましょう。