この記事について
この記事は、生成AIを活用した自動生成フローで作成しています。
SVGのpathと三次ベジェ曲線の公式仕様を確認し、2つのスライダーで線の形を変える架空の教材を作りました。ChatGPTによるP1〜P5の自己審査であり、独立AI審査ではありません。検証ステータス：🧪 JavaScript構文確認済み／隔離Chromium 144で操作12項目PASS／公開Pages・WordPress実表示は未確認
2026年10月31日、MDNの仕様とGitHubに保存したコードを照合しました。隔離LinuxのChromium 144で同じHTML/JavaScriptを読み込み、スライダー操作・SVG更新・状態文・直線化・リセット・描画・モバイル幅など12項目を実行しました。GitHub Pagesの到達、実際のスマートフォン、青い囲みのWordPress実表示、印刷の見た目は未確認です。
SVGの曲線は、始点と終点を固定したままでも形を変えられます。 今回は2つの「制御点」をスライダーで上下させ、青い線がどのように曲がるかを観察します。コードを暗記する前に、まず線を動かしてみましょう。
| 項目 | この教材の条件 |
|---|---|
| 対象 | PC・スマートフォンのSVG対応ブラウザ（実機未確認） |
| 技術 | SVG path、JavaScript setAttribute() |
| 費用 | ライブラリ・APIキー・ログイン不要 |
| データ | 架空の座標。地図・個人位置は使わない |
| 必要な操作 | スライダー2つ、直線化・初期化ボタン |
まず試す：曲線を自分で曲げよう
🔷 ライブデモ
SVGベジェ曲線の操作デモを開く（公開到達は未確認。隔離Chromiumで同じHTML/JSを操作検証）
GitHubサンプルとREADME（保存済み）最初の3操作
1. 「制御点1の高さ」を70から160へ動かします。
2. 青い線と画面下のSVG命令を見比べます。
3. 「直線にする」を押し、線と数値の変化を確認します。
最初は始点から終点へ少しうねった線が表示される設計です。スライダーを動かすと、紫の制御点と破線、青い曲線が変化します。次の表は隔離Chromiumで確認した結果です。公開Pagesや実スマートフォンでの結果ではありません。
| 操作 | 隔離Chromiumで確認した数値と形 |
|---|---|
| 初期状態 | 制御点Yが70と250。S字状の曲線 |
| 制御点1を160へ | 1つ目の制御点が中央へ移動 |
| 「直線にする」 | 両方のYが160。水平な直線 |
| 「初期値に戻す」 | Yが70と250に戻る |
操作後はここを見る。 図だけでなく、下に表示されるM 60 160 C 200 70 400 250 540 160という命令も確認します。文字の数値が変われば、SVGに渡した座標が変化したと読み取れます。色や形を見分けにくい場合も、状態文を読み上げ機能で確認できるようにしています。ただし、支援技術を用いた実機試験は未実施です。
なぜ2つの点で線が曲がるのか
SVGの<path>は、直線だけでなく曲線や円弧も1つの要素で描けます。d属性には「どこから始め、どのような線を描くか」という命令と座標を入れます。今回のMは始点へ移動、Cは2つの制御点と終点を指定する三次ベジェ曲線です。
M 60 160 C 200 70 400 250 540 160 始点 制御点1 制御点2 終点
始点は(60,160)、終点は(540,160)です。どちらも高さ160で固定します。一方、制御点1のYは70、制御点2のYは250です。2つの制御点は、線がどちらへ引っ張られるかを決めるための手がかりです。制御点が曲線そのものの上に必ず乗るわけではありません。 ここを混同すると、紫の点と青い線が一致しないことを故障だと思ってしまいます。
flowchart LR
A["スライダーを動かす"] --> B["Y座標を読む"]
B --> C["SVGのd属性を更新"]
C --> D["曲線を再描画"]
C --> E["座標を文字で表示"]
図は教材のイベント処理を簡略化したものです。ブラウザの内部描画処理を正確に図示したものではありません。
コードの核心は「座標を文字列にする」
完成版のJavaScriptから、線の更新に関係する部分だけ抜き出します。
const y1 = Number(topSlider.value);
const y2 = Number(bottomSlider.value);
const d = `M 60 160 C 200 ${y1} 400 ${y2} 540 160`;
route.setAttribute("d", d);
Number()でスライダーの値を数値として読み、dという文字列を作り直します。setAttribute("d", d)は、既存のSVG要素のd属性を更新します。文字列をユーザーの自由入力から受け取るのではなく、HTMLのmin・max・stepを持つスライダーから取り出す設計です。座標の範囲が決まっているため、入力に個人情報や任意のHTMLを含める必要がありません。MDNはsetAttribute()を使う属性の種類によっては、信頼できない値を渡すとスクリプト実行などにつながると注意しています。この教材では更新対象をSVGのd属性などに限定し、範囲付きスライダーから数値に変換した値だけを使います。自由入力を受け取る実務アプリへ転用するときは、属性名と入力値の両方を別途検証してください。
この4行は完成コードではありません。スライダーやSVG要素の取得、イベント登録、紫の点と破線の更新、文字表示、ボタン操作はDaily CodeのJavaScript本体に分けました。記事の中へ長いHTMLやCSSを貼り付けず、まず「何を変えたら何が起きるか」を理解できるようにしています。
1か所だけ変えて、予想と比べる
「直線にする」では、2つの制御点の高さを両方とも160にします。始点と終点も160なので、すべてが同じ水平線上に並びます。この場合、三次ベジェ曲線は数学的には直線になります。これは単にC命令をL命令へ書き換えたわけではありません。
次は制御点1だけを160から100へ変えてください。制御点2は160のままです。期待する違いは、左寄りの部分が上へふくらむことです。制御点を動かすと、曲線の全体形状が連続的に変化します。両方のスライダーを同時に変えると原因を説明しにくいため、最初は1条件だけを動かします。
ここで座標のY軸は下へ行くほど数値が大きいことにも注意してください。普段の数学のグラフでは上向きを正と考えることがありますが、今回のSVG表示領域では上側の点ほどYが小さくなります。上へ動かしたのに数値が減るのは正常です。
自分のPCで動かす
デモが開けない場合は、固定コミットにあるHTMLとJavaScriptを同じフォルダへ保存します。index.htmlをブラウザで開く設計で、追加パッケージはありません。ローカルファイルで読み込みに問題がある場合は、必要に応じてローカルHTTPサーバーを使えます。
python3 -m http.server 8000 --bind 127.0.0.1
同じPCのhttp://127.0.0.1:8000/を開きます。停止はターミナルでCtrl+Cです。Windowsでpython3がない場合は、インストール済みのPython Launcherがあればpy -3へ置き換えます。このローカル起動手順も今回の実機では未実行です。組織PCでは利用可能な開発ツールとポリシーを確認してください。
うまく動かないとき
| 症状 | 確認すること |
|---|---|
| 「読み込み中」のまま | app.jsの場所、Consoleのエラー |
| 線だけ変わらない | d属性とスライダーの数値 |
| 点と線が離れる | 制御点は曲線上の点とは限らない |
| スマホで小さく見える | SVGのviewBoxと画面幅 |
| 印刷時に操作できない | 印刷は静的な図。操作はブラウザで |
今回はSVGの表示領域をviewBox="0 0 600 320"に固定し、CSSで横幅に合わせて縮小する設計です。ブラウザ画面の幅が変わっても、内部の座標は同じ値を使います。実際のスマートフォンやA4/PDF印刷で崩れないことは、まだ確認できていません。
⚠️ 安全・制限
実際の地図や配送経路ではなく、架空の座標だけを表示します。外部CDN、位置情報、マイク、カメラ、認証は使いません。WordPress本文に任意JavaScriptを埋め込まず、操作画面はDaily Codeの独立ページに分離します。
仕事・学習で使うなら
この仕組みは、工程を結ぶ曲線、説明図の矢印、数式の可視化、画面内の経路表現に応用できます。たとえば、業務フローの2つの工程をつなぐ線が他の要素と重なった場合、制御点の位置を調整して見やすくする、といった用途です。ただし、曲線がきれいに見えることと、業務フローの内容が正しいことは別です。
地図アプリで使う実際の道路経路や交通経路は、ベジェ曲線を自由に引いただけでは再現できません。今回の教材は曲線の制御を学ぶためのものです。また、重要な情報を線の形や色だけで表現すると、印刷、色覚差、読み上げ環境で伝わらない場合があります。座標と説明文を併記する設計を基本にしてください。
SVGは図形を要素として持つため、Canvasで多数の粒子を描く教材とは役割が違います。今回のように少数の線と制御点を直接更新する場合は、SVGを使うと座標と図形の対応を追いやすくなります。大量の要素を頻繁に更新する場合の性能は、実際の端末とデータ量で比較する必要があります。
公式資料
MDN：SVGのd属性 —
MとCの意味、pathへの指定方法。MDN：SVGのパス入門 — 三次ベジェ曲線と制御点の考え方。
MDN：setAttribute() — JavaScriptで属性を更新する方法。
公式資料の確認日：2026年11月1日（MDNのd属性・パス・setAttribute()の各ページを再確認）。2026年10月31日にGitHubから取得したHTML/JavaScriptのGit blob SHAが一致することを確かめ、隔離Chromium 144（Linux・headless）でデスクトップ/モバイル幅の操作12項目がPASSしました。2026年11月1日には同じGitHub上のapp.jsをV8の模擬DOMで再実行し、初期表示・スライダー・制御点・直線化・状態文・リセット・表示文字列など8項目がPASSしました。管理制限でfile://への直接遷移が拒否されたため、同じHTMLをset_contentし同じJavaScriptをadd_script_tagで実行しています。GitHub Pagesの公開到達、実端末、WordPressの青い囲み実表示、印刷は未確認です。
GitHubサンプル
本文は操作・観察・原理を理解するための教材、GitHubはHTML・JavaScript・README・任意のブラウザテストを再利用するための正本です。アイキャッチ画像は未作成・未登録で、本文内にも存在しない画像やメディアIDを設定していません。
