1
/
5
Wantedly
About 株式会社スタジオ・アルカナ
株式会社スタジオ・アルカナ
https://www.s-arcana.co.jp

東京都

さようならAPI! InertiaでLaravelのformを書こうの巻

今山 豪貴さんのプロフィール
今山 豪貴
エンジニア
on 2024/12/12

こちらは スタジオ・アルカナ Advent Calendar 2024 の12日めの記事になります！

はじめに

前回の記事では Inertia を使ってBladeを書こう！というお話をしました。


そこで Formを利用したデータのやり取り について書くと予告して終わりました。

LaravelでInertiaを使わずともじつはReactやVueJSを使うことはできます。できるのですが、Inertiaを使うと色々楽できるということなのです。
そのうちの一つがフォームを使ったデータのやり取りになります。

今回は例として「食べたおやつのカロリーをただ足し合わせて算出する」サービスを作ったとします。
セレクトボックスから選べるおやつは「閉鎖したアルカナ朝霞オフィス（旧アンテクオフィス）周辺で夕方によく買ってたおやつ」です。
新宿になってからはおやつはオフィス内でも買えるようになったので外にあまり買いに行かなくなりました。。。
外に買いに行っても良いんですけど、なまじ新宿になってからその気になれば何でも買えるってなると逆に絞れなくなりますよね。

今回使う例はGitHubに置いてあるので、参考にしてください。
https://github.com/sa-gimayama/example2024

Inertiaじゃない場合（普通のblade）

Inertiaじゃない場合、普通にフォームリクエストになります。 <form> タグ使うあれですね。
普通のHTMLなら普通にフォームからpostすればいいのでこれが当然一番簡単になりますよね。

example.ateOyatsu.blade.php

<head>

</head>
<body>
<h1>おやつを食べる</h1>
<form action="{{route('example.ateOyatsu.blade.update')}}" method="post">
    @csrf
    <select name="oyatsu_id">
        @foreach($oyatsus as $oyatsu)
            <option value="{{ $oyatsu->id }}">{{ $oyatsu->name }}({{ $oyatsu->calory }}kcal)</option>
        @endforeach
    </select>
    <input type="date" name="ate_at">
    <button type="submit">送信</button>
</form>
<hr>
<h2>食べたおやつ</h2>
<table>
    <tr>
        <th>名前</th>
        <th>カロリー</th>
        <th>食べた日</th>
    </tr>
    @foreach($ateOyatsus as $ateOyatsu)
        <tr>
            <td>{{ $ateOyatsu->oyatsu->name }}</td>
            <td>{{ $ateOyatsu->oyatsu->calory }}</td>
            <td>{{ $ateOyatsu->ate_at }}</td>
        </tr>
    @endforeach
</table>
<h2>総カロリー</h2>
<p>{{ $totalCalory }}</p>
</body>
<head>

</head>
<body>
<h1>おやつを食べる</h1>
<form action="{{route('example.ateOyatsu.blade.update')}}" method="post">
    @csrf
    <select name="oyatsu_id">
        @foreach($oyatsus as $oyatsu)
            <option value="{{ $oyatsu->id }}">{{ $oyatsu->name }}({{ $oyatsu->calory }}kcal)</option>
        @endforeach
    </select>
    <input type="date" name="ate_at">
    <button type="submit">送信</button>
</form>
<hr>
<h2>食べたおやつ</h2>
<table>
    <tr>
        <th>名前</th>
        <th>カロリー</th>
        <th>食べた日</th>
    </tr>
    @foreach($ateOyatsus as $ateOyatsu)
        <tr>
            <td>{{ $ateOyatsu->oyatsu->name }}</td>
            <td>{{ $ateOyatsu->oyatsu->calory }}</td>
            <td>{{ $ateOyatsu->ate_at }}</td>
        </tr>
    @endforeach
</table>
<h2>総カロリー</h2>
<p>{{ $totalCalory }}</p>
</body>

