ご自身のパソコン（ローカル）上で実際にLaravelのプログラミングをする準備をします。簡単なプログラムの実行まで体験してみましょう。

Laravelコース

はじめてのLaravel

Laravelのローカル開発準備（環境構築）

## Laravelとは？
Laravel（ララベル）は、PHPで作られたウェブアプリケーションを効率的かつ簡単に作成できるフレームワークです。

フレームワークとは、プログラムを作るための土台や道具のことです。例えば、レゴブロックを使って何かを作るときに使う「レゴセット」のようなものです。レゴブロック無しで例えば、お城のような作品を作るのは大変ですね。でも、レゴお城セットを使うと、基本的なブロックや組み立て方が揃っているので、ゼロから全てを準備する必要がなく、簡単に作品を作ることができます。また、あなたの創造力に応じてブロックを追加したり、形を変えたりすることもできます。

同じように、Laravelを使うと、アプリケーション開発に必要な基本的な機能がすでに揃っているので、複雑な設定をしなくてもすぐにアプリケーションを作り始めることができます。さらに、柔軟性があるので、自分のアイデアや必要に応じて機能を追加したりカスタマイズすることも可能です。

## Laravelで用意されている基本的な機能

Laravelでは以下のような機能が用意されています。
※今の段階では覚える必要はありません。

- **ルーティング（Routing）**
WebページのURLと、そのURLにアクセスしたときに実行する処理（アクション）を決める仕組みです。
例えば、「example.com/products」にアクセスすると、商品一覧を表示する処理を実行する、というように設定できます。

- **データベース操作（Eloquent ORM）**
データベースから情報を取得したり、保存したりするための機能です。
通常はSQLという特別な言語を使いますが、LaravelのEloquent ORMを使うと、シンプルな書き方でデータを扱うことができます。

- **マイグレーションとシーディング（Migration & Seeding）**
データベースの構造を管理し、初期データを自動で入れる仕組みです。
例えば、「商品テーブルを作成する」「最初にいくつかの商品データを登録する」といった作業をプログラムで実行できます。

- **ビュー（Bladeテンプレートエンジン）**
画面を作るための仕組みです。
通常のHTMLに加えて、変数や条件分岐（「ログインしているときだけ表示する」など）を簡単に組み込むことができます。

## このチュートリアルの目的
チュートリアルを通して、お手持ちのPCでLaravelを用いた開発ができるようになります。
以下の手順で学習します。

1. 必要なソフトウェアのインストール（開発の準備）
2. Laravelプロジェクトの作成
3. 簡単なWebサイトの実装

このチュートリアルを終えると、Laravelを用いた開発が可能になります。
初心者の方でも安心して進められるように、わかりやすく説明していきますので、一緒に頑張りましょう！

はじめに

今回のレッスンでは以下のソフトウェアを利用します。
導入が完了したら次のレッスンへ進んでください。

## Docker Desktop
今回はDockerというツールを用いてLaravelのローカル環境を作成します。
[必要なソフトウェアのインストール](https://code-lesson.com/cms/tutorials?tutorial=179ae4d9-780b-47c9-ac20-cdd640993980) を参考にインストールしましょう。


必要なソフトウェアのインストール（開発の準備）

それではいよいよLaravelプロジェクトを作成していきます。
Laravelには、Dockerを使った開発環境を簡単にセットアップできるLaravel Sailというツールが提供されています。
今回はこのLaravel Sailというツールを利用してLaravelプロジェクトを作成しましょう。
※Laraval Sailの事前ダウンロードやインストールの必要はありません



### ポイント：LaravelのバージョンとPHPのバージョンについて
Laravelの各バージョンは、特定のPHPバージョン以上で動作するように設計されています。例えば、Laravel 10 を使用する場合は `PHP 8.1 `以上 が必要です。
ローカル環境で直接 Laravel をインストールする場合、適切なPHPのバージョンがインストールされていないと、エラーが発生することがあります。
PHPのバージョンを確認するには、ターミナルで以下のコマンドを実行してください。
~~~bash
php -v
~~~

ただし、`Laravel Sail` を使う場合は、Dockerコンテナ内で適切なPHPバージョンがセットアップされるため、開発者が手動でPHPのバージョンを管理する必要はありません。これにより、`環境構築時のトラブルを減らし、スムーズに開発を進める`ことができます。


## Laravelプロジェクトの作成
1. ターミナル or パワーシェルを起動
2. Laravelプロジェクトを作成したいフォルダへ移動
<br>※今回はLaravelプロジェクトをDocuments配下に配置していますが、ご自身の好きな階層に配置してください。
<br>※cd ディレクトリ名で指定したディレクトリへ移動します。
~~~curl
cd Documents
~~~

3. Laravelプロジェクトを作成
~~~curl
curl -s "https://laravel.build/my-laravel-app" | bash
~~~

#### コマンド実行時にデータへのアクセス許可の確認が出た場合は`許可`を選択してください
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/304c097b-f8fd-496a-a389-16f912b512e3.png)
#### パスワードの入力を求められた場合は`PCを起動する際のパスワード`を入力してください
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/84b84fcd-447f-42cf-93e6-51398c4b7184.png)
#### Thank you!の表示がでたら完了です
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/66844441-ebd7-4a9f-9476-5356c1723c38.png)

