◀ 2.

Laravelクイックスタート｜Webアプリ作成でルーティングからBladeまで

▶

対象バージョン: 本編はLaravel 5.2の公式Task Listを基にした旧構成の学習例です。App配下のモデル、app/Http/routes.php、旧認証の例を残しています。Laravel 13へそのまま適用する手順ではありません。旧コードの仕組みを調べる資料として利用し、新規開発では現行公式資料を確認してください。

当記事ではLaravelを使用してWebアプリケーションを作成します。

画面から値の入力、取得、削除をする簡単なアプリです。

アプリの作成を通してLaravelの以下の項目を説明します。

・データベース
・Eloquentモデル ORM
・ルーティング
・バリデーション
・ビュー
・Bladeテンプレート

※Laravelの導入が済んでいない場合はこちらを参照。

※Windowsクライアントを使用する方はXAMPPを使用するのでXAMPPの導入が済んでいない場合はこちらを参照。

 

インストール

「quickstart」という名前のプロジェクトを新規に作成しましょう。

composer create-project laravel/laravel quickstart --prefer-dist

上のComposerコマンドはバージョン指定がありません。今実行すると本編と違う構成が入る可能性があります。既存の学習環境ではcomposer.lockでLaravelとPHPの条件を確認し、最新版を入れただけで旧サンプルが動くとは考えないでください。

 

データベースの準備

■データベースの作成(Windowsユーザーの場合)

XAMPPのControl PanelからphpMyAdminを起動しましょう。

クイックスタート & チュートリアル(初心者向け)

phpMyAdminを開いたら「New」ボタンを押して「test」データーベースを作成しましょう。

 

■データベースの作成(Ubuntu / Debian系の例)

ターミナルで以下のコマンドを実行します。

次のパッケージ操作はapt-getを使用するUbuntu / Debian系の例で、macOS共通の手順ではありません。PHPのバージョンとパッケージ名は環境に合わせ、PDO MySQL拡張が読み込まれているか確認してください。すでにDBがある場合はインストールを重ねず、接続・DB作成から確認します。

sudo apt-get install mysql-server

sudo apt-get install php-mysql

sudo mysql -u root

create database test;

 

■ユーザーの作成

「test」データベースを選択した状態で以下のコマンドを実行してデーターベースユーザーを作成しましょう。

旧MySQL構文の参考: 以下のGRANTとIDENTIFIED BYを組み合わせる例はMySQL 8.0では使いません。旧例の後に示すCREATE USERとGRANTの分離例を参照してください。

GRANT ALL PRIVILEGES 
ON test.* 
TO testUser@localhost 
IDENTIFIED BY 'testPass';

MySQL 8.0の場合のユーザー作成と権限付与

testデータベースを作成した後、ユーザーの作成と権限付与を分けます。これは学習用の例で、testPassを本番用パスワードとして使わないでください。すでに同名ユーザーがある場合は、作成を繰り返さず既存の権限を確認します。

CREATE USER 'testUser'@'localhost' IDENTIFIED BY 'testPass';
GRANT ALL PRIVILEGES ON test.* TO 'testUser'@'localhost';

権限はtest.*だけに限定しています。実行にはユーザー作成・権限付与が可能な管理用アカウントが必要です。接続先ホストとMySQLアカウントのhost部分が一致しているかも確認します。

 

■データーベースの接続設定

Laravel内にあるデータベースの接続設定を変更します。

ルートフォルダ直下の「.env」ファイルの以下の部分を変更しましょう。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=test
DB_USERNAME=testUser
DB_PASSWORD=testPass

 

■テーブルの作成

データベースのマイグレーション機能を用いて「task」テーブルを作成してみましょう。

ルートディレクトリに移動して以下のコマンドを実行します。

php artisan make:migration create_tasks_table --create=tasks

 

「database\migrations」配下にファイルが新規作成されたことを確認できます。

ファイルの中身を見てみましょう。

public function up()
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->increments('id');
            $table->timestamps();
        });
    }

この関数内にある'id'とはtasksテーブルのカラムです。

 

tasksテーブルにカラムを追加してみましょう。

以下の例ではstring型のnameというカラムを追加しています。

public function up()
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }

 

ファイルを書き換えただけではテーブルの構造は変化しません。

ファイルを保存して以下のコマンドを実行しましょう。

php artisan migrate

