初心者向け！PHPを用いたWebアプリケーション作成（環境構築編）

# はじめに
こんにちは！社会人一年目の石川です。
記事をご覧いただきありがとうございます。
私は現在、PHPを用いた研修でWebアプリケーションの作成へと進もうとしています。
そこでPHPで最も人気のあるフレームワークの一つであるLaravelを使ってみたい！と思ったので記事にしました。

:::note warn
注意
この記事はWindowsユーザー向けです。
:::

## 目次
1. XAMPP
     * [XAMPPとは？](#xamppとは)
    * [XAMPPのインストール手順](#xamppのインストール手順)
    * [XAMPPの動作確認](#xamppの動作確認)
2. Composer   
    * [Composerとは？](#composerとは)
    * [Composerのインストール手順](#composerのインストール手順)
    * [Composerの動作確認](#composerの動作確認)
3. Laravel   
    * [Laravelとは？](#laravelとは)
    * [Laravelのインストール手順](#laravelのインストール手順)
    * [Laravelの動作確認](#laravelの動作確認)
    
4. [最後に](#最後に)


## XAMPPとは
XAMPP（クロスプラットフォーム、Apache、MySQL、PHP、Perl）はローカル環境でウェブサイトやウェブアプリケーションを開発・テストするためのツールセットです。

## XAMPPのインストール手順
![最初.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/8c2bf9fb-41f6-6493-3e6e-c0ce1c7b3cff.png)

こちらがインストールページです。「Windows向けXAMPP」を選択します。
<br>
![素晴らしい.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/d65af208-b8d0-232f-b673-cc7de7b778d1.png)

上記の画面が表示されダウンロードを開始します。
<br>
![スタートしてていいか.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/b4db7e80-58e7-19a0-7f95-0b2cad9f176d.png)

start up画面です。「Next」を選択します。
<br>
![SQL選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/b534f0a0-df83-fff6-da65-812d222d5ad5.png)

上記の画面でコンポーネントを選択し、「Next」を選択します。
<br>
![C￥.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/4c9592dc-5cc1-fcb8-8227-ae79b62a0794.png)

上記の画面の`C:¥xampp`というパス名でXAMPPがインストールされているディレクトリを指しています。XAMPPのフォルダを選択し「Next」を押します。
<br>
![本当にインストール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/a03faf8c-6756-0017-5d4d-903cab783cc9.png)

インストール確認です。「Next」を押し、インストールを実行します。
<br>
![インストール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/260cb9d7-6ef1-7753-fcd5-f10ecd723273.png)

インストールが開始されました。

しばらく待機して、インストールが完了したらXAMPPの対応は終わりです。


## XAMPPの動作確認
![XAMPP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/7abc2c06-3996-ae25-d66e-89c256c19480.png)

インストールしたXAMPPを開くと上記のような画面が表示されます。下記の手順で動作確認を行います。
<br>
1. **ApacheとMySQLを起動**: 
それぞれのサービスの横にある「Start」ボタンをクリックします。サービスが正常に起動すると、横にあるボックスが緑色になります。またRunningステータスが表示されます。

2. **ブラウザでXAMPPのウェルカムページにアクセス**: 
ウェブブラウザを開き、アドレスバーに`http://localhost`と入力します。これにより、XAMPPのウェルカムページが表示されます。
![スクリーンショット 2024-05-19 174120.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/3c65e0f4-1f40-9d2e-c7be-e1b753c2c61b.png)

3. **Apache動作確認**:
XAMPPのウェルカムページが表示されたら、Apacheが正常に動作していることが確認できます。

![スクリーンショット 2024-05-19 174413.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/4c813244-b111-4231-805f-4256b7153cf1.png)
4. **MySQLの動作確認**:
phpMyAdminへのリンクをクリックし、MySQLの管理画面にアクセスします。アクセスできれば、MySQLも正常に動作しています。



## Composerとは？
続いて、Composerを導入します。

Composerは、PHPの依存性管理ツールであり、ライブラリやフレームワークの依存関係を管理することができます。

簡単に言うと、「このライブラリはこのライブラリが入ってないと動かない」といった事を管理する事で、きちんと動く環境を用意するのに必要となります。

つまり、Composerを使えばLaravelがしっかり動く環境になります！

## Composerのインストール手順
![スクリーンショット_18-5-2024_193446_getcomposer.org.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/eb29d5df-18b0-ba6b-983e-1b9f4ec67264.jpeg)
こちらがインストールページです。「Download」を選択します。

![スクリーンショット_18-5-2024_19404_getcomposer.org.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/afc24c48-31e2-82f7-a447-4f59d0ebf5a3.jpeg)

`Composer-Setup.exe`のリンクをクリックし、ダウンロードされたファイルを実行します。
<br>
![スクリーンショット 2024-05-18 194325.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/f69c9e15-1467-c4ca-ce18-e71930cac9ee.png)

インストールオプションの選択画面です。任意でチェックを入れます。今回はデフォルトの設定のまま使用するのでチェックを入れず、次へ進みます。
<br>
![スクリーンショット 2024-05-18 194444.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/cb4fb3c3-01ef-53d6-41bd-82681b743e4d.png)

`C:¥xampp¥php.exe`ファイルを選択します。XAMPPをCドライブの直下にインストールした場合、`php.exe`ファイルの場所は`C:\xampp\php\php.exe`です。そのため、Composerのインストール時にはこのファイルを選択します。
<br>
![スクリーンショット 2024-05-18 194508.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/19fcb84d-c902-785f-311a-5f7877f9db7d.png)

プロキシの設定です。プロキシを利用する場合は設定し、利用しない場合は何も変更せず「Next」を押します。
<br>
![スクリーンショット 2024-05-18 194536.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/87e224ec-e4f8-6a4a-42ce-3dfa40930cc5.png)

インストール確認画面です。問題が無ければ「Install」を押します。

インストールが完了すればComposerの導入は終了です。

## Composerの動作確認
**Composerのバージョン確認**: 

コマンドラインで以下のコマンドを入力して、Composerのバージョンを確認します。

![スクリーンショット 2024-05-18 203631.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/f22b0897-d795-d942-8e22-b6161f9cbb71.png)
<br>
正常にインストールされていれば、インストールされたComposerのバージョンが表示されます。

![スクリーンショット 2024-05-18 203347.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/c36e0e33-ce72-926a-33d9-62237a42e948.png)


## Laravelとは？
Laravelは、PHPで書かれたオープンソースのウェブアプリケーションフレームワークです。ウェブアプリケーション開発を容易にし、開発者が高品質なアプリケーションを効率的に構築するための強力なフレームワークです。


## Laravelのインストール手順

コマンドプロンプトを開き以下のコードを実行し新しいLaravelプロジェクトを作成します。

![スクリーンショット 2024-05-19 011944.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/e678e772-bc48-35d8-b018-94cec4a41562.png)

ここで、上記のコードのMyprojectはプロジェクトで付けたい名前に置き換えます。
<br>

![スクリーンショット 2024-05-19 011012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/4f53631d-3160-8fac-93ef-53dc1b108a39.png)

Laravelプロジェクトを作成した後、`.env `ファイルがプロジェクトのルートディレクトリに作成されます。このファイル内でアプリケーションキーを生成する必要があります。アプリケーションキーは、Laravelが暗号化やセッションの管理などのセキュリティ機能を実行するための重要なパラメータです。
<br>

![スクリーンショット 2024-05-19 012403.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/efa2fcbe-d150-60f4-23e1-35b0046f5729.png)

インストールが完了したら作成したプロジェクトに移動します。
<br>
<br>


![スクリーンショット 2024-05-19 011049.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/6ab0d7e8-a4ce-3e19-75d4-6b6d147f8d78.png)
![スクリーンショット 2024-05-19 011102.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/c90fd623-31da-0efc-798f-7e007bcfdf81.png)

上記のコマンドを実行するとLaravelがブラウザで確認できるようになります。ここでは２パターンのコマンドを載せておきます。

## Laravelの動作確認

![スクリーンショット 2024-05-19 013226.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/e0991bb8-b705-201f-84a2-1e12008d7c69.png)

ブラウザで`localhost:8000`とURLを入力してみてください。
<br>
![スクリーンショット 2024-05-19 013318.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787308/bd486153-78c3-8127-8198-d69181242236.png)

Laravelのページが表示されます！


実行中のプロセスを中断を中断したければ`control＋C`、Laravelアプリケーションを停止したければXAMPPのApache行の右側にある「Stop」ボタンをクリックします。

環境構築編は以上です！






## 最後に
この記事では、Laravelのインストールまでの手順について解説しました。手順を追うことで、初心者でもスムーズにLaravelの導入ができるとおもいます！Laravelの使用を開始するまでにすでに一苦労ですが今後もさらなる知識の獲得を目指し学んでいきたいと思います！
何かご指摘や改善点がありましたら教えていただけると幸いです！

最後まで読んでいただきありがとうございました！