本文へスキップ
mreysei · Michael Reyes
テーマ

Mamoru Japan

かなからJLPTまで、日本語を忘れないためのオフライン対応のインストール可能なWebアプリ。

種類
Web
年
カテゴリー
藍色の背景に置いたMamoruのカバー画像。「守」のロゴ、アプリ名、「日本語を忘れないために」という一文と、レベル一覧、ホーム画面、漢字の書き取り練習を映したスマートフォン3台。

プロジェクトについて

Mamoru(守る)は、日本語を学んだことがあり、それを忘れたくないスペイン語話者のためのインストール可能なWebアプリです。日本語能力試験(JLPT)のレベル別の練習問題、スペイン語の辞書、学んだことすべての復習をひとつにまとめ、オフラインでもアカウントなしでも使えます。

目的:日本語は練習しないとすぐに忘れてしまい、学ぶための教材はほとんどが英語です。Mamoruはその両方を解決します。一人ひとりのレベルに合わせたスペイン語での毎日数分の練習と、端末に保存される進捗で、電波がなくてもいつでも復習できます。

できること:

  • 学ぶ:ひらがな、カタカナ、最初の単語を学ぶ独自のレベルN6と、語彙、漢字、文法、読解、聴解を学ぶN5〜N1。各レベルの最後に試験があります。7,500語以上、約32,000問。
  • 検索:スペイン語で引ける約219,000語の辞書。例文と、6,703字の漢字の筆順を表示します。
  • 手書き:ストロークの認識と筆順のチェックを、外部ライブラリなしでゼロから実装しました。
  • 復習:学んだことすべてを、間違えたものから順にランダムに復習します。
  • 学習表:助詞、助数詞、敬語、日付、こそあど。
  • 専門分野:仕事で使う日本語。まずはプログラミングの165語から。
  • リスニング:ブラウザーの音声で、すべての単語の発音を聞けます。
JLPTのレベル別の単語数 N1ではN5の4倍以上の単語が必要です。
データを表示する: JLPTのレベル別の単語数
JLPTのレベル別の単語数
項目単語
N5674
N4622
N31,625
N21,731
N12,904

アクセシビリティ:WCAG 2.2 AAを目標に、変更のたびに確認しています。Playwrightとaxeがスマートフォンのプロファイルでライトとダークのテーマで約20画面をチェックします。今いるセクションを色だけで示すことはなく、「視差効果を減らす」設定に従い、コードはjsx-a11yのアクセシビリティ規則を通っています。

パフォーマンス:WorkboxによるPWAで、フォントはキャッシュされ、ネットワークがなくても開けます。重い画面は必要なときに読み込み、コース全体は約70ミリ秒で生成され、CPUを4倍遅くしたスマートフォンでもホーム画面は0.8秒で表示されます。

セキュリティとプライバシー:進捗は端末のIndexedDBに保存され、アカウントは同期したいときだけ作ります。パスワードはソルト付きのscryptで保存し、定数時間で比較します。

アーキテクチャと品質:アプリ(React、Vite、i18next)と、FastifyとDrizzle、PostgreSQLによるAPIのモノレポです。類似検索にはpg_trgmを使っています。単体テストのファイルが31個と、エンドツーエンドのテストがあります。

オフラインファースト

現状:5つのセクションはすべて動き、どのレベルにもコンテンツがあります。コースは今も増えています。

技術

スクリーンショット