# JavaScript 基礎編1(学習日 9/10)(JavaScriptとは~暗黙的な型変換) ## 1. JavaScriptとは JavaScriptは、Webブラウザで主に動作するスクリプト言語である。 JavaScriptのうち、どの実行環境でも共通する部分は、ECMAScriptとして標準化されている。 * JavaScriptの特徴 * 大文字・小文字を区別する。 * 予約語あり。 * strict mode:古い構文の禁止 * 実行コンテキストがScriptとModuleに分かれる。デフォルトでは前者はstrict mode切、後者は入。 * 後方互換性を重視する。(新しい文法が登場しても、古い文法をできるだけ動かし続けることができるようになっている。) (このノートでは、最近対応したコードは<以下ES2015以降対応>のように記述する。) ## 2. htmlファイルでの記述方法 a. htmlに直接記述する場合 ```javascript= <script> ~この間にJavaScriptコードを書く~ </script> ``` b. 別途jsファイルを作成する場合(test.jsファイルにJavaScriptコードを記入) ```javascript= <script src = "./test.js"></script> ``` c. コメント Javaと同じ。 ```javascript= //一行コメント /*複数行コメント*/ <!--HTML-likeコメント<ES2015以降対応> --> ``` ## 3. 変数宣言 3種類の変数宣言が存在する。 * var 最も古くから存在する変数宣言。値の再代入が可能である。また、初期値無しの変数も作成可能である。但し、同一変数名を再定義できてしまう点や、意図せぬ変数の巻き上げなどの問題点が指摘されている。 <以下ES2015以降対応> * let 基本はvarと同様だが、同一変数名再定義時のSyntaxErrorの表示や巻き上げの防止等の工夫がなされている。 * const 値の再代入が不可である。値は変数宣言じに必ず定義する。また、letと同様にvarの弱点を補う工夫がなされている。 基本はconstでの変数宣言が推奨される。 ```javascript= var line1 "Midosuji Line"; let line2; line2 = "Tanimachi Line"; const line3 "Yotsubashi Line"; ``` ## 4. 値の評価と表示 * console.log() ()内の内容が、開発画面のコンソールに表示される。 * alert() ()内の内容が、ポップアップとして表示される。 両者ともデバッグをする際によく用いられる。 ```javascript= console.log("aikatsu"); alert("フフッヒ(^ v ^)"); ``` ## 5. データ型とリテラル a.プリミティブ型(基本型) * Boolean(真偽値) * Number(数値)※整数や少数などの区別は無し。 * String(文字列) * null(値なし) * undefined(未定義) <以下ES2015対応> * Symbol(一位の値・不変) <以下ES2020対応> * BigInt(巨大な整数) b.オブジェクト(複合型) プリミティブ型以外全般を表す。 オブジェクトや関数、配列等。 c.データ型を調べる * typeof 値 値の前にtypeofを入れることで、データ型が返される。 ```javascript= console.log(typeof "aikatsu"); ``` →返り値:string ```javascript= console.log(typeof 315); ``` →返り値:number d.リテラル 文字型を表す構文として定義されたもの。 * Boolean(真偽値) * true, false * Number(数値)※整数や少数などの区別は無し。 * 整数リテラル(10,2,8,16進数に対応) * 浮動小数点数リテラル(小数点形式、eを含む値に対応) * String(文字列) * "", '', で囲まれた文字 * null(値なし) * foo(nullを返す) * オブジェクト * { }; * ラッパーオブジェクト(基本型を利用したオブジェクト生成) * 配列 * ArrayList * 正規表現 * /(ここに正規表現を記入)/ ## 6. 演算子 基本的にはJavaとほぼ同じ。以下、特徴的な演算子のみピックアップする。 * べき乗(累乗)<ES2016以降対応> ```javascript= console.log(2**3); ``` →戻り値8 * 単項プラス・マイナス演算子 文字列型の前につけることで、数値型に変換できる。 ```javascript= console.log(+"1"); console.log(-"1"); ``` →戻り値1,-1(いずれも数値型) * 等価演算子と厳密等価演算子 * 厳密等価演算子(===):値と型が共に等しい時true * 厳密不等価演算子(!==):値または型が違う時true * 等価演算子(==):値が等しい時true(型が異なる時は暗黙的に型変換して判定) * 不等価演算子(!=):値が異なる時true ```javascript= console.log("315"==="315"); console.log(417===417); console.log(104==="104"); console.log(104!=="104"); console.log("315"=="315"); console.log(417==417); console.log(104=="104"); console.log(104!="104"); ``` →戻り値:上4つ→true, true, false, true   下4つ→true, true, true, false * ビット論理積・ビット論理和・ビット排他的論理和・ビット否定 それぞれ&, |, ^, ~ 計算はビット単位で行われる。 * シフト演算子 * 左シフト:<< * 右シフト:>> 2進数をシフト計算する際に用いる。 ## 7. 暗黙的な型変換 a. 暗黙的な型変換が行われるケース * (不)等価演算子(==,!=)における判断 型が異なるとき、どちらかの型に暗黙的に変換した上で真偽を判断する。 ```javascript= console.log(104==="104"); console.log(104!=="104"); console.log(104=="104"); console.log(104!="104"); ``` →戻り値:上2つ→ false, true(型が異なる)   下2つ→ true, false(右辺の型は数字型に暗黙的に変換される) * 真偽値と数値の計算 真偽値はtrue=1, false=0で、暗黙的に数値として判断する。 falseは、*falsyな7種類の値(false, undefined, null, 0, 0n, NaN(not a number),""(空文字列))*を表す。 ```javascript= 1 + true = 2 1 + false = 1 ``` * 文字列と数値の計算 文字列型の数字と数字型の数字が計算式にある場合、 足し算(加算)…数字型の数値を暗黙的に文字列として判断する。 引き算(減算)…文字列の数値を暗黙的に数値として判断する。 ```javascript= 1 + "4" = "14" 5 - "3" = 2 ``` b. 明示的な型変換 型変換を明示することで、予期せぬ計算結果を防ぐことができる。 基本的には、文字型(値) で指定して表す。(キャストの考え方) ###### tags: `JavaScript`