0から始めて1で終わるLaravelとJetstream

# 緒言
　この記事は、真っさらなLinux上でLaravelとJetstreamが動くようにするのが目的です。仮想マシンやDockerなどは使用しません。デフォルトの画面が現れるところまでが範囲ですので、実用には至りません。悪しからず御諒承くださいませ。手順はなるべく丁寧に書いたつもりですが、自明な部分まで事細かに書いてあるのでうんざりするかもしれません。また、バックグラウンドにある重要な概念について説明し出すと際限なくなるので触れられませんでした。

　使用環境は以下の通りです。

* [Ubuntu Desktop 20.04.1 LTS][ubuntu]
* 真っさらなPC
[ubuntu]:https://jp.ubuntu.com/download

　また、以下のような方々を想定して書いております。

* 言語のPHPと雑誌のPHPとの違いがわかる人
* コピー&ペーストやキーボード入力をこなせる人
* ちょっとした記述ミスや環境の違いを応用力で修正できる人
　最後だけやたら難易度が高いですが、気にしないでください。
　基本的には、[laravel日本語版][laravel]や[Jetsstream公式][jetstream]をもとに、わかりにくいところを補完していきます。
[laravel]:http://laravel.jp/
[jetstream]:https://jetstream.laravel.com/1.x/introduction.html
---

