最後の章です。
一応体験的なものはこれで終わりみたいですね。
なんとなくコーディングしただけであまり構造や知識が身に付いた感がないのが残念です。
今後の課題として色んな機能が紹介されています。
この辺で気になるのは
これでいったんBootcampは終わりとします。
今まではローカル開発環境で実行してきましたが本番環境へのデプロイを行うようです。
デプロイするプロバイダを選択します。
PHPをホスティングを提供するプロバイダはいくつかあるようです。
Webサーバ、データベース、PHPの実行ができる環境が最低限になるでしょう。
Laravel ForgeとLaravel Vaporが紹介されています。
PHPのウェブアプリをDigitalOcean, Linode, AWSなどのクラウド環境にホスティングするための環境構築を楽にしてくれるツールのようです。
Laravel Vapor
Laravel Vapor を使って Serverless な Laravel アプリケーションをデプロイする
Laravel を AWS Lambda 上で動作させることができる 有料 のツールで、Serverless な Laravel アプリケーションを構築することができるそうです。
Laravel Forge用に以下のプロバイダが紹介されています。
AWS以外は聞いたことがないですね。
Forgeはソースコード管理システムが必要のようです。
GitHub, GitLab, Bitbucketが紹介されています。
こだわりが無ければGitHubで良いでしょうね。
Forgeはサーバの構築にプロバイダのAPIキーを必要とするようです。
ソースコード管理システムとサービスプロバイダに接続できるようになった状態でサーバを生成します。
必要な情報を入力してサーバ生成ボタンを押すだけです。
Forgeは自動的に「デフォルト」サイトを生成するようです。
サーバにパブリックIPアドレス（グローバルIPアドレス）でアクセスできるようです。
簡単に確認するなら、ドメインを取得する必要がなくて便利ですね。
ドメイン名を使いたい時は、「デフォルト」サイトを削除して登録するだけのようです。
「デフォルト」サイトを使っている場合はアプリ用のDBの作成が必須らしいです。
ちょっとわかりずらいですが、生成したサーバにソースコード管理システムからソースコードをデプロイするんだと思います。
.env.exampleが環境に存在するはずなので、DBあるいはMail関連の設定を行います。
デプロイのためのスクリプトが自動生成されるようです。
そしてNode の依存関係と Vite を使用しているため、依存関係をインストールしてアセットを構築する手順を追加する必要があるようです。
Queue workerというのは何か不明です。
ググると
Laravelではキューとジョブがあります。
個々の処理がジョブでそれがキューの中に配置されて実行されるのを待っている感じです。
Laravelでジョブとキューを理解する
Laravelのキューワーカー（queue:work）はソースコード反映に再起動が必要だった件
Queue workerが実際にキューからジョブを取り出して実行する機能なのでしょう。
Queue workerが動きっぱなしになっているとメモリを消費するし、古いソースコードで動くことになりますね。
タスクスケジューラ？
cronみたいなもののようですが、ここでなぜ出てくるのか不明です。
デプロイボタンを押せば実際のデプロイが始まるようです。
では次のチャプターに行きましょう
Continue to conclusion and next steps...
現在は開発環境なのでnpm run devを実行します。Ctrl + Cで止めるまで起動し続けます。
開発中だからどんどんソースファイルが変わっていきますが、TailWind CSSやVue.js等の修正をリアルタイムで変換してブラウザ側で読み込めます。
本番では、ソースコードは固定のはずなので上記処理は不要です。
なのでnpm run buildを実行して問題なく動作するかと思ったら画面が崩れました。
 |
| npm run buildの実行結果 |
 |
| 画面のデザインが崩れています |
ググったらすぐに見つかりました。
Laravel Viteでnpm run buildを行っても変更が反映されない原因と対策
npm run devを実行中にhotファイルを作成しますが、npm run devを停止しても残ってしまう場合があるようです。
確かに"hot"ファイルが残ったままですね。
しかも$npm run buildで生成した本番環境用ファイルもpublic/build/assetsの下にあります。
そのため今回のような現象になったようです。
 |
