Mac ＋ MAMP 環境で Laravel を動かす（その２）

こんにちは！！エンジニアsoobeです！

この記事は、Mac ＋ MAMP 環境で Laravel を動かす（その１）の続きです。その１を読まれていない方は、その１からどうぞ。

Laravelプロジェクトを動かす！　のつづき

前回は、次の１まで書きましたので、今回は２、３について、記事にまとめます。

１）Laravelを使用しないで、シンプルなPHPを動かす
２）Laravelプロジェクトを作成する
３）Laravelでサンプルプログラムを動かす

Laravelプロジェクトを作成する

Laravelのプロジェクトを作成するには、PHPが必要となります。今回は、MAMP内にあるphp8.2 を使用したいと思います。

[Finder] で、[アプリケーション] > [MAMP] > [bin] > [php] > [php8.2.0] > [bin] > [php]ファイルを確認してください。

このphpファイルのパスを取得したいので、phpファイルを右クリックしてメニューを表示した状態で、optキーを押しておいて、「”php”のパス名をコピー」を押してください。optキーを押したままにしないと、「”php”のパス名をコピー」は表示されないので、注意してください。

おそらく、/Applications/MAMP/bin/php/php8.2.0/bin/php がコピーされたと思います。ターミナルを起動し、下記のコマンドで、phpバージョンを表示してみましょう。

ターミナルは、Launchpadで「ターミナル」と検索すると出てきます。以下をターミナルへコピペして、エンターキーを押すことで実行です。

/Applications/MAMP/bin/php/php8.2.0/bin/php -v

次のように表示されれば、OKです。（正確に同じでなくても問題ありません）

PHP 8.2.0 (cli) (built: Dec 8 2022 17:48:05) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.2.0, Copyright (c) Zend Technologies

もし、次のように表示される場合は、NGです。phpのパスを正しくコピーできていないのが原因だと思われますので、再度、上記「”php”のパス名をコピー」から試してみてください。

zsh: no such file or directory: /Application/MAMP/bin/php/php8.2.0/bin/php

composer のインストール

composerは、Laravelプロジェクトの作成や開発に必要となるパッケージ管理ソフトウェアです。

ターミナルを起動して、下記のコマンドを実行してください。パスワードを求められたら、現在ログインしているユーザーのパスワードを入力してください。

curl -sS https://getcomposer.org/installer | sudo /Applications/MAMP/bin/php/php8.2.0/bin/php -- --install-dir=/usr/local/bin --filename=composer

composerコマンドを実行できるようになったか、確認してみましょう。ターミナルを起動して、下記のコマンドを実行してください。ズラズラとcomposerのバージョンや説明が表示されたらOKです。

composer

Laravelプロジェクトの作成

準備が整ったので、Laravelプロジェクトを新規作成します。ターミナルを起動して、下記のコマンドを実行してください。実行完了までしばらく待ちます。「INFO Application key set successfully.」と表示されれば完了です。

cd /Applications/MAMP/htdocs
composer create-project laravel/laravel laravel

Laravelプロジェクトの初期表示を確認

ブラウザで、http://localhost/laravel/public/ を開いて、Laravelの初期表示が確認できれば、Laravelプロジェクトの新規作成は無事成功となります！

ドキュメントルートの変更

現在ブラウザでは、http://localhost/laravel/public/ を指定していますが、ドキュメントルートを変更して、http://localhost でこのページを表示できるようにしてみましょう。

MAMPの左上のPreferencesボタンを押します。

[Server] を表示してください。

Chooseボタンを押して、[アプリケーション] > [MAMP] > [htdocs] > [laravel] > [public] を選択してください。

正しく、設定できると次の表示になります。OKボタンで設定ダイアログを閉じてください。

ブラウザで、http://localhost/ が表示できるようになったか確認してみましょう！次のように表示できたら、大成功です！！

なんとなく、ドキュメントルートは、ウェブサーバーが外部に公開するコンテンツのルートディレクトリであることを感じでいただけましたでしょうか。

Laravelでサンプルプログラムを動かす

Laravelには、.envというファイルがあり、こちらにデータベース接続情報などの環境設定を書き込みます。

Macの場合、.（ドット）から始まるファイルやフォルダは、Finder上では、非表示になっているため、見ることができません。この隠しファイルの表示・非表示を切り替えるコマンドは、下記となりますので、覚えておいてください。