で、普通に同期通信してるので、「送信」ボタンを押すと画面がチラッてするんですよね。
ダメじゃないんですけど、古めかしいと言うか、イマイチな感じがして「んー」ってなりますよね。

Inertiaじゃない場合（ajax使う場合）

そうなるとやっぱ非同期通信ですよね。
非同期通信といえば俺達のjQueryの出番です。。。って言おうと思ったんですがめんどくさいのでAlpineJS&axiosにしました。
しかしAlpineJS使ったとて思ったより大変になってしまいました。
（だいぶ忘れてたのもありますが）
おやつだからではないですが、だいぶハイカロリーでした。

example.ateOyatsuAjax.blade.php

@routes

<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div x-data="Oyatsu()">
    <h1>おやつを食べる</h1>
    <form>
        <select name="oyatsu_id" x-model="selectedOyatsu">
            <option value="">選択してください</option>
            <template x-for="oyatsu in oyatsus">
                <option :value="oyatsu.id" x-text="`${oyatsu.name} (${oyatsu.calory}kcal)`"></option>
            </template>
        </select>
        <input type="date" name="ate_at" x-model="ateAt">
        <button type="button" @click="submitOyatsu">送信</button>
    </form>
    <hr>
    <h2>食べたおやつ</h2>
    <table>
        <tr>
            <th>名前</th>
            <th>カロリー</th>
            <th>食べた日</th>
        </tr>
        <template x-for="ateOyatsu in ateOyatsus">
            <tr>
                <td x-text="ateOyatsu.oyatsu.name"></td>
                <td x-text="ateOyatsu.oyatsu.calory"></td>
                <td x-text="ateOyatsu.ate_at"></td>
            </tr>
        </template>
    </table>
    <h2>総カロリー</h2>
    <p x-text="totalCalory"></p>
</div>
<script defer>
    function Oyatsu() {
        return {
            oyatsus: @json($oyatsus),
            ateOyatsus: @json($ateOyatsus),
            selectedOyatsu: null,
            ateAt: null,
            totalCalory() {
                return this.ateOyatsus.reduce((acc, ateOyatsu) => acc + ateOyatsu.oyatsu.calory, 0);
            },
            submitOyatsu() {
                axios.post(route('example.ateOyatsu.bladeAjax.update'), {
                    oyatsu_id: this.selectedOyatsu,
                    ate_at: this.ateAt
                }).then(response => {
                    if (response.data.status === 'success') {
                        this.ateOyatsus.push(response.data.ateOyatsu);
                    }
                });
            }
        }
    }
</script>
</body>
@routes

<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div x-data="Oyatsu()">
    <h1>おやつを食べる</h1>
    <form>
        <select name="oyatsu_id" x-model="selectedOyatsu">
            <option value="">選択してください</option>
            <template x-for="oyatsu in oyatsus">
                <option :value="oyatsu.id" x-text="`${oyatsu.name} (${oyatsu.calory}kcal)`"></option>
            </template>
        </select>
        <input type="date" name="ate_at" x-model="ateAt">
        <button type="button" @click="submitOyatsu">送信</button>
    </form>
    <hr>
    <h2>食べたおやつ</h2>
    <table>
        <tr>
            <th>名前</th>
            <th>カロリー</th>
            <th>食べた日</th>
        </tr>
        <template x-for="ateOyatsu in ateOyatsus">
            <tr>
                <td x-text="ateOyatsu.oyatsu.name"></td>
                <td x-text="ateOyatsu.oyatsu.calory"></td>
                <td x-text="ateOyatsu.ate_at"></td>
            </tr>
        </template>
    </table>
    <h2>総カロリー</h2>
    <p x-text="totalCalory"></p>
