RedwoodJSはいいぞおじさん「RedwoodJSはいいぞぉ」

# はじめに
仕事でRedwoodJSを使う機会があり、ハッカソンとかではとりあえずRedwoodJSでやればいいかくらいにつかっているので、少し知見を共有します。
例に漏れず理解できてないことも多いのでアドバイスいただけるとありがたいです。
インフォラウンジのアドベントカレンダー2日目に載せることを目標に書いてます！
https://qiita.com/advent-calendar/2023/info-lounge

# 目次
1. [RedwoodJSとは](#RedwoodJSとは)
1. [簡単にチュートリアルをさらう](#簡単にチュートリアルをさらう)
1. [チュートリアル以上の発展](#チュートリアル以上の発展)
1. [なぜ自分が積極的に使っているのか](#なぜ自分が積極的に使っているのか)
1. [自分がこれからしたいこと](#自分がこれからしたいこと)
1. [参考文献](#reference)

<!-- 各チャプター -->
<a id="#RedwoodJSとは"></a>
# RedwoodJSとは
[RedwoodJS](https://redwoodjs.com/) は、フルスタックJavaScriptフレームワークです。
公式docsの[chapter0#what-is-redwood](https://redwoodjs.com/docs/tutorial/chapter0/what-is-redwood)がいい感じにまとまってるのでぜひみてみてください！

簡単にいうとReactに以下の諸々を有効活用したアプリが簡単に作成できます！
- GraphQL
- Prisma
- Jest
- Storybook
- vite
- Babel
- Typescript

自分が好きなのは自分(フロントエンドエンジニア)がコードを書く部分は基本的にReactを触るのとほぼ違いがない点と、Prismaでスキーマを書けばGraphQLを使えるように設定ファイルも生成してくれて、めんどくさい部分を簡単にやってくれる点です。

<a id="#簡単にチュートリアルをさらう"></a>
# 簡単にチュートリアルをさらう
[公式のチュートリアル](https://redwoodjs.com/docs/tutorial/foreword)がかなりよく、やるだけで大体のことはできるようになると思います！
簡単にポイントだけ抽出してみます。
### RedwoodJSのアプリを作成する
```bash
yarn create redwood-app --ts ./redwoodblog
```

### ファイルの見方
[ファイル構造](https://redwoodjs.com/docs/tutorial/chapter1/file-structure)は↓
```
├── 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を勉強することが多いです。
#### ローカルで立ち上げる
```bash
yarn redwood dev
```
初期設定では
web -> http://localhost:8910/
api -> http://localhost:8911/
で立ち上がって、webは自動でブラウザに移動します。
設定は一番階層上にあるredwood.tomlで変えれます。
(最初触ってみた時はなんかふたつ立ち上がった！？となりました。)

#### 何かパッケージを入れたい
webの方
```bash
yarn workspace web add marked
```
apiの方
```bash
yarn workspace api add better-fs
```

#### ファイル生成
- pages(pathをつけたいファイル)
```bash
# homeを"/"で表示したい時
yarn redwood generate page home /
# searchを作成(/serch)で
yarn redwood generate page search
```
"web/src/Routes.tsx"を見ればどんなことをしてくれているか大体わかります。

- scaffold(CRUDアクションを実行するために必要なものを諸々生成してくれる魔法のコマンド)
```bash
yarn rw g scaffold Post
```
prismaで定義して、migrateまでできていればこのコマンドでCRUDアクションできる簡単なUI付きのページが生成されます。
便利な反面使わないファイルも生成されていることも多くあるので実験用ファイルとかは

- cell(データのやり取りをしたいコンポーネント)
```bash
yarn rw g cell Articles
```
簡単にローディング中の画面やエラー画面、空だった場合の画面を生成してくれます。
複数形などは解釈してくれて、

http://localhost:8911/graphq
↑さっき立ち上がったapiでRedwood GraphQL Playgroundが立ち上がっていて、そこで実験しながらQUERYをかけます。
- コンポーネント
```bash
yarn rw g component Articles
```
cellがあるのでデータをやり取りしないものはこっちでいいかなと思っています。

他にも色々ありますが、一旦このくらいを紹介します。
generateコマンドを実行すると適当な場所にディレクトリが作成されて配下に、メインのファイルとtestやStorybookで使われるファイルが一緒に作成されます。
ファイルを生成した後にgit diffとかしてファイルの違い見てみるの結構楽しいです。

ちなみにチュートリアルをやり切って、ステッカーを頂きました！
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Thank you <a href="https://twitter.com/RedwoodJS?ref_src=twsrc%5Etfw">@RedwoodJS</a> for nice stickers!<br><br>チュートリアル終えると無料で送ってくれました。<br>封筒が手書きでびっくりした <a href="https://t.co/3HvuVxCDUj">pic.twitter.com/3HvuVxCDUj</a></p>&mdash; がわくん🍆 (@yuuya08110) <a href="https://twitter.com/yuuya08110/status/1558660986327838722?ref_src=twsrc%5Etfw">August 14, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<a id="#チュートリアル以上の発展"></a>
# チュートリアル以上の発展

## 検索クエリ
自分のケースでは、tagでfilterをしたいときに選択されたtagのid配列を渡して検索するようなことを実装したかったです。
やり方は"api/src/services"の対象のモデルのファイルに下のprismaのqueryを追加し、
```js
export const filterTags: QueryResolvers['filterTags'] = ({ ids }) => {
  return db.tag.findMany({
    where: {
      id: {
        in: ids,
      },
    },
  })
}
```
"api/rsc/graphql"ファイルのtype Queryにqueryを追加します。

## 中間テーブルを使いたい！
many-to-manyのつながりで中間テーブルを作った際は、sdlファイルを生成しないと動かないので
```bash
yarn rw g sdl ArticleTag
```
このコマンドで生成することで検索可能になります。

<a id="#なぜ自分が積極的に使っているのか"></a>
# なぜ自分が積極的に使っているのか
### まずどんな時に使ってる？
簡単なDBのあるWebアプリを作りたい時、Next.js(React.js) + Prismaで作っていたのですが、RedwoodJSでやってしまおうとなってます。
### 勝手にいい感じにやってくれてる
好みもあると思いますが、自分は裏側で勝手にいい感じにやってくれてる感が好きです。
GraphQLを一から設定するとかは多分無理で、prismaとNext.jsを繋げるなどはN回やったことあるので、同じことを手動でするより集合知でまとまってるものを使えるのはありがたいと思っています。
### ファイル構造が(ある程度)一意に定まってくれる
ファイル構造って好みもあって各々のしたいことが違ったりしますが、RedwoodJS経由でファイル生成をすればファイル名やテストなどのファイルをテンプレートから生成してくれるので、ハッカソンなどの際は結構この点ありがたいです。

<a id="#自分がこれからしたいこと"></a>
# 自分がこれからしたいこと
### テストを使いこなしたい！
### Storybookを使いこなしたい！

<a id="#reference"></a>
# 参考文献
- [RedwoodJSに入門してみた（第1回: アプリ作成〜モデル作成）](https://zenn.dev/tetzng/articles/create-app-with-redwoodjs)
- [RedwoodJSでTodoアプリを作ってみたので、所感をまとめてみる。](https://qiita.com/marumaru0113/items/c564520946e679c22d27)
日本語記事が少ない中、開発中にもすごく助けられました！！ありがとうございます！！

# あとがき
いろんな人にRedwoodJSの話をすると、Railsみたいだねと言われることが多くどこかにNode on Railsを目指してると開発者さんが言っていて単語とかも参考にしてることが多いようです。
一応アドベントカレンダー当日に滑り込めました！(追記していきます！)
次は今回とも関わるprismaの記事でも書いてみようかなと思います！

明日はnullさんがnullについて書いてくれる予定です！
明後日は社内Qiitaを充実させている@ituki_bさんが"wpのblockエディタを別のページから呼び出す"について書いてくれる予定です！
https://qiita.com/advent-calendar/2023/info-lounge