子ども向け足し算練習PWAを開発した（たしざんフレンズ）

はじめに

足し算を学ぶ子どもたちにとって、視覚的な理解は重要です。そこで「たしざんフレンズ」という名前の足し算練習アプリを開発しました。最初は1つのHTMLファイルで作成しましたが、PWA（Progressive Web App）として本格的に仕上げるため、複数ファイルに分割する構成に変更しました。

https://app.chiilabo.jp/tashi-zan-friend/

この記事では、開発過程で得られた知見と、ファイル分割によるメリットを共有します。特に、教育アプリ開発における視覚的デザインの工夫と、PWAの実装ポイントについて詳しく解説します。

開発の背景と設計思想

なぜ足し算練習アプリなのか

足し算は算数の基礎中の基礎ですが、抽象的な数字だけでは理解が難しい場合があります。そこで、数を視覚的に表現する方法を取り入れました。青い丸と緑の丸を使って、足される数と足す数を分けて表示することで、子どもたちが直感的に理解できる仕組みを作りました。

視覚的な学習効果を重視した設計

開発において最も重視したのは、数の概念を視覚的に表現することです。例えば「7 + 3」の問題では、左側に青い丸を7個、右側に緑の丸を3個表示します。さらに、5個ごとに改行することで、5のまとまりも自然に理解できる構成にしました。

この設計により、子どもたちは数字を見るだけでなく、実際に「数える」体験ができます。指で丸を数えながら答えを考えることで、より深い理解につながります。

技術選択とアーキテクチャ

なぜVanilla JavaScriptを選んだのか

フレームワークを使わずに純粋なJavaScript（Vanilla JavaScript）で開発しました。理由は3つあります。

1つ目は、アプリの軽量性です。教育アプリは多くの端末で動作する必要があり、古いタブレットでもサクサク動くことが重要です。フレームワークを使わないことで、ファイルサイズを最小限に抑えられます。

2つ目は、依存関係の排除です。外部ライブラリに依存しないため、長期的にメンテナンスしやすくなります。教育現場では、一度導入したツールを長く使い続けることが多いためです。

3つ目は、学習目的での理解しやすさです。コードがシンプルで理解しやすいため、他の開発者が機能を追加したり、カスタマイズしたりすることが容易になります。

PWAとしての設計方針

PWA（Progressive Web App）は、Webアプリでありながらネイティブアプリのような体験を提供する技術です。今回の開発では、以下の機能を実装しました。

オフライン対応により、インターネット接続がない環境でも使用できます。学校のタブレットでネットワーク環境が不安定な場合でも、安心して使えます。

ホーム画面への追加機能により、専用アプリのような感覚で起動できます。子どもたちにとって、アプリを見つけやすく、使いやすい環境を提供できます。

ファイル構成の変更と得られたメリット

単一ファイルから分割構成への移行

最初は1つのHTMLファイルにすべてのコード（HTML、CSS、JavaScript）を記述していました。しかし、PWAとして本格的に運用するため、以下の5つのファイルに分割しました。

index.html：アプリの構造を定義するメインファイル
styles.css：デザインとレイアウトを管理するスタイルシート
script.js：ゲームロジックとPWA機能を担当するJavaScript
manifest.json：PWAの設定を記述するマニフェストファイル
sw.js：オフライン機能を提供するサービスワーカー

分割によって得られた具体的なメリット

コードの見通しが格段に良くなりました。例えば、デザインを変更したい場合はstyles.cssだけを編集すれば済みます。ゲームロジックに問題がある場合はscript.jsを確認するだけです。

複数人での開発が可能になりました。デザイナーがCSS、プログラマーがJavaScript、PWAの専門家がサービスワーカーを担当するといった分業ができます。

バージョン管理も簡単になりました。Gitなどのバージョン管理システムを使う際、どのファイルのどの部分が変更されたかが明確になります。

キャッシュ戦略も柔軟に設定できます。例えば、頻繁に変更されるJavaScriptファイルと、めったに変更されないCSSファイルで異なるキャッシュ設定を適用できます。

技術実装のポイント

Web Audio APIを使った音声フィードバック

正解時と不正解時の音声フィードバックには、Web Audio APIを使用しました。音声ファイルを用意する代わりに、プログラムで音を生成します。

function playCorrectSound() {
    const oscillator = audioContext.createOscillator();
    const gainNode = audioContext.createGain();
    
    oscillator.connect(gainNode);
    gainNode.connect(audioContext.destination);
    
    // C5 → E5 → G5の和音で正解音を作成
    oscillator.frequency.setValueAtTime(523.25, audioContext.currentTime);
    oscillator.frequency.setValueAtTime(659.25, audioContext.currentTime + 0.1);
    oscillator.frequency.setValueAtTime(783.99, audioContext.currentTime + 0.2);
}
Code language: JavaScript (javascript)

この方法の利点は、音声ファイルが不要なため、アプリの容量を軽くできることです。また、音の高さや長さを自由に調整できるため、子どもたちにとって心地よい音を作り出せます。

