Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Azusa Okamoto

December 12, 2022
Tweet

More Decks by Azusa Okamoto

Other Decks in Programming

Transcript

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

    View full-size slide

  2. 今日お話しすること
    今年1年で、

    個人的に「できて良かったな〜」と思う実装について!

    View full-size slide

  3. 今日お話しすること
    1. React Hook Formで動的フォーム


    2. Express×React×PostgreSQL


    3. まとめ 都合により、一部型指定
    を省略してます!

    View full-size slide

  4. 1. React Hook Formで動的フォーム


    2. Express×React×PostgreSQL


    3. まとめ

    View full-size slide

  5. React Hook Form
    Reactで簡単にフォームを作成できるライブラリ。

    入力した値の取得やバリデーションなどを行える。

    View full-size slide

  6. < >

    < > >

    < {... ( )} />

    < >

    < />

    < { ( )} />

    >

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

    View full-size slide

  7. const =>
    const
    const =>
    div
    div
    = () {

    , , , = ();


    = ( : ): {

    ();

    };


    (

    ~略~

    );

    };
    SampleForm
    register handleSubmit watch reset useForm
    submitForm
    reset
    { }
    // フォーム送信

    // 後ほどデータベースへの追加処理を行う

    // フォームを空にする。

    data any void
    return
    < >

    >

    基本のフォーム〜処理〜

    View full-size slide

  8. 動的フォーム

    View full-size slide

  9. const =>
    const
    const
    = () {

    , , , = ({

    :
    :
    :
    });


    , , = ({

    ,

    :
    });

    ~略~

    (

    ~略~

    );

    };
    SampleDynamicForm
    register handleSubmit reset useForm
    {

    }

    prepend append useFieldArray
    { }
    {

    ''

    }

    { }
    'sample'
    control
    [

    ]

    fields
    defaultValues
    sample
    title
    control
    name // 入力値を格納するオブジェクトのキー名となる

    return
    動的フォーム〜処理〜
    デフォルト値が入ったオブジェクトを要素とする配列

    View full-size slide

  10. < >

    < = >

    < >

    < > >

    < >

    < { ( )} />

    >

    >

    < = >

    >
    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〜
    配列を展開していく

    View full-size slide

  11. フォーム送信すると...
    sampleオブジェクト
    配列!

    フィールド単位
    の中に、




    配列の要素となっている!

    View full-size slide

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

    View full-size slide

  13. 1. React Hook Formで動的フォーム


    3. まとめ
    2. Express×React×PostgreSQL


    View full-size slide

  14. Express×React×PostgreSQL
    ・バックエンド

    →Express


    ・データベース

    →PostgreSQL


    ・フロントエンド

    →React
    pg-promiseという

    ライブラリを使うよ〜!

    View full-size slide

  15. 今回使うSQL文
    ① 追加

    INSERT INTO テーブル名(カラム名) VALUES(値)


    ② 取得(全件)

    SELECT * FROM テーブル名


    ③ 削除

    DELETE FROM テーブル名 WHERE カラム名 = 値

    View full-size slide

  16. 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

    View full-size slide

  17. 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では、返される結果の多さに応じて、メソッドを使いわけ!

    View full-size slide

  18. 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

    View full-size slide

  19. フォーム送信とデータ追加~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'

    View full-size slide

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

    View full-size slide

  21. 1. React Hook Formで動的フォーム


    2. Express×React×PostgreSQL


    3. まとめ

    View full-size slide

  22. まとめ
    ・useFieldArrayを用いて、フィールドを増減させられる
    フォームを作成できた (感動したw)


    ・データベース操作やってるの、面白いな〜と思った
    ・個人でバックエンドを経験できたこと自体が感動

    View full-size slide

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

    View full-size slide

  24. ご清聴ありがとうございました!!

    View full-size slide