はじめに
仕事でRedwoodJSを使う機会があり、ハッカソンとかではとりあえずRedwoodJSでやればいいかくらいにつかっているので、少し知見を共有します。
例に漏れず理解できてないことも多いのでアドバイスいただけるとありがたいです。
インフォラウンジのアドベントカレンダー2日目に載せることを目標に書いてます！
https://qiita.com/advent-calendar/2023/info-lounge
目次
RedwoodJSとは
RedwoodJS は、フルスタックJavaScriptフレームワークです。
公式docsのchapter0#what-is-redwoodがいい感じにまとまってるのでぜひみてみてください！
簡単にいうとReactに以下の諸々を有効活用したアプリが簡単に作成できます！
- GraphQL
- Prisma
- Jest
- Storybook
- vite
- Babel
- Typescript
自分が好きなのは自分(フロントエンドエンジニア)がコードを書く部分は基本的にReactを触るのとほぼ違いがない点と、Prismaでスキーマを書けばGraphQLを使えるように設定ファイルも生成してくれて、めんどくさい部分を簡単にやってくれる点です。
簡単にチュートリアルをさらう
公式のチュートリアルがかなりよく、やるだけで大体のことはできるようになると思います！
簡単にポイントだけ抽出してみます。
RedwoodJSのアプリを作成する
yarn create redwood-app --ts ./redwoodblog
ファイルの見方
ファイル構造は↓
├── api
│ ├── db
│ │ └── schema.prisma
│ └── src
│ ├── directives
│ │ ├── requireAuth
│ │ └── skipAuth
│ ├── functions
│ │ └── graphql.ts
│ ├── graphql
│ ├── lib
│ │ ├── auth.ts
│ │ ├── db.ts
│ │ └── logger.ts
│ └── services
│
├── scripts
│ └── seed.ts
│
└── web
├── public
│ ├── favicon.png
│ ├── README.md
│ └── robots.txt
└── src
├── components
├── layouts
├── pages
│ ├── FatalErrorPage
│ │ └── FatalErrorPage.tsx
│ └── NotFoundPage
│ └── NotFoundPage.tsx
├── App.tsx
├── entry.client.tsx
├── index.css
├── index.html
└── Routes.tsx
大きくapi側とweb側に分かれています。
基本的に手作業でファイル名を変えたり移動したりといったことは細かく別ファイルと繋がっていることがあるためしない方がよく、redwoodのgenereteコマンドとdestroyコマンドは他ファイルの依存関係なども消してくれるので使うのが良いと思います。
RedwoodJSでよく使うコマンド(主にweb側)
基本的にyarnで使うコマンドをyarn redwood(redwoodの略のrwでも動く)に書き換えるだけです。
apiの方は特にredwoodというよりprismaを勉強することが多いです。
ローカルで立ち上げる
yarn redwood dev
初期設定では
web -> http://localhost:8910/
api -> http://localhost:8911/
で立ち上がって、webは自動でブラウザに移動します。
設定は一番階層上にあるredwood.tomlで変えれます。
(最初触ってみた時はなんかふたつ立ち上がった！？となりました。)
何かパッケージを入れたい
webの方
yarn workspace web add marked
apiの方
yarn workspace api add better-fs
ファイル生成
- pages(pathをつけたいファイル)
# homeを"/"で表示したい時
yarn redwood generate page home /
# searchを作成(/serch)で
yarn redwood generate page search
"web/src/Routes.tsx"を見ればどんなことをしてくれているか大体わかります。
- scaffold(CRUDアクションを実行するために必要なものを諸々生成してくれる魔法のコマンド)
yarn rw g scaffold Post
prismaで定義して、migrateまでできていればこのコマンドでCRUDアクションできる簡単なUI付きのページが生成されます。
便利な反面使わないファイルも生成されていることも多くあるので実験用ファイルとかは
- cell(データのやり取りをしたいコンポーネント)
yarn rw g cell Articles
簡単にローディング中の画面やエラー画面、空だった場合の画面を生成してくれます。
複数形などは解釈してくれて、
http://localhost:8911/graphq
↑さっき立ち上がったapiでRedwood GraphQL Playgroundが立ち上がっていて、そこで実験しながらQUERYをかけます。
- コンポーネント
yarn rw g component Articles
cellがあるのでデータをやり取りしないものはこっちでいいかなと思っています。
他にも色々ありますが、一旦このくらいを紹介します。
generateコマンドを実行すると適当な場所にディレクトリが作成されて配下に、メインのファイルとtestやStorybookで使われるファイルが一緒に作成されます。
ファイルを生成した後にgit diffとかしてファイルの違い見てみるの結構楽しいです。
ちなみにチュートリアルをやり切って、ステッカーを頂きました！
Thank you @RedwoodJS for nice stickers!
— がわくん🍆 (@yuuya08110) August 14, 2022
チュートリアル終えると無料で送ってくれました。
封筒が手書きでびっくりした pic.twitter.com/3HvuVxCDUj
チュートリアル以上の発展
検索クエリ
自分のケースでは、tagでfilterをしたいときに選択されたtagのid配列を渡して検索するようなことを実装したかったです。
やり方は"api/src/services"の対象のモデルのファイルに下のprismaのqueryを追加し、
export const filterTags: QueryResolvers['filterTags'] = ({ ids }) => {
return db.tag.findMany({
where: {
id: {
in: ids,
},
},
})
}
"api/rsc/graphql"ファイルのtype Queryにqueryを追加します。
中間テーブルを使いたい！
many-to-manyのつながりで中間テーブルを作った際は、sdlファイルを生成しないと動かないので
yarn rw g sdl ArticleTag
このコマンドで生成することで検索可能になります。
なぜ自分が積極的に使っているのか
まずどんな時に使ってる？
簡単なDBのあるWebアプリを作りたい時、Next.js(React.js) + Prismaで作っていたのですが、RedwoodJSでやってしまおうとなってます。
勝手にいい感じにやってくれてる
好みもあると思いますが、自分は裏側で勝手にいい感じにやってくれてる感が好きです。
GraphQLを一から設定するとかは多分無理で、prismaとNext.jsを繋げるなどはN回やったことあるので、同じことを手動でするより集合知でまとまってるものを使えるのはありがたいと思っています。
ファイル構造が(ある程度)一意に定まってくれる
ファイル構造って好みもあって各々のしたいことが違ったりしますが、RedwoodJS経由でファイル生成をすればファイル名やテストなどのファイルをテンプレートから生成してくれるので、ハッカソンなどの際は結構この点ありがたいです。
自分がこれからしたいこと
テストを使いこなしたい！
Storybookを使いこなしたい！
参考文献
- RedwoodJSに入門してみた（第1回: アプリ作成〜モデル作成）
-
RedwoodJSでTodoアプリを作ってみたので、所感をまとめてみる。
日本語記事が少ない中、開発中にもすごく助けられました！！ありがとうございます！！
あとがき
いろんな人にRedwoodJSの話をすると、Railsみたいだねと言われることが多くどこかにNode on Railsを目指してると開発者さんが言っていて単語とかも参考にしてることが多いようです。
一応アドベントカレンダー当日に滑り込めました！(追記していきます！)
次は今回とも関わるprismaの記事でも書いてみようかなと思います！
明日はnullさんがnullについて書いてくれる予定です！
明後日は社内Qiitaを充実させている@ituki_bさんが"wpのblockエディタを別のページから呼び出す"について書いてくれる予定です！
https://qiita.com/advent-calendar/2023/info-lounge