【ITニュース解説】Quieres Ser Mi Novia?

この記事では、Webページ上で「僕のガールフレンドになってくれる？」という問いかけに対し、「はい」と「いいえ」の二つの選択肢があるインタラクティブなアプリケーションが紹介されている。ユーザーが「はい」ボタンを押せば肯定的なメッセージが表示され、「いいえ」ボタンにカーソルを合わせるとボタンが逃げるように動く、というユニークな動作が実装されている。これはWeb開発の基礎的な技術を組み合わせて作られた良い例だ。

このアプリケーションは、主にHTML、CSS、JavaScriptという三つの言語によって構成されている。システムエンジニアを目指す上で、これらフロントエンド開発の基本を理解することは非常に重要である。

まずHTML（HyperText Markup Language）は、Webページの骨格を作る言語だ。この記事で紹介されているアプリケーションでは、質問文のテキストや「はい」「いいえ」の各ボタンがHTMLで定義されている。例えば、<p>タグは段落、<button>タグはボタンといった具合に、コンテンツの種類や構造をマークアップする役割を担う。HTMLだけではデザイン性のないシンプルな構造になるが、これがなければページ上に何も表示されない。各要素にはid属性が与えられており、JavaScriptから特定の要素を識別し、操作するための目印になっている。

次にCSS（Cascading Style Sheets）は、HTMLで作られた骨格に装飾を施し、見た目を整える言語だ。アプリケーションの背景色、テキストのフォントやサイズ、ボタンの色や形、そしてボタンがクリックされたりマウスオーバーされたりしたときのアニメーション効果などは全てCSSによって定義されている。例えば、background-colorで背景色を指定し、font-sizeで文字の大きさを調整する。特に注目すべきは、ボタンがページの中央に配置されたり、ページ全体がフェードインして表示されたりするアニメーションだ。これは@keyframesルールを使って動きの段階を定義し、animationプロパティでその動きを要素に適用することで実現されている。また、「いいえ」ボタンがマウスカーソルを乗せると少し拡大する動きは、transform: scale()プロパティと:hoverという擬似クラスを組み合わせることで実現されており、ユーザーの操作に対する視覚的なフィードバックを与えている。

そしてJavaScriptは、Webページに動きやインタラクティブな機能を追加するプログラミング言語である。このアプリケーションの最も特徴的な機能、すなわち「はい」ボタンを押すとメッセージが表示されることや、「いいえ」ボタンが逃げるように動くことは、JavaScriptによって制御されている。具体的には、JavaScriptはまずdocument.getElementById()メソッドを使って、HTMLで定義された特定の要素（ここでは「はい」ボタンと「いいえ」ボタン）を取得する。次に、addEventListener()メソッドを使って、それらの要素に対して特定のイベント（例えばボタンがクリックされたり、マウスが要素に乗ったりするイベント）が発生したときに、あらかじめ定義しておいた処理を実行するように設定する。

「はい」ボタンの場合、クリックイベントが発生すると、alert()関数が呼び出され、「知ってたよ！愛してる❤️」というメッセージがダイアログ形式で表示される。これは、ユーザーのアクションに対してプログラムが反応する基本的なインタラクションだ。

一方、「いいえ」ボタンにはさらに工夫が凝らされている。ユーザーが「いいえ」ボタンにマウスカーソルを合わせる（mouseoverイベント）と、JavaScriptが実行され、ボタンの位置をランダムに変更する処理が動作する。これはMath.random()関数を使って画面内のどこかに表示される座標を計算し、noBtn.style.leftやnoBtn.style.topといったプロパティを動的に変更することで、ボタンがユーザーから逃げるように見せている。このように、JavaScriptはHTML要素の見た目や位置をリアルタイムで変更する（これをDOM操作と呼ぶ）能力を持っているため、ユーザー体験を豊かにする多様なインタラクションを実現できる。

このアプリケーションはCodePenというWebサービス上で作成・公開されており、HTML、CSS、JavaScriptのコードが一体となって動作する様子をブラウザ上で簡単に確認できる。このようなプラットフォームは、システムエンジニアを目指す初心者にとって、実際にコードを書いてその結果をすぐに確認できるため、学習の場として非常に有効だ。

このシンプルなアプリケーションは、Web開発の最も基本的な要素である構造（HTML）、見た目（CSS）、動き（JavaScript）がどのように連携して機能するのかを具体的に示している。それぞれの言語が独立した役割を持ちながらも、互いに協力し合うことで、ユーザーにとって魅力的で機能的なWebページを作り上げていることがわかる。システムエンジニアにとって、このようなフロントエンドの基礎知識は、大規模なシステム開発においても、ユーザーインターフェースやユーザー体験を理解する上で不可欠な要素となる。実際に手を動かしてコードを試すことで、これらの技術が持つ可能性と面白さを実感できるだろう。