JavaScriptの覚えがき

いいやん

はじめに

はじめてJavasciptに触れたのは、Netscapeがまだあった頃の初期でした。当時は業務上で使うことはほとんどなく、OFFにしないといけない環境も多かったので、そこまで興味を持つことができませんでした。
そのあと、サーバー側でも使えるようになったりと動きはありましたが、当時Javaをメインに開発していた身としては考えを変えるまでには至りませんでした。
しかし、その後node.jsが出てきたり、JQueryが出てきたり、JavascriptをOFFにしないのが主流になってきたりして、今ではすっかり人気の言語になってしまいましたね。
今では、Webシステムを開発するには、JavaScriptは避けて通れないような状況です。私もちょいちょい使っているのですが、いろんな言語を使っていると、他の言語とごっちゃになったりしてしまい、その都度調べてみたり・・・
ということで、ついつい忘れがちなことをメモしてみました。

基本事項

  • リテラルは、数値や文字列を定義できる。

  • 文字列は、ダブルクォートまたはシングルクォートで括る。
    （基本的には）それぞれに使い分けルールはない。

  • エスケープは、バックスラッシュで行う。
    ', " （クォート）を使用する場合は、もう片方のクォートで括ればエスケープする必要がない。

変数と定数

変数

let 変数名 = 値;
let以外にvarも使用できるが、これは以前の書き方。

宣言だけで初期化しない場合は、undefinedになる。
変数名は、valName のようにローワーキャメルが主流か？

定数

const 定数名 = 値;
定数名は、INT_VALのようにスネークケースが主流か？

厳格なチェック

"use strict"; を1行目に定義する。

文字列への変数埋め込み

`文字列${valName}文字列`

文字列はバッククォート（Shift+@で入力できる）で括り、${変数名} を挿入。定数も可能。
バッククォート内では、改行はそのまま改行になるので要注意！

演算子

文字列の連結は、+
インクリメント ++、デクリメント -- あり。
== と=== の違いは、値が等しい（==）、値とデータ型が等しい（===）
!=と!== も同様。基本的には、==より===を使うべきか？

配列

let arr = [1, 2, 3];
arr[0] = 4;
console.log(arr[0]);
arr[4] = 5; //配列を拡張できる。この場合、arr[3]はundefindになる。

要素数は、arr.length

制御文

条件分岐

if (条件) { // 条件はboolean(true)
} else if (条件) {
} else {
}
switch (条件) {
case 値:
  コード;
case 値; //breakがない場合は、そのまま次へ。
  コード;
  break; //breakで、switchを抜ける。
default:
  コード;
}

繰り返し、ループ

while (条件) {
  コード;
}
do {
  コード;
} while(条件);
for (ループ前の処理; ループ後の条件; ループのそれぞれの後処理) {
  コード;
}
// 例 10回ループ
for (let i=0; i<10; i++) {
}

配列の場合

arr = ["val1", "val2", "val3"];
for (let val of arr) {
}

ループを抜けるにはbreak、その回をスキップするにはcontinure。

関数

function 関数名(param1, param2) {
  コード
  return 返値; //タイプは何でもよい。
}

デフォルト引数は、param2=値　で可能。
呼び出しもとでパラメータが不足していてもチェックされない。
その場合、関数ではundefinedになる。

//可変長引数
function 関数名(...params) {
  //paramsは配列となる。

関数は、データとしても扱える。→引数に関数を渡せる。
無名関数も使える。

配列.forEach(callback);
 
function callback(val, index, array)
val:現在の要素、index:インデックス、array:配列全体
 
.forEach(function(引数) {
});

オブジェクト、クラス

クラス定義ができる。

class クラス名 extends 親クラス名 {
  constructor() {
    this.name = '';
    this.age = 10;
  }
  public method1(引数) {
  }
}
 
let obj = new クラス名();

プロパティは、get、setで定義できる。
クラス内で自分自身はthis、親クラスはsuper。
オーバーライド、メンバの追加もできる。

オブジェクトリテラル

let obj = [prop1:値, prop2:値];

ビルトインオブジェクト

String, Array, Map, Set, Date, Math, …

とりあえず、ざっとまとめてみました。MDNを読み込んで、間違いは訂正したいと思います。


いいなと思ったら応援しよう！