1. ホーム /
  2. 環境構築・運用 /
  3. 【初心者向け】PHP 8 + Laravel v11 のWebアプリ 開発環境を macOS Sonoma と Laravel Sail で構築してみよう！
  • 2024.09.03   2024.09.06

【初心者向け】PHP 8 + Laravel v11 のWebアプリ 開発環境を macOS Sonoma と Laravel Sail で構築してみよう！

記事の概要

この記事では、オープンソースのプログラミング言語PHPと Laravel v11.xを使って、macOS Sonoma と Docker Desktop 4.32 上に Laravel Sail を使った開発環境の構築からシンプルなWebアプリ開発、実行までの流れを紹介します。

この記事を参考に、PHPやWebアプリ開発のスタートの一助となれば幸いです。

今回の記事の対象者

この記事は次のような方に向けています：

  • PHPを使ってアプリ開発を始めたい方
  • macOSとDockerコンテナを使ってLaravelの開発環境を構築したい方
  • シンプルなWebアプリでPHPとLaravelの実装イメージを理解したい方

はじめに

今回は、構築する開発環境と、開発するWebアプリの概要は以下の通りです。

開発・実行環境

  • サーバー環境
    • OS：macOS Sonoma
    • ツール：Docker Desktop
    • 環境：Laravel Sail コンテナ開発・実行環境

Webアプリ

シンプルなブログアプリを通じて、Laravelの基本操作を学びながら、CRUD操作等のPHPの重要な要素を実践的に理解します。

Laravelの基本操作

Laravelの基本操作として、以下の機能を実装します。

  • ルーティング
    • URLに応じて適切なコントローラーを呼び出すルーティングを設定します。
  • コントローラー
    • コントローラーは、各ルートに対応する処理を定義します。例えば、ブログ記事の一覧表示、記事詳細表示、記事作成フォーム表示、記事編集フォーム表示などを担当します。
  • ビュー
    • ビューは、ユーザーに表示されるHTMLページを作成します。Bladeテンプレートエンジンを使用して、動的な内容を表示します。

CRUD操作

ブログ記事の作成、読み取り、更新、削除の機能を実装します。

  • Create (作成):
    • 記事作成ページにフォームを用意し、ユーザーが記事のタイトル、内容を入力して送信できるようにします。
    • フォームのデータは、コントローラーを通じてMySQLデータベースに保存されます。
  • Read (読み取り):
    • トップページで全記事の一覧を表示します。各記事はタイトルと記事本文を表示し、詳細ページへのリンクを設けます。
    • 特定の記事をクリックすると、記事の詳細ページが表示されます。
  • Update (更新):
    • 記事の編集ページを提供し、既存の記事を編集できるようにします。
    • 編集された内容はMySQLデータベースに更新され、更新後に詳細ページで表示されます。
  • Delete (削除):
    • 記事の削除機能を追加し、特定の記事を削除できるようにします。
    • 削除後は、トップページにリダイレクトされ、一覧から削除されたことが確認できます。

もくじ

ソフトウェア・ハードウェア

必要なツール、ライブラリ、端末は以下の通りです。

開発ツール

以下、開発ツールとその公式サイトの一覧です。Jetbrains社のPhpStormは非常に高機能なので、導入しておくと開発作業が楽になります。

ツール名用途
PhpStormPHP開発者向けのIDEです。学生は無料となっています。

端末

以下、今回の環境を構築する対象の端末スペックです。

項目詳細
ハードウェアApple Silicon M3, RAM 24GB
OSmacOS Sonoma 14.6

本記事で紹介するソフトウェアおよびツールは、筆者の個人的な使用経験に基づくものであり、公式のサポート外の設定や使用方法を含む場合があります。利用に際しては、公式サイトの指示およびガイドラインを参照し、自己責任で行ってください。

PHP、Laravelとは

PHP

Webサイトを作るためのプログラミング言語の一つです。正式には「PHP: Hypertext Preprocessor」と呼ばれますが、PHPと略して呼ばれます。

