はじめに

私が鋭意、個人開発中である 「ITなんでも調査屋（仮）」 というWebサイトについて、実装順がバラバラでまとまらないのですがログは残したく「個人開発ログ」としてナンバリングで残すことにしました。
私の考え方で、やりたいこと → どう実装したか　と言う感じでまとめます。
https://everyit.net/ （調査依頼だけできるようになっています！）

この記事でわかること

UIを考えるにあたって「やりたいこと」と「実装したこと」をそれぞれ記していきます。

動作環境・使用するツールや言語

VSCode
React ＋ Typescript
AWS Amplify Github 連携でのホスティング
AWS AppSync - DynamoDB

実施内容

「依頼ボード」画面を作りたい

やりたいこと

依頼ボードを見ることで、「こう言うふうに調べてもらえるんだ」「こんな依頼でもいいんだ」とわかります。このページを見た人が依頼をしやすくなります。

実装したこと

ページを実装しました。イメージはこちらです。「ボード」と名のつく通り、コルクボードにピン留めした紙をイメージしています。こちらはまだデザインを整えるつもりです。

こちらはAmplifyにて、DynamoDBに登録されたレコードから、「公開可能な依頼」に設定されたものを取得して表示をしています。登録する場所は後に登場します。
細かい話をすると、依頼ごと（DBのレコードごと）にReactコンポーネントで画面表示しており、コンポーネント指向のいいところを体験できた気がします。

「依頼書」画面を作りたい

やりたいこと

実際に依頼を行うページです。依頼は「公開」「非公開」があり、公開依頼はすぐに依頼ボードに反映されます。非公開の場合はメールでやりとりさせていただき、調査等を進めます。
また、面倒なので依頼以外もこちらで送信可能なようにしました。

実装したこと

ページを実装しました。イメージはこちらです。

チェックボックスで「公開」「非公開」「その他」を選択すると、それぞれのパターンで必須項目が異なります。匿名でも投稿可能にし、依頼をすることへのハードルを下げます。
また、チェックボックスによりちょっと分かりやすくメッセージを変更するように設定しました。（赤文字部分）
内部処理としては、DynamoDBへのデータの登録を行なっています。

次回予告？

TOP画面のデザインの調整
依頼時の管理者通知機能
認証機能（ログインし、調査結果を記入する機能）
依頼ボードの絞り込み機能