Lesson 8

TODOアプリを作成（画面実装編）

Lesson 8 Chapter 1
Laravel_Todoの作成

Lesson8では実際に各ページの作成を行っていきましょう。

Laravel_Todo作成

Todoアプリの作成に伴い、復習も兼ねて新しくプロジェクトフォルダを作成します。まず初めにLaravelのインストール先のディレクトリに移動します。

1. ディレクトリの移動

ターミナル、コマンドプロンプト
C:¥> cd xampp/htdocs
ターミナル、コマンドプロンプト
C:¥xampp¥htdocs>

2. Laravelのインストール

ターミナル、コマンドプロンプト
composer create-project laravel/laravel Laravel_Todo --prefer-dist

インストールが完了したらプロジェクトディレクトリへ移動します。

ターミナル、コマンドプロンプト
cd Laravel_Todo

3. インストール完了確認

インストールが無事に完了しているか確認します。Laravelのバージョンが表示されれば無事完了です。

ターミナル、コマンドプロンプト
php artisan -v
出力結果
Laravel Framework 9.52.4

4. ビルトインサーバーの起動

続いてLaravelの開発サーバー（ビルトインサーバー）を起動し、URLへアクセスしましょう。

ターミナル、コマンドプロンプト
php artisan serve
出力結果
Server running on [http://127.0.0.1:8001]

Laravel　welcomeページ

サーバーも問題なく起動していることが確認できました。以上で今回Todoアプリを作成するのに使用するプロジェクトフォルダの作成が完了です。

Lesson 8 Chapter 2
TODO一覧画面作成

chapter2では先ほど作成したLaravel_TodoフォルダにTodo一覧画面の作成を行いましょう。こちらはTodoアプリのトップページになります。

TODO一覧画面のイメージ

Todoトップページ

実際にアプリケーションが完成し、データが作成されると以下のような画面になります。

Todoトップページ

top.blade.php作成

それでは早速ページの表示(View)部分であるbladeファイルを作成します。今回は簡易的なbladeファイルを用意しました。以下ディレクトリに作成してください。

resources > views > top.blade.php

top.blade.php
<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel_Todo</title>

    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
    <link href="{{ asset('/css/style.css') }}" rel="stylesheet">

    @vite(['resources/sass/app.scss', 'resources/js/app.js'])

</head>
<body>
    <div id="app">
        <div class="w-75 m-auto">

            <!-- Todoリスト -->
            <div class="task_container m-5 p-3">
                <div>
                    <p class="text-center fs-3 p-3">Todoリスト</p>
                </div>
                <div>
                    <div class="w-25 text-center create_btn_area">
                        <button
                            type="button"
                            class="btn btn-primary m-auto"
                        >
                              タスク追加
                        </button>
                    </div>
                </div>
                <table class="table">
                    <thead>
                        <tr>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 完了したTodoリスト -->
            <div class="completed_container m-5 p-3">
                <div>
                    <p class="text-center fs-3 p-3">完了したTodoリスト</p>
                </div>
                <table class="table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <td class="text-center">タスク</th>
                            <td class="text-center">優先度</th>
                            <td class="text-center">時間</th>
                            <td class="text-center">登録日時</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>
    </div>
</body>
</html>

TodosControllerの作成

続いてはControllerの作成を行い、TODO一覧画面を表示するメソッドの作成します。

ターミナル、コマンドプロンプト
php artisan make:controller TodosController

作成が完了したらファイルを開き、TodoListsメソッドを作成します。今回はトップページであると同時にTODO一覧を取得して表示させるメソッドになる為、TodoListsという命名にしました。一覧の取得と表示の処理については実際にデータベース環境が整った段階で追記していきますので、現段階ではトップページを表示する処理のみになります。

app > Http > Controllers > TodosController.php

TodosController
<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TodosController extends Controller
{
    public function TodoLists()
    {
        return view("top");
    }
}

return viewがTODO一覧画面を表示させる為の処理になります。TODO一覧ページとなるbladeファイルは「top.blade.php」になるので、viewメソッドには「blade.php」を省略した「top」を設定しましょう。

以上でTodosControllerファイルとTODO一覧を表示させる処理のtodoListsメソッドの作成は完了です。

ルーティングの設定

ページの表示部分となるtop.blade.phpと、top.blade.phpを表示する処理TodoListsメソッドの準備ができましたので、それぞれのファイルと処理を紐付けるルーティングを設定します。

routes > web.php

web.php
<?php

use Illuminate\Support\Facades\Route;

Route::get("/top", [App\Http\Controllers\TodosController::class, "TodoLists"])->name("todo.lists");

ページの表示を行うルーティングな為、Routeファサードにはgetメソッドを指定します。TODO一覧ページはトップページでもある為「/top」となるべくイメージのしやすいURLを設定しました。その後は実行するControllerとそのController内にあるメソッドを指定します。

言語化すると、「/top」にアクセスしたら、「TodosController」の「TodoLists」を実行する。という意味になります。このように覚えておくとルーティングの設定もスムーズに進められるかもしれません。 そしてname("todo.lists")についてはルーティングを呼び出す際にURLではなくnameで呼び出せるように名前を設定しています。命名は任意ですが、何のルーティングなのかをイメージしやすくする為にtodo.listsとしました。

以上がルーティングの設定になります。

bootstrapとcssファイルの準備

ページの表示を行うという意味では上記のルーティング設定をした段階で完了となりますが、レイアウトに最低限のデザインを施していきます。ここではbootstrapとcssファイルの準備を行っていきます。

bootstrapの導入

bootstrapとはフロントエンドのフレームワークのことを指します。導入していなくても開発は行えますが、レイアウトを容易に整えることが可能になります。今回は認識として持っておくために、bootstrapも同時に使用していきましょう。

1. Laravel UIのインストール

Laravel UIライブラリをインストールします。

ターミナル、コマンドプロンプト
composer require laravel/ui

2. bootstrapのインストール

続いてはbootstrapのインストールを実行します。

ターミナル、コマンドプロンプト
php artisan ui bootstrap

3. ビルド

bootstrapのインストールが完了した際にビルドを求められるので以下コマンドを実行し、bootstrapを使用できるようにします。

ターミナル、コマンドプロンプト
npm install && npm run dev

以上でbootstrapの導入は完了になります。

4. bootstrap実装例

bootstrapの使い方はタグのclass属性に決められたclass名を付与してあげることで、デザインが可能となります。冒頭でお見せしたTODO一覧ページのイメージに「タスク追加」ボタンがありますが、こちらもbootstrapの導入によってレイアウトが調整されています。

Todoトップページ

コードを確認してみます。

タスク追加ボタン
<button
  type="button"
  class="btn btn-primary m-auto"
>
  タスク追加
</button>

「class="btn btn-primary"」とするだけで青色のボタンが完成しています。「m-auto」についてもbootstrapで決められたclass名になりますが、こちらは位置調整を行っている部分なので、ボタン作成には関係ありません。

5. bootstrapの使用例

bootstrapの使用方法についてはbootstrap公式を利用することで実装方法を調べることができます。bootstrap公式（https://getbootstrap.jp/）にアクセスしましょう。

bootstrap使用例

メニューバーより「ドキュメント」をクリックします。

bootstrap使用例

左側に検索バーがあるので、関連するワードを入力します。今回はボタンのレイアウトを調整したいのでタグ名である「button」と入力しました。

bootstrap使用例

使用できるボタンをこのように確認することが可能です。

bootstrap使用例

トップページで使用している青色のボタンを作成したい場合は、公式のコードを参考にしてあげることでボタンのデザインを容易に変更することが可能です。

bootstrap使用例

style.cssファイルの準備

bootstrapでレイアウトの調整を行うことは可能ですが、細かい部分であったり実装できない、又はbootstrapだと実装が難しい部分に関してはcssで実装を行います。

1. style.cssファイルの作成

cssファイルを作成するコマンドは存在しないので、手動で作成します。以下ディレクトリにstyle.cssの作成と記述を行いましょう。

public > css > style.css

style.css
@charset "UTF-8";

.task_container,
.completed_container {
    border: 1px solid none;
    border-radius: 5px;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.2);
}