| public配下の状態 |
まずはさっくり"hot"ファイルを削除します。
そうすると問題なく画面が表示されました。
へー、新しい投稿があったときにEメールを送る機能を実装するんだ
通知を送る方法としてEメール,SNS, Slackに対応しているようです。.
$php artisan make:notification NewChirp
app/Notifications/NewChirp.phpが生成されました。
NewChirp.phpのtoMail()メソッドを修正します。
$php artisan make:event ChirpCreated
ChirpCreated.phpのコンストラクタを修正します。
app/Models/Chirp.phpを修正します。
Chirpが生成されるたびにイベント：ChirpCreatedも生成されます。
EventとListenerの関係が良く分からないのでぐぐってみました。
イベント
何らかの処理をきっかけにイベントを発行します。
イベントを生成するだけで実際の処理をするわけではありません。
リスナー
イベントの発生を監視していて、実際の処理を行うのはリスナー、今回だと通知を送る処理ですね。
イベント毎にリスナーを作成します。
これを読めばLaravelのイベントとリスナーが設定できる
Laravelでイベントとリスナーを使ってみる
$php artisan make:listener SendChirpCreatedNotifications --event=ChirpCreated
app/Listeners/SendChirpCreatedNotifications.phpが生成されました。
イベント：ChirpCreatedに対してリスナーを作成するということですね。
handle()メソッドで、自分以外の全てを対象にするようにループして通知を送るようにしているようです。
ループ内ではcursorを使ってDBから対象を取得していますが、これは一度に全てのユーザをロードすることを回避するためだそうです。
ぐぐるとcursorとchunkがあり、一度にデータを取得せず小分けにしてメモリの消費量を抑えるためのもののようです。
イベントリスナーの登録
？リスナーを作っただけでは駄目で登録が必要なようです。
App/Providers/EventServiceProvider.php
EventServiceProvider.phpは最初から存在しています。
EventServiceProvider クラスの$listenにイベントとリスナーを登録します。
実際に投稿してその他のユーザに通知を送信するか試します。
受け取るには本人以外のユーザが必要なのでユーザを新規に登録します。
後はメール送信環境
ドキュメントでは MailHogが推奨されています。Laravel Sailの環境であれば含まれているようです。
MailHogでぐぐるとDockerの環境で使う話ばかり出てきます。
うーん、めんどいのでクラウドで使うサービスを使うことにします。
MailTrapを使ってみます。
https://mailtrap.io/
Sign up for freeを押して情報入力します。
届いたメールのリンクを押下したら、入力したアカウントでログインします。
送信メールを送信するための設定に関して
左のメニューのEmail Testing→Inboxesをクリックします。
画面にInboxesが表示されるのでMy Inboxをクリックします。
SMTP Settingsが表示されます。
Integrationsのドロップダウンで「Laravel 7+」を選択します。
Laravel用のSMTP設定が表示されます。
表示内容をLaravelプロジェクトの.envファイルに反映します。
 |
| 反映前 |
 |
| 反映後 |
現在ユーザAとBが存在する状態です。
ユーザAでログインして投稿を行います。
ユーザＢに対して通知メールが送信されるはずです。
MailTrap上で想定したメールが送信されたことが確認できました。
Continue to learn about deploying your application...
残る機能は投稿の削除機能です。
routes/web.php
destroyを追加します。
app/Http/Controllers/ChirpController.php
Controllerを修正します。
deleteメソッドを呼び出して一覧画面に戻るように実装します。
Editとの時と同じようにChirpへの削除権限を付与します。
resources/views/chirps/index.blade.php
一覧のEditボタンの下にDeleteボタンを追加します。
これで出来上がり
一覧のEditの下にDeleteボタンが追加されました。クリックすると該当データを削除して一覧画面をリフレッシュします。
 |
| Deleteボタンの追加 |
 |
