今回も引き続きDockerとLaravelでバックエンドのアプリケーション開発についてまとめていきたいと思います。前回記事「Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃2：Laravelのインストール」では、ローカル環境にDockerを立ち上げてLaravelのアプリケーションをインストールするところまで進めていましたが、ここからは実際にアプリケーションを作成していきます。まずは最初に静的な画面を作成し、デフォルトで表示されるページを差し替えていきます。 （これまでの内容はこちらの記事から） Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃1：Docker環境構築 Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃2：Laravelのインストール    

1. トップページのViewファイル作成

Laravelではページのテンプレートに「Blade」と呼ばれるテンプレートエンジンが使われており、トップページ用のBladeファイルを作成していきます。ページテンプレートを作る際には、画面が増えても管理しやすくするよう、画面ごとにディレクトリを作成して、その中にページテンプレートのファイルを格納していきます。

$ mkdir resources/views/home
$ touch resources/views/home/index.blade.php

  上記コマンドでディレクトリとBladeファイルが用意されました。このBladeファイルは後ほど中身をコーディングしていきます。

resources
  ┣ ....
  ┗ views
    ┗ home
      ┗ index.blade.php

  ページテンプレートは「View」とも呼ばれ、バックエンドのフレームワークでよく用いられるMVCモデルのVに当たるものです。ページの表示やデータベースのクエリ結果を出力させたり、ユーザーからの入力を受け取るする処理を担います。    

2. トップページ用のControllerを作成

Viewのテンプレートファイルができたら、トップページ用のControllerを作成していきます。Controllerは先ほどのViewや後ほど登場するModelと呼ばれるものに対してそれぞれの処理を制御する役割があります。今回作成するトップページ用のControllerでは、単純に静的ページを表示させるだけの処理になるので、トップページ用のBladeファイルを表示させるだけの処理となります。Controllerは下記の「artisan make」コマンドで作成できます。

$ docker-compose exec app php laravel/artisan make:controller HomeController

  コマンドを実行すると所定のディレクトリへ自動的にControllerのファイルが生成されます。

app
  ┣ ....
  ┗ Http
    ┣ ....
    ┗ Controllers
      ┣ ....
      ┗ HomeController.php

  作成したControllerのファイルにトップページのViewを実行する処理を「view()」メソッドで作成します。この時「with()」メソッドを使うことで、Viewにデータを受け渡すことができます。下記ではページ用のclassやリクエストヘッダ、レスポンスヘッダなどを受け渡している例になります。これらの値はBladeのテンプレート側で変数から参照できるようになります。 【app/Http/Controllers/HomeController.php】

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Http\Response;

class HomeController extends Controller
{
  public function index(Request $request, Response $response) {
    $class_name = 'page-home';
    return view('home.index')->with([
      'body_class' => $class_name,
      'request' => $request,
      'response' => $response
    ]);
  }
}

  この時、Controller内で定義しているメソッドはルーティング設定の際に指定する形になりますので、適宜目的や用途に合ったわかりやすい名前にしておきます。    

3. Controllerの名前空間の設定

続けてControllerの名前空間の設定を行います。この作業は必須ではありませんが、次のルーティング設定の際にControllerで呼び出すメソッドの指定が簡潔にできますので、忘れずに済ませておくと良いですね。元々あるコードに下記3箇所を追加します。 【app/Providers/RouteServiceProvider.php】

<?php
......
class RouteServiceProvider extends ServiceProvider {
  protected $namespace = 'App\Http\Controllers'; // 追加
  public function boot()
  {
    $this->configureRateLimiting();
    $this->routes(function () {
      Route::middleware('api')
        ->prefix('api')
        ->namespace($this->namespace) // 追加
        ->group(base_path('routes/api.php'));
      Route::middleware('web')
        ->namespace($this->namespace) // 追加
        ->group(base_path('routes/web.php'));
    });
  }
}

   

4. トップページのルーティング設定

Controllerが作成できたら、ルーティングの設定を行なっていきます。ルーティングでは、アクセスしたURLに対して実行する処理を定義していきます。今回はルートディレクトリ、つまりトップページのURLにGETメソッドでアクセスした時に、Controllerで作成したトップページのページテンプレートを呼び出す処理を実行する形で進めていきます。下記のように「get()」メソッドに、第一引数にはパスを、第二引数に対象のControllerとメソッドを@で繋げて指定します。この時に「name()」メソッドを使うことで、ルーティングに名前をつけることができます。リンク設定などで便利ですので、あわせて対応しておきます。 【routes/web.php】

<?php

use Illuminate\Support\Facades\Route;