.completed_container {
    background: #e2e3e5;
}

.create_btn_area {
    margin-left: auto;
}

span {
    margin: 0 8px;
}

2. style.cssファイルを読み込む

作成したcssファイルはTODO一覧ページの部分であるtop.blade.phpに適用させる為、top.blade.phpでcssファイルを読み込みます。今回はtop.blade.phpを作成した段階で既に読み込みを行っていますので、該当コードを確認してみましょう。

top.blade.php
<link href="{{ asset('/css/style.css') }}" rel="stylesheet">

public配下のファイルを参照する時はasset関数を使用することで容易、かつ相対パスの気にする必要もない為、安全にファイルのパスを指定できます。

以上でcssファイルの準備は完了となります。

TODO一覧画面の表示

それではTODO一覧画面の表示を行います。開発サーバーの起動を確認できたらURL（http://127.0.0.1:8000/top）へアクセスしてみましょう。

Todoトップページ

上記のようなページとなっていればTODO一覧ページの作成は完了になります。

Lesson 8 Chapter 2
TODO作成画面作成

chapter3ではTodo作成画面を作成していきましょう。

TODO作成画面のイメージ

todo作成画面

こちらはタスクを実際に登録する為の画面です。TODO一覧画面の「タスク追加」ボタンを押した際の遷移先ページになります。