# 手順
## 第1章　Ubuntuをなんとか入れよう
　まずは、OSをインストールするところから始めます。0から、ですから。熟知している人は読み飛ばしてください。

 1. **今回使用するのとは別のPC**などで[ubuntu公式サイト][ubuntu]からインストール用イメージをダウンロードします。今回は、Ubuntu Desktop 20.04.1のLong-Term-Support版を使用しました。閲覧時点で新しい版が出ていれは、そちらを選択した方がいいでしょう。
 1. ダウンロードしたイメージを書き込み可能なDVDメディアかUSBメモリに焼き付けてください。USBメモリを使用する場合は[balena Etcher](https://www.balena.io/etcher/)がよろしいかと。
 1. **今回使用するPC**に、上記で作成したDVDなりUSBメモリなりを入れて起動します。起動直後にブート順位を設定するためのキー（`F2`だったり`F10`だったり`F12`だったりします）を押して、いま入れたDVD/USBメモリを選択します。
 1. ubuntuのインストールが始まります。最初に試用かインストールかを尋ねられるので、インストールの方を選択します。また、インストールするアプリケーションの種類を問われるのでminimumにしておきます。ブラウザやターミナルもminimumに入っているので御心配なく。タイムゾーンやホスト名、ユーザ名などは適宜入力します。アップデートのダウンロードも選択しておいた方がよいでしょう。
 1. インストールを終了すると、DVDやメモリを取り出すよう指示があるので、そのタイミングで取り外して、再起動します。

---
## 第2章　下準備をどうにかしよう
　さて、目の前にはとてもクリーンな環境が整ったわけです。新雪に足跡をつけるようで勿体ないですが、さっそく、これに必要な設定を施しましょう。

　[Laravel8のインストール](https://readouble.com/laravel/8.x/ja/installation.html)の記述によると、以下の要件を満たす必要があります。

>* PHP >= 7.3
* BCMath PHP拡張
* Ctype PHP拡張
* Fileinfo PHP拡張
* JSON PHP拡張
* Mbstring PHP拡張
* OpenSSL PHP拡張
* PDO PHP拡張
* Tokenizer PHP拡張
* XML PHP拡張

　また、

* Laravelインストール時にComposer
* Jetstreamではnpm
* データベースとしてsqlite（に限らないのですが、一番楽なので）

が必要となります。
　依存関係などで自動的に入ってしまうものもありますので、とりあえず、左下のメニューアイコンのユーティリティの中からターミナルを呼び出して、このようにインストールしましょう。以下の作業は注記のない限りこのターミナル上で行います。以下、ターミナルのプロンプトを`$ `で示しますが、これは入力せず、そのあとの部分を入力してください。先頭に`$ `が入っていない行は応答部分ですので、そのとおり表示されていれば大丈夫です。

```bash
$ sudo apt install php7.4 php7.4-bcmath php7.4-mbstring php7.4-xml conposer npm
```

sudoで始まる場合はパスワードを尋ねられることがあります。第1章で設定したユーザのパスワードを使ってください。終わったら、

```php
$ php -r "phpinfo();"
```
で、上記のPHPのモジュールが入っているかどうか確認してください。もし、「xxx PHP拡張」が足りない場合は

```bash
$ sudo apt install php7.4-xxx
```
で、追加しておきましょう。

---
## 第3章　Laravelのインストールをあれこれしよう

　まずは、Laravelのインストーラのインストールから始めます。

```bash
$ composer global require laravel/installer
```
　ちゃんと入っているか確かめてみましょう。

```bash
$ ls /home/{ユーザ名}/.config/composer/vendor/bin
```
　{ユーザ名}には第1章で設定したユーザ名が入ります（ほかにユーザを作ってそちらでログインしているのであればそちら。以下同）。これで、

```
laravel
```

と出てくれば正しくインストールされています。

　ただ、この場所にはPATHが通っていない（≒ここに命令があるよ、というリストに入っていない）ので、足してあげる必要があります。その方法は大別して

* exportを使う（その場限り）
* /home/{}/.bashrc ファイルに書き足す（そのユーザ限り再起動しても可）
* /etc/environment ファイルに書き足す（全ユーザに適用される）

の3つがあります。ここでは、一番乱暴な3番目の方法を使ってみましょう。ここではviエディタを使います。

1. `sueo vi /etc/environment`と入力します。
1. 中身は`PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin"`のように書かれているのを確認します。
1. 右矢印で最後の`"`までカーソルを動かし、`a`キーを押します。
1. `:/home/{ユーザ名}/.config/composer/vendor/bin`を入力します。最初の`:`を忘れぬように。
1. `Esc`キーを押します。
1. `Z`（大文字）キーを2回押します。

　万一、間違えた操作のあと`Esc`を押してしまったら、`u`でアンドゥできます。操作不能で訳がわからなくなったら`Esc`キーを押したあと`:q!`を入力して`Enter`キーを押してください。保存せずに終了するので、1からやり直してください。
　　viについての詳細は[viコマンド（vimコマンド）リファレンス](https://qiita.com/pe-ta/items/0510bee10bcfd88afeee)にわかりやすく説明されています。上記手順の意味については、こちらを御覧いただくとよろしいかと思います。

　この設定を有効にするために以下のとおり再起動します。

```bash
$ sudo shutdown -r now
```

　このあたりで一息つくためお茶でも飲むとよろしいかと思います。

---
## 第4章　Laravelの設定をどうこうしよう

　気を取り直して先に進みましょう。ここから、Laravelのプロジェクトを作成し設定を行います。
　記念すべき第１回のプロジェクトなので、考えに考え抜いて命名してください。ここでは`test`とします。ターミナルを起動するとホームディレクトリ`/home/{ユーザ名}/`が出てきます。念のため確認しましょう。

```bash
$ pwd
/home/{ユーザ名}
```
　そして、以下のように入力します。

```bash
$ laravel new test
```
```
_                              _
| |                            | |
| |    __ _ _ __ __ ___  _____| |
| |    / _` | '__/ _` \ \ / / _ \ |
| |___| (_| | | | (_| |\ V /  __/ |
|______\__,_|_|  \__,_| \_/ \___|_|
Creating a "laravel/laravel" project at "./test"

　　　（中略）

Application key set successfully.
Application ready! Build something amazing.
```
　となって、新しいプロジェクトができあがりました。testというディレクトリが作られたので、確認してみます。

```bash
$ ls
```
　で、いくつかのディレクトリが表示されますが、その中に`test`があればよしとします。

　次はデータベースへの接続設定です。いままでデータベースのインストールはしてきませんでしたが、気にすることはありません。SQLiteというデータベースは、単一ファイルだけにデータを格納するので、わざわざ構築する必要はありません。また、Laravelが、というかPHPがSQLiteを操作できるの（第2章で追加したPDO PHP拡張）で、動作させることができます。
　まずは、コマンドでそのディレクトリに移動します。その上で、第3章でも使用したviエディタを使って環境設定ファイルを書き直します。

```bash
$ cd test
$ vi .env
```

　編集前のの状態は以下のとおりです。

```ini:.env
　　（中略）
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=temp
DB_USERNAME=root
DB_PASSWORD=
　　（後略）
```

　これを次の手順のとおり改めます。
1. `↓`キーで`DB_CONNECTION=mysql`の行まで移動する。
2. `$`キーで文の末尾まで移動する。
3. `Del`キーを5回押して「mysql」を消す。
4. `a`キーを押して編集モードに入り「sqlite」と入力し`Esc`**キーを押して**編集モードを終える。
5. `^`キーを押して行頭に戻る。
6. `↓`キーで`DB_HOST=127.0.0.1`行の行頭に移動する。
7. `i`キーで編集モードに入る。
8. `DB_HOST`の前に`#`を入力し、`esc`キーで編集モードを終える（**忘れないこと**）。
9. 以下、`DB_PASSWORD=`の行まで繰り返し
10. `Z`を2回押します。

　　編集後は以下のとおりです。

```ini:.env
　　（中略）
DB_CONNECTION=sqlite
#DB_HOST=127.0.0.1
#DB_PORT=3306
#DB_DATABASE=temp
#DB_USERNAME=root
#DB_PASSWORD=
　　（後略）
```

 以上で、SQLiteに接続する準備ができましたが、もう一つ行う作業があります。SQLiteは単一ファイルのデータベースと申しましたが、そのファイルを作ってあげなければなりません。デフォルトのデータベース置き場がありまして、そこに空ファイルを置いておけば大丈夫です。
　現在位置を確認して、

```bash
pwd
/home/{ユーザ名}/test
```

以下のように入力します。

```bash
$ touch database/database.sqlite
```

　これでLaravel関係の設定はおしまいです。

## 第5章　Jetstream をのらりくらりとインストールしよう

```bash
$ composer require laravel/jetstream
```
　インストールにはかなり時間がかかります。「おまえのComposerは古いのじゃ。いまはComposer 2.0の時代じゃ。」と怒られますが、どうしようもないので平謝りしつつ無視します。これはこのあと何回か出てくるので同様に対処しましょう（補記：[composer公式](https://getcomposer.org/download/)からコマンドラインでインストールできるようです。古いバージョンを削除してからお試しください）。

```bash
Package manifest generated successfully.
73 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
```

と表示されれば成功です。次にlivewireというプログラム群をインストールします。

```bash
$ php artisan jetstream:install livewire
```

　これも少し時間がかかります。

```bash
Livewire scaffolding installed successfully.
Please execute the "npm install && npm run dev" command to build your assets.
```
　出てきた指示どおりにビルドします。

```
$ npm install && npm run dev
```

　こちらも時間がかかります。


```bash
DONE  Compiled successfully in 56857ms                              10:43:22 PM

      Asset      Size  Chunks            Chunk Names
/css/app.css  4.38 MiB  /js/app  [emitted]  /js/app
  /js/app.js  669 KiB  /js/app  [emitted]  /js/app
```

　以上のメッセージが出たら以下のように入力します。

```bash
$ php artisan migrate
```

　これは数秒で終わります。もし、エラーが出てしまったら、第4章の`.env`の部分が正しくない可能性がありますので確認してみてください。

　そして最後に、タイムゾーンと言語を設定します（12/7追記）。

```php:app.php
<?php
return [
　　（かなり略）
    /*
    |--------------------------------------------------------------------------
    | Application Timezone
    |--------------------------------------------------------------------------
    |
    | Here you may specify the default timezone for your application, which
    | will be used by the PHP date and date-time functions. We have gone
    | ahead and set this to a sensible default for you out of the box.
    |
    */
   'timezone' => 'UTC',
　　（中略）
    'locale' => 'en',
　　（中略）
    'fallback_locale' => 'en',
　　（中略）
   'faker_locale' => 'en_US',
　　（後略）
```
 この「timezone」の行のUTCのUのところまでカーソルを持ってきて、`3x`と打つかもしくは`x`を3回押すと「UTC」という文字が消えます。その位置で`a`キーを押し「Asia/Tokyo」と入力して`Esc`を押します。引き続き、同様の手順で「locale」「fallback_locale」を「ja」に、「faker_locale」を 「ja_JP」にして」ください。完成形は以下のとおりです。シングルクォーテーションやカンマのミスがないか確認してください。

```php:app.php
　　（最初からかなり略）
   'timezone' => 'Asia/Tokyo',
　　（中略）
    'locale' => 'ja',
　　（中略）
    'fallback_locale' => 'ja',
　　（中略）
   'faker_locale' => 'ja_JP',
　　（後略）
```


　長々と続けてきましたが、これで完成です。お疲れさまでした。

---
## 第6章　出来上がりをおそるおそる見てみよう

　さて、ここまでで作り上げた環境がきちんと動くか見てみましょう。本来ならWebサーバ上で動かしますが、今回はお試しということで、PHPの機能を活用した簡易サーバで見てみましょう。

```bash
$ php artisan serve
```

　これでブラウザ上の「127.0.0.1:8000」というアドレスで以下のような初期画面が出てきます。注目していただきたいのは、右上の`Login`と`Register`というリンクです。いまはできたばかりでユーザがおらず、ログインもできないので、まずはユーザを登録すべく`Register`を押してみましょう

![Screenshot from 2020-12-01 15-12-45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269526/714e683b-9f09-542b-8427-3945be89d48f.png)

こんな具合の画面が出てきたかと思います。ユーザ名と電子メールアドレス、それにパスワードを入力してください。パスワードは8文字以上の制限があります。

![Screenshot from 2020-12-01 15-14-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269526/df1a2222-c18e-92d9-2c63-00070e0bd162.png)

　登録すると以下のような画面が出てきます。ユーザ別に情報を提供するのに良さそうです。右上のユーザ名の書かれている部分はメニューになっていてログアウトのほかプロフィールの変更もできます。

![Screenshot from 2020-12-01 15-15-42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269526/c3b3416e-1e2f-1465-57f1-2fdb5cb5d515.png)

　こんな感じ。

![Screenshot from 2020-12-01 15-16-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269526/ea9cbebb-d9d4-cee6-cac2-5caff6937ce9.png)

　一度ログアウトして、今度はログインをすると、ちゃんとログイン画面が出てきます。

![Screenshot from 2020-12-05 23-46-55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269526/03307930-573d-d9e6-da9e-e2562712834e.png)

---
## 第7章　さてこれからどうしよう
　ということで、ここまでで自由に空を飛ぶ準備ができました。この記事の一番問題なところは、その羽ばたき方まではカバーしていないことです。そして筆者の不勉強という一番駄目な理由によるのが救いようありません。万が一、続きが書けましたら、1から2と称して続編を発表したいと考えております。

---
## 謝辞
　この記事を執筆するにあたって、以下の書籍およびサイトを参考にいたしました。ありがとうございます。

* PHPフレームワークLaravel入門　第2版　掌田津耶乃 著/秀和システム
* Wevフレームワーク活用読本 Laravel超入門　園田誠 著/日経ソフトウエア2020年11月号付録
* [［Laravel8］ログイン機能付きでプロジェクトを作成するまで](https://qiita.com/Tomochan_taco/items/334f3f1c275c18b51aa0)/Qiita @Tomochan_taco
* [【Laravel】初めての認証（Laravel8でJetstreamを使う）](https://qiita.com/manbolila/items/498aae00f3574c72f031)/Qiita @manbolila 
* [laravel日本語版][laravel]
* [Jetsstream公式][jetstream]


その他多くのサイトを参考にさせていただきました。