インデックス関連のエラーが出ても、uniqueやindexを無条件に削除しないでください。 一意性制約と検索性能を変えてしまいます。エラー内容、DBのバージョン、文字コード、キー長を先に確認します。次のcharset('utf8')の例は旧環境の参考であり、文字コードを変更する前に保存する文字の要件を確認してください。

Laravel 5.4の公式資料には古いMySQL / MariaDBでutf8mb4のキー長が問題になる場合のdefaultStringLength(191)例がありますが、すべてのkeyエラーの解決策ではありません。重複値や外部キーのエラーを、インデックス削除で隠さないでください。

$table->string('email')->charset('utf8')->unique();

 

Eloquentモデル ORM

次にDBからデータの保存、取得をする際に利用するEloquentというORMを作成しましょう。

※「ORM（O/R Mapping）」とは

O/Rは「Object/Relational」の略で、オブジェクトとリレーショナルデータベースのデータの間をマッピングする技術のこと。

 

以下のコマンドを実行して「Task」というモデルを作成します。

php artisan make:model Task

モデルとなるクラスは、指定した名前でプロジェクトの「app」フォルダ内に作成されるので確認しましょう。

 

【Task.php】の中身

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    //
}

 

 

ルーティング

ルーティングとはコントローラとURLを対応させる仕組みです。

※コントローラーの詳細に関しては当記事では触れません。（中級者向けの記事で説明します）

 

「app/Http/routes.php」のファイルにルーティングの定義をします。

※Laravel5.3以降は、「routes」フォルダ配下にある「web.php」がそれに該当します。

とりあえず、以下の定義をしておきましょう。

<?php

use App\Task;
use Illuminate\Http\Request;

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

Route::post('/task', function (Request $request) {
    //
});

Route::delete('/task/{task}', function (Task $task) {
    //
});

 

 

ビューについて

Laravelのビューは「resources/views」に保管します。

「return view('tasks');」と定義したのは「resources/views/tasks.blade.php」を表示するということです。

それでは実際に「tasks.blade.php」をつくりましょう。

↓が今回作るビューの完成形です。(※今回CSSはいじらないのであくまでイメージです)

クイックスタート & チュートリアル(初心者向け)

 

レイアウトの作成

LaravelはBladeテンプレートを使用することでページ間の特徴を共有できます。

今回はレイアウトを「resources/views/layouts/app.blade.php」として定義します。

「.blade.php」拡張子とすることでBladeテンプレートエンジンをするとフレームワークに指示を出します。

それでは「resources/views」に「layouts」フォルダを作成して以下の内容の「app.blade.php」を作成しましょう。

<!-- resources/views/layouts/app.blade.php -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Laravel Quickstart - Basic</title>

        <!-- CSSとJavaScript -->
    </head>

    <body>
        <div class="container">
            <nav class="navbar navbar-default">
                <!-- ナビバーの内容 -->
            </nav>
        </div>

        @yield('content')
    </body>
</html>

「@yield('content')」は「contentセクション」を持つ子ビューを挿入するという意味です。

 

子ビューの作成

それでは「contentセクション」を持つ子ビューを作成しましょう。

※先ほど作ったのはレイアウトで今回はビューです。

「resources/views/tasks.blade.php」としてビューを定義します。

<!-- resources/views/tasks.blade.php -->

@extends('layouts.app')

@section('content')

    <!-- Bootstrapの定形コード… -->

    <div class="panel-body">
        <!-- バリデーションエラーの表示 -->
        @include('common.errors')

        <!-- 新タスクフォーム -->
        <form action="{{ url('task') }}" method="POST" class="form-horizontal">
            {{ csrf_field() }}

            <!-- タスク名 -->
            <div class="form-group">
                <label for="task" class="col-sm-3 control-label">タスク</label>

                <div class="col-sm-6">
                    <input type="text" name="name" id="task-name" class="form-control">
                </div>
            </div>

            <!-- タスク追加ボタン -->
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-6">
                    <button type="submit" class="btn btn-default">
                        <i class="fa fa-plus"></i> タスク追加
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- TODO: 現在のタスク -->
@endsection

「@extends('layouts.app')」は先ほど作成した「resources/views/layouts/app.blade.php」レイアウトを使用するという意味です。

「@section('content')」から「@endsection」の内容を、先ほどのレイアウトで定義した「@yield('content')」の部分に挿入します。

「@include('common.errors')」は「resources/views/common/errors.blade.php」のテンプレートを使用するという意味です。

