![見出し画像](https://assets.st-note.com/production/uploads/images/71517167/rectangle_large_type_2_d64d9c37ffc984180a3e2c5492566df4.png?width=800)
システム作りの新しい風に 実践編2「フォーム」
#9th #お問い合わせフォーム #システム作り #風 #プログラミング
「システム作りの新しい風に」という形で、そのままテストケースになるシナリオ表を作ってからシステム作りを始める手順をまとめています。実践編をnoteにもまとめておきます。
実装シナリオ表に従って、フォームを作ります。プログラムとしては、アクセスに対して、フォーム画面を表示するだけでいいはずです。
![](https://assets.st-note.com/img/1644043150805-nMJhZ1XR3j.png)
フォームのデザインや項目はそれぞれかと思いますが、フォームが表示されたら1つ目はokです。「o」しましょう。
![](https://assets.st-note.com/img/1644043176992-pUruviUyKn.png)
続いて、エラーを入力した場合、例えば、未入力の場合や、メールアドレスのフォーマットが合わないケースの対応をします。
確認画面に遷移するところで、エラーチェック行い、エラーなのでフォームに戻す、よいう処理か、そもそも、文字入力や送信するタイミングで、エラーチェックをして、通らなければ、確認の処理にまわさないようにするか、どちらかの実装することになるかと思います。
どちらでも、構いません。エラーになる入力をして、フォームにエラー内容が表示されれば、「o」です。
![](https://assets.st-note.com/img/1644043191293-DstFiQ2GTr.png)
このときに、考えられるエラーのパターンを網羅してみるといいと思います。
![](https://assets.st-note.com/img/1644043240419-cOHmCig4j7.png)
さらに、正常に入力した場合、エラーチェックを通過し、確認画面に遷移することを確認します。
ここでは、確認画面を表示するきっかけが確認できれば「o」です。ダミーの画面を作ってその画面が表示されればOKなど、判断はお任せします。
![](https://assets.st-note.com/img/1644043272780-4CDx20CkqC.png)
次は、確認画面を表示して、その後内容をメールで送信しましょう。
この記事が気に入ったらサポートをしてみませんか?