Posted by Kousukei
はじめに (対象読者・この記事でわかること)
この記事は、Webページに動きやインタラクティブな要素を追加したいと考えているプログラミング初学者の方や、JavaScriptとSVGを使った表現に興味がある方を対象としています。
この記事を読むことで、以下のことがわかるようになります。
- SVG（Scalable Vector Graphics）の基本的な使い方と、JavaScriptでの操作方法。
- マウスの動きに反応するmousemoveイベントの活用方法。
- setInterval関数を使った定期的な処理（アニメーション）の実現方法。
- これらを組み合わせ、ユーザーのマウス操作に反応して動的に描画されるインタラクティブなWebコンテンツを作成する具体的な手順。
Webサイトに訪問者が「おっ！」と感じるような、ちょっとした驚きや楽しさをもたらすインタラクティブな表現は、ユーザー体験を豊かにします。本記事では、その一歩としてマウス追従型の描画を題材に、JavaScriptとSVGの強力な連携を探求します。
前提知識
この記事を読み進める上で、以下の知識があるとスムーズです。 - HTML/CSSの基本的な知識（要素の配置、スタイリングなど） - JavaScriptの基本的な構文（変数、関数、DOM操作の基礎、イベントリスナー）
インタラクティブなSVG描画の魅力と基礎
Web上でグラフィックを扱う際、画像ファイル（JPEG, PNGなど）が一般的ですが、SVG（Scalable Vector Graphics）はベクター形式のグラフィックであり、多くの点でユニークな利点を持っています。SVGはXMLベースの形式で記述され、拡大・縮小しても画質が劣化せず、またJavaScriptから各要素を直接操作できる点が大きな魅力です。これにより、単なる静的な画像ではなく、ユーザーの操作に反応して動的に変化するインタラクティブなグラフィックを実現できます。
特に、JavaScriptのmousemoveイベントは、ユーザーがマウスカーソルを動かすたびに発生し、その座標情報をリアルタイムで取得できます。このイベントを活用することで、カーソルの位置に合わせて要素を移動させたり、エフェクトを変化させたりといった、直感的なインタラクションをデザインできます。さらに、setInterval関数は、指定した間隔で繰り返し処理を実行するために使われます。これをmousemoveイベントと組み合わせることで、マウスの軌跡に沿って図形を連続して描画したり、時間の経過とともに変化するアニメーション効果を加えたりすることが可能になります。例えば、マウスカーソルが通った後にキラキラと光るエフェクトを残したり、波紋が広がるような表現を生成したりすることができます。これらの組み合わせは、Webアプリケーションやポートフォリオサイト、ゲームなど、多様な場面でユーザーの目を引く動的な表現を創出する基盤となります。
JavaScriptで実現するマウス追従型SVGアニメーションの実装
ここでは、マウスの動きに追従してSVGで光の軌跡のようなものを描画する具体的な方法を、ステップバイステップで解説します。
ステップ1: SVGコンテナの準備と基本要素の描画
まず、HTMLファイルにSVG要素を配置し、JavaScriptから操作できるように準備します。
Html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVG Mouse Trail</title> <style> body { margin: 0; overflow: hidden; /* スクロールバーを非表示にする */ background-color: #1a1a1a; cursor: none; /* デフォルトのマウスポインタを非表示にする */ } svg { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #1a1a1a; } </style> </head> <body> <svg id="mySvg"></svg> <script> const svg = document.getElementById('mySvg'); const trailElements = []; // 軌跡の要素を保持する配列 const maxTrailElements = 50; // 最大の軌跡要素数 let mouseX = 0; let mouseY = 0; // SVG要素の作成ヘルパー関数 function createSvgElement(tag, attributes) { const element = document.createElementNS('http://www.w3.org/2000/svg', tag); for (const key in attributes) { element.setAttribute(key, attributes[key]); } return element; } </script> </body> </html>
ここでは、全画面を覆うSVG要素を用意し、背景色を設定しています。createSvgElementは、SVG要素を簡単に作成するためのユーティリティ関数です。
ステップ2: mousemoveイベントで座標を取得しSVG要素を追従させる
次に、mousemoveイベントを使ってマウスの現在位置を取得し、グローバル変数mouseXとmouseYに保存します。
Javascript// ... (省略) ... let mouseX = 0; let mouseY = 0; document.addEventListener('mousemove', (event) => { mouseX = event.clientX; mouseY = event.clientY; }); // ... (省略) ...
このコードにより、マウスが動くたびにmouseXとmouseYが最新のカーソル座標に更新されます。これらの座標を使って、後ほどSVG要素の位置を決定します。
ステEP3: setIntervalで定期的な描画更新と軌跡の生成
いよいよ、setIntervalを使って定期的に新しいSVG要素（ここでは小さな円）を生成し、古い要素をアニメーションさせながら削除していくことで、軌跡のような表現を作り出します。
Javascript// ... (省略) ... const trailElements = []; // 軌跡の要素を保持する配列 const maxTrailElements = 50; // 最大の軌跡要素数 // 軌跡の描画ロジック setInterval(() => { // 新しい円を作成 const circle = createSvgElement('circle', { cx: mouseX, cy: mouseY, r: 8, // 初期半径 fill: `rgba(255, 255, 255, 0.8)`, // 初期色 'pointer-events': 'none' // マウスイベントを透過させる }); svg.appendChild(circle); trailElements.push({ element: circle, opacity: 0.8, radius: 8 }); // 最大要素数を超えたら古いものを削除 if (trailElements.length > maxTrailElements) { const oldest = trailElements.shift(); // 先頭の要素を取り出す svg.removeChild(oldest.element); // DOMから削除 } // 既存の軌跡要素をアニメーションさせる trailElements.forEach(item => { item.opacity -= 0.03; // 透明度を徐々に下げる item.radius += 0.5; // 半径を徐々に大きくする item.element.setAttribute('fill', `rgba(255, 255, 255, ${item.opacity})`); item.element.setAttribute('r', item.radius); // 透明度が0以下になったらDOMから削除（ここではmaxTrailElementsで制御しているため、実際にはあまり発生しないが、保険として） if (item.opacity <= 0) { if (item.element.parentNode) { item.element.parentNode.removeChild(item.element); } // 配列からも削除するが、forEach内でspliceするとループが崩れるため、後でフィルタリングする } }); // 透明度が0以下の要素を配列から除去（必要に応じて） // trailElements = trailElements.filter(item => item.opacity > 0); // この行はmaxTrailElementsで制御するため省略可 }, 50); // 50msごとに実行（1秒間に20回）
このコードでは、50ミリ秒ごとに以下の処理を行います。
1. 現在のマウス位置に新しいcircle要素を作成し、SVGに追加します。
2. trailElements配列に新しい円の情報を追加します。
3. maxTrailElementsを超えた場合、最も古い円をDOMと配列から削除し、メモリ使用量を抑えます。
4. trailElements内のすべての円に対して、透明度を下げ、半径を大きくするアニメーションを適用します。これにより、円が徐々に消えながら広がる軌跡が表現されます。
ハマった点やエラー解決
1. パフォーマンス問題とDOM要素の大量生成
setIntervalで高速に要素を生成し続けると、DOM要素が大量に増え続け、ページの描画パフォーマンスが著しく低下する可能性があります。特に、古い要素を適切に削除しないとメモリリークの原因にもなります。
2. pointer-eventsの設定忘れ
SVG要素がマウスイベントをキャプチャしてしまうと、その下の要素（例えば他のHTML要素）でマウスイベントが発火しなくなってしまうことがあります。特に、マウスカーソル自体を非表示にしてカスタムカーソルをSVGで描画する場合などには、この問題に遭遇します。
3. 座標系のずれ
event.clientXやevent.clientYはブラウザのビューポートに対する座標を返しますが、SVG内部の座標系と異なる場合があります。特に、SVG要素がCSSで変換（transform）されている場合などには注意が必要です。
解決策
1. 要素数の管理と再利用
上記コード例ではmaxTrailElementsを設定し、古い要素をremoveChildで削除することで、DOM要素が無限に増え続けるのを防いでいます。より高度な最適化としては、要素を完全に削除するのではなく、DOMに残したまま属性（位置、透明度、サイズなど）をリセットして再利用する「要素プール」の概念があります。これは特に要素の生成・削除コストが高い場合に有効です。
2. pointer-events: none;の適用
SVG要素にpointer-events="none"属性（CSSでもpointer-events: none;）を設定することで、その要素がマウスイベントのターゲットになることを防ぎ、下の要素にイベントを透過させることができます。これにより、カスタムカーソルやアニメーション要素が他の要素のクリックやホバーを邪魔することを防げます。
Xml<circle cx="50" cy="50" r="10" fill="blue" pointer-events="none" />
3. getBoundingClientRect()による座標変換
SVG要素が配置されているコンテナ（HTMLの<body>など）に対してgetBoundingClientRect()を使うことで、SVG内部の座標系とビューポートの座標系との関係を正確に把握できます。これにより、イベント座標からSVG内部の正確な座標を計算し、要素を配置することができます。今回のシンプルな例では必要ありませんでしたが、SVGが拡大縮小されている場合や、特定の領域に配置されている場合に役立ちます。
Javascript// 例：SVG要素が特定の領域に配置されている場合 const svgRect = svg.getBoundingClientRect(); const relativeX = event.clientX - svgRect.left; const relativeY = event.clientY - svgRect.top; // circle.setAttribute('cx', relativeX); // circle.setAttribute('cy', relativeY);
まとめ
本記事では、JavaScriptのmousemoveイベントとsetIntervalを組み合わせることで、SVG要素を使ったインタラクティブなマウス追従型描画を実装する方法について解説しました。
- SVGの基本操作: JavaScriptからSVG要素を生成し、属性を変更することで動的にグラフィックを操作できることを学びました。
- イベント駆動のアニメーション:
mousemoveイベントでリアルタイムにマウス座標を取得し、描画に反映させる方法を理解しました。 - 時間駆動のアニメーション:
setIntervalを使って、一定間隔で新しい要素を追加し、既存の要素をアニメーションさせることで、軌跡のような効果を生み出す手順を確認しました。
この記事を通して、読者の皆さんはWebページにユーザーの操作に反応する動的な表現を追加する基本的なスキルを身につけ、WebアニメーションやインタラクティブなUI開発への理解を深めることができたでしょう。
今後は、requestAnimationFrameを使ったよりスムーズなアニメーションや、SVGフィルタを使った高度な視覚効果、さらにはCanvasAPIとの連携など、発展的な内容についても記事にする予定です。
参考資料
- MDN Web Docs: SVG
- MDN Web Docs: Element: mousemove event
- MDN Web Docs: setInterval()
- MDN Web Docs: Element.setAttribute()