前のページ

「リソースコントローラー版つぶやきアプリ①」ページを表示する(Laravel12)

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

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

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


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

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

MAMPを起動します。

20241122_213351_tweet1.jpg

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

cd /Applications/MAMP/htdocs

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

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

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

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

cd tweet

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

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

20241122_213947_tweet2.jpg

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

20241122_214204_tweet3.jpg

そしてpublicを選択します。

20241122_214828_tweet4.jpg

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

20241122_215029_tweet5.jpg

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

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

20241122_215228_tweet6.jpg

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

20241122_215358_tweet7.jpg

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

tweet1_20260709_165328.png

ここまでが復習でした。

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

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

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


仕様

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

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

業務をする時は詳細設計という設計書を作成してからプログラムを書きますがこのサイトはとにかく個人開発できるようになるのを目指すので設計書はなくていいです。

下記の機能を作ります。


リソースコントローラー

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

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

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

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

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

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


20241122_223758_tweet9.jpg

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

<?php

use Illuminate\Support\Facades\Route;

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

下記の追記をします。

<?php

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

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」があるかを確認してください。

20241123_080415_tweet10.jpg

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


コントローラー

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 アクション名」と書くと思っていいです。

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

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

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


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

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

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

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

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


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

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

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

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

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

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

  GET|HEAD        / .......................................................................................................... routes/web.php:6
  GET|HEAD        storage/{path} .......... storage.local › vendor/laravel/framework/src/Illuminate/Filesystem/FilesystemServiceProvider.php:98
  PUT             storage/{path} .. storage.local.upload › vendor/laravel/framework/src/Illuminate/Filesystem/FilesystemServiceProvider.php:106
  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
  GET|HEAD        up .............................. vendor/laravel/framework/src/Illuminate/Foundation/Configuration/ApplicationBuilder.php:219

見るのは下記です。

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を作成します。

20241123_101402_tweet11.jpg

そして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

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

20241123_104135_tweet12.jpg

今回はここまでです。 

戻る