個人的に楽しかった実装 2022 あずにゃん 20221211_TECH WOMAN KANSAI_クリスマス勉強会 

今日お話しすること 今年1年で、 個人的に「できて良かったな〜」と思う実装について！ 

今日お話しすること 1. React Hook Formで動的フォーム 2. Express×React×PostgreSQL 3. まとめ 都合により、一部型指定 を省略してます！ 

1. React Hook Formで動的フォーム 2. Express×React×PostgreSQL 3. まとめ 

React Hook Form Reactで簡単にフォームを作成できるライブラリ。 入力した値の取得やバリデーションなどを行える。 

No content

< > < > < {... ( )} /> < > < /> < { ( )} /> form label label input div div form タスク： register handleSubmit submitForm 'title' '登録' BackToHomeButton SubmitButton onClick text = = 基本のフォーム〜JSX〜 入力値の登録 フォーム送信実行 

const => const const => div div = () { , , , = ();
 = ( : ): { (); }; ( ~略~ ); }; SampleForm register handleSubmit watch reset useForm submitForm reset { } // フォーム送信 // 後ほどデータベースへの追加処理を行う // フォームを空にする。 data any void return < > 基本のフォーム〜処理〜 

動的フォーム 

const => const const = () { , , , = ({ : : : }); , , = ({ , : }); ~略~ ( ~略~ ); }; SampleDynamicForm register handleSubmit reset useForm { } prepend append useFieldArray { } { '' } { } 'sample' control [ ] fields defaultValues sample title control name // 入力値を格納するオブジェクトのキー名となる return 動的フォーム〜処理〜 デフォルト値が入ったオブジェクトを要素とする配列 

< > < = < > < > < > < { ( )} /> < = form button => button => div label label div input $ div div button => button form {() ( )}>先頭に追加 . (( : , : ) ( タスクNo.{ }： ... )) {() ( )}>後ろに追加 ~略~ type onClick title: field index key field id index . index . type onClick title: "button" { ''} { { } `sample title` } "button" { ''} = = = prepend map register { } append fields any number . 動的フォーム〜JSX〜 配列を展開していく 

フォーム送信すると... sampleオブジェクト 配列！ フィールド単位 の中に、 ↓ で 配列の要素となっている！ 

完成したフォーム、実演してみる。 

1. React Hook Formで動的フォーム 3. まとめ 2. Express×React×PostgreSQL 

Express×React×PostgreSQL ・バックエンド →Express ・データベース →PostgreSQL ・フロントエンド →React pg-promiseという ライブラリを使うよ〜！ 

今回使うSQL文 ① 追加 INSERT INTO テーブル名(カラム名) VALUES(値) ② 取得(全件) SELECT * FROM テーブル名 ③ 削除 DELETE FROM テーブル名 WHERE カラム名 = 値 

PostgreSQLの実行〜接続〜 const const const = ( )(); = { . . , . . , . . , . . , . . }; = ( ); pgp connectionConfig DB_HOST DB_PORT DB_DATABASE DB_USER DB_PASSWORD, db connectionConfig require pgp 'pg-promise' // DB接続に必要な情報 // DB接続 host: processenv port: processenv database: processenv user: processenv password:processenv 

PostgreSQLの実行〜実行〜 // リクエストボディとして渡された値を取得 // 実行したいSQL文を事前に作成 // 実行 const const => = . . ; = ; . ( , ) . ( { . ( ); . ( ); }); title sql db sql [title] reqbodytitle data console data res data 'INSERT INTO tasks(title) VALUES($1)' manyOrNone then log send pg-promiseでは、返される結果の多さに応じて、メソッドを使いわけ！ 

PostgreSQLの実行〜例〜 const const => const const => = ( ); = (); ~略~ . ( , ( , ) { = . . ; = ; . ( , ) . ( { . ( ); . ( ); }); }); express app app title sql db sql [title] require express post manyOrNone then log send 'express' '/addTask' 'INSERT INTO tasks(title) VALUES($1)' req res reqbodytitle data console data res data 

フォーム送信とデータ追加~ReactでAPI実行~ const async => const const = ( : ): < > { : = { : . }; = . ( , ); . ( ); (); }; submitForm post log reset data title datatitle console any Promise void AddTaskParamType param response axiosClient param response // データベースに追加するAPI実行 // フォームを空にする。 await '/addTask' 

フォーム送信とデータ追加、実演してみる。 

1. React Hook Formで動的フォーム 2. Express×React×PostgreSQL 3. まとめ 

まとめ ・useFieldArrayを用いて、フィールドを増減させられる フォームを作成できた （感動したw） ・データベース操作やってるの、面白いな〜と思った ・個人でバックエンドを経験できたこと自体が感動 

まとめ ・他にも、Next.jsやmicroCMS、Svelte触ったりとか、 色々な技術に触れた1年間でした！ 

ご清聴ありがとうございました！！