4. 指定したディレクトリへmy-laravel-appフォルダが作成されているか確認しましょう
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/1a0d9c88-a9d2-461e-94ab-c9a208a8cb15.png)

## Visual Studio Code(VSCode)の起動
Visual Studio CodeでLaravelプロジェクトを開いてみましょう。
  1. Macの場合：Launchpadを開き、 __Visual Studio Code__ アイコンを探してクリック。
Windowsの場合：スタートメニューから __Visual Studio Code__ アイコンを探してクリック。

![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/f72bcd04-c97b-4f40-b6cc-fb290ab47ad3.png)
2. ファイル > フォルダーを開くを選択
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/4022aeeb-9b4c-4874-b110-872e22dd155a.png)
3. 作成した my-laravel-appを選択し開くボタンを押す
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/ce66e134-fff7-4d2e-9c4a-a3922e8aeaa0.png)
4. VSCodeのエクスプローラへ my-laravel-appが表示されます
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/932ccbd4-3d03-4f16-8e32-b18403833fdb.png)

## Laravelプロジェクトの起動
いよいよ準備が整いました。
それでは用意したプロジェクトを起動してみましょう。

1. Launchpadを開き、 __Docker__ アイコンを探してクリック。
※起動するだけでDockerのアプリケーション上での作業はありません。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/2bac5c03-69d4-433c-817d-65fa4bacaae0.png)

2. VisualStudioCode上でターミナルを起動
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/e5af9b5b-f990-43f5-a69f-6711b7dd3f96.png)


3. ターミナル上で以下のコマンドを実行し、Laravelを起動
~~~curl~command
./vendor/bin/sail up
~~~
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/5449fe6f-bb9c-4f5f-af71-ae3a6a23844f.png)
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/995cb16a-71c3-480f-96cc-d1eea6c57e17.png)

4. 127.0.0.1へアクセスしアプリケーションが起動していることを確認
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/fdc2b794-b755-4863-8460-c74ab317f8f9.png)

5. 新規ターミナルの起動
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/e1febaac-47dd-4a81-a0a6-b2d0bfd4d862.png)

6. 初期テーブルを作成
Laravelを利用する上で必要なデータベースのテーブルを作成するコマンドです
~~~curl~command
./vendor/bin/sail artisan migrate
~~~
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/45d74b98-bc51-4750-a734-8a694158bc69.png)
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/d327666b-f5ca-4e69-be8e-0bb8f86381b4.png)

6. 次のURLヘアクセスしLaravelのトップページが表示されることの確認
環境構築が完了していればLaravelのトップページが表示されます
<br>[URL：http://127.0.0.1/](http://127.0.0.1/)
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/2d3b0a00-3775-4705-be7a-83a8b839ef1b.png)

## まとめ：ローカル環境の立ち上げ方法と停止方法

### ローカル環境の起動方法
1. Docker Desktopを起動
2. VSCodeでプロジェクトフォルダを開く
3. VSCodeのターミナルを起動
4. `./vendor/bin/sail up`を実行

### ローカル環境の停止方法
1. Docker Desktopを起動
2. VSCodeでプロジェクトフォルダを開く
3. VSCodeのターミナルを起動
4. `./vendor/bin/sail down`を実行

## 
Laravelをローカル環境で実行することができるようになりました。
次はいよいよ簡単なアプリケーションを作ってみたいと思います。


Laravelプロジェクトの作成

それではLaravelを利用して簡単なアプリケーションを作成していきましょう。
今回は飲食店のメニューを表示するサイトを作成します。

## 飲食店メニューサイトの要件と完成イメージ
1. ユーザーがトップページにアクセスすると、`カテゴリ`が表示される。
2. ユーザーは表示されたカテゴリの中から一つを選択する。
3. ユーザーがカテゴリを選ぶと、その`カテゴリに関連したメニュー`が一覧として表示される。
### 完成イメージ：トップページ
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/47d6f6dd-f676-4499-8a6f-dc4917fbdd52.png)