// home
Route::get('/', 'HomeController@index')->name('home');

  これで、トップページにアクセスすると、トップページ用のテンプレートが表示されるところまで出来ました。ただ、現状ではページテンプレートには何も無い状態ですので、ここからページテンプレートを作成していきます。    

5. Bladeファイルでページコンポーネントを作成

Bladeファイルを使ったページテンプレートの作成では、基本的に共通のコンポーネントごとにファイルを作成し、それらを呼び出すことで1つのページとして完成するようにしておきます。このようにすることでメンテナンス性を高めることができます。ここではページのコンポーネントとして、全体の大枠となる「layout.blade.php」、head要素をまとめた「head.blade.php」、ヘッダーとフッター部分の「header.blade.php、footer.blade.ph」という形で分けています。実際にはサイトデザインにあわせて適宜切り分けておきます。これらコンポーネントファイルはページテンプレートと区別できるよう「layouts」ディレクトリにまとめておきます。

resources
  ┣ ....
  ┗ views
    ┣ layouts
      ┣ layout.blade.php
      ┣ head.blade.php
      ┣ header.blade.php
      ┗ footer.blade.php
    ┗ home
      ┗ index.blade.php

  コンポーネントファイルはそれぞれ下記のように必要に応じて中身を作成していきます。Bladeファイルではディレクティブと呼ばれる独自の記法があるのでそれらを使うと便利です。詳しくは過去記事「LaravelのViewテンプレートBladeで使う基本のディレクティブまとめ」https://designsupply-web.com/media/programming/6954にまとめていますのであわせてご参照ください。フォームなどの通信を行う場合には「csrf_token()」を使うことでCSRF対策のトークンを発行してくれる機能がLaravelには用意されていますので、使うと便利ですね。また「asset()」メソッドを使うことでアプリケーションのpublicディレクトリを参照できるようになるので、静的リソースを読み込む際にはこれらを使っておきます。 【resources/views/layouts/layout.blade.php】

<!DOCTYPE html>
<html lang="ja" data-theme="light">
  <head>
    @include('layouts.head')
    @yield('meta')
    @yield('style')
    @yield('script_head')
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script>
      window.Laravel = @php
        echo json_encode(['csrfToken' => csrf_token(),]);
      @endphp
    </script>
  </head>
  <body class="{{ $body_class }}">
    @include('layouts.header')
    @yield('content')
    @include('layouts.footer')
    <script src="{{ asset('assets/scripts/main.min.js') }}"></script>
    @yield('script_body')
  </body>
</html>

  ページの大枠となるコンポーネントはこんな感じになりますが、その他共通パーツとなる部分も必要に応じて作成しておきます。

// head.blade.php
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="{{ asset('assets/stylesheets/main.min.css') }}">

// header.blade.php
<header></header>

// footer.blade.php
<footer></footer>

  コンポーネントファイルが揃ったら、ページテンプレートを作成していきます。先ほどの大枠となるコンポーネントを継承しますので、ここではページ独自のコンテンツ部分や各種設定だけを記述していきます。styleやscriptなどもページごとに切り分けるのも簡単にできますね。 【resources/views/home/index.blade.php】

@extends('layouts.layout')

@section('meta')
  <meta property="og:title" content="サンプルサイト">
  <meta property="og:description" content="サイトのトップページです">
  <meta property="og:url" content="{{ url()->current() }}">
  <meta property="og:type" content="website">
  <meta property="og:image" content="{{ asset('assets/img/icon/ogp_default.jpg') }}">
  <meta name="description" content="サイトのトップページです">
  <link rel="canonical" href="{{ url()->current() }}">
  <title>サンプルサイト</title>
@endsection

@section('style')
  <!-- ページ専用スタイル -->
@endsection

@section('script_head')
  <!-- ページ専用head内スクリプト -->
@endsection

@section('content')
  <main></main>
@endsection

@section('script_body')
  <!-- ページ専用body内スクリプト -->
@endsection

  上記ではトップページを例に作成しましたが、静的ページであれば他のページも同様に作成していく形になります。  

---

  今回はページテンプレートやコンポーネントを使ってページを作成し、ルーティングの設定まで行うことで静的ページを表示させるところまでをまとめてみました。ウェブアプリケーションの場合ですと、ここからログイン認証やデータベースへの読み書き、動的ページの生成などいろんな機能を実装していく形になります。ページの作成はその土台となります。また次回記事ではいろんな機能実装をするところもまとめていきたいと思います。   （こちらの記事も合わせてどうぞ） Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃1：Docker環境構築 Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃2：Laravelのインストール