Webアプリを作るとき、思考停止でNext.jsを使用することが多かったが、最近は Remix を使っている事例も多く見かけるので、キャッチアップしてみる。

Remix 公式ドキュメント

とりあえず全部Yesを選択

 ✝  ~/src  npx create-remix@latest

Need to install the following packages:
  create-remix@2.9.2
Ok to proceed? (y) y
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

 remix   v2.9.2 💿 Let's build a better website...

   dir   Where should we create your new project?
         remix-first-app

      ◼  Using basic template See https://remix.run/guides/templates for more
      ✔  Template copied

   git   Initialize a new git repository?
         Yes

  deps   Install dependencies with npm?
         Yes

      ✔  Dependencies installed

      ✔  Git initialized

  done   That's it!

         Enter your project directory using cd ./remix-first-app
         Check out README.md for development and deploy instructions.

         Join the community at https://rmx.as/discord

Koichi Hayakawa

とりあえずざっと流した。
Next.js 同様、デフォルトでtailwindcssが入っているのはよい。

Koichi Hayakawa

links

特定のルートやコンポーネントに対してCSSやその他のリンク要素を追加するために使用される関数

Koichi Hayakawa

routes

Next.js はディレクトリでパスを表してたけど、remix は . で表すのか。
パスパラメータは$hoge。
ネストが深くなると複雑になりそうな予感。使いながら覚えていこう。

Koichi Hayakawa

loader

サーバー上で実行される関数。useLoaderDataでloaderで実行された結果を受け取れる模様。
Next.js で言うところの getServerSideProps みたいな感じか。

Koichi Hayakawa

action

action 関数が実行されると、loader が後続に呼ばれる様子。
refetch を意識しなくてもよさそう。

一つのコンポーネントで複数の mutation がある場合、action の中で条件分岐をすればよいのだろうか。もしくは、mutation (リソース？) の単位でコンポーネントを分けるべきなのか・・？

複数のリソースが混在するようなケースについて知りたい。

Koichi Hayakawa

Note the weird _ in $contactId_. By default, routes will automatically nest inside routes with the same prefixed name. Adding a trailing _ tells the route to not nest inside app/routes/contacts.$ contactId.tsx. Read more in the Route File Naming guide.

うーむ。。。ややこしい命名やなぁ。ファイル名長くなりがち？ちゃんと目を通さないと。

Koichi Hayakawa

ざっと目を通せたので、簡単なCRUDアプリ作ってみます。

Koichi Hayakawa

めっさわかりやすい記事発見した

Koichi Hayakawa

フロントの値の検証周り、いい感じにできないかなぁ。。。と思ってたけど、Conformよさそう。
https://github.com/edmundhung/conform