【個人開発】【Remix Cloudflare hono】科学的根拠に基づいた学習サポートアプリ「iwashi」を作りました！

# 「iwashi」とは？
iwashi は記憶に適したペースで学習をサポートするサービスです。

https://iwashi.xyz/

忙しい毎日の中で効率的に学習したいと思いませんか？
Webエンジニアとして成長したいけれど、限られた時間をどう使うかに悩むこともありますよね。

この記事では、個人開発した学習サポートアプリ「iwashi」をご紹介します。
このアプリは、書籍『科学的根拠に基づく最高の勉強法』で提唱されている「分散学習」の理論をベースに作りました。

学習効率を最大化し、忙しい日々の中でも効果的に記憶を定着させることを目指したサービスです。

#### 余談1
作成した動機は、自分好みの学習サポートを作りたいと思ったからです。
あとは、同僚のエンジニアチームのメンバーが使ってくれたら嬉しいなーと思っています。

自分で使ってしばらく経ちましたが、復習することが習慣になりやすい気がしています。（自分で作ったから説は濃厚ですが🫣）
みなさんにも使っていただけると幸いです🙌

#### 余談2
本当は sakana にしたかったのですが、ドメインの都合で iwashi にしました。
記憶に関連するので、健康的な食材の魚をアプリケーションに名前に使いたかったのです。
アイコンに使用しているイワシ缶がかわいいですね。


## iwashi を使う理由
以下のような経験はありませんか？

1. 業務や個人の勉強中にわからないことがある
1. 調べる（検索、生成AIを活用）
1. 理解したり、新しい発見があったりする
1. 復習のためにメモや Notion に書き写す
1. **…復習しない！**

iwashiは、この「復習しない」の部分に注目しました。

「復習するためにメモや Notion などに書き写した」内容を iwashi にコピペすることで、
**自動的**に、そして**効果的なタイミング**で復習をすることができます。

:::note info
アプリは以下のタイミングで学習を通知します：
- 1 日後
- 3 日後
- 1 週間後
- 3 週間後

このスケジュールは、最適な復習間隔を提案する分散学習の理論に基づいています。
:::

:::note info
他にも、毎日通知を送るように設定することもできます。
:::

## ユースケース

想定する使い方は下記のような感じです。

- 学習の作成
  - ChatGPT などの生成 AI に質問をして、その回答を iwashi にコピペ
  - Notion (などで作成したメモや学習記録)のリンクを iwashi にコピペ
  - 何度か読んで理解したい技術記事を iwashi にコピペ
  - 書籍で大事だと思った箇所を iwashi にコピペ

:::note info
通知が来たら、スマホやPCでiwashiを開き、効率的に復習を行います
:::

https://iwashi.xyz/

Google アカウントで使えますので、よかったら試してみてください。

## iwashi の構成要素

ほぼ無料で運用できる構成にしています。
[Cloudflare Pages](https://www.cloudflare.com/ja-jp/developer-platform/pages/)に Remix の SSR を乗っけています。

![iwahiアーキテクチャ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916052/ef752f87-a183-856e-a55b-de4bdbce64a3.png)

### [Remix](https://remix.run/)

- 業務で Rails を使っていますが、Remix は Rails 使いでもすんなり慣れ親しめると思います
- [React Router に統合された](https://remix.run/blog/react-router-v7)ので、将来性もありそう?ですね

### [Hono](https://hono.dev/)

- Hono は使ってみたかったので採用しています
- Cloudflare Workers に乗っけて、通知（メール送信）用としています

### [Cloudflare](https://www.cloudflare.com/ja-jp/developer-platform/)

- Remix のホスティング: [Pages](https://www.cloudflare.com/ja-jp/developer-platform/pages/)
- Hono で構築した通知処理: [Workers](https://www.cloudflare.com/ja-jp/developer-platform/workers/)
- DB: [D1](https://www.cloudflare.com/ja-jp/developer-platform/d1/)
- セッション管理やキャッシュ: [KV](https://developers.cloudflare.com/kv/)

### ユーザー認証

- [Remix-Auth](https://remix.run/resources/remix-auth)
  - [コミュニティストラテジー](https://github.com/sergiodxa/remix-auth/discussions/111)の[`remix-auth-google`](https://github.com/pbteja1998/remix-auth-google)を使用しています

### その他の構成要素

- ドメイン: お名前.com
  - ドメインも Cloudflare で取得したかったのですが、コストの都合で。。。
- メール配信: Mailgun
  - 無料枠とコストの兼ね合いで選択しました
  - （iwashi が人気になったら無料枠からはみ出るので再検討）
- OR マッパー: [Drizzle ORM](https://orm.drizzle.team/)
- UI コンポーネント: [Mantine](https://mantine.dev/)
- テキストエディター: [Mantine Tiptap](https://mantine.dev/x/tiptap/)
  - リッチなテキストエディターを簡単に実装したくて採用しました
  - 簡単に作れるし、拡張機能がたくさんあるので随時機能追加予定
- スタイリング: [TailwindCSS](https://tailwindcss.com/)

## 主な機能

1. 学習の作成
   ![スクリーンショット 2025-01-13 9.17.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916052/53b6fd94-6875-1a91-96e6-757912c5e454.png)
- テキストエディターで簡単に学習を作成できます
- 作成した学習は、iwashi が提案するスケジュールに基づいて通知が送信されます
- 通知を受け取ったら、学習を復習します

1. 学習の復習
   ![スクリーンショット 2025-01-13 9.19.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916052/178dceb2-a953-bac4-a5fc-afcb60a7bf13.png)
   - 学習一覧から、復習したい学習を選択します
   - 学習回数は、メール通知を受け取るたびにカウントされます

1. 分散学習を促す通知機能
   ![スクリーンショット 2025-01-13 9.23.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916052/0f8aa551-1ea6-426b-6ab9-b4b62e096efd.png)

   - 学習の作成時に設定した時間に、メール通知が送信されます
   - 通知の内容はシンプルに、学習のタイトルとリンクのみです
   - この通知は下記の間隔で送信されます：
     - 1 日後
     - 3 日後
     - 1 週間後
     - 3 週間後
   - 通知時間は適宜変更できます。



### 開発期間
- 毎日1時間ちょいずつコツコツ作って、4週間くらいでできました（計50時間弱くらい）
    - アプリケーション自体の機能は少ないので短時間でできたと思います
    - Tiptap（テキストエディタ）をもっとリッチにしていくなら、さらに時間がかかりそうです

### これから

前述の通り、Tiptapを拡張してテキストエディタをリッチにしていきます。
あとは通知スケジュールをもっと自由に設定できるようにします。
需要があれば、メールパスワードでの認証も実装します。

## おわりに
Googleアカウントがあれば、すぐにiwashiを使い始めることができます。

https://iwashi.xyz/

感想やフィードバックもお待ちしています！