1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

「iwashi」とは?

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

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

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

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

余談1

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

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

余談2

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

iwashi を使う理由

以下のような経験はありませんか?

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

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

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

アプリは以下のタイミングで学習を通知します:

  • 1 日後
  • 3 日後
  • 1 週間後
  • 3 週間後

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

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

ユースケース

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

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

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

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

iwashi の構成要素

ほぼ無料で運用できる構成にしています。
Cloudflare Pagesに Remix の SSR を乗っけています。

iwahiアーキテクチャ.png

Remix

  • 業務で Rails を使っていますが、Remix は Rails 使いでもすんなり慣れ親しめると思います
  • React Router に統合されたので、将来性もありそう?ですね

Hono

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

Cloudflare

  • Remix のホスティング: Pages
  • Hono で構築した通知処理: Workers
  • DB: D1
  • セッション管理やキャッシュ: KV

ユーザー認証

その他の構成要素

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

主な機能

  1. 学習の作成
    スクリーンショット 2025-01-13 9.17.14.png
  • テキストエディターで簡単に学習を作成できます
  • 作成した学習は、iwashi が提案するスケジュールに基づいて通知が送信されます
  • 通知を受け取ったら、学習を復習します
  1. 学習の復習
    スクリーンショット 2025-01-13 9.19.34.png

    • 学習一覧から、復習したい学習を選択します
    • 学習回数は、メール通知を受け取るたびにカウントされます
  2. 分散学習を促す通知機能
    スクリーンショット 2025-01-13 9.23.29.png

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

開発期間

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

これから

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

おわりに

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

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?