create.blade.phpの作成

流れはtop.blade.phpと同じです。以下ディレクトリに表示させる為のbladeファイルを作成しましょう。

resources > views > create.blade.php

create.blade.php
<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel_Todo</title>

    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
    <link href="{{ asset('/css/style.css') }}" rel="stylesheet">

    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
    <div class="create_container">
        <div class="w-50 m-auto create_form border">
            <h3 class="p-3 text-center">タスク追加フォーム</h3>
            <div class="text-center p-3">

                <form action="" method="post">
                    <div class="w-100 m-auto p-3 text-left">
                        <select class="w-25 text-center priority_box">
                            <option selected disabled>優先度</option>
                            <option>低</option>
                            <option>中</option>
                            <option>高</option>
                        </select>
                        <select class="w-25 text-center date_box">
                            <option selected disabled>時間</option>
                        </select>
                    </div>
                    <div class="w-100 m-auto">
                        <div class="w-100 p-3">
                            <input type="text" class="w-75 task_input" placeholder="タスクを入力">
                            <button
                              type="submit"
                              class="btn btn-primary"
                            >
                              追加
                            </button>
                        </div>
                    </div>
                    @csrf
                </form>

                <div class="m-4">
                    <a href="{{ route("todo.lists") }}">トップに戻る</a>
                </div>
            </div>

        </div>
    </div>
</body>
</html>

ひとまずcreate.blade.phpは完成になります。細かな部分は実際に処理を実装する際に記述を追記していきます。

作成したcreate.blade.phpのトップへ戻るボタンを注目してください。上側がルーティングのnameメソッドを使用したパターンで、下側が直接リンクを設定しているパターンになります。いずれもトップページのtop.blade.phpへ戻るボタンになります。

top.blade.php

// ルーティングに付与したnameメソッドで呼び出すパターン
<a href="{{ route("todo.lists") }}">トップに戻る</a>

// ルーティングに設定したURLを基に呼び出すパターン
<a href="/top">トップに戻る</a>

今後、開発を行っていく上で仕様変更等によりURLが変更になるケースはありますが、nameメソッドが変更になるケースはほとんどありません。URLがもし変更になった場合、「/top」と設定されているボタン等のリンクは全て変更する必要がありますが、nameメソッドで実装しておくことによってURLが変更になった場合でもルーティングの1箇所を変更するだけで修正が完了します。変更漏れ等のリスクも防ぎ、時間も掛けずに開発が行えるので、ルーティングはnameメソッドを使用しておくことを推奨します。

TodoCreateメソッドの作成

作成したcreate.blade.phpを表示する為、TodosControllerにTodoCreateメソッドを作成しましょう。

app > Http > Controllers > TodosController.php

TodosController
<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TodosController extends Controller
{
  // TODO一覧画面表示
  public function TodoLists()
  {
    return view("top");
  }

  // TODO作成画面表示
  public function TodoCreate()
  {
    return view("create");
  }
}

TODO一覧同様、ページの表示の処理を記載します。これにてTodoCreateメソッドの作成は完了です。

