【中学生から使える】ブラウザだけで学ぶデータベース・Webアプリ開発入門（旧）

## 更新情報

本記事は下記にて更新されました

https://qiita.com/EasyCording/items/e45556bd4f9b2a645d4d




## はじめに

プログラミング教育に携わる方や学習者のために、ブラウザだけで動作する「Webアプリ開発学習テンプレート」を作成しました。このテンプレートは、インストール不要でデータベースの扱い方からWebアプリケーション開発の基礎が学べる教材です。

実装例として「本管理アプリ」を用意しましたが、このプロジェクトの本質は「学習ツール」である点が重要です。

## 教材の特徴

### 学習目標

1. **データベース操作の基礎を学ぶ**
   - SQLライクな構文でデータの作成・読み取り・更新・削除(CRUD)操作を習得
   - ブラウザ内データベース(IndexedDB)の仕組みを理解する

2. **フロントエンド開発の基本を体験**
   - HTML/CSS/JavaScriptの連携方法を実践的に学ぶ
   - イベント処理やDOM操作の基本を理解する

3. **実用的なアプリ開発スキルを養う**
   - データの永続化、検索、ソート機能の実装方法
   - ユーザーインターフェース設計の基本概念

### なぜブラウザだけなのか？

- **環境構築の手間がない**：特別なソフトのインストールが不要
- **どこでも学習可能**：学校のPCやタブレットでもすぐに始められる
- **即時フィードバック**：コード変更の結果がすぐに確認できる
- **直感的な理解**：目に見える形で処理結果を確認できる

## 技術的な特徴

### 使用技術

- **フロントエンド**：HTML5, CSS3, JavaScript (ES6)
- **UIフレームワーク**：Bootstrap 5
- **データベース**：IndexedDB
- **データベースラッパー**：自作のSQLライクインターフェース

### アーキテクチャ

学習の便宜を考え、シンプルな3層構造を採用しています：

1. **UIレイヤー**（HTML + CSS + main.js）
   - ユーザーインターフェースとイベント処理

2. **ビジネスロジックレイヤー**（BookDatabase.js）
   - データ操作に関するロジック

3. **データアクセスレイヤー**（SQLInterface.js）
   - IndexedDBをSQLライクに操作するためのラッパー

## 学習コンテンツの詳細

### 1. SQLライクなデータベース操作

SQLiteが使えないブラウザ環境でも、SQLの学習ができるよう独自のインターフェースを実装しています。

```javascript
// テーブル作成
await db.execute(`
    CREATE TABLE books (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        title TEXT NOT NULL,
        author TEXT,
        read_date DATE,
        rating INTEGER,
        memo TEXT
    )
`);

// データ検索
const results = await db.execute(
    'SELECT * FROM books WHERE title LIKE ?',
    [`%プログラミング%`]
);
```

これにより実際のSQLを学びながら、ブラウザで動作するアプリ開発が可能です。

### 2. コンポーネント設計の学習

アプリケーションはモジュール分割されており、各コンポーネントの役割が明確です：

```javascript
// データアクセス層
export class SQLInterface {
    // SQLライクなクエリ実行の仕組み
}

// ビジネスロジック層
export class BookDatabase {
    // データベース操作のラッピング
}

// プレゼンテーション層
class BookApp {
    // UIとの連携、イベント処理
}
```

この構造により、ソフトウェア設計の基本原則も学べます。

### 3. 非同期処理の実践

現代のWebアプリに不可欠な非同期処理（Promise, async/await）を実践的に学べます：

```javascript
async searchBooks(keyword) {
    try {
        const books = await this.db.searchBooks(keyword);
        this.displayBooks(books);
    } catch (error) {
        this.showError('検索に失敗しました');
    }
}
```

## 授業での活用方法

### 初級者向け（中学生レベル）

1. **完成品を触ってみる**
   - アプリの動作確認
   - データの入力、検索、編集を体験

2. **HTMLの修正**
   - タイトルやラベルの変更
   - 色やデザインの調整

3. **簡単な機能追加**
   - 並び替えボタンの追加
   - 本の表紙URL入力欄の追加

### 中級者向け（高校生レベル）

1. **データモデルの拡張**
   - 新しいフィールド（ジャンル、出版社など）の追加
   - リレーションの実装（著者テーブルとの連携など）

2. **機能の拡張**
   - グラフ表示機能の追加（Chart.jsなどを使用）
   - カレンダー表示の実装

3. **UIの改良**
   - モバイル対応の強化
   - ダークモードの実装

### 上級者向け（大学生・社会人レベル）

1. **アーキテクチャの改良**
   - MVCパターンへの再構築
   - テスト自動化の導入

2. **機能の高度化**
   - リアルタイム同期機能の追加（Firebase連携など）
   - PWA化（Service Workerの実装）

## テンプレートからの発展例

このテンプレートは「本管理」に限定されません。以下のような応用が可能です：

1. **学校の成績管理アプリ**
   - テストの点数記録と統計
   - 進捗グラフの表示

2. **日記・メモアプリ**
   - 日々の記録
   - 画像添付機能

3. **イベント管理アプリ**
   - 学校行事のスケジュール管理
   - 出欠管理機能

## 始め方

1. GitHub（[リポジトリURL: web-db-learning-template](https://github.com/chnmotoTmz/browser-database-tutorial)）からコードをダウンロード
2. `index.html` をブラウザで開く
3. コードを読み解きながら機能を確認
4. 自分なりに機能を拡張してみる

## ファイル構成

```
.
├── index.html       # メインのHTMLファイル
├── js/              # JavaScriptファイル
│   ├── main.js      # メインのアプリケーションロジック
│   └── db/          # データベース関連
│       ├── BookDatabase.js    # 本データベースのクラス
│       └── SQLInterface.js    # SQLライクなインターフェース
└── README.md        # このファイル
```

## まとめ

このテンプレートは「実践的なプログラミング学習」のために開発されました。単に動くアプリを作るだけでなく、Webアプリケーション開発の基礎概念を学べるよう設計されています。

特に、SQLの学習とブラウザベースのデータベース操作を組み合わせた点が特徴で、環境構築の手間なく本格的な開発手法を学ぶことができます。

教育現場や自己学習に活用いただければ幸いです。

## ライセンス

MITライセンスの下で公開しています。教育目的での利用や改変は自由に行っていただけます。