つぶやきアプリのページを表示する

今回はつぶやきアプリを作ります。

1回の記事にすると解説が長すぎて挫折するかもしれないので数回に解説を分けます。

まずはMAMPを起動してLaravelをインストールします。

MAMPの起動とLaravelのインストール

復習しながら解説します。

MAMPを起動します。

そしてターミナルから「アプリケーション > MAMP > htdocs」に移動します。

cd /Applications/MAMP/htdocs

そしてLaravelをインストールします。

composer create-project "laravel/laravel=10.*" tweet

アプリ名は「tweet」にしました。

そしてターミナル上でtweetに移動します。

cd tweet

そしてMAMPでtweetを起動する為の設定をします。

「Preferences」をクリックします。

「Server」の項目を選択して「Choose...」をクリックします。

そしてpublicを選択します。

選択が完了するとMAMPに表示されます。

それではLaravelのトップページにアクセスします。

「WebStart」をクリックします。

「My Website」をクリックします。

するとLaravelのトップページに移動します。

ここまでが復習でした。

サクサク解説しましたが初めてLaravelでアプリを作る人に取ってここまでをやるのに時間がかかったと思います。

繰り返していく内にさっとできるようになりますので今は理解して読んだ記事の内容を繰り返すのに重点を置いて下さい。

それでは新しい内容を解説します。

仕様

アプリを作成する時はどういう機能を入れるかを決めます。

今回は初めて作るアプリなので機能を簡単にします。

下記の機能を作ります。

つぶやきの作成
つぶやき一覧につぶやきの表示
つぶやきの編集
つぶやきの削除

リソースコントローラー

ページにアクセスする時はルーティングでURLとコントローラーの設定をしてコントローラーのアクションを使ってビューを指定してページを表示すると解説しました。

ルーティングを実際に指定する時のコードをちゃんと説明するとLaravelを始めたての人にとって理解できなくなる可能性があります。

Laravelにはルーティングとコントローラーが自動的に設定できるリソースコントローラーという物があるのでこれを使ってアプリを作っていきます。

これを使うとURLとコントローラーの設定がめちゃくちゃ楽になります。

ただ実務では使いませんがLaravelに慣れるという意味で使うのにはいいと思います。

ルーティングを設定するファイルは「アプリケーション > MAMP > htdocs > tweet > routes > web.php」です。

web.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 and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/

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

下記の追記をします。

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TweetController;      //この行を追加

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/

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

Route::resource('/tweet', TweetController::class);　　//この行を追加

追加したコードの意味を説明します。

「use App\Http\Controllers\TweetController;」はコントローラーを呼び出す為の記述です。

新しいコントローラーを使うたびに記述します。

「TweetController」はコントローラー名でそれ以外はそのまま書いて問題ないです。

「Route::resource」の「Route::」はそのまま書いていいです。

「resource」はリソースコントローラーを使う時は書くと思っていいです。

「('/tweet', TweetController::class)」の「/tweet」はURLを設定しています。

リソースコントローラーを使わない場合は「/tweet」の設定を色々とできますがリソースコントローラーを使う場合はURLの設定は1つしかせずそれを使って自動的に生成されます。（具体的なURLはあとで解説します）

「Tweetontroller」はコントローラー名です。

「::class」はそのまま書いていいです。

PostControllerの設定をしていますがまだ作成をしていないので作成します。

コントローラーを作成する為のコマンドは下記です。

php artisan make:controller コントローラー名　--resource

リソースコントローラーにする場合は「--resource」をつけます。

ターミナルでtweetにいる状態で下記のコマンドを入力します。

xxxxxx@MacBook-Pro tweet % php artisan make:controller TweetController --resource

コントローラー名の「TweetController」のTとCは大文字にして下さい。

コントローラーを作成したら「tweet > app > Http > Controllers > TweetController.php」があるかを確認してください。

それではコントローラーの中身を確認してコードを書いてページにアクセスします。

コントローラー