PHPは無料で利用でき、多くの開発者が日々改良を加えています。オープンソースのため、世界中で広く使われており、学習リソースも豊富です。

Laravel

PHPで動作する人気のあるウェブアプリケーションフレームワークです。ウェブアプリケーションを簡単に、そして効率的に作るためのツールや機能がたくさん詰まっています。

  • 使いやすさ
    • Laravelはとても使いやすく、直感的に理解できるように設計されています。これからプログラミングを始める人でも、比較的簡単に使いこなせるようになります。
  • MVCアーキテクチャ
    • Laravelは「MVC（Model-View-Controller）」という設計パターンを採用しています。これは、プログラムを「モデル」「ビュー」「コントローラー」という3つの部分に分けて管理する方法です。
  • 豊富な機能
    • Laravelには、ユーザー認証（ログイン・ログアウト機能）、データベース操作、メール送信、タスクスケジューリングなど、ウェブアプリを作るためのたくさんの便利な機能が最初から用意されています。
  • エコシステム
    • Laravelには「Laravelエコシステム」という、Laravelを補完するさまざまなツールがあります。例えば、Laravel SailはDockerを使った開発環境を簡単にセットアップできるツールです。

サーバー環境の構築

PHPとLaravelを構築するための手順は以下の通りです。

  • Docker Desktopのインストール
  • Sailでのサーバー環境の構築

Docker Desktopのインストール

PHP、Laravelの環境は、Sailで構築するので、Docker Desktopを事前にインストールしておきます。

Docker Desktopのインストールについては、以下の記事で詳細に解説していますので、こちらをご覧下さい。

【初心者向け】Docker Desktop 4.28 を Windows11 と macOS Sonoma へインストールしよう

Laravel Sailでのサーバー環境の構築

Laravel Sailとは

Laravel Sailは、Dockerという技術を使って、Laravelの開発環境を自動的にセットアップしてくれるツールです。通常、Webアプリを開発するには、Webサーバーやデータベースの設定が必要ですが、Sailを使うとその設定を簡単に行うことができます。

  • 簡単に始められる
    • Laravel Sailを使うと、難しい設定をせずに、すぐに開発を始められます。コマンド一つで環境を整えることができます。
  • すべてが揃っている
    • Sailを使うと、Laravelを動かすのに必要なソフトウェア（PHP、MySQL、Redisなど）がすべてセットで用意されます。これらを個別にインストールする手間が省けます。
  • 一貫した環境
    • Sailを使えば、どんなコンピューターでも同じ環境でLaravelを動かすことができます。これにより、開発チーム全員が同じ環境で作業できるので、環境の違いによるトラブルを避けることができます。

Sailでのプロジェクトの作成

以下のコマンドを実行して、Laravelプロジェクトを作成します。

example-appの部分を自分のプロジェクト名に変更してください。

curl -s "<https://laravel.build/example-app>" | bash

以下、実行結果のサンプルです。筆者の環境では、すべてのソフトウェアをダウンロードしたの約5分程度かかりました。

また、インストールの最後に、管理者のパスワード入力が必要となります。

(base) xxxxxx@xxxxxx test-pj % curl -s "<https://laravel.build/example-app>" | bash
latest: Pulling from laravelsail/php83-composer
59f5764b1f6d: Pull complete 
443203b9a6f0: Pull complete 
Digest: sha256:428fa9b2edf2cfc1be71a6c32f0d6723449e5edc6ae1c3eeaac5a31d89b0c9f2
Status: Downloaded newer image for laravelsail/php83-composer:latest
   WARN  TTY mode requires /dev/tty to be read/writable.

    Creating a "laravel/laravel" project at "./example-app"
    Installing laravel/laravel (v11.1.4)
      - Downloading laravel/laravel (v11.1.4)
      - Installing laravel/laravel (v11.1.4): Extracting archive
    Created project in /opt/example-app
    > @php -r "file_exists('.env') || copy('.env.example', '.env');"
 

   INFO  Discovering packages.  

  laravel/sail .......................................................... DONE
  laravel/tinker ........................................................ DONE
  nesbot/carbon ......................................................... DONE
  nunomaduro/collision .................................................. DONE
  nunomaduro/termwind ................................................... DONE

   INFO  Sail scaffolding installed successfully. You may run your Docker containers using Sail's "up" command.  

