こんにちは！ARですLaravel(PHP)を学習したので学んだ内容をまとめます。
- sailによるプロジェクトの作成
- ルーティング
- ビュー
- コントローラー
sailによるプロジェクトの作成
Sailは、Laravel公式のDocker環境を操作するためのコマンドラインインターフェースです。PHPやMySQLなどを含む開発環境をDocker上に構築できるため、比較的簡単にLaravelの開発環境を用意できます。
自分のPCはWindowsであり、WindowsからはWSL内で開発しています。WSLとDocker Desktopはすでにインストールしていたので、今回は省略します。
WSLのUbuntuからDocker上で環境を構築するため、Windows側のDocker Desktopの設定から、WSLからDocker Desktopを使用できるように設定します。
WSLのターミナルを開き、MySQLとMailpitを
一緒に使用する場合は、以下のコマンドでプロジェクトを作成できます。
|
1 |
curl -s "https://laravel.build/「プロジェクト名」?with=mysql,mailpit" | bash |
コマンドを実行すると、Laravelのプロジェクトフォルダが作成され、Sailを利用するために必要な設定などが用意されます。
環境の起動には、以下のコマンドを使用します。
|
1 |
./vendor/bin/sail up -d |
Sailコマンドは頻繁に使用するため、毎回./vendor/bin/sailと入力するのは少し手間です。
そこで、以下のようにエイリアスを設定すると、sail up -dのように短く入力できるようになります。
|
1 |
alias sail='sh $(<span class="text-token-text-primary cursor-text rounded-sm">[ -f sail ]</span> && echo sail || echo vendor/bin/sail)' |
なお、この設定をシェルを再起動した後も使用する場合は、~/.bashrcなどに記載しておきます。
MySQLを使用する場合は、
データベースにLaravelで使用するテーブルを作成するため、マイグレーションを実行します。
|
1 |
sail artisan migrate |
その後、以下のコマンドでSailを起動すると、Dockerコンテナがバックグラウンドで起動します。
-dオプションを付けることで、バックグラウンドで実行できます。
|
1 |
sail up -d |
停止する場合は、以下のコマンドを使用します。
|
1 |
sail down |
WSLのターミナルを開き、MySQLとmailpitを一緒に環境を構築する場合は以下のコマンドでインストールするとプロジェクトフォルダとDockerのimageがインストールされる。
|
1 |
curl -s "https://laravel.build/「プロジェクト名」?with=mysql,mailpit" | bash |
環境の起動には ./vendor/bin/sail up -d で起動できるが、sailコマンドは多用するので以下のコマンドでsailを保存すると、今後は sail up -d みたく短く打つために以下のコマンドを実行しシェルを再起動する。
|
1 |
alias sail='sh $([ -f sail ] && echo sail || echo vendor/bin/sail)' |
MySQLを使用している場合は、マイグレーションが必要。以下のコマンドでマイグレーションをする
|
1 |
sail artisan migrate |
その後以下のコマンドで環境を実行すると、自動的にdockerコンテナが起動し、localhostに初期画面が表示される。(-dオプションはバックグラウンドで実行)
|
1 |
sail up -d |
停止する場合は以下のコマンドでで停止する。
|
1 |
sail down |
ルーティング
routes/web.phpにルーティングを記載します。
ルーティングとは、アクセスされたURLと、そのURLに対して実行する処理を対応付ける仕組みです。
例えば、以下のように記載します。
|
1 2 3 4 5 6 7 |
Route::get('/', function () { return view('welcome'); }); Route::get('/hello', function(){ return 'hello world'; }); |
/にアクセスした場合はwelcomeビューを表示し、/helloにアクセスした場合はhello worldという文字列を返します。
これにより、http://localhost/helloにルーティングが設定されました。
ビュー
resources/views/にBladeテンプレートと呼ばれる、HTMLに似たファイルを配置します。
例えば、以下のようなテンプレートを作成します。
デフォルトテンプレート
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>@yield('title')</title> <style> body { display: grid; grid-template: "header" auto "contents" 1fr "footer" auto/100%; max-width: 1280px; min-height: 100vh; margin: 0 auto; } <!--以下略--> </style> </head> <body> <header> <h1>Laravel9学習</h1> <nav> <ul> <li><a href="/">トップ</a></li> <li><a href="/curriculum">カリキュラム</a></li> <li><a href="/events">イベント</a></li> <li><a href="#">サービス</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> </header> <main> @yield('title') @yield('content') </main> <footer> <p>&copy; 2023 ●●▲▲</p> </footer> </body> </html> |
このような共通部分をテンプレートとして用意しておくことで、複数のページで同じHTMLを繰り返し記述する必要がなくなります。
テンプレートを使用するページでは、@extends、@sectionなどを使用します。
テンプレートを使用したページ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@extends('layouts.default') <!--テンプレートを継承--> @section('title', 'カリキュラムについて') @section('content') <section> <h3>準備</h3> <ul> <li>環境構築(Sail)</li> <li>データベース(phpMyAdmin)</li> </ul> </section> <section> <h3>ページ表示</h3> <ul> <li>ルーティング</li> <li>ビューファイル</li> <li>コントローラ</li> </ul> </section> <!--以下略...--> @endsection |
BladeテンプレートではHTMLの記述に加えて、@から始まるBlade独自の構文を使用できます。
今回は@yield、@section、@extendsを使用しました。
@yieldでテンプレート側にコンテンツを挿入する場所を定義し、@extendsでそのテンプレートを継承します。そして、@sectionで@yieldに対応するコンテンツを指定します。
Bladeにはこのほかにもさまざまな構文があります。数が多いため、詳細は公式ドキュメントを参照してください。
ページを作成しただけではURLから表示できないため、ルーティングからビューを呼び出します。
|
1 2 3 |
Route::get('/curriculum', function(){ return view('curriculum'); }); |
これで/curriculumにアクセスすると、resources/views/curriculum.blade.phpが表示されます。
コントローラー
ルートファイルには、表示だけでなく計算やDBへの保存などの処理を直接記載することもできます。
しかし、一つのファイルに多くの処理を記載するとコードが煩雑になってしまうため、実際のアプリケーションでは処理をコントローラーなどに分けて記述します。
コントローラーの作成
以下のコマンドでコントローラーを作成できます。
Sailを使用していない場合は、sailの部分をphpにします。
|
1 |
sail artisan make:controller コントローラー名 |
コマンドを実行すると、app/Http/Controllers/にコントローラーのファイルが作成されます。
作成されたコントローラーに、画面表示やデータの取得・加工などの処理を記述できます。
例えば、以下のようなコントローラーを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class UtilityController extends Controller { public function worldTime(){ $timeDiff = <span class="text-token-text-primary cursor-text rounded-sm">[ '東京' => 0, 'シンガポール' => -1, 'パリ' => -8, 'ロンドン' => -9, 'ニューヨーク' => -14, 'ロサンゼルス' => -17, 'ハワイ' => -19, ]</span>; $times = array_map(fn($diff) => now()->addHours($diff), $timeDiff); return view('world-time', <span class="text-token-text-primary cursor-text rounded-sm">['times' => $times]</span>); } } |
作成したコントローラーは、ルーティングファイルから呼び出すことができます。
|
1 2 3 4 |
use App\Http\Controllers\UtilityController; //... Route::get('/world-time', <span class="text-token-text-primary cursor-text rounded-sm">[UtilityController::class, 'worldTime']</span>); |
このようにすることで、/world-timeにアクセスするとUtilityControllerのworldTimeメソッドが実行されます。
今回の学習では、ルーティングに直接処理を書く方法から、コントローラーに処理を分離する方法まで確認しました。