| 該当データを削除して一覧画面をリフレッシュ |
では次のチャプターに行きましょう
投稿の作成、表示ができるようになったので次は編集です。
routes/web.php
chirps.editとchirps.updateをルータに追加します。
resources/views/chirps/index.blade.php
投稿一覧にメニューを追記します。
created_atとupdated_atが同じじゃなかったらなんか表示するみたいですね。
後はドロップダウンを追記してる？
保存すると表示したデータの右側に・・・を表示し、クリックするとEditとドロップダウンを表示するようになりました。
resources/views/chirps/edit.blade.php
編集画面を別途作成します。
コントローラを修正して編集画面へ遷移するようにします。
どうやらデフォルトではChirpを変更できないそうです。変更できるようにするために権限の設定を行います。
$php artisan make:policy ChirpPolicy --model=Chirp
app/Policies/ChirpPolicy.phpが生成されました。
メソッド: update()に追記します。
軽く動作確認を行います。
一覧のEditを押すと編集画面に遷移します。
投稿内容修正して「SAVE」を押すとデータを更新して一覧画面に戻ります。
うーん、このChirpというモデル名はよろしくないですね。
アプリ名がChirpだし、Chirpというのは特に意味はないようです。投稿データということが分かる名前の方が良いでしょう。
では次のチャプターに行きましょう。
前の章で投稿を保存できるようになったので、今度はそれを表示する機能の実装ですね。
app/Http/Controllers/ChirpController.php
を修正します。
ログインユーザの投稿を全て取得して投稿日の降順に並べるのかな？
Paginationについても言及されています。
たくさんのデータを取得する場合はページネーションを行って適切にした方が良いですね。
さもないとたくさんのデータをスクロールで見ることになって不便です。
app/Models/Chirp.phpに修正を加えます。
belongsToを使ってChirpからUserを見たときのリレーションを定義します。
【laravel】1対多のbelongsTo(hasMany)まとめ。select, insertなどの複数保存や検索も解説
UserからChirpへはhasMany
ChirpからUserへはbelongsTo
の関係性になるということです。
resources/views/chirps/index.blade.php
Chirpsのデータを表示できるように追記します。
入力欄の下に投稿した内容を表示するようになりました。
では次のチャプターに行きましょう。
https://bootcamp.laravel.com/blade/creating-chirps
前回までで環境構築とログインができるところまで来ました。
こっからが本番です。
この３つを作っていくようです。
Laravelはartisan(職人）コマンドで色々作れます。
$php artisan make:model -mrc Chirp
mrcオプションってなんだろ
php artisan make:model --help
-m, --migration Create a new migration file for the model
-r, --resource Indicates if the generated controller should be a resource controller
-c, --controller Create a new controller for the model
m(migration)とc(controller)は分かるけどr(resource controller)とは具体的になんだろ？
メッセージを見るとModelとMigration fileとControllerが作成されたようです。
とりあえず気にせず進みます。
Controllerにレスポンスを書き込みます。
http://localhost:/chirps
にアクセスします。
Hello, World!
がブラウザに表示されます。
$php artisan migrate実行したらDB上にテーブル「chirps」が生成されました。
$php artisan tinker
https://bootcamp.laravel.com/blade/installation
フロントエンドとしてBladeを選んだのでこちらのルートになります。
"chirper"という名前でプロジェクトを作成します。
$composer create-project laravel/laravel chirper
コンポーザを使ってプロジェクトを作成するという普通の手順ですね。
以下のように表示されれば作成です。
 |
| Laravelプロジェクトを作成 |
コンポーザをインストールしていない場合は以下の手順に従ってインストールとZIPの設定しておいて下さい。
https://web2sunny.blogspot.com/2023/02/laravel_52.html
実行するのは"C:\xampp\htdocs"の下です。
私の環境ではXAMPPをインストールしているのでXAMPPを起動するとブラウザ上で確認ができます。
$cd chirper $php artisan serveこれでhttp://localhost:8000にアクセスするとページが表示されます。
DB_CONNECTION=sqlite
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=chirper_db DB_USERNAME=chirper_user DB_PASSWORD=test0001
Laravel Sailを使ったDockerの環境の構築が記載されています。
Laravel Sail（セイル、帆、帆船）は、LaravelのデフォルトのDocker開発環境を操作するための軽量コマンドラインインターフェイスです。 Sailは、Dockerの経験がなくても、PHP、MySQL、Redisを使用してLaravelアプリケーションを構築するための優れた出発点を提供します。
最低限の機能を含んだBreezeのインストールを行います。
$composer require laravel/breeze --dev $php artisan breeze:install blade
$npm run dev 'npm' is not recognized as an internal or external command, operable program or batch file.
なんかエラーになりました。npmがインストールされてないようです。
途中で手順を飛ばしたせいですかね？
そもそもnpmってなんでしたっけ？
Node Package Manager の略でJavaScript系のパッケージ管理アプリのようですね。
パッケージ間に依存関係がある場合でもまとめてインストールしてくれるようです。
インストーラをダウンロードして次へと進んでいくだけです。
npm run devを再実行するとviteが無いってメッセージ、めんどくさいですね。
$npm run dev > dev > vite 'vite' is not recognized as an internal or external command, operable program or batch file.
ここの記述に従ってViteをインストールしてきます。
Nodeのインストール
ViteとLaravelプラグインを実行する前に、Node.js（１６以上）とNPMを確実にインストールしてください。
だそうです。
もう終わってます。
ViteとLaravelプラグインのインストールを行います。
$npm install
92のパッケージがインストールされたようです。npmのマイナーバージョンアップがあるようですがこのままにしておきます。
 |
| npm install の実行結果 |
今度こそ上手くいったようです。
http://localhost:5173/にアクセスします。
This is the Vite development server that provides Hot Module Replacement for your Laravel application.
と表示されるのでVite開発用のサーバでソースコードを変更しても自動的に反映されて表示されるのでしょう。
$php artisan migrate
DB関連のエラーになります。
XAMPPの起動とMySQL関連の設定をするのを忘れていました。
.envのDB関連の設定を行11 - 16に行います。
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=chirper_db DB_USERNAME=chirper_user DB_PASSWORD=test0001
再実行して、上手くいきました。
phpMyAdminで確認するとテーブルが出来ていました。
http://localhostにアクセスするとアプリのトップ画面が表示されます。
後日、実行したら以下のようなエラーになりました。
$npm run dev
を実行して再ロードしたら、ユーザ登録画面が表示されました。
テスト用に適当にユーザを作成します。
ユーザ名、パスワード、Eメールを適当に入力して「Register」ボタンを押します。
ダッシュボート画面が表示されました。
 |
| ダッシュボード画面 |
ログアウトしてから直接「http://localhost/dashboard」をブラウザから入力しましたが、ログイン画面にリダイレクトされました。
認証機能もちゃんと動いているようです。
 |
| 直接URLを入力してもログイン画面へリダイレクトする |
では次のチャプターに行きましょう。
Continue to start creating Chirps...
Bootcampを始めていきます。
https://bootcamp.laravel.com/
記述は英語のみのようです。日本語版を探しましたが見つかりませんでした。
英語と言っても難しくないのでGoogle翻訳を使いながら進めていきます。
01. Introduction
Chirper と呼ばれるマイクロブログ プラットフォームを構築します。
だそうです。
マイクロブログ？
聞いたことがないです、ググると
「ユーザーが短いテキスト（通常200字以下）を書いて、それを公開することを可能にし、誰にでも見られるようにするか限られたグループにだけ見られるようにするかをユーザーが設定できる形態のブログ」
https://en.wikipedia.org/wiki/Microblogging
ん？それってTwitterじゃないのかと思ったら
「もっとも目立っているのがTwitterだ。それに加えて、FacebookとBeboなど多くのソーシャルネットワークが、ステータスを更新できる似たようなサービスを取り入れている。この市場は活気があり、これからもその熱は上がりそうだ。」
ああ、そういう言い方をするんですね。
SNSとはまた違うのかな？
Blade or JavaScript
フロントエンドとしてBladeかJavaScriptかを選べるようです。
Bladeは、Laravelでビューを作るために用意されたテンプレートエンジン です。
中身はほぼ、HTMLです、それに加えてHTMLの中で変数を使用したりif文やfor文を埋め込むことができます。
MVCモデルでModel層で処理したデータをBladeに渡して処理して最終的にクライアントに返すHTMLレスポンスを生成します。
ファイルの拡張子は".blade.php"になります。
またTailwind CSS が使えるようです。
名前を聞いたことはありますが詳細は不明なので、この機会にチェックしておきます。
https://udemy.benesse.co.jp/development/system/tailwind-css.html
『Tailwind CSS』とは、Utility First（ユーティリティファースト）をコンセプトに設計されたCSSフレームワークのことです。
Tailwindは“テールウィンド”と読み、CSSフレームワークです。
ユーティリティファーストというのは良くわかりませんが、カスタマイズ性が高いようです。実際のコードサンプルを見てみると、お、これはいいかも
<p class="bg-white">文字</p>
ユーティリティファーストとは、CSSは使わずにTailwind CSSが提供しているクラスのみを使用してスタイリングする考え方のことです。rounded-fullやtext-transparentなど、クラスを追加するだけで定義できるため、コードの量が少なくなります。
ああ、CSSを使わないスタイルをユーティリティファーストと呼ぶのですね。
Tailwind CSS vs Bootstrap
Bootstrapは名前くらいは聞いたことがありますが、CSSフレームワークだったんですね(^^;)
Bootstrapは、動きをつけたい場合でもJavaScriptの知識が不要です。一方、Tailwind CSSはユーティリティクラスが準備されているだけなので、動きを加える際はJavaScriptで一から実装しなければなりません。
また、BootstrapはCSSの知識が必要なく、触れる機会も少ないです。一方、Tailwind CSSは、このクラスはどのようなCSSプロパティに該当するのか調べたりすることが多いため、自然にCSSの知識を身につけられます。
JavaScript を使用したい場合は、Vue と React の両方のコード サンプルを提供します。 また、Inertia を使用してすべてを接続し、Tailwind CSS を使用して見栄えを良くします。
だそうです。
実はReactは以前入門をやって挫折した経験があります。
大分前ですが、Reactの独特の実装方法が分からなかったのと他のライブラリとの接続が最後までわからなかった。
Vueは直接触ったことはないですがプロジェクトで使ってましたね。
どっちも私にとってはわかりずらい（と感じる）のでまずはBladeを使った方のフローに進むことにします。
