【Phase 2】新しい学習方法で初めての作品完成：クリックカウンター

新しい学習方法を決めた初日。YouTube/Qiitaで情報収集しながら、AIと一緒にクリックカウンターを作成しました。「教材に沿う」から「自分で作る」への転換、初実践の記録です。

公開URL: https://dondokoboy.github.io/counter/

新しい学習方法の初実践

決めたこと

Phase 2から学習方法を変更：

3本柱:

  1. Progate（体系的な基礎学習）
  2. YouTube/Qiita（実践的な情報収集）
  3. AI（サポート・解説）

今日はこの新しい方法の初実践日

Step 1: 情報収集（10分）

YouTube検索

検索キーワード: 「JavaScript クリックカウンター」

視聴した動画:

  1. https://youtu.be/ngCfCj6-rag
  2. https://youtu.be/6YXCbTouvdA

感想:

  • 大枠の構造は理解できた
  • HTML/CSSはシンプルで分かりやすい
  • DOMの部分は知らない単語が多く理解しきれなかった
  • <script>タグでJavaScriptを書き込めることを知った
  • addEventListenerで動作を定義できる
  • innerHTMLでテキストを表示

Qiita検索

検索キーワード: 「JavaScript カウンター 作り方」

読んだ記事:

  • https://qiita.com/sukoshi-kaizen/items/2882937b0d99c7b8c2dd

感想:

  • 今回の制作物に一番近い形
  • 少し複雑なことをしていそう
  • 情報が古いのは気になる

情報収集の成果

✅ 複数のソースを確認
✅ 大枠の流れを理解
✅ 分かること・分からないことを明確化
✅ 新しい発見（<script>、addEventListenerなど）

完全に理解できなくても問題なし。まず雰囲気をつかむことが重要。

Step 2: ファイル構成を決める

作成したファイル

counter/
  ├── index.html      ← ページの構造
  ├── style.css       ← デザイン
  └── script.js       ← JavaScript（動き）

3つのファイルに分けるのが基本。

Step 3: HTMLを作る

index.html

ポイント:

  • タイトル、カウント表示、2つのボタン
  • ID属性（id="countDisplay"など）でJavaScriptから要素を取得
  • <script src="script.js">で外部JavaScriptファイルを読み込む
  • </body>の直前に配置（重要）

初回確認

ブラウザで開くと：

  • デザインなしの素のHTML
  • ボタンはあるが、クリックしても何も起きない

これでOK。まずは構造だけ。

Step 4: CSSでデザイン

style.css

デザインの特徴:

  • 紫のグラデーション背景
  • 白いカードデザイン
  • カウント数字を大きく表示（80px）
  • ホバー効果（マウスを乗せると浮く）
  • レスポンシブ対応（スマホでも見やすい）

CSSのポイント

グラデーション背景:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

ホバー効果:

.increment-btn:hover {
  transform: translateY(-2px);
}

レスポンシブ対応:

@media (max-width: 480px) {
  /* スマホ用のスタイル */
}

Step 5: JavaScriptで機能を追加

script.js

// 1. HTML要素を取得
const countDisplay = document.getElementById('countDisplay');
const incrementBtn = document.getElementById('incrementBtn');
const resetBtn = document.getElementById('resetBtn');

// 2. カウント用の変数
let count = 0;

// 3. +1ボタンがクリックされたときの処理
incrementBtn.addEventListener('click', () => {
  count++;
  countDisplay.textContent = count;
});

// 4. リセットボタンがクリックされたときの処理
resetBtn.addEventListener('click', () => {
  count = 0;
  countDisplay.textContent = count;
});

コードの流れ

  1. 要素を取得（getElementById）
  2. 変数を用意（let count = 0）
  3. クリックを検知（addEventListener）
  4. カウントを増やす（count++）
  5. 画面に表示（textContent）

DOMで学んだことがそのまま使えた！

Step 6: 動作確認

テスト結果

✅ +1ボタンをクリック → 数字が増える
✅ 何回もクリック → どんどん増える
✅ リセットボタンをクリック → 0に戻る

完璧に動作！

Step 7: GitHubにアップロード

コマンド実行

git init
git remote add origin https://github.com/dondokoboy/counter.git
git branch -M main
git add .
git commit -m "クリックカウンター完成"
git push -u origin main

小さなミス

エラー: zsh: command not found: remote

原因: git が抜けていた

正しいコマンド:

git remote add origin https://github.com/dondokoboy/counter.git

すぐに修正して成功！

Step 8: GitHub Pagesで公開

手順

  1. リポジトリの Settings → Pages
  2. Source: main / root
  3. Save

公開完了

URL: https://dondokoboy.github.io/counter/

世界中からアクセス可能！

新しい学習方法の評価

良かった点

情報収集が役立った:

  • YouTubeで全体像を把握
  • Qiitaでコードの雰囲気をつかめた
  • 「完全に理解できなくてもOK」という姿勢

AIと一緒に作る安心感:

  • ステップバイステップで迷わない
  • 分からないことをすぐ質問できる
  • 理解しながら進められる

Progateで学んだことが活きた:

  • DOMの復習が役立った
  • addEventListenerの知識が活きた
  • 基礎があるから応用できた

難しかった点

知らない単語が多い:

  • 動画・記事で出てくる用語が分からない
  • でも、AIが解説してくれるので問題なし

完全に理解できない部分もある:

  • でも、「動くものができた」ことが重要
  • 完璧を求めず、まず作ることを優先

技術的な学び

DOM操作

要素の取得:

document.getElementById('id名')

内容の変更:

element.textContent = 新しい値;

イベント処理

クリックを検知:

button.addEventListener('click', () => {
  // クリックされたときの処理
});

変数の更新

カウントを増やす:

count++;  // count = count + 1 と同じ

カウントをリセット:

count = 0;

Phase 2 Day 2の全体成果

午前

✅ 自己紹介ページ改善（写真・進捗追加）
✅ Week 2の準備（JavaScript復習）
✅ DOM学習

午後

✅ 新しい学習方法を決定
✅ 情報収集の実践
✅ クリックカウンター完成・公開

記事作成

✅ Phase 2 Day 2記録
✅ DOM学習
✅ 新しい学習方法の決定
✅ クリックカウンター作成記録

本日の記事数: 4本
累計記事数: 65本（投稿後）

感想

「自分で作れた」という実感

Phase 1では、Progateの指示に従って進めるだけでした。

今回は：

  1. 自分で情報を集めて
  2. AIと相談しながら
  3. 実際に動くものを作って
  4. 公開した

「自分で作った」という実感が強い。

新しい学習方法への手応え

3本柱:

  • Progate（基礎）
  • YouTube/Qiita（情報収集）
  • AI（サポート）

この組み合わせが、とても良いバランスだと感じました。

不安は減った

「自分で作れるのか？」という不安がありましたが、

  • 情報収集の仕方が分かった
  • AIと一緒なら作れることが分かった
  • 小さく始めれば大丈夫だと分かった

不安より、「もっと作りたい」という気持ちが強くなりました。

次のステップ

追加機能の実装（やりたければ）

  • -1ボタン
  • 目標達成メッセージ
  • カウント速度の表示
  • アニメーション効果

または次の作品へ

  • じゃんけんゲーム
  • 簡単な計算機
  • その他

Phase 2、本格的にスタートしました。

新しい学習方法で、初めての作品が完成。

「教材に沿う」から「自分で作る」への転換、成功です。

コメント