19日目: プログラミングの楽しさを感じる

田中一郎は、これまでの努力と家族の支えを胸に、今日は改めて「プログラミングの楽しさを感じる」ことに焦点を当てて学習を進めることにした。
これまで学んできた技術を活かしながら、もっと自由な発想でコードを書いてみることで、エンジニアとしての創造力を広げていこうと考えた。

朝、一郎はリビングでコーヒーを飲みながら、今日は何を作ろうかとワクワクしていた。
「今日は、ルールに縛られずに自由にコードを書いてみよう」と決意し、自分が楽しいと思えるアイデアを形にすることに集中することにした。

アイデアの発案

一郎は、まずどんなプログラムを作るかを考え始めた。
これまで学んできたHTML、CSS、JavaScriptを使って、何か面白いものを作りたいと思った。
そこで、「シンプルだけど、視覚的に楽しめるゲームのようなものを作ってみよう」とアイデアが浮かんだ。

一郎が考えたのは、ユーザーがクリックするとランダムなメッセージや画像が表示されるシンプルなゲームだった。
「プログラミングの自由さを感じることができるし、作っていても楽しいはずだ」と考え、一郎はさっそくコーディングに取り掛かった。

コーディングの開始

まず、一郎はHTMLでページの基本構造を作成し、CSSでデザインを整えた。
シンプルなボタンと、メッセージや画像が表示されるスペースを設け、
視覚的にも楽しめるように工夫を凝らした。
「見た目にもこだわることで、作る楽しさが倍増する」と感じた。

次に、JavaScriptを使ってボタンがクリックされた際に、ランダムなメッセージや画像が表示されるようにプログラムを組んだ。
「このランダム要素が、ユーザーに予測できない楽しさを与えるはずだ」と期待しながら、コードを書き進めた。

const messages = ["今日はいい日になるよ！", "新しいことに挑戦しよう！", "一歩一歩進んでいこう！"];
const images = ["image1.jpg", "image2.jpg", "image3.jpg"];

document.getElementById("surpriseButton").addEventListener("click", function() {
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
const randomImage = images[Math.floor(Math.random() * images.length)];

document.getElementById("message").textContent = randomMessage;
document.getElementById("image").src = randomImage;
});

このコードでは、ユーザーがボタンをクリックすると、ランダムに選ばれたメッセージと画像が表示される。
シンプルだが、何が表示されるか予測できないワクワク感が楽しさを生み出してくれる。

完成と遊び心

数時間の作業の後、一郎は自分が思い描いた通りのシンプルなゲームを完成させた。
ボタンをクリックするたびに新しいメッセージや画像が表示される様子を見て、
「プログラミングって、こんなに自由で楽しいんだ」と心から感じた。

夜、美咲と愛にこのゲームを見せたところ、二人とも楽しそうにボタンをクリックしながら、
次に何が出るかを楽しんでいた。「これはすごく面白いわ！」と美咲が笑顔で言い、愛も「またやってみたい！」と大喜びだった。

一郎は、「プログラミングは単なる仕事のためのスキルではなく、創造力を活かして楽しむことができるんだ」と改めて感じ、これからも楽しいアイデアを形にしていこうという気持ちが強まった。

---

次回予告

次回、田中一郎はプログラミングの楽しさをさらに広げるため、複雑な機能を取り入れたプロジェクトに挑戦します。新たな挑戦と成長が描かれる次回もお楽しみに！