（このテンプレートは後ほど作成します。）

 

画面を表示させてみましょう。

ルートディレクトリ上で以下のコマンドを実行してサーバーを起動します。

php artisan serve

 

とりあえず表示させるには「@include('common.errors')」を一時的に削除して「http://localhost:8000/」にアクセスしてみましょう。

以下の画面が表示されます。※表示したら「@include('common.errors')」は戻しておいてください。

クイックスタート & チュートリアル(初心者向け)

 

バリデーション（入力値チェック）

「tasks」テーブルに追加する値のチェックを行います。

値の追加はPOSTメソッドで行うので「app/Http/routes.php」もしくは「routes/web.php」に以下の記述をしましょう。

Route::post('/task', function (Request $request) {

    $validator = Validator::make($request->all(), [
        'name' => 'required|max:255',
    ]);

    if ($validator->fails()) {
        return redirect('/')
            ->withInput()
            ->withErrors($validator);
    }

    // タスク作成処理…
});

これは「name」フィールドの入力値に何かしらの値が入力されていて、かつ255字以内であることをチェックしています。

もし、入力値チェックにひっかかった場合は「'/'」にリダイレクトします。

「->withInput()」で入力値を再表示し、「->withErrors($validator)」でエラーを$errors変数に格納します。

 

 

エラーの表示

次は$errors変数は子ビューの「@include('common.errors')」の部分で表示させるようにしましょう。

「resources/views/common/errors.blade.php」を作成して以下の実装をしましょう。

<!-- resources/views/common/errors.blade.php -->

@if (count($errors) > 0)
    <!-- Form Error List -->
    <div class="alert alert-danger">
        入力値に誤りがあります。

       

        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

 

データベースへの値の追加

次は値をデータベースに追加する処理を記載します。

「app/Http/routes.php」もしくは「routes/web.php」に記載したバリデーション続きに以下の内容を追加しましょう。

Route::post('/task', function (Request $request) {

    $validator = Validator::make($request->all(), [
        'name' => 'required|max:255',
    ]);

    if ($validator->fails()) {
        return redirect('/')
            ->withInput()
            ->withErrors($validator);
    }

    $task = new Task;
    $task->name = $request->name;
    $task->save();

    return redirect('/');
});

「new Task」でモデルを生成して「name」に値をセット、「save()」で保存をします。

 

データベースから値を取得

保存した値を取得する処理を以下のように実装します。

Route::get('/', function () {

    $tasks = Task::orderBy('created_at', 'asc')->get();

    return view('tasks', [
        'tasks' => $tasks
    ]);
});

「get()」で値を取得します。「orderBy('created_at', 'asc')」は取得順序の指定です。

「tasks.blade.php」に対して取得した「$tasks」を渡します。

 

 

ビューに値を表示

データベースから取得した値をビューに表示しましょう。

「resources/views/tasks.blade.php」を以下の内容に書き換えましょう。

（※黄色が追加した部分です）

@extends('layouts.app')

@section('content')

    <!-- Bootstrapの定形コード… -->

    <div class="panel-body">
        <!-- バリデーションエラーの表示 -->
        @include('common.errors')

        <!-- 新タスクフォーム -->
        <form action="{{ url('task') }}" method="POST" class="form-horizontal">
            {{ csrf_field() }}

            <!-- タスク名 -->
            <div class="form-group">
                <label for="task" class="col-sm-3 control-label">タスク</label>

                <div class="col-sm-6">
                    <input type="text" name="name" id="task-name" class="form-control">
                </div>
            </div>

            <!-- タスク追加ボタン -->
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-6">
                    <button type="submit" class="btn btn-default">
                        <i class="fa fa-plus"></i> タスク追加
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- 現在のタスク -->
    @if (count($tasks) > 0)
        <div class="panel panel-default">
            <div class="panel-heading">
                現在のタスク
            </div>

            <div class="panel-body">
                <table class="table table-striped task-table">

                    <!-- テーブルヘッダ -->
                    <thead>
                        <th>Task</th>
                        <th> </th>
                    </thead>

                    <!-- テーブル本体 -->
                    <tbody>
                        @foreach ($tasks as $task)
                            <tr>
                                <!-- タスク名 -->
                                <td class="table-text">
                                    <div>{{ $task->name }}</div>
                                </td>

                                <td>
                                    <!-- TODO: 削除ボタン -->
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif
@endsection