➜ ./vendor/bin/sail up

   WARN  A database service was installed. Run "artisan migrate" to prepare your database:  

➜ ./vendor/bin/sail artisan migrate

[+] Pulling 45/45
 ✔ redis Pulled                                                                                                 6.0s 
   ✔ 41eaa5a9296d Pull complete                                                                                 2.7s 
 ✔ selenium Pulled                                                                                             38.3s 
   ✔ a4be5be59be4 Pull complete                                                                                35.0s 
 ✔ mailpit Pulled                                                                                               9.2s 
   ✔ 554710d9c16c Pull complete                                                                                 6.0s 
 ✔ mysql Pulled                                                                                                21.3s 
   ✔ 604975d7252e Pull complete                                                                                18.1s 
 ✔ meilisearch Pulled                                                                                          10.8s 
   ✔ 1cc75f62836e Pull complete                                                                                 7.6s 
[+] Building 254.1s (16/16) FINISHED                                                            docker:desktop-linux
 => [laravel.test internal] load build definition from Dockerfile                                               0.0s                                                                         1.8s
 => => writing image sha256:7d16074cd4eee20b3c2220c714a17524470ecf9d1a7f5a4a39d926576d0e0424                    0.0s
 => => naming to sail-8.3/app                                                                                   0.0s

Please provide your password so we can make some final adjustments to your application's permissions.

Password:

Thank you! We hope you build something incredible. Dive in with: cd example-app && ./vendor/bin/sail up
(base) xxxxxx@xxxxxx test-pj %

次に、プロジェクトの設定を行います。作成されたプロジェクトディレクトリに移動して、以下のコマンドを実行してください。

cd example-app
./vendor/bin/sail up -d

以下、環境の起動ログ（抜粋）です。インストールされた各種コンポーネント（mysql, redis, seleniumなど）が初期化されて起動する事が確認出来ます。

(base) xxxxxx@xxxxxx test-pj % cd example-app      
(base) xxxxxx@xxxxxx example-app % ls
README.md		composer.lock		phpunit.xml		tests
app			config			public			vendor
artisan			database		resources		vite.config.js
bootstrap		docker-compose.yml	routes
composer.json		package.json		storage
(base) siwamin@orcusmba example-app % ./vendor/bin/sail up
[+] Running 10/10
 ✔ Network example-app_sail               Created                                                               0.0s 
 ✔ Container example-app-selenium-1       Created                                                               0.0s 
 ✔ Container example-app-redis-1          Created                                                               0.0s 
 ✔ Container example-app-meilisearch-1    Created                                                               0.0s 
 ✔ Container example-app-mysql-1          Created                                                               0.0s 
 ✔ Container example-app-mailpit-1        Created                                                               0.0s 
 ✔ Container example-app-laravel.test-1   Created                                                               0.0s 
