【実践】とある連載を見ながらXAMPP＆LaravelでHello World!

web系のサーバーサイドエンジニアを目指す奴のメモ書きです。
環境：Windows10

この連載の

https://codezine.jp/article/corner/765

第一回目の記事に沿ってやっていくよ！

https://codezine.jp/article/detail/11231

# 前提
### XAMPPインストール済みであること

https://qiita.com/4U5zo/items/178a65d500211a39e5a1

### Composerインストール済みであること

https://qiita.com/4U5zo/items/0660dfcb91f503428f78


# プロジェクトフォルダ作成
XAMPPに同梱されているApacheを使って開発したい場合は、XAMPPのドキュメントルート直下にプロジェクトフォルダが作成されるようにしよう。ドキュメントルートはデフォルトでは`XAMPP\htdocs`ディレクトリだよ！

では早速ドキュメントルートにLaravelプロジェクトを作成しよう。
コマンドプロンプトを起動して
```
XAMPPのドキュメントルートに移動
D:\>cd xampp\xampp\htdocs

ComposerでLaravelプロジェクトを作成
D:\XAMPP\XAMPP\htdocs>composer create-project --prefer-dist laravel/laravel firstlaravel
```
コマンドを実行するとインストール状況がバーッと出て少し待つと完了する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2626978/6251bab7-45e3-ab58-2a4e-9f037cfe9c12.png)

`Application key set successfully.`が表示されて入れば成功！

**before**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2626978/2351fe65-8867-336b-9f5b-8940d654f04e.png)

**after**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2626978/17d1be1a-07cd-d8cc-bf81-91f1ef7b95c7.png)

できてるぅ

実施したComposerコマンドの解説はこちら

https://qiita.com/4U5zo/items/e28abef2df68d4a99ec8#laravel%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AE%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89

# 動作確認
XAMPP Control Panelを起動してApacheのStartボタンでApacheを起動させます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2626978/2c48bb86-f71e-32e4-2bfa-9321ca262897.png)

Apacheが起動出来たら`http://localhost/firstlaravel/public/`にアクセスしてみよう！

成功していればイカした画面が表示されるよ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2626978/3d31eb45-733e-9e48-9036-9ff450f3e640.png)

ここで先ほどの`http://localhost/firstlaravel/public/`というURLについてみていこう
firstlaravelの後についているpublicとは何かというと、Laravelのプロジェクトフォルダ配下にあるpublicフォルダのことをさしています。
このpublicフォルダがLaravelのプロジェクトフォルダで唯一外部に公開されます。
そのためpublicフォルダに存在しないファイルをレスポンスすることはできないはず。
>publicフォルダに入れるべきファイルはCSSファイルや画像ファイル、JavaScriptファイルなど、Webに公開する通常のファイル類もこのディレクトリ内に配置します。

※通常webアプリを作るときはデフォルトのドキュメントルートではなく、publicフォルダをドキュメントルートとすることが多いみたいです。というかセキュリティ的になるべくアクセスできる対象が少ない方がよいのでpublicフォルダをドキュメントルートとするように普段は心がけましょう！情報漏洩のリスクを下げられます。
ドキュメントルートは、XAMPPと一緒にインストールされている`XAMPP\apache\conf\httpd.conf`(Apacheの設定ファイル)で変更可能です。

Laravelプロジェクトにはほかにもいろんなファイルやディレクトリがある
それぞれの解説はまた別の機会にメモしたい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2626978/f8cd0eda-bbf9-fb4c-8c94-b09aecff33c8.png)

# LaravelでHello World!の表示
いよいよスタートに立つ日が来たような気がします！
firstlaravelディレクトリ内のroutesディレクトリを開くとweb.phpというファイルがあります。これを適当なエディタで開きます。

```php
<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});
```
コメントの英語を翻訳
```
ここで、アプリケーションのWebルートを登録できます。 
これらのルートは、「Web」ミドルウェアグループを含むグループ内のRouteServiceProviderによってロードされます。 
今、素晴らしいものを作成してください！
```
どうやら`"firstlaravel\routes\web.php"`でリクエストをさばいているようですね！
Laravelプロフジェクトフォルダ配下のroutesフォルダはルーティングに関係するファイルを配置するディレクトリらしいです。

エディタでコードを追加します。

```php
<?php

use Illuminate\Support\Facades\Route;

//コメント省略

Route::get('/', function () {
    return view('welcome');
});

//追加
Route::get("/hello", function () {
	print("<h1>Hello World!</h1>");
	return null;
});
```

**編集の保存を忘れないように！**

保存したら下記にアクセスします。
http://localhost/firstlaravel/public/hello
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2626978/3d39987d-3a66-a6b1-689d-1286a1593507.png)
\Hello World!/

とりあえずHello World!ができました！
追加したコードの解説は次回明かされる。。

参考資料
http://lovee7.blog.fc2.com/blog-entry-128.html
https://codezine.jp/article/detail/11231