14日目: 動的なウェブページの作成

田中一郎は、前日にJavaScriptの基本を徹底的に学び直したことで、再び自信を取り戻した。
今日はその学んだ知識を活かして、「初めての動的なウェブページの作成」に挑戦することに決めた。
これまでに学んだHTML、CSS、そしてJavaScriptを組み合わせて、より動的で魅力的なウェブページを作り上げることが目標だ。

一郎は、早朝からリビングに座り、ノートパソコンを開いて準備を始めた。
今日作るウェブページは、ユーザーがボタンをクリックするとメッセージが表示されるシンプルなものだが、JavaScriptを使って動きを加えることで、より洗練されたページに仕上げる予定だ。

プロジェクトの設計

まず、一郎はどのようなインタラクションをページに加えるかを設計した。
シンプルなボタンと、そのボタンをクリックした際に表示されるメッセージがメインの機能だ。
これに加え、少し凝ったデザインを取り入れることで、見栄えを良くし、ユーザーの体験を向上させることを目指した。

一郎は次のステップを計画した：

1. HTMLで基本構造を作成 – ページのレイアウトを決定し、
   必要な要素（ボタンや表示領域など）を配置。
2. CSSでデザインを整える – 色合いやフォント、ボタンのスタイルを設定し、
   ページ全体のビジュアルを向上。
3. JavaScriptでインタラクションを実装 – ボタンのクリックイベントをJavaScriptで処理し、
   メッセージを表示する機能を実装。

コーディングの開始

まず一郎は、HTMLでページの基本構造を作成した。<button>タグを使ってクリックボタンを設置し、メッセージが表示されるための<div>要素を用意した。
「HTMLはページの骨組みだ。ここをしっかり作らないと後が大変になる」と気を引き締めた。

次に、CSSでページのデザインを整えた。ボタンの見た目をスタイリッシュにし、マウスオーバー時に色が変わるようなエフェクトを加えた。
また、ページ全体の配色を統一し、視覚的に心地よいデザインを目指した。
「デザインも大切だ。見た目が良いと、ユーザーにとっても使いやすい」と感じた。

最後に、一郎はJavaScriptでボタンのクリックイベントを実装した。
ユーザーがボタンをクリックすると、<div>要素内にメッセージが表示されるようにコードを書いた。さらに、メッセージがフェードインするアニメーションを加え、より動的な要素を取り入れた。

document.getElementById("myButton").addEventListener("click", function() {
    const messageDiv = document.getElementById("message");
    messageDiv.textContent = "ボタンがクリックされました！";
    messageDiv.style.opacity = 0;
    setTimeout(function() {
        messageDiv.style.opacity = 1;
    }, 100);
});

成功と充実感

一郎は数時間の作業の末、ついに動的なウェブページを完成させた。
ボタンをクリックすると、メッセージがスムーズに表示される様子を見て、「自分が学んだことが確実に形になっている」と感じ、大きな達成感を得た。

夜、美咲にページを見せると、「すごいわ、これがあなたの作ったページなの？動きがあってとても素敵ね！」と感動してくれた。
美咲の言葉に一郎は喜びを感じ、さらに次のステップへ進む意欲が湧いてきた。

こうして、一郎はJavaScriptを使って初めての動的なウェブページを作成することができた。
今後は、さらに複雑な機能やインタラクションを取り入れ、エンジニアとしてのスキルを一層高めていく計画を立てた。

---

次回予告

次回、田中一郎はさらに高度なJavaScriptの技術を学び、複数の機能を組み合わせたアプリケーション作成に挑戦します。エンジニアとしての道を進む一郎の成長が描かれる次回もお楽しみに！