</div>
<script defer>
    function Oyatsu() {
        return {
            oyatsus: @json($oyatsus),
            ateOyatsus: @json($ateOyatsus),
            selectedOyatsu: null,
            ateAt: null,
            totalCalory() {
                return this.ateOyatsus.reduce((acc, ateOyatsu) => acc + ateOyatsu.oyatsu.calory, 0);
            },
            submitOyatsu() {
                axios.post(route('example.ateOyatsu.bladeAjax.update'), {
                    oyatsu_id: this.selectedOyatsu,
                    ate_at: this.ateAt
                }).then(response => {
                    if (response.data.status === 'success') {
                        this.ateOyatsus.push(response.data.ateOyatsu);
                    }
                });
            }
        }
    }
</script>
</body>

で、注目はここですよね。

                axios.post(route('example.ateOyatsu.bladeAjax.update'), {
                    oyatsu_id: this.selectedOyatsu,
                    ate_at: this.ateAt
                }).then(response => {
                    if (response.data.status === 'success') {
                        this.ateOyatsus.push(response.data.ateOyatsu);
                    }
                });
                axios.post(route('example.ateOyatsu.bladeAjax.update'), {
                    oyatsu_id: this.selectedOyatsu,
                    ate_at: this.ateAt
                }).then(response => {
                    if (response.data.status === 'success') {
                        this.ateOyatsus.push(response.data.ateOyatsu);
                    }
                });

ここがまさにAPIを呼んでいるところであり、めんどくさいポイントになります。
パッと見、コード量的には大した事なさそうに見えますが、リクエストの形どうするのか、成功したら何返すのか、バリデーションエラー出たらどうするのかと考えることはとても多いのです。

Inertia(React)の場合

ざっとこんな感じになります。
ちゃんとスタイリングしないと見た目が変わっちゃうのですが、機能的には同じなので良しとしましょう。

Pages/Example/ateOyatsu.tsx

import {useForm} from "@inertiajs/react";

type Oyatsu = {
  id: number;
  name: string;
  calory: number;
};

type AteOyatsu = {
  id: number;
  oyatsu_id: number;
  ate_at: string;
  oyatsu: Oyatsu;
};

type Props = {
  oyatsus: Oyatsu[];
  ateOyatsus: AteOyatsu[];
}

export default function AteOyatsu({oyatsus, ateOyatsus}: Props) {
  const {data, setData, post, progress, processing} = useForm({
    oyatsu_id: '',
    ate_at: '',
  });

  const totalCalory = ateOyatsus.reduce((acc, ateOyatsu) => acc + ateOyatsu.oyatsu.calory, 0);

  const submitOyatsu = () => {
    if (!processing) {
      post(route('example.ateOyatsu.inertia.update'));
    }
  };

  return (
      <div>
        <h1>おやつを食べる</h1>
        <form>
          <select name="oyatsu_id" onChange={(e) => setData('oyatsu_id', e.target.value)}>
            <option value="">選択してください</option>
            {oyatsus.map((oyatsu, index) => (
                <option value={oyatsu.id} key={`option${index}`}>{oyatsu.name} ({oyatsu.calory}kcal)</option>
            ))}
          </select>
          <input type="date" name="ate_at" onChange={(e) => setData('ate_at', e.target.value)}/>
          <button type="button" onClick={submitOyatsu}>送信</button>
        </form>
        <hr/>
        <h2>食べたおやつ</h2>
        <table>
          <thead>
            <tr>
              <th>名前</th>
              <th>カロリー</th>
              <th>食べた日</th>
            </tr>
          </thead>
          <tbody>
            {ateOyatsus.map((ateOyatsu, index) => (
                <tr key={`oyatsuRaw${index}`}>
                  <td>{ateOyatsu.oyatsu.name}</td>
                  <td>{ateOyatsu.oyatsu.calory}</td>
                  <td>{ateOyatsu.ate_at}</td>
                </tr>
            ))}
          </tbody>
        </table>
        <h2>総カロリー</h2>
        <p>{totalCalory}</p>
      </div>
  )
}
import {useForm} from "@inertiajs/react";

type Oyatsu = {
  id: number;
  name: string;
  calory: number;
};

