【数学】知ると出来る事が広がる ベクトル 10の知識

# <font color="009F8C">前書き</font>
ベクトルはゲーム分野で当たり前のように使われますが

最近はWEBで出来る事も増えており
ベクトルの知識はゲームに限らず幅広く活用できるものになっています。

ベクトルはそこまで難しくないうえに、扱えるようになると
激的に表現できる事が増えるので知って損はありません。

そんなベクトルについて、基本的な内容を取りまとめてみました。
そして文字で説明するのは大変なので動画を用意しました。

<font color="red">※この記事で扱うのは２次元ベクトルになります</font>

## 数学ラボ
数学を実際に動かしながら確認できる[数学ラボ](https://www.nekonecode.com/math2d/)というサイトも用意しました。

こちらはJavaScript(実際はTypeScriptですが)で作成しています。
動画の下にも、動画に関するページのリンクを貼っておきます。

### 追記
[【JavaScript】２次元ベクトルをクラスで作る](https://qiita.com/Nekonecode/items/523a9e7214082129935e)

本記事は数学的な解説ですが、ここで解説したベクトルの内容を実際に
JavaScriptでクラスとして定義する記事も用意しました。

# <font color="009F8C">その１ ピタゴラスの定理</font>
いきなりベクトルの話じゃないぞという感じですが
よく使われ、非常に便利な定理なので最初に紹介します。

**直角三角形の斜辺の長さ**を求める事ができる定理で
多くの場合、<font color="red">**何かしらの距離**</font>を求める場合に使われます。


[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/Ua_q2iDvYEI/0.jpg)](http://www.youtube.com/watch?v=Ua_q2iDvYEI)

[ピタゴラスの定理](https://www.nekonecode.com/math2d/?scene=ms_math3_pythagorean_01)

# <font color="009F8C">その２ ベクトルの基本</font>

ベクトルは向きと大きさを持ち、２次元の場合は**x成分**と**y成分**で表現する
と、それだけのお話です。

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/DY3Idame6V4/0.jpg)](http://www.youtube.com/watch?v=DY3Idame6V4)

- [ベクトルは向きと大きさを持つ](https://www.nekonecode.com/math2d/?scene=hs_mathb_vector_01)
- [ベクトルの成分](https://www.nekonecode.com/math2d/?scene=hs_mathb_vector_02)

# <font color="009F8C">その３ ベクトルの足し算(加法)</font>
たかが足し算、されど足し算です。
主に<font color="red">**動かす**</font>という事に関連した能力を持ちます。

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/oExftqZMWAo/0.jpg)](http://www.youtube.com/watch?v=oExftqZMWAo)

- [ベクトルの加法](https://www.nekonecode.com/math2d/?scene=hs_mathb_vector_05)

# <font color="009F8C">その4 逆ベクトル</font>

ベクトルの<font color="red">**大きさを変えずに向きを反対にする**</font>技です。
プログラムで便利に使えるというよりは、数学的に大事な考え方という感覚の方が強いです。

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/gugaO9h-sgE/0.jpg)](http://www.youtube.com/watch?v=gugaO9h-sgE)

- [逆ベクトル](https://www.nekonecode.com/math2d/?scene=hs_mathb_vector_06)

# <font color="009F8C">その5 ベクトルの引き算(減法)</font>

ベクトルの引き算は<font color="red">**２つの点の間**</font>を知る術です。
ゲームでは当たり判定では確実に使いますし、たかが引き算と侮れない存在です。


[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/pXeZ2bmMVQo/0.jpg)](http://www.youtube.com/watch?v=pXeZ2bmMVQo)

- [ベクトルの減法](https://www.nekonecode.com/math2d/?scene=hs_mathb_vector_07)

# <font color="009F8C">その6 ベクトルの実数倍</font>
ベクトルを<font color="red">**伸ばしたり縮めたり**</font>する技です。
後述の「ベクトルの正規化」と組み合わせて使う事が多いです。

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/doQ_I641YSg/0.jpg)](http://www.youtube.com/watch?v=doQ_I641YSg)

- [ベクトルの実数倍](https://www.nekonecode.com/math2d/?scene=hs_mathb_vector_08)

# <font color="009F8C">その7 ベクトルの大きさを求める</font>

ベクトルの大きさは**x成分**と**y成分**から計算で求められるというお話です。
早い話が「その1 ピタゴラスの定理」と似たような話です。

ベクトルの<font color="red">引き算と組み合わせて**２点間の距離**を求める</font>という事をよくやります。

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/X0buWop-qFg/0.jpg)](http://www.youtube.com/watch?v=X0buWop-qFg)

# <font color="009F8C">その8 ベクトルの正規化</font>
ベクトルの向きを変えずに<font color="red">**大きさだけ1にする**</font>技です。

大きさが**1**のベクトルを**2倍**すれば、大きさが**2**のベクトルが得られます。
**3倍**すれば大きさが**3**のベクトルです。
つまり、正規化はベクトルを好きな長さに調整できるということです。
数学において**1**というのは大変便利な代物です。

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/kwKg2xaw9IA/0.jpg)](http://www.youtube.com/watch?v=kwKg2xaw9IA)

- [ベクトルの正規化](https://www.nekonecode.com/math2d/?scene=hs_mathb_vector_04)

# <font color="009F8C">その9 ベクトルの内積</font>

個人的には一番知って欲しいのが**内積**です。
これは<font color="red">**２つのベクトルの関係性を調べる**</font>事ができ非常にたくさんの使い道があります。

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/j5raSZaqesM/0.jpg)](http://www.youtube.com/watch?v=j5raSZaqesM)

- [ベクトルの内積](https://www.nekonecode.com/math2d/?scene=hs_mathb_vector_09)

# <font color="009F8C">その10 ベクトルの外積</font>
ベクトルの**外積**も非常に有用であり
２つのベクトルが平行かどうかなどは外積を使って一発で判定できます。

しかしながら
2Dの世界だと内積があれば外積はなくてもなんとかなってしまうところもあります。

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/Mx0ZIcJacEg/0.jpg)](http://www.youtube.com/watch?v=Mx0ZIcJacEg)

- [ベクトルの外積](https://www.nekonecode.com/math2d/?scene=hs_mathb_vector_10)

# <font color="009F8C">おわりに</font>
今回は基本的なベクトルのお話で終わってしまいますが
もちろんこれが全てではなく、むしろ序章にすぎません。

ただこの記事に書かれた基本的な知識の組み合わせで
かなり沢山の事が表現できるようになります。

今後はより深く、もっと応用ができる知識であったり
ここで紹介した知識を「実際にプログラムで使うには？」
といった具体的な話にも触れていければと思います。

あと動画のサムネ作るのめんどいです。