Attaching to laravel.test-1, mailpit-1, meilisearch-1, mysql-1, redis-1, selenium-1
mysql-1         | [Entrypoint] MySQL Docker Image 8.0.32-1.2.11-server
redis-1         | 1:C 02 Sep 2024 11:55:34.869 * oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo
mailpit-1       | time="2024/09/02 11:55:34" level=info msg="[smtpd] starting on [::]:1025 (no encryption)"
selenium-1      | 2024-09-02 11:55:34,986 INFO Included extra file "/etc/supervisor/conf.d/selenium.conf" during parsing
meilisearch-1   | 
meilisearch-1   | 888b     d888          d8b 888 d8b                                            888
meilisearch-1   | 8888b   d8888          Y8P 888 Y8P                                            888
meilisearch-1   | 88888b.d88888              888                                                888
meilisearch-1   | 888Y88888P888  .d88b.  888 888 888 .d8888b   .d88b.   8888b.  888d888 .d8888b 88888b.
meilisearch-1   | 888 Y888P 888 d8P  Y8b 888 888 888 88K      d8P  Y8b     "88b 888P"  d88P"    888 "88b
meilisearch-1   | 888  Y8P  888 88888888 888 888 888 "Y8888b. 88888888 .d888888 888    888      888  888
meilisearch-1   | 888   "   888 Y8b.     888 888 888      X88 Y8b.     888  888 888    Y88b.    888  888
meilisearch-1   | 888       888  "Y8888  888 888 888  88888P'  "Y8888  "Y888888 888     "Y8888P 888  888
meilisearch-1   | 
laravel.test-1  |   Press Ctrl+C to stop the server
laravel.test-1  | 
mysql-1         | [Entrypoint] Database initialized
mysql-1         | 2024-09-02T11:55:37.273289Z 0 [Warning] [MY-011068] [Server] The syntax '--skip-host-cache' is deprecated and will be removed in a future release. Please use SET GLOBAL host_cache_size=0 instead.
mysql-1         | 
mysql-1         | [Entrypoint] Starting MySQL 8.0.32-1.2.11-server
mysql-1         | 2024-09-02T11:55:40.157465Z 0 [Warning] [MY-011068] [Server] The syntax '--skip-host-cache' is deprecated and will be removed in a future release. Please use SET GLOBAL host_cache_size=0 instead.
mysql-1         | 2024-09-02T11:55:40.248601Z 0 [System] [MY-010931] [Server] /usr/sbin/mysqld: ready for connections. Version: '8.0.32'  socket: '/var/lib/mysql/mysql.sock'  port: 3306  MySQL Community Server - GPL.
meilisearch-1   | 2024-09-02T11:56:04.762601Z  INFO HTTP request{method=GET host="127.0.0.1:7700" route=/health query_parameters= user_agent=Wget status_code=200}: meilisearch: close time.busy=607µs time.idle=56.3µs
meilisearch-1   | 2024-09-02T11:58:34.962269Z  INFO HTTP request{method=GET host="127.0.0.1:7700" route=/health query_parameters= user_agent=Wget status_code=200}: meilisearch: close time.busy=215µs time.idle=22.4µs

docker psコマンドで、Laravel環境で動作しているサービスを確認することが出来ます。

(base) xxxxxx@xxxxxx example-app % docker ps       
CONTAINER ID   IMAGE                           COMMAND                   CREATED          STATUS                             PORTS                                                      NAMES
f4cd36056e4a   sail-8.3/app                    "start-container"         12 seconds ago   Up 11 seconds                      0.0.0.0:80->80/tcp, 0.0.0.0:5173->5173/tcp                 example-app-laravel.test-1
f8475650d06d   seleniarm/standalone-chromium   "/opt/bin/entry_poin…"   12 seconds ago   Up 12 seconds                      4444/tcp, 5900/tcp                                         example-app-selenium-1
322b687a4162   mysql/mysql-server:8.0          "/entrypoint.sh mysq…"   12 seconds ago   Up 12 seconds (health: starting)   0.0.0.0:3306->3306/tcp, 33060-33061/tcp                    example-app-mysql-1
347cb12380dd   axllent/mailpit:latest          "/mailpit"                12 seconds ago   Up 12 seconds (health: starting)   0.0.0.0:1025->1025/tcp, 0.0.0.0:8025->8025/tcp, 1110/tcp   example-app-mailpit-1
0b02e68e4198   getmeili/meilisearch:latest     "tini -- /bin/sh -c …"   12 seconds ago   Up 12 seconds (health: starting)   0.0.0.0:7700->7700/tcp                                     example-app-meilisearch-1
85425b818ff4   redis:alpine                    "docker-entrypoint.s…"   12 seconds ago   Up 12 seconds (health: starting)   0.0.0.0:6379->6379/tcp                                     example-app-redis-1
(base) xxxxxx@xxxxxx example-app %