「$tasks」が0件でない場合、foreach文で回して一件ずつ「name」を表示します。

 

データベースの値の削除

先ほど追加したコードの「」の部分に、以下のコードを追加して削除ボタンを追加しましょう。

<form action="{{ url('task/'.$task->id) }}" method="POST">
    {{ csrf_field() }}
    {{ method_field('DELETE') }}

    <button type="submit" class="btn btn-danger">
        <i class="fa fa-trash"></i> 削除
    </button>
</form>

削除ボタンをクリックすると、DELETEでリクエストします。

formタグ内ではPOSTを使用していますが、これはHTMLのフォームが許容しているのがGETとPOSTのみなので、とりあえず記載しているだけです。

実際はDELETEのリクエストとなります。

 

「app/Http/routes.php」もしくは「routes/web.php」に以下のDELETEの処理を実装しましょう。

Route::delete('/task/{task}', function (Task $task) {
    $task->delete();

    return redirect('/');
});

 

これで今回のWebアプリ作成は完了となります。

お疲れさまでした。

 

旧サンプルを読むときの確認順

  1. LaravelとPHPのバージョンを確認し、ルート・モデル・認証の構成を混ぜないようにします。
  2. DBへ接続できるか、DB名とユーザー・ホスト・権限を確認します。could not find driverならPDO MySQL拡張を先に調べます。
  3. DB準備の操作は学習用環境で行い、既存の本番DBへ記事のコマンドをそのまま実行しないでください。
  4. 本編の画像、テーブル定義、ルート、ビューを順に照合します。DB接続とBlade描画の問題を分けると原因を絞れます。

公式資料: Laravel 5.2の元チュートリアル、MySQL 8.0 CREATE USER、旧環境のインデックス長、Ubuntu apt-get（2026年10月確認）。

Post Share
子ページ

子ページはありません

同階層のページ
  1. インストールと設定
  2. クイックスタート & チュートリアル(初心者向け)
  3. クイックスタート & チュートリアル(中級者向け)
  4. ルーティング
  5. Bladeテンプレート(ビュー/レイアウト)
  6. コントローラー
  7. マイグレーションとテーブル定義
  8. データベースの設定
  9. Eloquentモデル (ORM)
  10. SQLとクエリビルダー
  11. バリデーション
  12. .envファイルの設定値へのアクセス
  13. 動作環境による分岐処理
  14. configフォルダ配下の設定値へのアクセス
  15. assetヘルパーを利用したpublicフォルダへのアクセス
  16. storageフォルダへのアクセス
  17. アプリケーション名の変更
  18. メンテナンス
  19. ログイン画面(認証システム)の作成
  20. ログインの必須化
  21. ログインユーザー情報の取得
  22. ルートの認証化
  23. 本番サーバーへのデプロイ方法
  24. 多言語化
  25. csrf_field
  26. ファイルのダウンロード
  27. CSVのアップロードおよび読み込み(maatwebsite/excel)
  28. ページタイトルの設定
  29. コマンド一覧
  30. エラー一覧
  31. SQLの実行ログ出力方法
  32. キャッシュのクリア
  33. Selectの結果の最初もしくは最後に任意の値を追加する方法
  34. ajaxでPOST通信する際の注意点
  35. ソーシャルログインの実装
  36. セッション情報の確認
  37. ログイン、ユーザー登録、パスワードリセット後のリダイレクト先の変更方法
  38. redirectやreturn viewにメッセージを付与する方法
  39. クッキー(cookie)の設定と取得
  40. クラスの再読み込み
  41. csrfの有効時間を変更する方法
  42. ViewComposerを用いてviewに共通の値を付与する方法
  43. View::shareを用いて共通の値を各ビューに渡す方法
  44. ミドルウェアを用いた処理の共通化
  45. Middleware内でAuth::check()などを使用する方法
  46. Controller以外でリダイレクトする方法
  47. セッションの値の取得/保存/更新/削除
  48. $requestの値を変更する方法
  49. 常時SSL化
  50. ページング(ページネーション)をする方法
  51. vue.jsとの連携
  52. Vue.jsと連携するSPA実行環境構築
  53. .envの値をvue.jsで参照する方法
  54. vue.jsを本番環境にリリースする方法
  55. could not find driver（Windows, MySQL編）
2026-10-07 08:23:16 atom 993

人気ページ

最近更新/作成されたページ