[Golang/React]~MovieApp4: Form処理1(取得/保存/更新)を実装しよう!~

こんにちは、KOUKIです。

GolangとReactでMovie Appの開発をしています。

今回は、Movie Formの処理を実装します。

尚、Udemyの「Working with React and Go (Golang)」を参考にしているので、よかったら受講してみてください。

前回

Movieデータの保存や更新を行うMovie Formの実装を行いました。

Movieデータの表示処理

EditMovieコンポーネントは、Movieデータの編集時にMovie IDに紐づくデータをAPIから取得し、画面に表示します。

そのための処理を実装しましょう。この辺りの処理は、実務でも実装する機会が多いです。

ルートの修正

画面遷移時に、Movie IDを渡せるように修正します。

/admin/movie/:id」の「:id」にて、URLからIDを抜き出す準備をしました。これは、Propsから取得することが可能です。

New/Editデータ処理

idが0の場合は新規画面、それ以外の場合は編集画面になるように、APIへMovieデータを取得する処理と画面制御処理を実装します。

Props(props.match.params.id)からURLのIDを抜き出しました。IDが1以上か否かで、表示したFormが新規画面用なのか、編集用なのかを判定します。

検証

「docker-compose up」を叩いて、Dockerコンテナを起動します。

コンテナの起動を確認後、ブラウザから「http://localhost:3000/admin/movie/0」にアクセスして、新規画面を表示しましょう。

ブラウザから「http://localhost:3000/admin/movie/1」にアクセスして、編集画面を表示しましょう。

MPAA Ratingが初期値(Choose…)になってますね。

SelectタグのValue指定に誤りがあるので、修正しましょう。

Movieデータの送信処理

MovieデータをAPIへ送信する処理を実装します。

Submit処理(React)

「Save」ボタンを押下した時の処理を実装しましょう。

初めてFormDataオブジェクトを使用したのですが、Formのデータを簡単に収集することができました。しかし、useStateを使っているので後で消します。

リクエスト先のAPIはこれから実装します。

ルート(Golang)

ここからは、Golangの実装です。ルートを設定しましょう。

ハンドラー(Golang)

ハンドラーを設定します。

具体的な処理は後ほど実装しますが、response「OK」を返却する簡易なAPIを実装しました。

Formの「Save」ボタンを押下すると下記の結果が得られます。

リクエストデータの取り出し(Golang)

APIへリクエストが届いていることが確認できたので、リクエストデータを取り出してみましょう。

json.NewDecoderメソッドで、リクエストからMovieでデータを取り出します。

また、Yearは文字列を指定しました。

React側のMovieモデルのyearの型もこれに合わせます。

この変更に伴い、OneMovieコンポーネントのテストデータのyearも修正してください。

Formからリクエストを飛ばすとコンソール上でデータの確認ができます。

MovieデータのInsert処理(Golang)

MovieデータのInsert処理を実装しましょう。ちなみにDBはPostgreSQLをDocker上で動かしています。

この処理をハンドラーから呼び出します。

先ほどと同じパラメータで、FormからAPIへリクエストを送ってください。

その後、「http://localhost:9232/」にアクセスし、データが登録されたか確認しましょう

「id: 5」が今回追加したデータです。

管理画面からも確認できます。

「http://localhost:3000/movies/5」

バリデーション実装

フォームの入力値が想定のフォーマットや型であることをチェックするため、バリデーションを導入しましょう。

クライアント側では、Bootstrapを使うと楽です。

Inputコンポーネントの修正

BootStrap Validationのclassタグを渡せる様にコンポーネントを修正します。

呼び出し元も修正しましょう。

空文字チェック

Inputフォームに文字が入力されていない場合、バリデーションエラーとしましょう。

宣告通り、FormDataオブジェクトを消しました。useStateを使ってフォームの入力値を管理しているので不要でしたね。

検証

Inputフォームに文字を入力せずに「Save」ボタンを押下しましょう。

次回

次回も引き続き、Form処理を実装します。

記事まとめ

参考書籍

ソースコード

routes.go

movie-handlers.go

movies-db.go

App.tsx

EditMovie.tsx

OneMovie.tsx

Input.tsx

movie.ts

コメントを残す