次に、Laravel用のデータベーステーブルを作成するため、移行を行います。

以下のコマンドを実行してください。

./vendor/bin/sail artisan migrate

以下、環境の移行ログです。いくつかのテーブルが作成されていることが確認出来ます。

Last login: Mon Sep  2 20:46:36 on ttys000
(base) xxxxxx@xxxxxx ~ % cd test-pj/example-app 
(base) xxxxxx@xxxxxx example-app % ./vendor/bin/sail artisan migrate

   INFO  Preparing database.  

  Creating migration table ....................................... 7.14ms DONE

   INFO  Running migrations.  

  0001_01_01_000000_create_users_table .......................... 39.18ms DONE
  0001_01_01_000001_create_cache_table ........................... 9.75ms DONE
  0001_01_01_000002_create_jobs_table ........................... 26.98ms DONE

(base) xxxxxx@xxxxxx example-app %

ここまでで、初期設定が完了しましたので、WebブラウザでLaravelアプリにアクセスしてみましょう。

http://localhost:80にアクセスすると以下の画面が表示されます。

Laravelをインストールしてアプリを起動した初期画面です

正常に動作することが確認出来ましたので、Laravel環境をストップします。

以下のコマンドを実行してください。

./vendor/bin/sail stop

コマンドの実行ログです。起動していたサービスが終了したことが確認出来ます。

Gracefully stopping... (press Ctrl+C again to force)
[+] Stopping 6/6
 ✔ Container example-app-laravel.test-1  Stopped                                                                0.5s 
 ✔ Container example-app-mysql-1         Stopped                                                                1.4s 
 ✔ Container example-app-redis-1         Stopped                                                                0.2s 
 ✔ Container example-app-mailpit-1       Stopped                                                                0.4s 
 ✔ Container example-app-meilisearch-1   Stopped                                                                0.1s 
 ✔ Container example-app-selenium-1      Stopped                                                                4.2s 
(base) xxxxxx@xxxxxx example-app %

これで、Laravel Sailを使ったmacOSでの開発環境と実行環境が整いました。

Laravel SailのTips

Tips1：コマンド呼出の簡略化

./vendor/bin/sailと毎回入力入力するのが煩雑なので、以下のコマンドでエイリアスを設定します。（Laravelの公式サイトでも紹介されています）

alias sail='sh $([ -f sail ] && echo sail || echo vendor/bin/sail)'

Tips2：phpコマンドのSailコマンド読み替え

Laravel では Composer、Artisan、Node / NPM コマンドがよく使われます。Laravel Sail を使用している場合は、Sail を使用してこれらのコマンドを実行する必要がありますので、読み替えてください

# Running Artisan commands locally...
php artisan queue:work
 
# Running Artisan commands within Laravel Sail...
sail artisan queue:work

プログラム開発と実行

ソースコードの作成

Laravelの基本操作には、ルーティング、コントローラー、モデル、ビュー、そしてマイグレーションがあります。それぞれの役割を理解し、どの部分が何を担当しているかを把握することで、Laravelを使った開発がスムーズに進むようになります。これらの操作をしっかり学ぶことで、PHPを使ったWebアプリの開発が楽しく、効率的に行えるようになります。

それでは、Laravelのプロジェクトが既に作成されているので、モデル、コントローラー、ビューを作成していきます。

モデルの作成

モデルは、データベースとのやり取りを担当します。例えば、ブログの記事データを保存したり、読み込んだりする役割があります。

これにより、フォームから送信されたデータを簡単にデータベースに保存することができます。

以下のコマンドで、Postモデルとマイグレーションを作成します。

./vendor/bin/sail artisan make:model Post -m

コマンドの実行ログです。モデルのソースとマイグレーション用のコードが作成されたことが確認出来ます。

(base) xxxxxx@xxxxxx example-app % ./vendor/bin/sail artisan make:model Post -m

   INFO  Model [app/Models/Post.php] created successfully.  

   INFO  Migration [database/migrations/2024_09_03_080753_create_posts_table.php] created successfully.  

