もうひとつのルーティングとAPIエンドポイント

株式会社WOWNエンジニアチームです。

前回、Laravelの「ルーティング」というお話をしました。
WebサイトのURLにアクセスされた際、どんなURLにアクセスされると、どのプログラムによって画面を作るのかを決定するものです。
実はルーティングにはもう１要素あって、「API」と呼ばれるものの設定をすることができます。APIの話に触れ始めると、いよいよWebシステムらしい話になってきます。

今回はAPIのルーティングの話と、それに伴った簡単なプログラムの流れの話をします。

イントロダクション：Webページ

早速ですが、Reactで簡単なWebページのファイルを作成します。
ただ「クリック」とだけ書かれたボタンがぽつんと表示されるだけの簡単なReactページ（もしくはコンポーネント）です。

export default function CountButton() {
    return (
        <button>
            クリック
        </button>
    );
}

このボタンにひと工夫を加えて、「これまでにボタンが押された回数」をデータベース上で記録できるようにしましょう。
この場合どうすれば良いのでしょうか？

Webページがサーバーと繋がるには

以前少しだけ話をした「MVCモデル」の話を覚えていますか？

皆さんが見ているWebページ(ビュー)のファイルは、単独ではサーバーにアクセスする（サーバーの情報を見る）ことができません。ですからこのボタンサーバーと情報のやり取りをしたいなら、別の役割のプログラム（コントローラ）にお願いをする必要があります。

どうやってWebページからコントローラに、ファイルからファイルにアクセスするのか？これが「ルーティング」設定の内容です。ただし、前回はWebページにアクセスするURLのルーティングでしたが、今回は「API」を設定するためのルーティングを行います。

Laravelのroutesフォルダの中にあるapi.phpに、例えば以下のような内容を書きます。

Route::post('/api/system/click/increment', [MetaController::class, 'incrementClickCount']);

前回のWebページへのルーティングと書く内容が似ていますね。これは
「’/api/system/click/increment’というAPIにアクセス(post送信)されたら、MetaControllerというコントローラファイルの中にあるincrementClickCountというプログラムを起動するよ」という内容になります。

これは、例えるならプログラム（アプリケーション）用の電話番号のようなものです。「どの番号に電話をかければ」「どのプログラムまで電話が繋がるのか」を設定しています。

対して前回設定したWebページのルーティングは、例えるなら住所の設定です。ですからWebページ用のURLをブラウザの検索ボックスに書けばそれに応じたページが表示されますが、ここにAPIのURLを書いてもどこにもアクセスされません。
どちらも似たような書き方をしますが、それぞれ異なる役割を持つ別の機能なのです。

このようにして設定されたAPI（ルーティングの’/api/system/click/increment‘の部分）を「エンドポイント（APIエンドポイント）」と呼んだりもします。

ルーティングができれば

エンドポイントの設定ができたら、あとはReactファイルにこのAPIへアクセスさせてみましょう。

export default function CountButton() {
    return (
        <button onClick={() => post('/api/system/count/increment')}>
            クリック
        </button>
    );
}

「onClick」という記述が増え、
「ボタンをクリックした時、’/api/system/count/increment’という電話番号（エンドポイント）に問い合わせをかける」というイベントを追加しました。

このAPIで呼ぶコントローラの関数は、例えば以下のようなものでしょうか。

class MetaController extends Controller
{
    public function incrementClickCount(Request $request) {
        $countData = SiteMeta::where('key', 'click_count')->firstOrFail()
        $countData->value += 1;
        $countData->save();

        return response()->json(['status' => 'success'], 200);
    }
}

「電話がかかってきたら（エンドポイントにアクセスされたら）、データベース上にある”クリック回数”の記録に１を足して上書き保存」というだけのプログラムです。
（コントローラの内容は今回の話では重要ではないので、「なんとなくこんな内容を書くんだな」ぐらいで見ておいてください）

これで準備が整いました。

1. ページにあるボタンを押すと、’/api/system/count/increment’というAPIにアクセスする
2. ルート情報から、エンドポイントに応じたコントローラの関数が呼び出される
3. コントローラの中で、データベース上の記録が操作される

という一連の手順で、Webページからサーバーの内容を操作することができるようになっています。

非常に簡単な内容でしたが、
「Webページ上でのユーザーの操作に応じて、エンドポイントにアクセスし、サーバーに問い合わせをかける。」
Webシステムの基本はどれもこのような処理です。

次回は、これらの操作を実際にどのように実装するか、具体的なステップを詳しく解説します。お楽しみに！