【初心者向けLaravel講座】アプリケーションミドルウェアって何？？実装方法紹介

アプリケーションミドルウェアってなに？どうやって実装するの？

今回は、こういった悩みに答えるHowto記事です。

私は、大手SIerを1年で退職し、未経験からWebエンジニアに転身しました。

未経験ならではの視点で、業務で初めて知ったこと、
また知っておくべきことを皆さんに共有したいと思います。

今回は「ミドルウェア」について扱います。

第１回目の記事（アプリ開発の環境準備）
https://kumatetsublog.com/shoot/blog/laravel-vue-axios-docker

第２回目の記事（マイグレーション）
https://kumatetsublog.com/shoot/blog/laravel-migration

Github
https://github.com/Shuto-san/laravel-vue-docker

1 （アプリケーション）ミドルウェアとは？
2 下準備：ユーザー登録とページ新規作成
- 2.1 ユーザー登録
3 SNS一覧画面作成

（アプリケーション）ミドルウェアとは？
下準備：ユーザー登録とページ新規作成
1. ユーザー登録
SNS一覧画面作成

（アプリケーション）ミドルウェアとは？

ミドルウェアは、アプリケーションに送信されたリクエストに対して特定の処理を走らせることができる機能です。

Webアプリケーションを作成する上で必須の機能なので
Laravelでの実装を通じてミドルウェアの便利さを味わうべきです。

例えば、会員しかアクセスさせたくないWebサイトのページがあった場合、
ミドルウェアを設定することでリクエスト毎にログイン認証処理を走らせることができます。

実は、Laravelでのミドルウェアの実装方法はとっても簡単です。
（１行追加するだけ）

実装はほぼ１行なのですが、
ミドルウェアをエラーなく実行させるための準備を最初にしていきますね。

下準備：ユーザー登録とページ新規作成

ユーザー登録

デフォルトのユーザー登録機能を用いて、ユーザー登録します。

// 認証画面とルーティングを自動生成
php artisan make:auth

// ローカルサーバー起動
php artisan serve

http://127.0.0.1:8000/register

にアクセスすると入力フォーム画面が。

（デフォルトだとBootstrapの使用でもっと立派な画面が出てくるのですが、アプリの開発環境整える段階でBootstrapの設定外しているので質素な画面。。。お許しを）

詳しくは第１回に記載しています

フォームを入力してRegisterボタンを入力するとユーザー情報が保存されます。

以下のViewは自動生成されるものです。

resources/views/auth/register.blade.php

<form method="POST" action="{{ route('register') }}">
   @csrf
...省略...
   <input type="text" class="form-control @error('name') is-invalid@enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
...省略...
   <input type="email" class="form-control @error('email') is-invalid@enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
...省略...
   <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
...省略...
   <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
...省略...
   <button type="submit" class="btn btn-primary">
         {{ __('Register') }}
   </button>
</form>

フォームでPOSTリクエストを送る上で必要な部分を抜粋しました。

フォームタグ（<form>）でリクエストメソッド（GET, POSTなど）とルーティング（URL）を指定します。route()はルーティングの名前を渡すことでルーティングURLを返してくれるというLaravelの便利なメソッドです。

インプットタグ（<input>）はユーザーがサーバー側に送りたい情報を入力する場所で

ボタンタグ（<button type=”submit”>）がサーバー側への送信のスイッチです。

SNS一覧画面作成

今後SNS的な物を作っていくので、

せっかくなので入力フォーム（<input>）と送信ボタン（<button>）のみの簡単な画面を作成します。
※まだ送信できません

/resources/views/tweet/index.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <link rel="stylesheet" href="{{ mix('/css/tweet.css') }}">
    </head>
    <body>
      <div id="tweet">
        <header>
          <div class="contents">
            <section class="submit-form">
              <input v-model="tweet">
              <button>送信</button>
            </section>
          </div>
        </header>
        <main>
          <div class="contents">
          </div>
        </main>
        <footer>
        </footer>
      </div>
        <script src="{{ mix('js/tweet.js') }}"></script>
    </body>
</html>

tweet.css, tweet.jsを読み込んでいるので、
/resources/css, /resources/js以下にそれぞれファイルを作成。

最後にwebpackに書き込み、

/webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/tweet.js', 'public/js') // 追加
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/tweet.scss', 'public/css'); // 追加

ビルドしてpublic以下にcss,jsファイルを生成します。（忘れがち）

npm run dev

public/js, public/css以下に作成されたことを確認できたらOK

ルーティング追加

表示する画面を作成したのでルーティングを設定します。

routes/web.php

Route::get('/tweet/index', 'TweetController@index');

/tweet/indexにリクエストがあった場合、TweetControllerのindexメソッドを実行します。

コントローラ作成

前回自動生成したControllerのindexメソッドの中身を実装

先ほど作成した画面を返します。

app/Https/Controllers/TweetController.php

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('tweet.index');
    }

laravelがresouces/views以下を検索し、tweetディレクトリ下にある
index.blade.phpを見つけ、レスポンスします。

ミドルウェア追加

ついにミドルウェアです！！

同コントローラ内にミドルウェアを追加します。

ミドルウェアを設定することで、
コントローラーの処理が実行される前にミドルウェアに記述した処理を実行することができます。

今回はデフォルトで用意されているauthミドルウェアを使用します。（処理内容は、\App\Http\Middleware\Authenticate::classに記載）
※app/Https/Kernel.phpに定義

以下のように実装することで、
TweetControllerの処理が走る度にログインチェックすることができます。

    public function __construct()
    {
        $this->middleware('auth');
    }

ほぼ１行！簡単やなー

注意するところはコンストラクター内に記述ということ。
コンストラクターはクラスのインスタンスが生成時に実行されるメソッドです。

phpの場合は、メソッド名を__construct…みたいに記載するとコンストラクターとして働きます。

http://127.0.0.1:8000/tweet/login
にアクセスしてみましょう。

もしユーザー登録済み、ログイン済みの場合、以下のような画面が表示されます。