技術学習記録 201211

前回に引き続き以下の記事に沿ってとりあえずBlitzを触ってみる。

Blitz.jsとTailwind CSSでメモ帳アプリの作成【第１弾】 - bagelee（ベーグリー）

前回の記事で問題になったPrismaの破壊的変更によるmigrateのエラーは既に解消されていた。

うれしい。

blitz generate

1 2	blitz generate all memo title:string body:string belongsTo:user blitz db migrate

これだけでDB構成とシンプルなCRUDが生成される。
本当にまるでRailsだ。

既に生成済みのファイルにエラーが表示されているのが見える。
app/memos/pages/memos/index.tsx memoの一覧画面のtsx 26行目、

1	<a>{memo.name}</a>

のnameがテキストエディタによってエラーだと表示されている。
さっきコマンドでtitleとbodyとuserって入れたのに、ここは調整してくれない（自動で1つめに調整してほしい）。
とりあえずさっき書いたtitleに変えておく。

1	<a>{memo.title}</a>

これでエラーが消える。
実行前にエディタがエラーだと教えてくれるのはTypeScriptの大きな恩恵。

入力画面の調整

まずは app/memos/components/MemoForm.tsx フォームの方を調整する。
サイトに沿って以下を追記した。

1 2	<input placeholder='タイトル' defaultValue={initialValues.title} /> <textarea placeholder='本文' defaultValue={initialValues.body} />

いや、この辺もgenerate時にいい感じになってもらえないんだろうか。

あとは app/memos/pages/memos/new.tsx 投稿ページの調整。

// 中略
import MemoForm from "app/memos/components/MemoForm"
import { useCurrentUser } from "app/hooks/useCurrentUser"

const NewMemoPage: BlitzPage = () => {
  const router = useRouter()
  const [createMemoMutation] = useMutation(createMemo)
  const currentUser = useCurrentUser()

  return (
    <div>
      <h1>Create New Memo</h1>

      <MemoForm
        initialValues={{}}
        onSubmit={async (event) => {
          if (currentUser) {
            try{
              const memo = await createMemoMutation({
                data: {
                  title: event.target[0].value,
                  body: event.target[1].value,
                  user: {connect:{id: currentUser.id}}
                }
              })
              alert('succress')
              router.push(`/memos/${memo.id}`)
            } catch (error) {
              alert('error')
              console.log(error)
            }
          }
        }}
// 中略

ここでいくつか注目した。

ひとつめ、ユーザー認証がわかりやすい。

import { useCurrentUser } from "app/hooks/useCurrentUser" // ユーザー認証Hooks読み込み
// 中略
  const currentUser = useCurrentUser() // ユーザー情報取得
// 中略
          if (currentUser) { // 判定

なんとなく見てもわかるコードって本当に助かる。

ふたつめ、ルーター制御もわかりやすい。

1	router.push(`/memos/${memo.id}`)

いや、これ以上無いよく見るコード。
助かる。

みっつめ、フォームの情報の取得はどうにかならんのか。

data: {
  title: event.target[0].value,
  body: event.target[1].value,
  user: {connect:{id: currentUser.id}}
}

せっかくいい感じにtype管理してるのに event.target[0].value 使わなきゃなのか？とちょっともやもやしている。
だって event.target[0].value はany型だし。
ていうか、最初に選んだReact Final Formとやらを使えばいい感じにできるのかな。

お酒飲みながらぼちぼちReact Final Form勉強してみようかな。

Final Form Docs – Getting Started

Author

sKawashima sKawashima @_sKawashima es.Kawashima by_sK

sKawashima's blog

技術学習記録 201211

目次

blitz generate

入力画面の調整

Author