(base) xxxxxx@xxxxxx example-app %

Postモデルへの項目追加

Postモデルに、今回のアプリで必要な記事のタイトルとコンテンツの項目を追加します。

Postモデルのマイグレーションファイルの元ファイルです。

database/migrations/2024_09_03_080753_create_posts_table.php

<?php

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

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

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

2024_09_03_080753_create_posts_table.phpを開いて、以下の内容を追加します。

$table->string(‘title’); $table->text(‘content’);

追加後のファイル内容です。

<?php

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

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

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

その後、マイグレーションを実行してデータベースにテーブルを作成します。

./vendor/bin/sail artisan migrate

コマンドの実行ログです。データベースのマイグレーションが行われた事が確認出来ます。

(base) xxxxxx@xxxxxx example-app % ./vendor/bin/sail artisan migrate

   INFO  Running migrations.  

  2024_09_03_080753_create_posts_table ..................................................... 8.98ms DONE

(base) xxxxxx@xxxxxx example-app %

Postモデルにfillableプロパティを追加する

Laravelでは、フォームからのデータをモデルに割り当てるときに「大量割り当て」という機能を使用しますが、デフォルトではセキュリティ上の理由から、すべてのモデルプロパティに対して大量割り当てが禁止されています。

デフォルトのモデルは、以下となっています。これに、Postモデルで大量割り当てが許可される属性を指定します。

<?php

namespace App\\Models;

use Illuminate\\Database\\Eloquent\\Factories\\HasFactory;
use Illuminate\\Database\\Eloquent\\Model;

class Post extends Model
{
    use HasFactory;
}

具体的には、Postモデルの中にfillableプロパティを追加し、フォームから受け取るデータ（例: titleやcontent）を許可します。

以下の様に、ファイルに定義を追加してください。

<?php

namespace App\\Models;

use Illuminate\\Database\\Eloquent\\Factories\\HasFactory;
use Illuminate\\Database\\Eloquent\\Model;

class Post extends Model
{
    use HasFactory;

    protected $fillable = [
        'title',
        'content',
    ];
}

コントローラーの作成

コントローラーは、ユーザーがウェブサイトで何か操作をしたときに、その操作に応じてどんな処理をするかを決める部分です。データベースからデータを取り出したり、ビュー（画面）を表示したりする役割を持っています。

以下のコマンドでPostControllerを作成します。

./vendor/bin/sail artisan make:controller PostController

(base) xxxxxx@xxxxxx example-app % ./vendor/bin/sail artisan make:controller PostController

   INFO  Controller [app/Http/Controllers/PostController.php] created successfully.  

(base) xxxxxx@xxxxxx example-app %

app/Http/Controllers/PostController.php（元ファイル）

<?php

namespace App\\Http\\Controllers;

use Illuminate\\Http\\Request;

class PostController extends Controller
{
    //
}

app/Http/Controllers/PostController.phpに以下のコードを追加します。

<?php

namespace App\\Http\\Controllers;

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

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::all();
        return view('posts.index', compact('posts'));
    }

    public function create()
    {
        return view('posts.create');
    }

    public function store(Request $request)
    {
        $request->validate([
            'title' => 'required|max:255',
            'content' => 'required',
        ]);

        Post::create($request->all());

        return redirect()->route('posts.index')
                         ->with('success', 'Post created successfully.');
    }

    public function edit(Post $post)
    {
        return view('posts.edit', compact('post'));
    }

    public function update(Request $request, Post $post)
    {
        $request->validate([
            'title' => 'required|max:255',
            'content' => 'required',
        ]);

        $post->update($request->all());

        return redirect()->route('posts.index')
                         ->with('success', 'Post updated successfully.');
    }

    public function destroy(Post $post)
    {
        $post->delete();

        return redirect()->route('posts.index')
                         ->with('success', 'Post deleted successfully.');
    }
}

index()メソッドは、/postsにアクセスされたときに呼び出されます。

Post::all()でデータベースからすべてのブログ記事を取り出し、そのデータをposts.indexというビューに渡して、一覧ページを表示します。

