個人的に楽しかった実装2022

Transcript

1. 個人的に楽しかった実装 2022 あずにゃん 20221211_TECH WOMAN KANSAI_クリスマス勉強会
2. 今日お話しすること 今年1年で、 個人的に「できて良かったな〜」と思う実装について！
3. 今日お話しすること 1. React Hook Formで動的フォーム 2. Express×React×PostgreSQL 3. まとめ 都合により、一部型指定 を省略してます！
4. 1. React Hook Formで動的フォーム 2. Express×React×PostgreSQL 3. まとめ
5. React Hook Form Reactで簡単にフォームを作成できるライブラリ。 入力した値の取得やバリデーションなどを行える。
7. < > < > </ > < {... ( )} /> < > < /> < { ( )} /> </ > </ > form label label input div div form タスク： register handleSubmit submitForm 'title' '登録' BackToHomeButton SubmitButton onClick text = = 基本のフォーム〜JSX〜 入力値の登録 フォーム送信実行
8. const => const const => div div = () { , , , = ();
 = ( : ): { (); }; ( ~略~ ); }; SampleForm register handleSubmit watch reset useForm submitForm reset { } // フォーム送信 // 後ほどデータベースへの追加処理を行う // フォームを空にする。 data any void return < > </ > 基本のフォーム〜処理〜
9. 動的フォーム
10. const => const const = () { , , , = ({ : : : }); , , = ({ , : }); ~略~ ( ~略~ ); }; SampleDynamicForm register handleSubmit reset useForm { } prepend append useFieldArray { } { '' } { } 'sample' control [ ] fields defaultValues sample title control name // 入力値を格納するオブジェクトのキー名となる return 動的フォーム〜処理〜 デフォルト値が入ったオブジェクトを要素とする配列
11. < > < = </ > < > < > </ > < > < { ( )} /> </ > </ > < = </ > </ > 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〜 配列を展開していく
12. フォーム送信すると... sampleオブジェクト 配列！ フィールド単位 の中に、 ↓ で 配列の要素となっている！
13. 完成したフォーム、実演してみる。
14. 1. React Hook Formで動的フォーム 3. まとめ 2. Express×React×PostgreSQL
15. Express×React×PostgreSQL ・バックエンド →Express ・データベース →PostgreSQL ・フロントエンド →React pg-promiseという ライブラリを使うよ〜！
16. 今回使うSQL文 ① 追加 INSERT INTO テーブル名(カラム名) VALUES(値) ② 取得(全件) SELECT * FROM テーブル名 ③ 削除 DELETE FROM テーブル名 WHERE カラム名 = 値
17. 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
18. 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では、返される結果の多さに応じて、メソッドを使いわけ！
19. 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
20. フォーム送信とデータ追加~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'
21. フォーム送信とデータ追加、実演してみる。
22. 1. React Hook Formで動的フォーム 2. Express×React×PostgreSQL 3. まとめ
23. まとめ ・useFieldArrayを用いて、フィールドを増減させられる フォームを作成できた （感動したw） ・データベース操作やってるの、面白いな〜と思った ・個人でバックエンドを経験できたこと自体が感動
24. まとめ ・他にも、Next.jsやmicroCMS、Svelte触ったりとか、 色々な技術に触れた1年間でした！
25. ご清聴ありがとうございました！！