type AteOyatsu = {
  id: number;
  oyatsu_id: number;
  ate_at: string;
  oyatsu: Oyatsu;
};

type Props = {
  oyatsus: Oyatsu[];
  ateOyatsus: AteOyatsu[];
}

export default function AteOyatsu({oyatsus, ateOyatsus}: Props) {
  const {data, setData, post, progress, processing} = useForm({
    oyatsu_id: '',
    ate_at: '',
  });

  const totalCalory = ateOyatsus.reduce((acc, ateOyatsu) => acc + ateOyatsu.oyatsu.calory, 0);

  const submitOyatsu = () => {
    if (!processing) {
      post(route('example.ateOyatsu.inertia.update'));
    }
  };

  return (
      <div>
        <h1>おやつを食べる</h1>
        <form>
          <select name="oyatsu_id" onChange={(e) => setData('oyatsu_id', e.target.value)}>
            <option value="">選択してください</option>
            {oyatsus.map((oyatsu, index) => (
                <option value={oyatsu.id} key={`option${index}`}>{oyatsu.name} ({oyatsu.calory}kcal)</option>
            ))}
          </select>
          <input type="date" name="ate_at" onChange={(e) => setData('ate_at', e.target.value)}/>
          <button type="button" onClick={submitOyatsu}>送信</button>
        </form>
        <hr/>
        <h2>食べたおやつ</h2>
        <table>
          <thead>
            <tr>
              <th>名前</th>
              <th>カロリー</th>
              <th>食べた日</th>
            </tr>
          </thead>
          <tbody>
            {ateOyatsus.map((ateOyatsu, index) => (
                <tr key={`oyatsuRaw${index}`}>
                  <td>{ateOyatsu.oyatsu.name}</td>
                  <td>{ateOyatsu.oyatsu.calory}</td>
                  <td>{ateOyatsu.ate_at}</td>
                </tr>
            ))}
          </tbody>
        </table>
        <h2>総カロリー</h2>
        <p>{totalCalory}</p>
      </div>
  )
}

ポイントとしてはここですね。

  const {data, setData, post, processing} = useForm({
    oyatsu_id: '',
    ate_at: '',
  });

// 略

  const submitOyatsu = () => {
    if (!processing) {
      post(route('example.ateOyatsu.inertia.update'));
    }
  };
  const {data, setData, post, processing} = useForm({
    oyatsu_id: '',
    ate_at: '',
  });

// 略

  const submitOyatsu = () => {
    if (!processing) {
      post(route('example.ateOyatsu.inertia.update'));
    }
  };

普通のReactでやるときはフォーム側で設定した値を useState とかで状態管理する必要があるのですが、Inertia用Reactでは useForm という専用のフックがあって、それを使って諸々の事ができるようになっています。

useForm すると以下の変数と関数が取れます。
他にも色々取れるのですけど、今回使う分だけ紹介します。

なので、最初に useForm で必要な変数関数を貰って、
setData でデータをセットして、 post するだけでサーバーにデータを送ることができます。

Ajaxでは Axios.post で送信したところの続きに then でコールバック処理を書いてましたが、そんな質めんどくさいことも不要です。
受け側のControllerの戻りを redirect() にして、戻り先をもとのページにするだけで画面遷移することなく画面をリフレッシュできます。

なので、APIとかいちいち用意しなくても非同期通信ができて、いい感じにできるという話でした！

このストーリーが気になったら、遊びに来てみませんか？
一緒に新宿で働くエンジニアさん大募集中！
株式会社スタジオ・アルカナでは一緒に働く仲間を募集しています
Laravel エンジニア アドベントカレンダー
2 いいね！
2 いいね！
株式会社スタジオ・アルカナの会社情報

株式会社スタジオ・アルカナ

