バニラJavaScript、HTML、CSSのみで作成された、美しくインタラクティブなWebアプリケーションのコレクションです。外部ライブラリを使用せず、モダンなWeb技術の基礎を学べます。
デジタルとアナログの両方の表示形式を持つ、洗練されたデザインの時計アプリケーションです。
- デジタル・アナログ時計の同時表示
- 日本語での日付・曜日表示
- リアルタイム更新
- グラデーション背景とガラスモーフィズムデザイン
- レスポンシブ対応
clock-app.htmlをブラウザで開くだけで使用できます。
日本の伝統的なおみくじを再現した、インタラクティブな運勢占いアプリケーションです。
- 7種類の運勢（大吉、吉、中吉、小吉、末吉、凶、大凶）
- 和風デザインとアニメーション
- おみくじ筒を振るエフェクト
- 各運勢に応じた色とメッセージ
- ワンクリックでリセット機能
omikuji-app.htmlをブラウザで開き、「おみくじを引く」ボタンをクリックするか、おみくじの筒をクリックしてください。
日本に関する知識を楽しく学べる、インタラクティブな3択クイズアプリケーションです。
- 10問の日本に関するクイズ
- リアルタイムスコア表示
- プログレスバーで進捗状況を可視化
- 選択後に正解・不正解をアニメーション表示
- 最終結果に応じた評価メッセージ
- リトライ機能で何度でも挑戦可能
quiz-app.htmlをブラウザで開き、表示される問題に対して3つの選択肢から答えを選んでください。全問回答後、スコアと評価メッセージが表示されます。
基本的な四則演算ができる、スタイリッシュなデザインの電卓アプリケーションです。
- 四則演算（足し算、引き算、掛け算、割り算）
- パーセント計算
- 削除機能（最後の文字を削除）
- クリア機能（全てリセット）
- キーボード入力対応
- リップルエフェクトとアニメーション
- エラー処理（ゼロ除算など）
calculator-app.htmlをブラウザで開き、ボタンをクリックまたはキーボードで数字と演算子を入力してください。Enterキーまたは=ボタンで計算結果を表示します。
タスク管理ができる、シンプルで使いやすいTODOリストアプリケーションです。
- タスクの追加・削除
- 完了/未完了の切り替え
- フィルター機能（全て、未完了、完了）
- 統計情報の表示（全タスク数、未完了数、完了数）
- ローカルストレージによるデータ永続化
- スムーズなアニメーション効果
- 日付表示
todo-app.htmlをブラウザで開き、入力欄に新しいタスクを入力して「追加」ボタンをクリックしてください。タスクはブラウザを閉じても保存されます。
- バニラJavaScript: フレームワークやライブラリを使用せず、純粋なJavaScriptで実装
- レスポンシブデザイン: スマートフォンからデスクトップまで対応
- アニメーション: スムーズで魅力的な動きを実現
- 初心者向けコメント: 詳細な日本語コメントで学習をサポート
- 単一ファイル構成: 各アプリケーションは1つのHTMLファイルで完結
- HTML5: セマンティックなマークアップ
- CSS3: Flexbox、Grid、アニメーション、グラデーション
- JavaScript (ES6+): const/let、アロー関数、テンプレートリテラル
- レスポンシブ: メディアクエリによる適応的デザイン
以下のモダンブラウザで動作確認済み：
- Google Chrome（推奨）
- Mozilla Firefox
- Safari
- Microsoft Edge
これらのプロジェクトから学べる技術：
- 基本的な構造とセマンティックタグ
- IDとクラスの適切な使い方
- コメントの書き方
- Flexboxレイアウト
- グラデーションとエフェクト
- アニメーションとトランジション
- レスポンシブデザインの基礎
- 擬似クラスと擬似要素
- DOM操作（要素の取得と更新）
- イベントリスナーの設定
- 乱数の生成と使用
- タイマー関数（setInterval、setTimeout）
- 条件分岐と配列操作
- ローカルストレージの使用
- キーボードイベントの処理
各アプリケーションは簡単にカスタマイズできます：
/* 例：背景色を変更 */
body {
background: linear-gradient(135deg, #あなたの色1 0%, #あなたの色2 100%);
}// 例：サウンドエフェクトを追加
function playSound() {
const audio = new Audio('sound.mp3');
audio.play();
}JavaScript_Samples/
├── clock-app.html # モダン時計アプリ
├── omikuji-app.html # おみくじアプリ
├── quiz-app.html # 3択クイズアプリ
├── calculator-app.html # 電卓アプリ
├── todo-app.html # TODOリストアプリ
├── CLAUDE.md # Claude Code用の開発ガイド
└── README.md # このファイル（プロジェクトの説明書）
- 時計アプリ：アラーム機能、タイムゾーン切り替え
- おみくじアプリ：サウンドエフェクト、シェア機能、履歴保存
- クイズアプリ：問題カテゴリ選択、難易度設定、ランキング機能
- 電卓アプリ：関数電卓機能、計算履歴表示、メモリ機能
- TODOリストアプリ：期限設定、カテゴリ分け、優先度設定
このプロジェクトは自由に使用・改変できます。学習目的での利用を推奨します。
このプロジェクトは学習用のサンプルとして作成されました。ぜひ自由にカスタマイズして、自分だけのアプリケーションを作ってみてください！