LaravelでTodoアプリを作ってみよう

kenpapa

2021年12月18日 12:07

PHPにはLaravelというWebアプリケーション開発のためのフレームワークがあります。

非常に人気のあるフレームワークなので、興味のある方もいらっしゃると思います。

そこで、本記事ではLaravelで簡単なTodoアプリを一から作成する手順を紹介しようと思います。

Laravelでのアプリ開発がどのようなものかをざっと理解していただければと思います。

今回作成するTodoアプリは下図のような追加と削除ができるだけの簡単なものです。

Laravelでアプリ開発を行う上で知っておいていただきたいことは、LaravelはMVC （model-view-controller）というアーキテクチャパターンを採用しているという点です。

まずは下図を見てください。

上図はRailsというWebフレームワークの学習教材である「Railsチュートリアル」の中の図で、MVCアーキテクチャパターンを採用しているRailsでどのような流れで処理が進められているかを示している図です。

下記に該当箇所のRailsチュートリアルのリンクを貼っておきます。

Laravelでも同じような流れで処理が進められていきますが、図に登場しているModel、View、Controller、routerの４つをそれぞれ作成しながらアプリ開発を行っていくことになります。

実行環境

Laravelのインストール方法については、下記にまとめられています。

本記事ではLinux環境にLaravelインストーラが既にインストールされている状態から始めることにします。

今回はデータベースとしてSQLiteを使用するため、php-sqlite3をインストールしておきます。

実行手順

大きな流れは次の通りです。

１．プロジェクトの作成
２．SQLiteを使用するための準備
３．Modelの作成
４．Controllerの作成
５．Viewの作成
６．routerの作成
７．実行

１．プロジェクトの作成

「laravel new mytodo」を実行します。

今回はLaravelの8.6.9というバージョンを使用します。

mytodoという名前のプロジェクトが自動で作成され、プロジェクトの中には下図のようにフォルダやファイルが存在しています。

Laravelでアプリ開発を行う場合は、プロジェクトの中に存在する自動生成されたファイルを変更したり、新しくフォルダやファイルを作成したりしながら開発を進めることになります。

２．SQLiteを使用するための準備

「touch database/database.sqlite」を実行して空のファイルを作成します。

.envのデータベースの箇所を下記のようにSQLiteを使う設定に変更します。

（変更前）

（変更後）

３．Modelの作成

「php artisan make:model Todo -m」を実行します。

database/migrations配下に「xxx_create_todos_table.php」というマイグレーションファイルが作成されているので、そのファイルを下記のように変更します。（$table->string('text');の行を追加）

xxx_create_todos_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateTodosTable extends Migration
{
   /**
    * Run the migrations.
    *
    * @return void
    */
   public function up()
   {
       Schema::create('todos', function (Blueprint $table) {
           $table->id();
           $table->string('text');
           $table->timestamps();
       });
   }

   /**
    * Reverse the migrations.
    *
    * @return void
    */
   public function down()
   {
       Schema::dropIfExists('todos');
   }
}

「php artisan migrate」を実行します。

データベース上にいろいろなテーブルが作成されます。

４．Controllerの作成

「php artisan make:controller TodoController」を実行します。

app/Http/Controllers配下に「TodoController.php」というファイルが作成されているので、そのファイルを下記のように変更します。

TodoController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Todo;

class TodoController extends Controller
{
 function index()
 {
   $todos = Todo::all();
   return view('index', ['todos' => $todos]);
 }

 function addTodo(Request $request) 
 {
   $todo = new Todo();
   $todo->text = $request->text;
   $todo->save();
   return redirect('/todos');
 }

 function deleteTodo($id) 
 {
   $todo = Todo::find($id);
   $todo->delete();
   return redirect('/todos');
 }
}

５．Viewの作成

resources/views配下に「index.blade.php」を作成して下記のコードを入力します。

index.blade.php

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>My Todo</title>
</head>
<body>
 <h3>My Todo</h3>
 <form action="/todos" method="POST">
   @csrf
   <input name="text" placeholder="Input here...">
   <button type="submit">ADD</button>
 </form>

 <h5>Todo List</h5>
 <ul>
   @foreach ($todos as $todo)
   <li>
     {{ $todo->text }}
     <form action="/todos/{{ $todo->id }}"
           style="display: inline;" 
           method="POST">
       @csrf
       @method('DELETE')
       <button type="submit">DEL</button>
     </form>
   </li>
   @endforeach
 </ul>
</body>
</html>

６．routerの作成

routes配下の「web.php」を下記のように変更します。

web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TodoController;

Route::get('/', [TodoController::class, 'index']);
Route::get('/todos', [TodoController::class, 'index']);
Route::post('/todos', [TodoController::class, 'addTodo']);
Route::delete('/todos/{id}', [TodoController::class, 'deleteTodo']);

７．実行

「php artisan serve」を実行します。

ブラウザで「http://127.0.0.1:8000」を開くとアプリが起動します。

完成後のプロジェクト構成

完成後のプロジェクト構成は下図のとおりです。

実行手順で登場したファイルを赤線で囲っています。

上図の続きです。

学習教材の紹介

上記では簡単なTodoアプリを一から作成する手順を紹介しましたが、Laravelでのアプリ開発のイメージを掴んでいただけたのではないでしょうか。

Laravelに興味を持たれてLaravelの学習を始めてみようと思われた方もいらっしゃると思いますので、Laravelの学習教材について少し紹介しようと思います。

Laravelは非常に人気のあるフレームワークですので、YouTube上にもLaravel関連の動画が多く存在しますので、まずはYouTubeでいろいろと動画を探してみるのが良いと思います。

例えば「laravel 8 tutorial」というワードで検索すると下図のような動画が見つかりますが、どれも長時間の動画ですのでLaravelについて深く理解できると思います。

ちなみに私がLaravelを学習したのは５年前で、その時の学習教材は下記の動画ですが、非常に有益な学習教材でした。

BlogアプリをLaravelというフレームワークを使って作成していく動画ですが、難易度も非常に低く、Laravelというフレームワークについてだけでなく、Web開発についてもわかりやすく解説されている動画です。

５年前の動画なのでLaravelのバージョンが5.2とかなり古いのと、動画の合計時間が約２５時間もあるため、「既に別のフレームワークを経験している方がこれからLaravelについて学ぶ」というような場合には適していない動画ですが、「Web開発は初めてでフレームワークを使ったWeb開発について学びたい」という方には適した動画だと思いますので、興味のある方はチェックされてはいかがでしょう。

下記に初回の動画のリンクを貼っておきます。