ルーティングの設定

ルーティングもTODO作成画面用に設定する必要があります。

routes > web.php

web.php
<?php

use Illuminate\Support\Facades\Route;

// TODO一覧画面表示
Route::get("/top", [App\Http\Controllers\TodosController::class, "TodoLists"])->name("todo.lists");


// TODO作成画面表示
Route::get("/create", [App\Http\Controllers\TodosController::class, "TodoCreate"])->name("todo.create");

URLは作成用のページとイメージできるよう「/create」としておきます。TodoListsと同じ流れで「/create」にアクセスがあったらTodosControllerのTodoCreateメソッドが実行されるようルーティングの設定を行いましょう。

cssファイルの修正

TODO作成画面用にcssの追記を行います。

style.css
@charset "UTF-8";

/* TODO一覧画面 */
.task_container,
.completed_container {
    border: 1px solid none;
    border-radius: 5px;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.2);
}

.completed_container {
    background: #e2e3e5;
}

.create_btn_area {
    margin-left: auto;
}

span {
    margin: 0 8px;
}

/* TODO作成画面 */
.create_container {
    width: 100%;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.create_form {
    border: 1px solid none;
    border-radius: 5px;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.2);
}

.priority_box,
.date_box {
    height: 30px;
    border: 1px solid silver;
    border-radius: 5px;
}
.task_input {
    height: 35px;
    border: 1px solid silver;
    border-radius: 5px;
}

TODO作成画面の表示

以上でTODO作成画面を表示するまでの準備が完了しました。URL（http://127.0.0.1:8000/create）へアクセスしTODO作成画面が表示されるか確認しましょう。又、「トップへ戻る」をクリックすることでTODO一覧画面が表示されるかの確認も行ってください。

TODO作成画面

TODO一覧画面にTODO作成画面のリンクを設定

TODO作成画面の作成が完了しました。最後にTODO一覧画面の「タスク追加」ボタンにTODO作成画面のリンクを設定し、TODO一覧画面からもボタンの操作でページの遷移が行えるようにします。

変更前

top.blade.php
<button
  type="button"
  class="btn btn-primary m-auto"
>
    タスク追加
  </button>

変更後

top.blade.php
<button
  type="button"
  onclick="location.href='{!! route('todo.create') !!}' "
  class="btn btn-primary m-auto"
>
    タスク追加
</button>

TODO作成画面内のaタグで実装した「トップへ戻る」ボタンとbuttonタグで実装した「タスク追加ボタン」の記述で少し変化があるので見比べてみましょう。

aタグの場合

create.blade.php
<a href="{{ route("todo.lists") }}">トップに戻る</a>

buttonタグの場合

top.blade.php
<button
  type="button"
  onclick="location.href='{!! route('todo.create') !!}' "
  class="btn btn-primary m-auto"
>
    タスク追加
  </button>

