Laravel + XAMPP + macで環境構築

## 今回やること
以下の環境でHelloWorldを出力するところまでやります。

OS macOS BigSur 11.2.2
Laravel 6.20.18
XAMPP 7.3.27

## composerのインストール
Composerとは、PHPのパッケージ管理システムです。
Laravelのインストールで後々使うことになるので、まずはComposerをインストールする必要があります。
以下のページのManual Downloadから最新版をダウンロードしてください。(この記事執筆時点では2.0.11)
https://getcomposer.org/download/　

これでcomposer.pharがダウンロードフォルダにダウンロードされたと思うので、/usr/local/bin/composer に配置します。

```
mv ~/Downloads/composer.phar /usr/local/bin/composer
```
composerのパーミッションを設定し、実行権限を付けます。

```
chmod a+x /usr/local/bin/composer
```
以下のコマンドでcomposerのバージョンが確認できれば、正常にインストールできています。

```
composer -V
```

## プロジェクトの作成
composerコマンドで、カレントディレクトリにプロジェクトが作成します。
プロジェクト名は任意のものに置き換えてください。
なお、今回はLaravelのLTSであるバージョン6を使っています。(下記コマンドの末尾でバージョンを指定しています。)

```
composer create-project --prefer-dist laravel/laravel プロジェクト名 "6.*"
```

これでアプリケーションの実行ができるはずなので、プロジェクトディレクトリに移動してコマンドを実行します。

```
% php artisan serve
Laravel development server started: http://127.0.0.1:8000
[Tue Mar 16 19:48:55 2021] PHP 8.0.2 Development Server (http://127.0.0.1:8000) started
```

ブラウザで http://127.0.0.1:8000 を閲覧すると以下のような画面になるはずです。
これでアプリケーションの実行確認は完了です。
![スクリーンショット 2021-03-16 19.55.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/0efc986a-d023-01de-e9f7-b1ae8790215d.png)

## XAMPPのインストール
XAMPPは以下の略称であり、webサーバー環境を構築するために使うソフトウェアです。
・X クロスプラットフォーム
・A Apache
・M MariaDB
・P PHP
・P Perl

このリンクからMac向けのインストーラがダウンロードし、インストールしましょう。
https://www.apachefriends.org/jp/download.html
![スクリーンショット 2021-03-16 20.03.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/97b41a89-2f48-9ac9-f2cf-dac0f66de208.png)
Startを押下するとStatusが緑色になり、IPアドレスが表示されます。
このIPアドレスにブラウザでアクセスできれば、webサーバーが動作していることになります。
![スクリーンショット 2021-03-16 20.15.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/d3990e51-d9a3-8b17-68c8-e0aaa4876673.png)
表示されたIPアドレスに、ブラウザからアクセスしてこんな感じの画面になっていれば成功です。
![スクリーンショット 2021-03-16 20.17.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/f10df050-f96b-9474-be41-e875c2ed34d3.png)
## Laravelアプリにアクセス
webサーバーを起動させたら、VolumesからMountボタン、Exploreボタンを押下して /opt/lampp ディレクトリを開きましょう。
![スクリーンショット 2021-03-16 20.21.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/a46064d7-c5e6-3a89-5fe9-41cbe06450fd.png)
Finderが開くので、lamppディレクトリ配下のhtdocsディレクトリに、先程作成したプロジェクトをコピーします。
![スクリーンショット 2021-03-17 14.47.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/270ed672-86d5-eaf6-14da-49a1bafa0d93.png)
これで http://XAMPPに表示されたIP/laravelアプリの名前/public にアクセスすると、laravelのトップページが表示されるはずですが、恐らくパーミションエラーになります。
![d3Gd10BPseplsOW1615963425_1615963502.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/ba52404d-6e31-f218-3c45-330d7c7b7585.png)
storageの配下に権限を付与してパーミッションエラーを回避させましょう。

```
chmod -R 777 storage
```
これで完了!
![スクリーンショット 2021-03-17 19.37.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/cf8032d6-eb38-4b2a-57d9-5fd6f3e85720.png)

## ルーティングの設定
Laravelでは、るルーティングをweb.phpというファイルに記述します。
プロジェクトフォルダ/routes/web.php を開いてみましょう。デフォルトで以下のような記述がされている思います。

```
<?php
Route::get('/', function () {
    return view('welcome');
});
```
これは、先程表示させた白い画面を表示させるための記述です。
ルートにアクセスされた際は、viewという関数を使って戻り値を設定しています。
この場合は戻り値にwelcomeというテンプレートを設定し、画面にレンダリングしています。
ということは、Laravelのデフォルトのトップ画面の正体は、welcomeというテンプレートだということです。

## HelloWorldの表示
Helloworldを表示させるために、まずはテンプレートを作成します。
プロジェクトフォルダ/resources/views というパスの配下に"helloworld.blade.php"というファイルを作成しましょう。
HelloWorldを出すだけなので、テンプレートファイルの記述は以下の1行のみです。

```
<h1>HelloWorld</h1>
```
では、HelloWorldを表示させるためにweb.phpを少しいじってみます。
以下を追記してみましょう。

```
Route::get('/hello', function () {
    return view('helloworld');
});
```
これで、 http://XAMPPに表示されたIP/laravelアプリの名前/public/hello にアクセスするとHelloWorldが表示されます!
![efIrPvl5HtEYIHS1616038600_1616038627.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/85a84f85-a833-cc1e-ec1b-b3b112575b59.png)