【Phase 2 Day 2】自己紹介ページ改善とWeek 2の準備完了

Phase 2の2日目。自己紹介ページにプロフィール写真と学習進捗セクションを追加しました。また、Week 2で作るものを決定し、JavaScriptの復習も行いました。

午前：自己紹介ページの改善

目標

昨日公開した自己紹介ページをさらに良くする。

追加した内容

1. プロフィール写真の追加

ヘッダーに丸い写真を表示

HTML（追加部分）:

<header class="header">
  <img src="profile.jpg" alt="プロフィール写真" class="profile-image">
  <h1 class="name">パチョ</h1>
  <p class="tagline">AI時代に営業職からエンジニアを目指す学習記録</p>
</header>

CSS（追加部分）:

.profile-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;  /* 丸くする */
  object-fit: cover;
  border: 5px solid white;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

✅ プロフィール写真が丸く表示される

2. 学習の進捗セクションの追加

Phase 1〜3の進捗をビジュアル化

  • Phase 1: 完了（100%の緑色バー）
  • Phase 2: 進行中（10%の青色バー）
  • Phase 3: 未着手（0%のグレーバー）

特徴:

  • 進捗バーで視覚的に分かりやすく
  • 各Phaseの期間と詳細を記載
  • ✅、🔄、⏳のアイコンで状態を表示

GitHubへのプッシュ

昨日学んだ流れで、修正をGitHubにアップロード。

git add .
git commit -m "プロフィール写真と学習進捗セクションを追加"
git push

昨日より簡単！

初期設定が終わっているので、3つのコマンドだけで完了。

公開ページの確認

パチョの自己紹介 | AI時代に営業職からエンジニアを目指す
dondokoboy.github.io

✅ プロフィール写真表示
✅ 学習進捗セクション表示
✅ 反映成功

午後：Week 2の準備

Week 2の目標

JavaScriptで動きのあるものを1つ作る

期間：3/21（金）〜 3/27（木）

何を作るか決定

候補:

  1. 簡単な計算機
  2. じゃんけんゲーム
  3. クリックカウンター ← これに決定
  4. ストップウォッチ
  5. おみくじ

選んだ理由:

  • シンプルで分かりやすい
  • JavaScriptの基本を学べる
  • 初めての動くものに最適

クリックカウンターの仕様

基本機能（まず作る）

✅ カウント表示（0から始まる）
✅ クリックボタン（押すと+1）
✅ リセットボタン（0に戻す）

追加機能（余裕があれば）

  • -1ボタン
  • 目標設定（100回到達で祝福メッセージ）
  • 記録表示（最高記録を保存）
  • カウント速度（1秒あたり何回クリックしたか）
  • 音・効果（クリック時のアニメーション）

方針: まず基本機能を完成させる → 動いたら追加機能

JavaScriptの復習

Week 2に向けて、必要な知識を復習しました。

復習1: DOM操作

HTML要素を取得して変更する

// 要素を取得
const element = document.getElementById('message');

// 内容を変更
element.textContent = "新しいテキスト";

復習2: イベント処理

ボタンがクリックされたときに処理を実行

const button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log('クリックされました');
});

復習3: 変数の更新

カウントを増やす・リセットする

let count = 0;  // 初期値

count++;  // 1増やす
count = 0;  // リセット

実践例：簡単なカウンター

復習として、簡単なカウンターの仕組みを確認しました。

必要な知識:

  • getElementById() で要素を取得
  • addEventListener() でクリックを検知
  • textContent で表示を更新
  • count++ でカウントを増やす

これだけでクリックカウンターは作れる！

Week 2のスケジュール

3/21（金）: HTMLとCSS作成

  • ページの構造を作成
  • デザインを整える

3/22（土）: JavaScript実装

  • クリック機能
  • リセット機能
  • 動作確認

3/23（日）: 仕上げと公開

  • GitHubにアップロード
  • GitHub Pagesで公開

3/24（月）以降: 追加機能（余裕があれば）

  • -1ボタン、目標設定などを実装

Phase 2 Day 2の成果

作業内容

✅ プロフィール写真追加
✅ 学習進捗セクション追加
✅ VS Codeで編集
✅ Gitでプッシュ（3コマンドだけ、簡単になった）
✅ Week 2で作るものを決定
✅ JavaScriptの復習完了

学んだこと

Gitの流れに慣れてきた

昨日は初めてで色々なエラーが出たが、今日は：

git add .
git commit -m "メッセージ"
git push

この3つだけでスムーズに完了。

初期設定が終わっていると楽ということを実感しました。

小さく始めて、徐々に拡張する

クリックカウンターも、まず基本機能だけ作る。動いたら追加機能を入れる。

これが実際の開発の進め方だと理解しました。

感想

自己紹介ページの成長

Day 1（3/14）: 初めて公開
Day 2（3/15）: 写真と進捗セクションを追加

少しずつ改善していくことで、ページがより良くなっていく実感があります。

Week 2への準備

JavaScriptの復習をして、「これなら作れそう」という感覚が持てました。

Phase 1で学んだことが、実際に使えるという実感が出てきました。

開発の流れが身についてきた

1. VS Codeで編集
2. 保存してローカル確認
3. git add, commit, push
4. GitHubに反映
5. 公開ページに自動反映

この流れが自然にできるようになってきました。

Phase 2 Day 2、完了。

次は3/21（金）から、いよいよJavaScriptで動くものを作り始めます。

コメント