### 完成イメージ：メニュー一覧ページ
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/33822346-efcd-489a-bd91-3583101c5664.png)

## Laravelの役割
Laravelを使うことで、アプリケーションの ルーティング（Route） と 表示（Blade） を簡単に管理できます。

### Route（ルーティング）
Laravelでは、Route を使ってユーザーのリクエストに応じたページを表示する処理を簡単に設定できます。Routeは、どのURLにアクセスされたときに、どの処理を行うかを決める役割を担います。
今回の場合、トップページにアクセスしたときや、カテゴリを選択したときに表示するページを、Route で設定します。

### Blade（ビュー）
LaravelのBladeテンプレートエンジンは、ページの内容を管理するためのツールです。Bladeを使うことで、データを動的にページに埋め込むことができます。これにより、カテゴリごとに異なるメニューの一覧を表示することができます。

## 実装の流れ
1. トップページ用静的Bladeテンプレートを作成
2. RouteへトップページのURLを設定
3. メニュー一覧ページ用静的Bladeテンプレートを作成
4. Routeへカテゴリごとのメニュー一覧画面のURLを設定
5. トップページとメニュー一覧ページを動的に変更

## 1. トップページ用静的Bladeテンプレートを作成
トップページを表示するために、Bladeテンプレートを作成します。

1. `resources/views`フォルダに`home.blade.php`を作成
2. `home.blade.php`内に以下の記述をコピー&ペースト
~~~html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Laravel食堂</title>
</head>

<body>
  
  <header>
    <h1>いらっしゃいませ！Laravel食堂です！</h1>
    <p>お好きなカテゴリを選んで、メニューをご覧ください。</p>
  </header>

  
  <main>
    <h2>カテゴリ一覧</h2>
    <ul>
      <li>ドリンクメニュー</li>
      <li>ランチメニュー</li>
      <li>グランドメニュー</li>
    </ul>
  </main>

  
  <footer>
    <p>&copy; 2025 飲食店メニュー</p>
  </footer>
</body>

</html>
~~~

## 2. RouteへトップページのURLを設定
トップページ（`home.blade.php`）にアクセスできるように、`routes/web.php`にルートを追加します。
1. `routes/web.php`を開きます。
2. トップページのルートを以下のように設定します。