株式会社スタジオ・アルカナは、 ビジネスの課題をITの技術で解決することを得意とする、ウェブ制作会社です。 システム開発 / ウェブサイト制作を通して、世の中の「あったらうれしい」を形にし、 みんなの胸を高鳴らせたい。 そんなふうに考えています。 そんなわたしたちは、下記の３つの事業に取り組んでいます。 １.　グループ企業が運営するサービス ２.　自社サービス ３.　受託開発プロジェクト ーーーーーーーーーーーーーーーーーーーー １.　グループ企業が運営するサービス ーーーーーーーーーーーーーーーーーーーー わたしたちが所属している「ナシエルホールディングス（ https://naciel-holdings.co.jp/ ）」は、 アルカナを含め４つの会社が集まっています。 飲食店企業の成長を360度から支援して、胸が高鳴る世の中をつくる 「株式会社ナシエルホールディングス（https://naciel-holdings.co.jp/）」。 M&Aや不動産仲介、人材を扱う 「株式会社 M&A Properties （ https://www.maproperties.co.jp/ ）」。 データを活用して不動産ポータルサイトを運営する 「ホクトシステム株式会社 （ https://www.hoct.co.jp/ ）」 そして、デジタル技術で「あったらうれしい」を形にする、 わたしたち株式会社スタジオ・アルカナです。 グループの中でのスタジオ・アルカナは、 それぞれの会社が運営するサービスの制作をしたり、ビジネスツールを作成したり、 IT技術を用いた課題の解決を提案したりすることで、 グループの成長に貢献しています。 アルカナ以外の事業部のみんなとも、喜びを分かち合えたり、改善点を模索しあえたりと、 協力しながら進めていきます。 自分たちの技術が、実際のビジネスの場でどのように生かされていくのかを 間近で感じることができるのが、グループ内案件の面白いところです。 ぜひ一緒にワクワクしましょう。 ーーーーーーーーーーーーーーーーーーーー ２.　自社プロダクト ーーーーーーーーーーーーーーーーーーーー アルカナでは、「Linty（ https://linty.jp/ ）」というプロダクトを立ち上げ、 少しずつですが利用企業を増やしています。 世の中の「あったらうれしい」を形にするために、新しい自社サービスの開発にも意欲的です！ 企画をたてるプランナー、コンテンツを作るライター、 アジャイル思考でプロジェクトを進めていけるプロジェクトマネージャー、 新しい技術の研鑽を続けるエンジニア、ビジネス要件を形にしようとするデザイナー、 出来上がった製品を、世に広めていくアカウント・・・・と。 アルカナには、自社プロダクトを考え、作り上げ、打っていくメンバーが揃っています。 このメンバーで、これから自社プロダクトをもっと作っていきたいと考えています。 わたしたちと一緒に、プロダクトを作り上げませんか？ ーーーーーーーーーーーーーーーーーーーー ３.　受託開発プロジェクト ーーーーーーーーーーーーーーーーーーーー アルカナでは、グループ外のクライアントさまのビジネス課題の解決も担っています。 ご要件のキャッチアップ、定義からさせていただき、 システム開発 / デザイン制作といった実装をし、 納品後も、運用対応や、よりビジネスを加速させるためのご提案を行なったりと、 クライアントさまの「やりたいこと」に寄り添った対応を行います。 フロント部分だけでなく、インフラ構築やバックエンド、 また、ふわっとしたご要件を具体的なかたちにしていくところも、 ワンストップで手掛けられるのがアルカナの強みだと考えます。 グループ会社との案件で得られた経験がもとになって、 経営課題・事業課題にフィットしたご提案ができるのも、アルカナの持ち味かもしれません。 自社プロダクトに取り組んでいるというのもあり、 これまでの経験を踏まえ、リアルなイニシアルコストを例にしたり、 プロダクト公開後の失敗例などもお伝えしながら、 クライアントさまの「やりたいこと」「作りたいもの」を形にしていきます。 クライアントさまのビジネスを、一緒に加速させましょう！

もっと見る

同じタグの記事

#エンジニア
もっと見る

今週のランキング

ランキングをみる
今山 豪貴さんにいいねを伝えよう
今山 豪貴さんや会社があなたに興味を持つかも