TweetController.phpを開くと下記になっています。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TweetController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index()
    {
        //
    }

    /**
     * Show the form for creating a new resource.
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     */
    public function show(string $id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     */
    public function edit(string $id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     */
    public function update(Request $request, string $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     */
    public function destroy(string $id)
    {
        //
    }
}

「pubilc function」の後ろに「index」・「create」などの記述がありますがこれがアクションです。

とりあえず「public function アクション名」と書くと思っていいです。

アクションはページを表示する為の道具と説明しましたがリソースコントローラーでは役割によってアクションが指定されています。

アクション名と役割は下記になります。

index : つぶやき一覧
create :つぶやきの作成
store : つぶやきの保存
show : つぶやきの詳細
edit : つぶやきの編集
update : 編集したつぶやきの更新
destroy : 作成したつぶやきの削除

とりあえずつぶやき一覧ページにアクセスします。

つぶやき一覧ページにアクセス

ページにアクセスするときは「ルーティング→コントローラー→ビュー」の順に考えます。

リソースコントローラーを使う場合はルーティングの設定は1回だけでいいのでこれ以降はコントローラーとビューの設定をします。

つぶやき一覧のページにアクセスするのでアクションはindexだと分かります。

indexアクションにページを表示する為の記述をしないといけませんが表示するページに使うファイルの調べ方を説明します。

ページに使うファイルの調べ方

ページにアクセスする為にはビューが必要でページを表示するのでファイルを作成します。

リソースコントローラーを使わない場合はファイル名とファイルの作成場所を自分で決めることができますがリソースコントローラーを使う場合はファイル名とファイルを作成する場所が指定されています。

確認する為にターミナルで下記のコマンドを入力します。

xxxxxx@MacBook-Pro tweet % php artisan route:list

すると下記の表示になります。

GET|HEAD        / .......................................................................................................................... 
POST            _ignition/execute-solution ................... ignition.executeSolution › Spatie\LaravelIgnition › ExecuteSolutionController
GET|HEAD        _ignition/health-check ............................... ignition.healthCheck › Spatie\LaravelIgnition › HealthCheckController
POST            _ignition/update-config ............................ ignition.updateConfig › Spatie\LaravelIgnition › UpdateConfigController
GET|HEAD        api/user ................................................................................................................... 
GET|HEAD        sanctum/csrf-cookie ...................................... sanctum.csrf-cookie › Laravel\Sanctum › CsrfCookieController@show
GET|HEAD        tweet .................................................................................. tweet.index › TweetController@index
POST            tweet .................................................................................. tweet.store › TweetController@store
GET|HEAD        tweet/create ......................................................................... tweet.create › TweetController@create
GET|HEAD        tweet/{tweet} ............................................................................ tweet.show › TweetController@show
PUT|PATCH       tweet/{tweet} ........................................................................ tweet.update › TweetController@update
DELETE          tweet/{tweet} ...................................................................... tweet.destroy › TweetController@destroy
GET|HEAD        tweet/{tweet}/edit ....................................................................... tweet.edit › TweetController@edit

見るのは下記です。

tweet ................. tweet.index › TweetController@index
tweet ................. tweet.store › TweetController@store
tweet/create .......... tweet.create › TweetController@create
tweet/{tweet} ......... tweet.show › TweetController@show
tweet/{tweet} ......... tweet.update › TweetController@update
tweet/{tweet} ......... tweet.destroy › TweetController@destroy
tweet/{tweet}/edit .... tweet.edit › TweetController@edit

例えば一番下の行の「tweet/{tweet}/edit」がアクセスするURLで「tweet.edit」がファイルを作成する場所で「TweetController@edit」はコントローラー名とアクション名です。

ファイルを作成する場所の「tweet.edit」は「tweetフォルダの下にedit.blade.phpを作成する」という意味です。

それではつぶやき一覧ページにアクセスする為のファイルを作成するのにどこを見ればいいか分かりますか？

つぶやき一覧なので下記です。

tweet ................. tweet.index › TweetController@index

「tweet > resources > views」の下にtweetフォルダを作成してその下にindex.blade.phpを作成します。

そしてindex.blade.phpに「つぶやきアプリ」と記述します。

やっとファイル名が分かったのでTweetController.phpのindexアクションに記述します。

public function index()
{
    return view('tweet.index');  //この行を追加
}

そしてつぶやき一覧のページにアクセスしますがURLは下記から判断します。

tweet ................. tweet.index › TweetController@index

「tweet」がURLだったので下記のURLにアクセスします。

http://localhost:8888/tweet

下記の表示になったら大丈夫です。

今回はここまでです。