こんにちは、エンジニアの@rrih_devです。
先日のランサーズ開発合宿の自分たちのチームの成果物と使用技術について紹介します。
チームメンバーは以下の3人です。
合宿のアウトプットについて
自分たちのチームではランサーズ内部で利用している管理画面をモダン技術で作ってみようというテーマで、RedwoodJSを採用して実装してみました。実際に作成した画面の一部は以下のような感じです。利用者は社内を想定していて必要なDBを参照、更新がかけられるようなものです。
RedwoodJSについて
React、GraphQL、Prismaを内包したフルスタックなWebアプリケーションフレームワークです。また、JestやStorybookを使用しておりこれらも含めて用意されているCLIの実行で簡単に生成できたりして便利です。基本的なCRUD機能までは自動でできるためrailsのような点があります。
RedwoodJSの実装の流れの一例
手順
事前にschema.prismaに作成したいページに該当するテーブルのモデルを定義しておき、CLIを実行します。実際には既存テーブルの名前の問題で素直に実行できなかったのでschema.prismaのmodelを修正して実行しています。
model User {
id Int @id @default(autoincrement())
nickname String @unique(map: "nickname") @db.VarChar(255)
...
}必要ファイルの生成
通常のページ追加
yarn rw g page ページ名
モデルに紐づいたページを生成
yarn rw g scaffold <model>レイアウト追加
自動追加はされないので、Routes.tsxへlauoutをimportして利用します。
yarn rw g layout レイアウト名生成されるコード、ファイルについて
web/側
web配下にはフロントエンドのコードが生成されます。
生成されるものには指定ModelのCRUD機能に必要なページ単位とレイアウト用のReactコンポーネントとルーティング設定等があります。Storybook、jest用のファイルも生成されます。
api/側
api/配下にバックエンドのGraphQLのSDLとリゾルバとそれらに対応するテストコードが記述されたjestのファイルがあります。
テスト
生成されたテストやStorybookに関しては
Storybook起動
yarn rw storybook
Jest起動
yarn rw test
yarn rw api
yarn rw webJestに関してはVSCodeのエディター上で関数1つずつ実行が可能です。.envにTEST_DATABASE_STRATEGY=resetを指定すると都度yarn rw prisma db pushするような形式ではなくテーブルのデータを消しただけの状態でテストが実行可能になります
Chakra UI
基本レイアウト
レイアウトを組む場合下記を利用すればOKです。
https://chakra-ui.com/docs/components
例
<div style="margin: 4px; padding: 16px 8px; background: blue; opacity: 0.8;"></div>
↓
<Box m="4px" py="16px" px="8px" bg="blue" opacity="0.8" />最後に
今回はRedwoodJSを触ってみましたがyarn rw prisma studioで使用可能なPrisma Studio自体もシンプルで良さそうでした。これまで開発等でDB操作にphpmyadminを使ってきてしましたが、これ以外のGUIの選択肢としてありな気がしました。RedwoodJS自体も入門用のチュートリアルが公式によって提供されているため、ひとまず触ってみるということがしやすいと思いました。
また、同じチームで開発をしていた@syo_igarashiさんのその時の記事はこちらになります。