buttonタグを使用してページの遷移をする場合、onclick属性にイベントとしてlocationオブジェクトのhrefプロパティを指定しています。Laravelのメソッドや変数を使用する場合、文字列として認識させないよう、あえてエスケープの解除処理を行っている為、記述に違いがあります。エスケープ処理を施す場合は、二重の波括弧( {{ )、エスケープ処理を外す場合は波括弧に!マークを2つ（ {!! ）と書き換えてあげる必要がありますので、こちらも覚えておきましょう。基本的にはエスケープ処理が行われる二重波括弧を使用していきます。

以上でTODO作成画面の作成は完了と同時にTODO一覧画面からTODO作成画面の行き来ができるようにもなりました。

Lesson 8 Chapter 3
TODO編集画面作成

chapter3では編集画面の作成を行っていきましょう。

TODO編集画面のイメージ

TODO編集画面

こちらはタスクを編集する為の画面です。TODO作成画面とさほど大きな変化はありませんが、今後処理を実装していく際に編集対象のデータが各入力欄に予めセットされている状態にしていきます。

edit.blade.phpの作成

以下ディレクトリにTODO編集画面のedit.blade.phpを作成していきましょう。

resources > views > edit.blade.php

edit.blade.php
<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel_Todo</title>

    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
    <link href="{{ asset('/css/style.css') }}" rel="stylesheet">

    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
    <div class="edit_container">
        <div class="w-50 m-auto edit_form border">
            <h3 class="p-3 text-center">タスク編集フォーム</h3>
            <div class="text-center p-3">

                <form action="" method="post">
                    <div class="w-100 m-auto p-3 text-left">
                        <select class="w-25 text-center priority_box">
                            <option selected disabled>優先度</option>
                            <option>低</option>
                            <option>中</option>
                            <option>高</option>
                        </select>
                        <select class="w-25 text-center date_box">
                            <option selected disabled>時間</option>
                        </select>
                    </div>
                    <div class="w-100 m-auto">
                        <div class="w-100 p-3">
                            <input type="text" class="w-75 task_input" placeholder="タスクを入力">
                            <button
                              type="submit"
                              class="btn btn-primary"
                            >
                              編集
                            </button>
                        </div>
                    </div>
                </form>

                <div class="m-4">
                    <a href="{{ route("todo.lists") }}">トップに戻る</a>
                </div>
            </div>

        </div>
    </div>
</body>
</html>

以上でedit.blade.phpの作成は完了となります。

TodoEditメソッドの作成

続いてはedit.blade.phpを表示させる処理、TodoEditメソッドをTodosControllerに作成していきましょう。

app > Http > Controllers > TodosController

TodosController
<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TodosController extends Controller
{
  // TODO一覧画面表示
  public function TodoLists()
  {
    return view("top");
  }

  // TODO作成画面表示
  public function TodoCreate()
  {
    return view("create");
  }

  // TODO編集画面表示
  public function TodoEdit()
  {
    return view("edit");
  }
}

TodosControllerの修正はこれで以上になります。

ルーティングの設定

TODO編集画面用のルーティングを設定していきます。

routes > web.php

web.php
<?php

use Illuminate\Support\Facades\Route;

// TODO一覧画面表示
Route::get("/top", [App\Http\Controllers\TodosController::class, "TodoLists"])->name("todo.lists");

// TODO作成画面表示
Route::get("/create", [App\Http\Controllers\TodosController::class, "TodoCreate"])->name("todo.create");

// TODO編集画面表示
Route::get("/edit", [App\Http\Controllers\TodosController::class, "TodoEdit"])->name("todo.edit");

URL「/edit」へアクセスした際にTodosControllerのTodoEditを実行させるルーティングの設定が完了しました。ルーティングの設定はこれで以上になります。

cssファイルの修正

TODO編集画面用のcssを設定していきましょう。

web.php
@charset "UTF-8";

/* TODO一覧画面 */
.task_container,
.completed_container {
    border: 1px solid none;
    border-radius: 5px;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.2);
}

.completed_container {
    background: #e2e3e5;
}

.create_btn_area {
    margin-left: auto;
}

span {
    margin: 0 8px;
}

/* TODO作成画面 & TODO編集画面 */
.create_container,
.edit_container {
    width: 100%;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.create_form,
.edit_form {
    border: 1px solid none;
    border-radius: 5px;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.2);
}

.priority_box,
.date_box {
    height: 30px;
    border: 1px solid silver;
    border-radius: 5px;
}
.task_input {
    height: 35px;
    border: 1px solid silver;
    border-radius: 5px;
}

cssファイルの修正はこれで以上になります。レイアウトはcreate.blade.phpと同じになる為、既存のcssへTODO編集画面のclass属性を追加しました。

TODO編集画面の表示

TODO編集画面を表示するまでの準備が完了しました。URL（http://127.0.0.1:8000/edit）へアクセスしTODO作成画面が表示されるか確認しましょう。又、「トップへ戻る」をクリックすることでTODO一覧画面が表示されるかの確認も行ってください。

TODO編集画面

TODO編集画面に遷移するためのボタンは追加したタスクの項目に表示していきます。実際にデータベースを扱った処理の際に設置していきますので、現状は存在しません。

以上でTODOアプリで使用していく画面は全て実装が完了になります。今後削除の機能も実装しますが、削除機能はページの遷移を行わず同一のページ内で完結させる為、blade.phpは準備せず、処理のみの実装になります。次の項目ではデータベースの準備を行なっていきましょう。