はじめに
係数行列をそのまま表示しても、初心者には「この行が何の条件を表しているのか」が分かりにくいことがあります。
特にスプライン補間のように、通過条件、連続条件、境界条件、周期条件が混ざる計算では、行列の各行に意味があります。
この記事では、条件式カード、行列の行、右辺ベクトルを同じ色で対応させるUI設計を整理します。
使う場面
- 数値計算の係数行列をWeb画面で説明したい
- 条件式と行列の対応を初心者にも伝えたい
- 行列の一部だけをハイライトして、なぜその値になるかを説明したい
- Chart.jsや表形式UIと一緒に、計算結果を見せたい
色分けする対象
色分けの対象は、行列そのものだけではありません。
次の3つを同じルールでそろえると、対応関係が見えやすくなります。
| 対象 | 例 | 色を付ける目的 |
|---|---|---|
| 条件式カード | S_k(x_k)=y_k など | どの条件なのかを分類する |
| 係数行列の行 | 行列の1行 | どの条件式が行列に入ったかを見る |
| 右辺ベクトル | 右辺の値 | 条件式の右辺と対応させる |
条件式だけ色付きで、行列が無色だと、対応を探す負担が残ります。 行列側にも同じ色を使うことで、視線の移動だけで対応を追えるようになります。
実装イメージ
条件の種類ごとに、色とラベルを持つ定義を作ります。
const conditionStyles = {
pass: {
label: "通過条件",
color: "#2563eb",
background: "rgba(37, 99, 235, 0.12)",
},
smooth: {
label: "連続条件",
color: "#059669",
background: "rgba(5, 150, 105, 0.12)",
},
boundary: {
label: "境界条件",
color: "#d97706",
background: "rgba(217, 119, 6, 0.12)",
},
};
行列データには、各行がどの条件に由来するかを持たせます。
const matrixRows = [
{ type: "pass", values: [1, 0, 0, 0], rhs: 2 },
{ type: "smooth", values: [0, 1, -1, 0], rhs: 0 },
{ type: "boundary", values: [0, 0, 2, 6], rhs: 0 },
];
描画時は、条件タイプからスタイルを参照します。
function renderMatrixRow(row) {
const style = conditionStyles[row.type];
return `
<tr style="background:${style.background}; border-left:4px solid ${style.color}">
${row.values.map((value) => `<td>${value}</td>`).join("")}
<td>${row.rhs}</td>
</tr>
`;
}
この形にしておくと、閉曲線補間で周期条件が追加された場合も、periodic のスタイルを足すだけで拡張できます。
動的な色の扱い
色をデータから変える場合、クラス名を動的に組み立てるよりも、style属性で色を渡す方が安定します。
この考え方は、TailwindでDB由来の色を動的に適用する方法と同じです。
学習UIでは、条件の種類が固定でも、強調色を変えたくなることがあります。 色定義を1か所にまとめておくと、表、カード、凡例、グラフ補助表示の色をそろえやすくなります。
注意点
色だけに意味を持たせると、色の違いが分かりにくい環境で伝わりません。
必ず、色と一緒にラベルも表示します。
- 通過条件
- 一階微分の連続条件
- 二階微分の連続条件
- 自然境界条件
- 周期条件
また、色数が多すぎると画面が散らかります。 条件の種類を大きく分類し、必要な場合だけ詳細ラベルで補足する方が読みやすくなります。
まとめ
係数行列を学習用に見せる場合は、条件式、行列の行、右辺ベクトルを同じ色でつなぐと、計算の構造が追いやすくなります。
色だけでなくラベルも添え、対応関係を視覚と文章の両方で確認できるようにしておくことが重要です。