ルーティングの設定

追加する機能へのルーティングを追加します。

ルーティングは、ユーザーがアクセスするURLと、それに対応する処理（どのページを表示するか、どのデータを扱うか）を決めるものです。

routes/web.php（元ファイル）

<?php

use Illuminate\\Support\\Facades\\Route;

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

routes/web.phpに以下のルートを追加します。

これで、http://localhost:80/postsのパスが追加されます。

<?php

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

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

Route::resource('posts', PostController::class);

このコードは、/postsというURLでアクセスされたときに、PostControllerというコントローラーが呼び出されるように設定しています。 例えば、/postsにアクセスすると、ブログ記事の一覧が表示され、/posts/createにアクセスすると、新しい記事を作成するページが表示されます。

ビューの作成

ビューは、ユーザーに表示される画面を作ります。HTMLを使ってページの見た目を作り、PHPのコードを埋め込んで動的な内容を表示します。

resources/viewsディレクトリ内に以下のBladeテンプレートファイルを追加します。

今回作成する各画面のテンプレートです。

layout.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog</title>
</head>
<body>
    @yield('content')
</body>
</html>

resources/viewsディレクトリ内にpostsディレクトリを作成し、以下のBladeテンプレートファイル群を追加します。

ブログアプリのトップ画面です。

index.blade.php

@extends('layout')

@section('content')
    <h1>Posts</h1>
    <a href="{{ route('posts.create') }}">Create a new post</a>
    @foreach ($posts as $post)
        <div>
            <h2>{{ $post->title }}</h2>
            <p>{{ $post->content }}</p>
            <a href="{{ route('posts.edit', $post->id) }}">Edit</a>
            <form action="{{ route('posts.destroy', $post->id) }}" method="POST">
                @csrf
                @method('DELETE')
                <button type="submit">Delete</button>
            </form>
        </div>
    @endforeach
@endsection

記事の作成画面です。

create.blade.php

@extends('layout')

@section('content')
    <h1>Create Post</h1>
    <form action="{{ route('posts.store') }}" method="POST">
        @csrf
        <div>
            <label>Title</label>
            <input type="text" name="title" value="{{ old('title') }}">
            @error('title')
                <div>{{ $message }}</div>
            @enderror
        </div>
        <div>
            <label>Content</label>
            <textarea name="content">{{ old('content') }}</textarea>
            @error('content')
                <div>{{ $message }}</div>
            @enderror
        </div>
        <button type="submit">Create</button>
    </form>
@endsection

記事の編集画面です。

edit.blade.php

@extends('layout')

@section('content')
    <h1>Edit Post</h1>
    <form action="{{ route('posts.update', $post->id) }}" method="POST">
        @csrf
        @method('PUT')
        <div>
            <label>Title</label>
            <input type="text" name="title" value="{{ $post->title }}">
            @error('title')
                <div>{{ $message }}</div>
            @enderror
        </div>
        <div>
            <label>Content</label>
            <textarea name="content">{{ $post->content }}</textarea>
            @error('content')
                <div>{{ $message }}</div>
            @enderror
        </div>
        <button type="submit">Update</button>
    </form>
@endsection

ブログアプリの動作確認

ブログアプリのコーディングが完了しましたので、動作確認をしてみます。

http://localhost:80/postsにアクセスすると以下の画面が表示されます。

ブログアプリの初期画面です。何も記事はありません。

記事の新規登録画面です。

ブログアプリの記事登録画面です。

登録されるとトップページに先ほど作成した記事が表示されます。

ブログアプリの記事登録後のトップ画面です。登録した記事が表示されています。

最後に

初心者の方でも、この記事を通じてPHPとLaravelの基本的な理解を得ることができたことを願っています。これをきっかけに、ぜひPHPとLaravelの世界に一歩踏み出してみてください！

Post Views: 442

SNSでもご購読できます。

コメントを残す

*


reCaptcha の認証期間が終了しました。ページを再読み込みしてください。