👻

最近流行りのRemixとCloudflareをキャッチアップするために一個アプリ作った話

2024/02/06に公開2件

React

TL;DR

無駄な買い物チェッカーを作ったよ！緊急度,重要度,欲求度,代替可能度の４軸から無駄かどうかを判断するよ
フロントエンドではRemixで開発、フォームライブラリはConformがよかったよ
Cloudflareは最高でした。

はじめに

どうも、やまぐちです。
エンジニアの皆さん、技術のキャッチアップってどうやってますか？
とりあえずチュートリアルやってみますか？　技術ブログを読むだけで済ましていますか？　
この辺りどうもモチベーションが湧かないんですよね。チュートリアルやっても身についている感覚がないんですよ。

最近Xのタイムラインを眺めていると、React界隈では今はRemixが流行りらしいし、ついでにCloudflareも、安い、速い、便利、で個人開発でめっちゃナウくてイケてるらしいじゃないですか。

んー、モダンでナウい、イケてる技術スタックを使えるようになりたい！！

そんな時はやっぱり、アプリ一個作ってみるに限るんですよね。
仰々しいものじゃなくて簡単なものでいいんです。1~2ページのアプリでいいんです。

そんな私が作ったのは
無駄な買い物チェッカーです。
https://mudamono.com

私が独断と偏見で、あなたの買い物が無駄なものかどうかを判断します。

使用した技術スタック

言語
- Typescript
フロントエンド
- Remix, TailwindCSS、Conform(フォーム用ライブラリ)
インフラ
- Cloudflare Pages
- Cloudflare D1

フロントエンド

基本的にはRemix＋TailwindCSSで実装しています。
今回はForm周りの実装がメインになってたので、Form用のライブラリでConformを採用しました。
Conformについてはこちらの記事で知って使ってみたくてうずうずしてました。

私が使ってて実感したConformの良さは

zodでスキーマ作って、それをFormに当てることでnameとかidとかを決めてくれる。
こちらで考える必要なくてめっちゃ楽。
Remixとの連携がいい感じで、サーバー側、クライアント側でのバリデーションが心地良い。
サーバーとクライアントでおんなじ書き方でバリデーションできる。

2に関しては、コードを見ていただくと良いと思います。Conformを使うとバリデーションをしたくて仕方がなくなります。サイコー！！

// client
const [form, { item }] = useForm({
    onValidate({ formData }) {
      return parseWithZod(formData, { schema });// ここ！！
    },
    constraint: getZodConstraint(schema),
    shouldRevalidate: "onBlur",
  });

// server
  const formData = await request.formData();
  const submission = parseWithZod(formData, { schema });　// ここ！！
  if (submission.status !== "success") {
    return json({ success: false, message: "error!", submission });
  }

まあでもそこまで他のFormライブラリに詳しくないので、他も使ってみて比較してみたいです。

インフラ

DB

個人でのアプリ開発で考えないといけないことは、
費用をかけられないことです

開発では慣れたRDBをできるだけ安く使いたい。そんな願いを叶えてくれるサービスはいろいろあると思います。
Supabase、PlanetScale、Upstash...あんまよく知らないですけどね。

私はCloudflare D1を使います。
なぜなら、安くて、かつ　ホスティング＋DB＋DNS＋ドメイン設定、全部一気に使いたいからです。
D1は本当に安くて、個人の利用なら全然しばらく無料で使えます。AWSやGCPでRDBはお金かかるから使いたくないので、助かります。

Cloudflareはこれらすべてサービスを提供しているので、いちいち別サービスに移らなくていいのです。
Cloudflare　Pagesにデプロイして、D1と連携してすぐにDB使えるようにして、最後に楽々でドメインを取得してCNAMEで紐付け！

めちゃくちゃ楽でした。D1使う場合のローカルの開発もすごく体験がいいのでCloudflareを検討している方はぜひ使ってみてください。

作ったアプリ(無駄なものチェッカー)

お買い物する時に無駄だと思って買うことはないと思います。
価値観はそれぞれですが、無駄だと感じながらも買い物をすることがあれば、その意識を見直した方がよいかもしれません。
基本的には何かを買った後に「これ無駄だったな」、「あれ無駄やったん？！」みたいになると思います。
うちではそうです。じゃあどうやって買う前に無駄かどうか判断しようと思ったときに以下の4つの軸で判断できるんじゃないかってそう思ったんです。

緊急度
重要度
欲求度
代替可能度

緊急度と重要度は、アイゼンハワーの行動優先順位マトリックスというタスクを分類する方法にもある重要な指標で、これは買い物にも同じく有効だと思いました。基本はこの2軸だけで無駄かどうかの判断ができると思います。
しかしそれ以外に二つの指標を導入しています。それが欲求度と、代替可能度です。
これ実は欲求度は重要度と相関がありそうですし、代替可能度は緊急度に相関があるので一見必要なさそうに見えます。これはどちらかというと重要度や緊急度を補正する指標として導入しています。
つまり重要度や緊急度では人が判断しにくいときに、元からある欲求度や代替可能度などの人のわかりやすい指標で補いたい！という目的です。

今回のアプリではこの4つの軸でスコアをつけてます。私がわかりやすいようにアンケートは全部関西弁です。わたいは関西人です。