変更前
`/`というURL(例：http://127.0.0.1/ )でリクエストが来た場合に`welcome.blade.php`を実行する
~~~php
Route::get('/', function () {
    return view('welcome');
});
~~~
変更後
`/`というURL(例：http://127.0.0.1/ )でリクエストが来た場合に`home.blade.php`を実行する
~~~php
Route::get('/', function () {
    return view('home'); // home.blade.phpを表示するように変更
});
~~~
3. トップページ(http://127.0.0.1/ )へアクセスし、トップページが表示されていることを確認
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/ca5c5989-ee8c-4118-abad-ee38ca5a70f9.png)

## 3. メニュー一覧ページ用静的Bladeテンプレートを作成
カテゴリを選択した後に表示するメニュー一覧ページを作成します。
1. `resources/views`フォルダ内に`menus.blade.php`を作成します。
2. `menus.blade.php`に、以下のコードを記載します。
<br>※メニューはモックデータ（仮のデータ）を表示しており、後で実際のデータに差し替えます。
~~~html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>グランドメニュー - Laravel食堂</title>
</head>

<body>
  
  <header>
    <h1>グランドメニュー</h1>
  </header>

  
  <main>
    <h2>グランドメニュー</h2>
    <ul>
      
      <li>メニュー1 - 価格: 500円</li>
      <li>メニュー2 - 価格: 700円</li>
      <li>メニュー3 - 価格: 900円</li>
    </ul>

    
    <a href="{{ url('/') }}">戻る</a>
  </main>

  
  <footer>
    <p>&copy; 2025 飲食店メニュー</p>
  </footer>
</body>

</html>
~~~

## 4. Routeへカテゴリごとのメニュー一覧画面のURLを設定
`menus.blade.php`を表示するためのルートを設定します。

1. `routes/web.php`に以下の記述を追記
<br>`/menus/`というURL(例：http://127.0.0.1/menus/  )でリクエストが来た場合に`menus.blade.php`を実行する処理
~~~php
// 新規追加：/menus/にアクセスしたときの処理
Route::get('/menus/', function () {
    return view('menus');
});
~~~
2. メニュー一覧画面へアクセスし、一覧が表示されることを確認
- http://127.0.0.1/menus/
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/50cd4f77-a039-4fa9-a765-e4299a5997ce.png)

## 5. トップページとメニュー一覧ページを動的に変更
トップページからメニュー一覧ページへの遷移とカテゴリごとにメニューを出し分ける処理を追加します。

### 5-1. トップページ（home.blade.php）へカテゴリごとにリンクの追加

1. `resources/views/home.blade.php`のカテゴリ一覧を更新
<br>※Laravelでは、`url()`というメソッドでURLを生成します。
<br>※ドリンクメニューを選択すると`/menus/ドリンク`というURLヘ遷移します
<br>※ランチメニューを選択すると`/menus/ランチ`というURLヘ遷移します
<br>※グランドメニューを選択すると`/menus/グランド`というURLヘ遷移します
~~~html
  
  <main>
    <h2>カテゴリ一覧</h2>
    <ul>
      
      <li><a href="{{ url('/menus/ドリンク') }}">ドリンクメニュー</a></li>
      <li><a href="{{ url('/menus/ランチ') }}">ランチメニュー</a></li>
      <li><a href="{{ url('/menus/グランド') }}">グランドメニュー</a></li>
    </ul>
  </main>
~~~

### 5-2. カテゴリをURLパラメータとして受け取る
5-1でカテゴリごとに異なるURLを設定しました。
例：`/menus/ドリンク`、`/menus/ランチ`、`/menus/グランド`
カテゴリをURLパラメータとして受け取り、menus.blade.phpへ渡すように変更します。

1. `routes/web.php`の`/menus/`のルート処理を変更
<br>※`/menus/{category}`という動的URLからカテゴリ名を取得し、それをテンプレートに渡してページを生成する仕組みを定義しています。
<br>※`/menus/ドリンク`というURLの場合、categoryとしてドリンクをmenus.blade.phpへ渡します。

更新前
~~~php
Route::get('/menus/', function () {
    return view('menus');
});
~~~
更新後
~~~php
Route::get('/menus/{category}', function ($category) {
    return view('menus', ['category' => $category]);
});
~~~

### 5-3. メニュー一覧ページ（menus.blade.php）でカテゴリに応じた内容を表示
menus.blade.phpでカテゴリごとに表示内容を動的に変更します。
1. `resources/views/menus.blade.php`のメニュー一覧部分を以下のように更新
~~~html
  
  <main>
    <h2>{{ $category }} メニュー</h2>
    <ul>
      
      @if ($category == 'ドリンク')
        <li>ドリンクメニュー1 - 価格: 300円</li>
        <li>ドリンクメニュー2 - 価格: 350円</li>
        <li>ドリンクメニュー3 - 価格: 400円</li>
      @elseif ($category == 'ランチ')
        <li>ランチメニュー1 - 価格: 800円</li>
        <li>ランチメニュー2 - 価格: 900円</li>
        <li>ランチメニュー3 - 価格: 1000円</li>
      @elseif ($category == 'グランド')
        <li>グランドメニュー1 - 価格: 1200円</li>
        <li>グランドメニュー2 - 価格: 1500円</li>
        <li>グランドメニュー3 - 価格: 1800円</li>
      @else
        <li>カテゴリが見つかりません</li>
      @endif
    </ul>

    
    <a href="{{ url('/') }}">戻る</a>
  </main>
~~~

### 5-4. 動作確認
次の確認を行いましょう。
1. http://127.0.0.1/ へアクセスし、トップページへ遷移できる
2. トップページから各カテゴリごとのメニュー一覧へ遷移できる

## [発展]メニューの情報を動的に変更
カテゴリの情報をRouteからテンプレートへ動的に渡したように、表示するメニューの情報も渡してみましょう。
1. `routes/web.php`の`/menus/{category}`の部分を以下の内容へ更新する
~~~php
Route::get('/menus/{category}', function ($category) {
    // 各カテゴリに対応するメニューのモックデータ
    $menus = [
        'ドリンク' => [
            ['name' => 'ドリンクメニュー1', 'price' => 300],
            ['name' => 'ドリンクメニュー2', 'price' => 350],
            ['name' => 'ドリンクメニュー3', 'price' => 400],
        ],
        'ランチ' => [
            ['name' => 'ランチメニュー1', 'price' => 800],
            ['name' => 'ランチメニュー2', 'price' => 900],
            ['name' => 'ランチメニュー3', 'price' => 1000],
        ],
        'グランド' => [
            ['name' => 'グランドメニュー1', 'price' => 1200],
            ['name' => 'グランドメニュー2', 'price' => 1500],
            ['name' => 'グランドメニュー3', 'price' => 1800],
        ],
    ];

    // カテゴリが存在しない場合は空の配列を返す
    $menuItems = $menus[$category] ?? [];

    return view('menus', ['category' => $category, 'menus' => $menuItems]);
});
~~~
2. `menus.blade.php`のメニュー一覧部分を以下の内容へ更新する
~~~php
  
  <main>
    <h2>{{ $category }} メニュー</h2>
    <ul>
      
      @forelse ($menus as $menu)
        <li>{{ $menu['name'] }} - 価格: {{ $menu['price'] }}円</li>
      @empty
        <li>メニューが見つかりません</li>
      @endforelse
    </ul>

    
    <a href="{{ url('/') }}">戻る</a>
  </main>
~~~
3. 動作確認
次の確認を行いましょう。
1. http://127.0.0.1/ へアクセスし、トップページへ遷移できる
2. トップページから各カテゴリごとのメニュー一覧へ遷移できる

## 最終ファイル一覧

<details>
<summary>routes/web.php</summary>

~~~php
<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('home'); // home.blade.phpを表示するように変更
});

