導入

記号の意味
ベクトル- 矢印付きの文字
長さ- ベクトルの大きさ
単位ベクトル- 長さ1のベクトル
内積- 2つのベクトルから数値を計算
シータ- 角度を表すギリシャ文字
余弦- 角度から比率を求める関数

概要

このコンテンツでは、Web技術で使う線形代数を実践的に学びます。理論だけでなく、ブラウザ上で動くビジュアル表現やインタラクティブなコンテンツを作るための実装方法を重視しています。

このコンテンツについて

このコンテンツは、サイト管理者(utsusie)の学習用サンドボックスです。

Web開発における線形代数の実践的な応用を学ぶために、試行錯誤しながら作成しているコンテンツです。一般公開していますが、完成度や正確性を保証するものではありません。

なぜ線形代数を学ぶのか

Webで「動き」や「変換」を表現したい

要素を移動させる、図形を回転させる、アニメーションを制御する——これらを数学的に正確に扱うには線形代数が必要です。 Web技術で表現力を高めるための数学的な道具を手に入れましょう!

線形代数は、Web上で「動き」や「変換」を表現するための数学です。
具体的には以下のような場面で使われます:

  • 要素の移動やアニメーション
  • 図形の回転・拡大縮小
  • インタラクティブなビジュアライゼーション
  • Canvas や SVG での描画制御
  • 3D表現(WebGL、Three.js)

このコンテンツでは、ベクトル行列という2つの核心概念を学び、JavaScriptで実装します。

こんな人におすすめ

以下のような方に適しています:

  • Webでビジュアル表現を作りたい
  • Canvas や SVG を使いこなしたい
  • 線形代数を実用的に学びたい
  • インタラクティブなコンテンツを作りたい

ゲーム開発や3Dグラフィックスに興味がある方にも基礎として役立ちます。

前提知識

必須の知識

  • JavaScript の基礎:
    • 変数: const x = 10;
    • 関数: function add(a, b) { return a + b; }
    • オブジェクト: { x: 5, y: 10 }
    • 配列: [1, 2, 3]
  • 中学数学の基礎:
    • 四則演算: 3+4=73 + 4 = 7
    • 負の数: 5+3=2-5 + 3 = -2
    • 平方根: 9=3\sqrt{9} = 3
    • 座標: 点(5,10)(5, 10)

高度な数学は不要

微積分や大学レベルの線形代数は必要ありません。

あると望ましい知識

  • 三角関数(sin、cos、tan)の基礎
  • Canvas API や SVG の基礎知識

学習の進め方

推奨する学習順序

  1. 導入(本章): 目的と前提知識の確認
  2. 第1〜6章: ベクトルの基礎
    • 順番に学習することを強く推奨
    • 各概念が次の章で使われます
  3. 第7〜11章: 行列と変換
    • 第1部を理解してから進む