サービスワーカーによるオフライン対応

サービスワーカーは、Webアプリがオフラインでも動作するための仕組みです。ブラウザとサーバーの間に入り、必要なファイルをキャッシュしておきます。

const CACHE_NAME = 'math-practice-v1.0.0';
const urlsToCache = [
    './',
    './index.html',
    './styles.css',
    './script.js',
    './manifest.json'
];

self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(function(cache) {
                return cache.addAll(urlsToCache);
            })
    );
});
Code language: PHP (php)

このコードにより、アプリに必要なファイルがすべてブラウザに保存されます。インターネット接続が切れても、保存されたファイルを使ってアプリが動作し続けます。

レスポンシブデザインの実装

様々な画面サイズに対応するため、CSS GridとFlexboxを組み合わせたレスポンシブデザインを採用しました。

.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 300px;
    margin: 0 auto;
}

@media (max-width: 480px) {
    .key-btn {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
}
Code language: CSS (css)

スマートフォンでは小さめのボタン、タブレットでは大きめのボタンと、端末に応じて最適なサイズに調整されます。子どもたちが使いやすいよう、タップしやすいサイズを心がけました。

PWAマニフェストの設計

アプリの基本情報定義

PWAマニフェストは、アプリがどのように表示されるかを定義するJSONファイルです。アプリ名、アイコン、表示方法などを設定します。

{
  "name": "たしざんフレンド",
  "short_name": "たしざんフレンド",
  "description": "楽しく足し算を練習できるアプリ",
  "start_url": "./",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#667eea"
}
Code language: JSON / JSON with Comments (json)

display: "standalone"により、ブラウザのアドレスバーが表示されず、まるでネイティブアプリのような見た目になります。子どもたちにとって、余計な要素が画面にないため、集中して学習に取り組めます。

アイコンとショートカットの設定

アプリのアイコンは複数サイズを用意し、様々な端末に対応します。また、ショートカット機能により、アプリアイコンを長押しした際に直接新しいゲームを開始できるよう設定しました。

"shortcuts": [
    {
        "name": "新しいゲーム",
        "short_name": "新ゲーム", 
        "description": "新しい足し算練習を開始",
        "url": "./"
    }
]
Code language: JavaScript (javascript)

この機能により、アプリの使い勝手が向上し、子どもたちがより簡単に学習を始められます。

ユーザー体験の工夫

視覚的フィードバックシステム

数字だけでなく、色とアニメーションを使った視覚的フィードバックを重視しました。正解時は緑色の「せいかい！」メッセージと軽快な音、不正解時は赤色の「ちがうよ」メッセージと低い音で、明確に結果を伝えます。

10問すべてクリアした際は、トロフィーと星のアイコンが表示され、達成感を演出します。このような小さな工夫が、子どもたちの学習意欲を高めます。

入力システムの設計

二桁の数字入力に対応するため、専用のテンキーを実装しました。数字ボタン、消去ボタン（⌫）、決定ボタン（○）を配置し、直感的に操作できる構成にしました。

間違えて入力した場合でも、消去ボタンで簡単に修正できます。決定ボタンを押すまでは答えが確定しないため、じっくり考える時間も確保できます。

開発過程で学んだこと

パフォーマンス最適化の重要性

教育アプリでは、動作の軽快さが特に重要です。子どもたちの集中力を途切れさせないよう、ボタンを押してから反応するまでの時間を最短にする必要があります。

アニメーションにはCSS transitionを使用し、重い処理はできるだけ避けました。音声もWeb Audio APIで軽量化し、レスポンス速度を向上させました。

アクセシビリティへの配慮

色覚に配慮し、青と緑の組み合わせでも明度差を十分に確保しました。また、音声だけでなく視覚的なフィードバックも併用することで、聴覚に困難がある子どもたちにも対応しています。

ボタンサイズも、小さな指でも押しやすいよう、十分な大きさを確保しました。タッチターゲットの最小サイズは44px以上を基準にしています。

エラーハンドリングの実装

ネットワーク接続が不安定な環境でも安定動作するよう、各所にエラーハンドリングを実装しました。サービスワーカーの登録に失敗した場合でも、アプリの基本機能は動作し続けます。

Web Audio APIも、対応していないブラウザでは音声なしで動作するよう設計しました。どのような環境でも、最低限の機能は保証されます。

まとめ

「たしざんフレンド」の開発を通じて、単一ファイルから分割構成への移行がもたらすメリットを実感できました。コードの保守性向上、チーム開発への対応、PWA機能の本格実装など、多くの利点があります。

特に教育アプリ開発では、視覚的な理解促進、直感的な操作性、様々な環境での安定動作が重要です。これらの要件を満たすために、適切な技術選択とアーキテクチャ設計が不可欠であることを学びました。

PWAとしての機能により、インターネット環境に依存せず、いつでもどこでも学習できる環境を提供できます。ファイル分割構成により、今後の機能拡張や保守作業も効率的に行えるでしょう。