Route::get('/menus/{category}', function ($category) {
    // 各カテゴリに対応するメニューのモックデータ
    $menus = [
        'ドリンク' => [
            ['name' => 'ドリンクメニュー1', 'price' => 300],
            ['name' => 'ドリンクメニュー2', 'price' => 350],
            ['name' => 'ドリンクメニュー3', 'price' => 400],
        ],
        'ランチ' => [
            ['name' => 'ランチメニュー1', 'price' => 800],
            ['name' => 'ランチメニュー2', 'price' => 900],
            ['name' => 'ランチメニュー3', 'price' => 1000],
        ],
        'グランド' => [
            ['name' => 'グランドメニュー1', 'price' => 1200],
            ['name' => 'グランドメニュー2', 'price' => 1500],
            ['name' => 'グランドメニュー3', 'price' => 1800],
        ],
    ];

    // カテゴリが存在しない場合は空の配列を返す
    $menuItems = $menus[$category] ?? [];

    return view('menus', ['category' => $category, 'menus' => $menuItems]);
});
~~~

</details>

<details>
<summary>resources/views/home.blade.php</summary>

~~~html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Laravel食堂</title>
</head>

<body>
  
  <header>
    <h1>いらっしゃいませ！Laravel食堂です！</h1>
    <p>お好きなカテゴリを選んで、メニューをご覧ください。</p>
  </header>

  
  <main>
    <h2>カテゴリ一覧</h2>
    <ul>
      
      <li><a href="{{ url('/menus/ドリンク') }}">ドリンクメニュー</a></li>
      <li><a href="{{ url('/menus/ランチ') }}">ランチメニュー</a></li>
      <li><a href="{{ url('/menus/グランド') }}">グランドメニュー</a></li>
    </ul>
  </main>

  
  <footer>
    <p>&copy; 2025 飲食店メニュー</p>
  </footer>
</body>

</html>
~~~

</details>

<details>
<summary>resources/views/menus.blade.php</summary>

~~~html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>グランドメニュー - Laravel食堂</title>
</head>

<body>
  
  <header>
    <h1>グランドメニュー</h1>
  </header>

  
  <main>
    <h2>{{ $category }} メニュー</h2>
    <ul>
      
      @forelse ($menus as $menu)
      <li>{{ $menu['name'] }} - 価格: {{ $menu['price'] }}円</li>
      @empty
      <li>メニューが見つかりません</li>
      @endforelse
    </ul>

    
    <a href="{{ url('/') }}">戻る</a>
  </main>

  
  <footer>
    <p>&copy; 2025 飲食店メニュー</p>
  </footer>
</body>

</html>
~~~

</details>

## まとめ
LaravelのRouteとBladeを利用することで、簡単にWebページを作成することができました。
Routeはリクエストの振り分け、Bladeはテンプレートエンジンとして効率的なビューの構築を可能にしました。
この2つの機能を活用するだけでも、基本的なWebページを素早く作成できました。

Laravelには、このほかにも多くの便利な機能が備わっています。

- データベース操作機能（Eloquent）: コードで直感的にデータを操作できるORM（オブジェクトリレーショナルマッパー）。
- マイグレーション機能: データベースの構造をコードで管理し、簡単に環境を再現可能。
- 認証機能（Laravel Breezeなど）: 安全に管理画面を構築できる便利なツール。

これらの機能を活用すれば、データベースと連携したWebページや、セキュリティを意識した管理システムを構築することができます。
Laravelを使いこなすことで、より高度で実用的なWebアプリケーションを作れるようになります。
今回学んだ内容を基盤に、次はデータベースや認証機能の実装に挑戦し、さらにステップアップしていきましょう！

4. 飲食店メニューサイトを作ろう