行列の基本とアフィン変換

Q: 行列の基本とアフィン変換とは何ですか？

2次元のベクトル \mathbf{x} = \begin{pmatrix} x \\ y \end{pmatrix} に対し、2行2列の正方行列 A = \begin{pmatrix} a & b \\ c & d \end{pmatrix} を左から掛けることで、新しいベクトル \mathbf{x}' = A\mathbf{x} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix} を得る。これは基底ベクトル \mathbf{e}_1 = \begin{pmatrix} 1 \\ 0 \end{pmatrix}, \mathbf{e}_2 = \begin{pmatrix} 0 \\ 1 \end{pmatrix} をそれぞれ \begin{pmatrix} a \\ c \end{pmatrix}, \begin{pmatrix} b \\ d \end{pmatrix} へ写す線形写像である。

Q: 行列の基本とアフィン変換は社会やプログラミングでどのように使われていますか？

CSS / WebGL における 2D アフィン変換マトリクス: ブラウザの CSS transform (`matrix(a, b, c, d, tx, ty)`) や HTML5 Canvas の `ctx.transform(a, b, c, d, e, f)` は、まさにこの行列演算をそのまま利用して画面上の要素を回転・拡大・せん断させている。

2×2行列で平面の空間を伸縮・回転・せん断させる幾何学

この単元の発見をシェア

3行要約（Key Takeaways / AIOサマリー）

1: 行列の基本とアフィン変換の本質的な定義と直感的ビジュアルをシミュレーターで体験できる。
2: 公式や証明の背景にある数学的意味と、厳密な導出ステップを解説。
3: 実社会における工学応用（CSS / WebGL における 2D アフィン変換マトリクス）のTypeScript実装コードを収録。

なぜこれを学ぶのか？ — 現実社会とテクノロジーでの価値

Purpose & Motivation

なぜ生まれたのか？

膨大な数の未知数が絡み合う連立方程式を、1つの塊（ブロック）としてまとめて扱い、一括で解くために考案された。

身につく武器・思考力

数万個の座標やデータ点を、たった1回の行列の掛け算で「回転・拡大・移動」させる並列計算の思考体系が身につく。

実社会・ITでの活躍現場

•PhotoshopやInstagramの画像フィルター、アフィン変換（回転・歪み補正）
•GPU（グラフィックスプロセッサ）による毎秒数百億回の行列並列演算
•ディープニューラルネットワークにおける入力と重みの大規模積和演算
•経済学における産業連関表（国全体の産業間の資材の流れ分析）

Layer 1 — 直感・シミュレーター

行列の各成分 a, b, c, d のスライダーを動かしてみよう。正方形グリッドがどのように伸び縮みし、傾き（せん断）、回転するかをリアルタイムに観察できる。行列式の値 det(A) = ad - bc が、変換後の正方形の面積拡大率に対応していることも確認しよう。

a (xの伸縮) = 1.5

b (xのせん断) = 0.5

c (yのせん断) = 0.0

d (yの伸縮) = 1.2

変換行列 A

A = \begin{pmatrix} 1.5 & 0.5 \\ 0.0 & 1.2 \end{pmatrix}

行列式 det(A) ＝面積拡大率

\det(A) = ad - bc = 1.80

正方形の面積が 1.80 倍に変形

↑ 青い矢印は元の $(1, 0)$ の行き先、赤い矢印は $(0, 1)$ の行き先です。行列とは「2本の基本矢印をどこへ飛ばすか」を決めるルールであり、その結果として空間全体が伸縮・回転・せん断します。

Layer 2 — 定義・受験・証明

定義

2次元のベクトル $\mathbf{x} = \begin{pmatrix} x \\ y \end{pmatrix}$ に対し、2行2列の正方行列 $A = \begin{pmatrix} a & b \\ c & d \end{pmatrix}$ を左から掛けることで、新しいベクトル $\mathbf{x}' = A\mathbf{x} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix}$ を得る。これは基底ベクトル $\mathbf{e}_1 = \begin{pmatrix} 1 \\ 0 \end{pmatrix}, \mathbf{e}_2 = \begin{pmatrix} 0 \\ 1 \end{pmatrix}$ をそれぞれ $\begin{pmatrix} a \\ c \end{pmatrix}, \begin{pmatrix} b \\ d \end{pmatrix}$ へ写す線形写像である。

公式・数理モデル

\begin{pmatrix} x' \\ y' \end{pmatrix} = \begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix}

証明・導出

行列式の図形的意味：単位正方形（面積1）の4頂点 $(0,0), (1,0), (1,1), (0,1)$ を行列 $A$ で変換すると、 $(0,0), (a,c), (a+b, c+d), (b,d)$ を頂点とする平行四辺形に移る。

この平行四辺形の面積は外積（クロス積）の大きさとして計算され、

\text{Area} = |a d - b c| = |\det(A)|

となる。行列式の値 $\det(A)$ は空間の面積拡大率を表し、符号が負のときは空間が裏返し（鏡映反転）になっていることを意味する。

押さえておきたいポイント

行列の掛け算は、空間の幾何学的な変形（拡大縮小・回転・せん断）を意味する
第1列 $(a, c)^T$ は $x$ 軸の単位ベクトルの行き先、第2列 $(b, d)^T$ は $y$ 軸の行き先を表す
行列式 $\det(A) = ad - bc$ は図形の面積比率を表す
$\det(A) = 0$ のとき、平面は1本の直線または点につぶれて元に戻せなくなる（逆行列が存在しない）

参照基準・学習指導要領との対応

本トピックの内容・数理モデルは、文部科学省学習指導要領（算数・数学・情報）および国際標準カリキュラムに準拠し、エンジニアリング現場の実装事例と照らし合わせてMath World Lab編集部により検証・作成されています。

Layer 3 — 工学応用・現場実装

CSS / WebGL における 2D アフィン変換マトリクス

ブラウザの CSS transform (`matrix(a, b, c, d, tx, ty)`) や HTML5 Canvas の `ctx.transform(a, b, c, d, e, f)` は、まさにこの行列演算をそのまま利用して画面上の要素を回転・拡大・せん断させている。

1type Point2D = { x: number; y: number };
2
3// 2x2 行列による点ベクトルの変換
4function applyMatrix(matrix: [number, number, number, number], p: Point2D): Point2D {
5  const [a, b, c, d] = matrix;
6  return {
7    x: a * p.x + b * p.y,
8    y: c * p.x + d * p.y,
9  };
10}
11
12// 例: 45度回転行列 [cosθ, -sinθ, sinθ, cosθ]
13const theta = (45 * Math.PI) / 180;
14const rotMatrix: [number, number, number, number] = [
15  Math.cos(theta), -Math.sin(theta),
16  Math.sin(theta),  Math.cos(theta),
17];
18
19const original: Point2D = { x: 1, y: 0 };
20const rotated = applyMatrix(rotMatrix, original);
21console.log(rotated); // { x: 0.7071, y: 0.7071 }