スラスラ読める JavaScript ふりがなプログラミング を読んだので、大事と思ったことをまとめておく。
概要
使いどころ
JavaScript は、ユーザインターフェースを作るために用いられる。いわゆるフロントエンドの部分。
変数の使い方
基本的な書き方は、CやC++にとても似ているが、変数は少し違う。JavaScript で変数を用いる際には、let を用いる。
let kakaku = 100; let urine = kakaku * 1.08;
また、変数の命名には、次の慣習的なルールがある。
- 半角アルファベット、アンダースコア(
_)、ダラー($)、数字を用いる - NGなのは、先頭数字や数字のみ、予約語を用いる
NGとなるものは、JavaScriptインタープリタ*1によって、数値、演算子、予約語としてみなされるため、変数として使用できない。
条件分岐
JavaScriptの条件式は、CやC＋＋とほぼ同じであったけど、厳密等価（===）と厳密不等価(!===)は、ちゃんと理解できていなかったのでまとめておく。
厳密等価と厳密不等価
| 演算子 | 記号 | 説明 |
|---|---|---|
| 等価 | == |
2つのオペランドが等しいことを検査する。オペランドの型が異なる場合には、型変換を試みてから比較する。 |
| 不等価 | != |
2つのオペランドが等しくないことを検査する。オペランドの型が異なる場合には、型変換を試みてから比較する。 |
| 厳密等価 | === |
2つのオペランドが等しいことを検査する。オペランドの型が異なる場合、異なると判断する。 |
| 厳密不等価 | !== |
2つのオペランドが等しくないことを検査する。オペランドの型が異なる場合、異なると判断する。 |
具体的に、どんな感じかを認識するために、比較表を作ってみた。◯部分に各演算子が入った時の結果を載せる。
| 演算子 | 1◯1 |
'hello'◯'hello' |
'1'◯1 |
0◯false |
|---|---|---|---|---|
| 等価('==') | true | true | true | true |
| 不等価('!=') | false | false | false | false |
| 厳密等価('===') | true | true | false | false |
| 厳密不等価('!==') | false | false | true | true |
厳密ではない演算子の方がルーズといえ、このルーズさが問題を引き起こすこともあるため、型を含めてチェックする厳密等価、厳密不等価を用いることが推奨されている。
ちなみにRubyにも === があるが、上記の意味合いとは異なる。（instance method Module#===）
繰り返し文と配列
ほぼC、C++と同じ。ここまで同じとは驚きでした😲
配列のループ操作と配列操作メソッド
２つ違いがわかったのでまとめておく。
配列のループ操作
配列のループ操作では、
for( let 変数 of 配列 )と書く。 C++だと、(const auto& 要素 : 配列)に相当するイメージ。配列操作メソッド
JavaScriptの配列には、最初から配列操作用のメソッドがある。 C++の、
std::vectorに近いものだと考えればよさそう。配列型のメソッド 働き 配列.length配列の要素数を返す 配列.push()配列の末尾に要素を追加 配列.pop()配列の最後の要素を取り出す 配列.splice(start, num)配列の start番からnum個削除配列.sort()配列の要素を並び替える 配列.shift()配列の先頭要素を取り出す
関数とオブジェクト
関数の書き方
if 、配列とかの書き方がC、C++と似ていたので関数もそうかと思ったら、結構特徴的でした。JavaScirpt の関数の書き方は次のもの。
// 関数定義（ES2015の場合（今後の主流）） let 変数 = (引数) => { 処理 }; // 呼び出し 変数(引数); // 関数定義（ES5の場合） function 変数(引数){ 処理 } // 呼び出し 変数(引数);
戻り値を返すときは、return 値 でOK。
オブジェクト
複数のデータを記録する入れ物としてオブジェクトがある。書き方は次の通り。
// オブジェクトの書き方 変数 = { prop1 : value1, prop2 : value2 } // 呼び出し 変数.pop1 //パターン1 変数['prop1'] //パターン2
参考
*1:Webブラウザ内でJavaScriptを解釈する機能