◆ 隠しファイルの表示・非表示切り替えショートカットキー
shift + cmd + .（ドット）

データベースを作成する

MAMPのデータベース（MySQL）に接続するために、.envを編集しましょう。

[Finder] で [アプリケーション] > [MAMP] > [htdocs] > [laravel] を開き、隠しファイルを表示できるようにしてから、.envファイルを開いて、下記の設定となるように編集してください。（.envファイルは、右クリック > [このアプリケーションで開く] > [テキストエディット] にて編集できます。）

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=root

データベースにテーブルを作成します。ターミナルで次のコマンドを実行しましょう。途中で、「WARN The database ‘laravel’ does not exist on the ‘mysql’ connection.」と表示されますが、←キーで、Yesを選択して、エンターキーを押してください。

cd /Applications/MAMP/htdocs/laravel
/Applications/MAMP/bin/php/php8.2.0/bin/php artisan migrate

次のように、表示されればOKです。

  WARN  The database 'laravel' does not exist on the 'mysql' connection.  

 ┌ Would you like to create it? ────────────────────────────────┐
 │ Yes                                                          │
 └──────────────────────────────────────────────────────────────┘     

  2014_10_12_000000_create_users_table ........................ 55ms DONE
  2014_10_12_100000_create_password_reset_tokens_table ........ 63ms DONE
  2019_08_19_000000_create_failed_jobs_table .................. 53ms DONE
  2019_12_14_000001_create_personal_access_tokens_table ....... 87ms DONE

もし、次のように表示された場合は、.envの設定が間違っているか、MAMPがStartされていないかのどちらかだと思います。見直してみてください。

  Illuminate\Database\QueryException

  SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: NO) (Connection: mysql, SQL: select * from information_schema.tables where table_schema = laravel and table_name = migrations and table_type = 'BASE TABLE')

この操作で「laravel」という名前のデータベースが作成され、usersなどのいくつかのテーブルが作成されました。これを確認するには、ブラウザで、http://localhost/phpMyAdmin5 を開いてみてください。laravelデータベースと、usersなどのテーブルが確認できると思います。

テストデータを登録する

usersテーブルのテストデータを登録します。Laravelプロジェクトでは、テストデータを登録する処理が無効化されているので、一部修正して有効化します。

/Applications/MAMP/htdocs/laravel/database/seeders/DatabaseSeeder.php　を開いて、下記となるように、編集してください。（いくつかの行の // を削除しています。）

<?php

namespace Database\Seeders;

// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     */
    public function run(): void
    {
        \App\Models\User::factory(10)->create();
        \App\Models\User::factory()->create([
            'name' => 'Test User',
            'email' => 'test@example.com',
        ]);
    }
}

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

/Applications/MAMP/bin/php/php8.2.0/bin/php artisan db:seed

テストデータが登録されたことを確認してみましょう。もう一度、ブラウザで、http://localhost/phpMyAdmin5 を開いて、laravelデータベースを選択してから、usersテーブルの[表示]を押してください。

次のようにテストデータが登録されていることを確認します。（ランダムに作成されているため、下記と全く同じ状態にはならないので、ご注意ください）

以上で、テストデータの登録は完了です！

サンプルプログラムを動かしてみる

それでは、最後に、データベースから先ほど登録したテストデータを取得し、ブラウザに表示させるサンプルプログラムを作ってみましょう。

サンプルプログラムを配置する

htdocs/laravel/routes/web.php

既存のweb.phpを編集してください。

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/

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

Route::get('/users', [UserController::class, 'index'])->name('user.index'); // 追記

htdocs/laravel/app/Http/Controllers/UserController.php

新しくファイルを作成してください。

<?php

namespace App\Http\Controllers;

use App\Models\User;

use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Routing\Controller as BaseController;

class UserController extends BaseController
{
    use AuthorizesRequests, ValidatesRequests;

    public function index()
    {
        $users = User::all();
        return view('user-index', ['users' => $users]);
    }
}

htdocs/laravel/resources/views/user-index.blade.php

新しくファイルを作成してください。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>サンプルプログラム</title>
    </head>
    <body>
        <div>
            @foreach ($users as $user)
            <div style="margin:1rem;">
                <div style="padding:1rem; border:1px solid #000; border-radius:1rem;">
                    <h2>{{ $user->name}}</h2>
                    <p>{{ $user->email }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </body>
</html>