Simple Counter

シンプルなカウンターアプリケーション - TypeScript/React への移行準備段階

概要

このプロジェクトは、基本的な Web テクノロジー（HTML、CSS、JavaScript）を使用したシンプルなカウンターアプリケーションです。将来的に TypeScript や React へのスケールアップを見据えた学習用プロジェクトとして設計されています。

機能

• カウント表示: 現在のカウント数を大きく表示
• カウントアップ: ボタンクリックでカウントを 1 ずつ増加
• レスポンシブデザイン: スタイリッシュなマーブル背景とホバーエフェクト
• アニメーション: ボタンホバー時とボックスホバー時のスムーズなトランジション

技術スタック

• HTML5: セマンティックなマークアップ
• CSS3: フレックスボックス、トランジション、疑似要素を活用
• Vanilla JavaScript: DOM 操作とイベント処理

ファイル構成

simple-counter/
├── index.html          # メインのHTMLファイル
├── style.css           # スタイルシート
├── script.js           # JavaScript ロジック
└── img/
    └── Stylish_Marble2025_4.png  # 背景画像

使用方法

1. プロジェクトフォルダをローカルに配置
2. index.htmlをブラウザで開く
3. "Count Up"ボタンをクリックしてカウントを増加

コード解説

HTML 構造

• セマンティックなマークアップでアクセシビリティを考慮
• id属性を使用して JavaScript との連携を明確化

CSS 特徴

• フレックスボックス: 中央配置レイアウト
• 疑似要素: ::beforeと::afterを使用した装飾的なボーダーエフェクト
• トランジション: 0.3s〜0.5s のスムーズなアニメーション
• ホバーエフェクト: ボタンとボックスの双方向インタラクション

JavaScript 機能

• DOM 操作: getElementByIdでエレメント取得
• イベントハンドリング: addEventListenerでクリックイベント処理
• 状態管理: count変数でアプリケーション状態を管理

今後の課題

このプロジェクトは以下の技術への移行を想定しています：

TypeScript 移行

• 型安全性の向上
• より保守性の高いコード

学習ポイント

1. DOM 操作の基礎: 基本的な DOM 要素の取得と操作
2. イベント処理: ユーザーインタラクションの処理方法
3. 状態管理: アプリケーションの状態を JavaScript で管理
4. CSS 設計: 再利用可能で保守性の高いスタイル設計
5. レスポンシブデザイン: 様々な画面サイズへの対応