Download to read offline
![クリエイティブコーディングのための数学 JavaScript 入門 [三角関数と行列]](https://cdn.slidesharecdn.com/ss_thumbnails/javascript-160107112551-thumbnail.jpg?width=640&height=640&fit=bounds)
型超ざっくり入門@ハンズラボ社内勉強会
- 1.
- 2. 想定対象 • 型？なにそれ？？おいしいの？？？ • 文字列とか数値とか区別はしてるつもりけど、混在し てくるとよくわかってなくて、なんとなく適当に足し たり連結したりしてる •上記くらいのレベルの何かプログラムを書いている 方々。 • そうじゃない人は釈 に説法なので得るものないです
- 3. こんなことないですか • 数字ばかりの文字列を連結するつもりが足して た • DBに数字ばかりの文字列を数値として突っ込も うとしてエラー出た •価格や在庫の小数の扱いが思った通りにならな くて金の計算がずれてしばかれた
- 4.
- 5. 型 is 何 •そもそもコンピュータは0と1しか理解できない • 変数とかに入れてる数字も文字も、0と1の並び で解釈されている。 • 0と1の並びだけでは人間も取り回しがつらい • その並びが何を意味しているかを表す決まりが あるとうれしい。
- 6.
- 7. 型の例(1) • 整数型 • 浮動小数型 •文字列型 • 真偽値型 • バイナリ型
- 8. 型の例(2) • 配列 • 構造体 •クラス • etc…
- 9.
- 10. 整数型 • -1, +2,0 • 整数の定義が分からない場合ググって下さい • 符号無し整数、符号有り整数を区別する言語も あります(符号 = プラスとかマイナス)
- 11. 浮動小数型 • 1.2, -7.5 •現実の小数と異なり、正しい値は得られない • 例えばJavaScriptであれば、 0.1 - 0.00000000000002 は 0.09999999999998001 になる。 • 最後の1どこから来たよ？
- 12. 浮動小数型 • 浮動小数の0.1は、実数の0.1とは異なり、1より 小さい2進数の1つだけビットが立っている数の 和として、浮動小数型のデータサイズの限界ま での近似として表される • (1/16)+ (1/32) + (1/256) + (1/512) + (1/4096) + (1/8192) + (1/65536) + …
- 13. 浮動小数型 • 無限に2の累乗が分母に来ているものの和にすることはできなく て、浮動小数のデータのサイズ限界(32bitまたは64bit)まで。 • 厳密には32bitとかも全部じゃなくて、 •符号を表す部分(符号部) • 桁を表す部分(指数部) • 数字の並びを表す部分(仮数部) • に分かれてるので、仮数部のbit数に依存して和を取れる数は 減る。
- 14.
- 15.
- 16. 真偽値型 • ブーリアン型とも • いわゆるtrue, false • 真偽値型が無くて、TRUE, FALSEをある整数に 定数割り当てしてるだけとか、そういうのもあ る。
- 17.
- 18. 型変換 • JavaScript処理系において、以下はどの様な値 になるか？考えてみよう。 • 1+ 2.1 = ? (整数 + 浮動小数 = ?) • 0 + 3 = ? (整数 + 文字列 = ?) • 2 + true = ? (整数 + 真偽値 = ?)
- 19.
- 20.
- 21. 型変換 • 1 +2.1 = 3.1 (整数 + 浮動小数 = 浮動小数) • 0 + 3 = 03" (整数 + 文字列 = 文字列) • 2 + true = 3 (整数 + 真偽値 = 整数+(1or0)) • 言語によって異なる。 • 上記はあくまでJavaScriptでの例
- 22. 2つの異なる型を + した時、 何が起こっていたか •1 + 2.1 • 1.0 + 2.1 (整数である1が、浮動小数の1.0に変 換される) • 3.1 (2つの浮動小数が足される)
- 23. 2つの異なる型を + した時、 何が起こっていたか •0 + 3 • 0 + 3 (整数である0が、文字列の 0 に変換 される) • 03 (2つの文字列が連結される)
- 24. 2つの異なる型を + した時、 何が起こっていたか •2 + true • 2 + 1 (真偽値であるtrueが、整数の1に変換さ れる) • 3 (2つの整数が足される)
- 25. + はなにをしたのか • +の前後の値に対して、適切な変換を施して、 数値として足したり文字列として連結したりして 返した。 • 繰り返すが、前述の挙動はJavaScript固有で、 他の言語では異なる場合がある。 • そもそも違う型は、明示的に何もせず + できな かったりする言語もある。
- 26. + はなにものか • +は加算演算子ともいう。 • + の直前と直後の値を引数にして、それぞれの型と値に応じ た操作をし、新しい値を返す関数のようなもの。記法が違う だけ。 • - , / , * も同様。 • C++ などは、これら演算子の挙動をプログラマが上書きする ことができる。(演算子オーバーロード) • 足すと見せかけて累乗するのもできてしまう(普通やらない)
- 27. キャスト • 型変換とだいたい同義。用語の説明として。 • 語源は鋳造における鋳型 • 型の概念を、型を鋳型、入れる値を金属とする比喩もできる。 • 例えば整数型は六角形の鋳型、浮動小数型は円形の鋳型、み たいな比喩もできる。 • 浮動小数を整数にキャストすると、小数点以下の情報が失 われるのは、この比喩でイメージできる。
- 28. キャスト • + 演算子内部の処理では、これが型とその値の 組み合わせによって行われていた。 •JavaScriptでは不適切な処理( z - 1 など)の場 合、よしなに処理してNaNを返したりするが、 他の言語ではキャストしようとしてエラーになる ものが多い。
- 29. JSON形式文字列と オブジェクト • またJavaScriptで例 • 以下の2つの違いがわかりますか？ •var obj = { id :123, name":"hoge"}'; • var obj = { id :123, name":"hoge"};
- 30. JSON形式文字列と オブジェクト • { id:123, name :"hoge"}' • → JSONフォーマットの文字列 • { id :123, name :"hoge"} • → id, name というキーを持つオブジェクト • オブジェクト型と文字列型なので、違う型。
- 31. JSON • JavaScript ObjectNotation • 直訳で、JavaScriptでのオブジェクト表記法 • 直訳が完全に意味を説明している。 • 型ではなく、意味を持った文字列の記法である ことに注意。
- 32. オブジェクト • JavaScript はじめ、いくつかのオブジェクト指 向言語での全ての基本となる型。 •オブジェクトというと指し示す内容がいろいろ あるので注意。
- 33. JSONとオブジェクトの 相互変換 • JSON.parse( {id":123}'); // JSON文字列をオブジェク トに • JSON.stringify({ id :123}); // オブジェクトをJSON文 字列に • jQuery などで外部APIからJSONを受け取ったとき、 parseの様にオブジェクトに変換したりしている。 • ライブラリや便利関数が何をよしなに変換してくれてる か？を一度は意識しましょう。
- 34. まとめ • 型を意識しない言語でも、時々意識しないと落とし 穴にはまるので、時々意識すること。 • とはいえいきなりめちゃめちゃわかるようにならな いので、文字列、整数、浮動小数、オブジェクト、 くらいの違いを意識すればまずはOK。 •型システムは静的型付け言語ではもっとごついし、 型理論とか異常に奥が深いので、興味があれば勉強 しましょう。