Blitz.jsとTailwind CSSでメモ帳アプリの作成【第１弾】

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay5です！

昨日は「figmaのvariantsの作り方とできること」について書きました！

figmaのvariantsの作り方とできること

本記事ではBlitzjsとTailwind CSSでメモ帳アプリを作りたいと思います。今回作成したコードの全体像はこちらになります。

第１弾で機能全体を作成し，第２弾でTailwind CSSについて触れようと思います。

Blitz.jsとは

Blitz.jsはRailsに影響を受けて開発された，フルスタックReactフレームワーク です！

Reactで開発する際，バックエンドは何を使おうか，APIはRESTを使うかGraphQLを使うか…などなど，選択肢が非常に多いですよね。それを選ぶのが楽しい一方で，
・初心者がチャレンジしづらい😢
・知見が分散してしまう😢
などのデメリットがありました。

それを解決してくれるのがBlitz.jsです⚡

環境構築

blitzjs をインストールします。

$ npm install -g blitz

memoAppというプロジェクト名で作成してみます。

$ blitz new memoApp

Fromのライブラリを

・ React Final Form
・ React Hook Form
・ Fomik

から選べます。今回はReact Hook Formにしてみます。

アプリの雛形が自動で作成されるので

$ cd memoApp
$ blitz start

を実行してlocalhost:3000にアクセスすると，welcomeページにアクセスできます！！

自動で生成されるコード全体はこちらのコミットを参照してください。

ログイン機能は実装済み！

最初からユーザーとセッションのテーブルが用意されていて，マイグレーションまで済んでいます！
そのため，この時点で簡単なSign Up機能とLogin機能ができてしまっているんです✨

これで環境構築は終わりです🎉

CRUD機能の実装

メモの新規作成機能

メモテーブルの作成

user has_many memosの関係になるように，memoテーブルを作成します。

$ blitz generate all memo title:string body:string belongsTo:user

すると，以下のファイルが生成されます

・ app/memos/pages/memos/[memoId]/edit.tsx (編集ページ)
・ app/memos/pages/memos/[memoId].tsx (詳細ページ)
・ app/memos/pages/memos/index.tsx (一覧ページ)
・ app/memos/pages/memos/new.tsx (新規作成ページ)
・ app/memos/components/MemoForm.tsx (フォーム。編集ページと新規作成ページで使用)

・ app/memos/queries/getMemo.ts
・ app/memos/queries/getMemos.ts
・ app/memos/mutations/createMemo.ts
・ app/memos/mutations/deleteMemo.ts
・ app/memos/mutations/updateMemo.ts

また，db/schema.prismaに以下が追加されます。

model Memo {
id        Int      @default(autoincrement()) @id
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
title     String
body      String
user      User     @relation(fields: [userId], references: [id])
userId    Int
}

dbに反映させるためにマイグレーションをします。
$ blitz db migrate

変更されたコード全体はこちらのコミットを参照してください。

フォームの修正

デフォルトでは以下のようになっています。

app/memos/components/MemoForm.tsxを以下のように変更します。

↓

次に，app/memos/pages/memos/new.tsxを以下のように変更します。
・ Formで入力した値を取得するように変更
・ メモがログイン中のユーザーに紐づくように変更

↓

これでメモを作成できるようになりました🎉

具体的な変更箇所はこちらのコミットを参照してください。

メモの一覧機能

app/memos/pages/memos/index.tsxを変更します。

・ デフォルトでは{テーブル名.name}を出力するようになっているので，memo.titleに変更します。
・ デフォルトではすべてのメモを取得するようになっているので，ログイン中のユーザーに紐づくメモを取得するように変更します。

↓

これで一覧機能の完了です🎉

具体的な変更箇所はこちらのコミットを参照してください。

メモの編集機能

app/memos/pages/memos/[memoId]/edit.tsx を変更します。
新規作成と同様に，onSubmit関数を修正します。

↓

これで編集機能の完成です🎉

具体的な変更箇所はこちらのコミットを参照してください。

メモの削除機能

削除機能は何も手を加えなくても，自動生成されたコードで動きます！🎉

以上でCRUDの完成です！ほとんどコードを書いていないですね…！！

補足

package.jsonに

"husky": {
"hooks": {
"pre-commit": "lint-staged && pretty-quick --staged",
"pre-push": "tsc && npm run lint && npm run test"
}
},

が最初から設定されていて，
$ git commitするとコードが整形されたり，$ git pushするとテストが走ってくれたりします。

まとめ

コマンド一つで色んなファイルが作成されるのに興奮しました✨
Railsのように，一般的に使われるフレームワークになるかもしれないですね。
まだβ版なので本番で使うのは少し不安がありますが，今後に期待です！

第二弾ではBlitz.jsにTailwind CSSを入れてスタイルを整えてみたり，メモをディレクトリ構成で整理したりできるようにしたいと思います。

Blitz.jsとTailwind CSSでメモ帳アプリの作成【第２弾】