今のところ、Log出力までは出来るようになりました。

バリデーションしないとですが、、備忘録！！

名前のとこは、、なんか怖いので実装した名前と変えてます。

バックエンド

１．.envファイルの設定

デフォルトで設定されてたのですが、今回はLogに出力します。

MAIL_MAILER=log

２．メールクラスとビューを作成

ArtisanコマンドでメールクラスSendMail(任意の命名)とビューsend.blade.php(任意の命名)を作成

php artisan make:mail SendMail --view=emails.send

SendMailクラスとsend.blade.phpビューの実装。。。省略！

バックエンドにビューなんか必要なのかと思ったんですが、結果見ると、、メール送信のbodyに使われるようですね。。。

３．APIコントローラーの作成

APIコントローラーMailController(任意の命名)の作成

php artisan make:controller Api/MailController

MailControllerクラスの実装。省略！！

４．ルーティングの記述

routes/api.phpを作成する。

php artisan install:api

routes/api.phpに以下を追記。

Route::post('/send', [MailController::class, 'send']);

フロントエンド

１．fetchでAPIへ送信

今回は簡易に機能の確認だけ行いたかったので一旦、App.tsxに直書きしてます。

後でルーティングとかセッティングするのでこのままでは使いませんが。。。

アクションに使うコードの例。

 const [status, setStatus] = useState('');

  const submitAction = async ( e: React.SubmitEvent<HTMLFormElement> ) => {

    e.preventDefault();

    const formData = new FormData( e.currentTarget );
    const data = Object.fromEntries( formData.entries() );

    fetch('/api/send', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
    })
    .then( response => response.json() )
    .then( data => {
      setStatus( data.message );
    })
    .catch(( error ) => {
      setStatus( '送信に失敗しました。' );
    });
  };

結果は、バックエンドのstrage/logs/laravel.logに出ます。

次は、、DBに任意のデータを登録できるか試してみよう！！