【ITニュース解説】Flores amarillas
2025年09月19日に「Dev.to」が公開したITニュース「Flores amarillas」について初心者にもわかりやすく解説しています。
ITニュース概要
開発者向けサイトdev.toで、Brian Ramirez氏が「Flores amarillas（黄色い花）」というタイトルのPenを公開した。これは自身が作成したコードデモやプロジェクトを紹介するものだ。
ITニュース解説
今回解説する「Flores amarillas」という記事は、Web上で手軽にコードを記述し、実行結果をすぐに確認できる開発環境を用いて作られた、ブラウザ上で黄色い花びらが舞い落ちるアニメーションを表現している作品だ。これはWebサイトやWebアプリケーションを構成する基本的な技術であるHTML、CSS、JavaScriptがどのように組み合わされて動的なコンテンツを作り出しているかを理解するのに非常に良い例となる。システムエンジニアを目指す上で、これらの技術はWeb開発の基盤となるため、その役割と連携の仕組みを詳しく見ていこう。
まず、Webページは大きく分けて三つの要素で成り立っている。一つ目はHTML（HyperText Markup Language）で、これはページの骨組みや構造を定義する役割を担う。例えば、見出しや段落、画像、リンクといった要素がどこに配置されるかを決めるのがHTMLだ。二つ目はCSS（Cascading Style Sheets）で、これはHTMLで定義された要素の見た目を装飾する役割を持つ。文字の色や大きさ、背景画像、配置、さらにはアニメーションといった視覚的な表現を制御するのがCSSだ。そして三つ目はJavaScriptで、これはWebページに動きや対話性を持たせるプログラミング言語だ。ユーザーの操作に応じて内容を変化させたり、データを送受信したり、今回のアニメーションのように動的な要素を生成・制御したりするのがJavaScriptの役割となる。
この「Flores amarillas」の例では、通常HTMLで記述するような「花びら」の要素は、初期のHTMLファイルには直接書かれていない。その代わりに、JavaScriptが動的に新しいHTML要素を作り出し、それをページに追加している。具体的には、JavaScriptが<div>という汎用的なHTML要素を生成し、それを花びらとして利用している。このようにJavaScriptを使うことで、ページの内容をプログラムで自由に操作でき、決まった形ではない様々な表現が可能になる。
次に、CSSによる見た目の制御とアニメーションの仕組みを見てみよう。花びらの基本的な見た目はCSSで定義されている。生成された<div>要素には「flor」というクラス名が付けられており、このクラスに対してCSSが様々なスタイルを適用する。例えば、position: absoluteは要素を親要素の枠にとらわれずに自由に配置できるようにする設定で、花びらが画面上のどこにでも現れることを可能にする。widthとheightで花びらの大きさを決め、background-colorで色を黄色に設定している。border-radiusは要素の角を丸くするプロパティで、これを適切に設定することで四角い<div>が丸みを帯びた花びらの形に見えるようになる。
さらに重要なのが、CSSによるアニメーションの定義だ。CSSには@keyframesというルールがあり、これを使って時間経過とともに要素のスタイルをどのように変化させるかを細かく指定できる。この例では「opacity-animation」と「move-animation」という二つのアニメーションが定義されている。「opacity-animation」は花びらの透明度（opacity）を0（完全に透明）から1（完全に不透明）へ、そしてまた0へと変化させることで、花びらがふわっと現れて消えていく様子を表現している。「move-animation」は、花びらの位置や回転角度を変化させる。transform: translateは要素をX軸（横方向）やY軸（縦方向）に移動させ、transform: rotateは要素を回転させるプロパティだ。これらを組み合わせることで、花びらが画面を移動しながらくるくると舞い落ちる動きを作り出している。これらの@keyframesで定義されたアニメーションは、CSSのanimationプロパティを使って花びらの要素に適用される。animationプロパティには、アニメーションの名前、持続時間、遅延時間、繰り返し方など、様々な設定を含めることができ、花びらが一つ一つ異なるタイミングで、異なる速さで動くように調整されている。
最後に、JavaScriptによる動的な動きの制御だ。このアニメーションの核心はJavaScriptのコードにある。まず、document.addEventListener('DOMContentLoaded', ...)という記述は、Webページが完全に読み込まれてからJavaScriptのコードを実行するためのものだ。これにより、HTML要素やCSSスタイルが準備できていない状態でスクリプトが動いてしまうことを防ぐ。
JavaScriptにはcreateFlor()という関数が定義されており、これが花びらを一つ生成し、画面に配置する一連の処理を担当している。この関数の中では、前述したようにdocument.createElement('div')で新しい<div>要素を作成し、classList.add('flor')でCSSで定義された「flor」クラスを付与している。花びらが毎回異なる位置や大きさで現れるのは、Math.random()というJavaScriptの関数がランダムな数値を生成しているためだ。このランダムな数値を使って、花びらの初期のtop（上端からの距離）やleft（左端からの距離）、width、heightが計算される。また、アニメーションの開始タイミングや持続時間もランダムに設定されているため、すべて同じ動きではなく、自然に舞い落ちるような多様な動きが生まれる。
花びらが生成されたら、document.body.appendChild(flor)という命令で、作成した花びらの要素をWebページの<body>要素の最後に追加している。これにより、花びらが実際に画面上に表示される。さらに、setTimeout(() => flor.remove(), duration * 1000 - 100)という記述も重要だ。これは、花びらがアニメーションを終えた後、一定時間が経過したらその要素をWebページから削除するための処理だ。もしこの処理がなければ、一度生成された花びらがずっとページ上に残り続け、無数の要素が溜まってブラウザの動作が重くなる原因となる。不要になった要素を適切に削除することは、Webアプリケーションのパフォーマンスを維持する上で非常に重要な考え方だ。
そして、setInterval(createFlor, 300)という記述が、このアニメーション全体を動かすトリガーとなっている。これは、「300ミリ秒（0.3秒）ごとにcreateFlor()関数を繰り返し実行しなさい」という指示だ。この命令があることで、途切れることなく新しい花びらが生成され続け、画面全体に花びらが舞い落ちる美しいアニメーションが実現されている。
このように、「Flores amarillas」は、HTMLで骨組みを作り、CSSで見た目やアニメーションのルールを定義し、JavaScriptでそれらの要素を動的に生成・制御することで、複雑なアニメーションを実現している。これはWebサイトやアプリケーション開発における基本的な技術連携の一例であり、システムエンジニアを目指す上で、これらの技術がそれぞれどのような役割を持ち、どのように連携し合うのかを理解することは非常に重要だ。この基礎をしっかりと学ぶことが、将来的に複雑なシステムを構築するための第一歩となる。