メソッド/データ＠JavaScript¶

はじめに¶

本サイトにつきまして、以下をご認識のほど宜しくお願いいたします。

https://hiroki-it.github.io/tech-notebook/

01. 関数¶

関数オブジェクト¶

▼ 関数オブジェクトとは¶

オブジェクトでもあり、関数である。

▼ リテラル表記による関数オブジェクト¶

// 定義
const object = {
  foo: "FOO",
  age: 42,
  baz: {myProp: 12},
};

▼ コンストラクタ関数¶

関数宣言方式のFunctionコンストラクタを使用して、オブジェクトを定義する。

// 関数宣言による定義
function car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

// コール
const mycar = new car("Eagle", "Talon TSi", 1993);

function命令¶

▼ function命令とは¶

オブジェクトではない関数である。

＊実装例＊

// 定義 (コールする場所が前後しても無関係)
function foo() {
  return "foo";
}

// コール
methodA();

▼ 名前がドルマークのもの¶

JavaScriptでよく見かけるドルマーク。

これは、関数の名前としてドルマークを使用しているのみである。

＊実装例＊

// 定義
function $() {
  return "foo";
}

jQueryでは、パッケージの読み出し宣言時に、『Jquery』という名前の代わりにドルマークを使用する仕様になってる。

これと混乱しないように注意する。

＊実装例＊

// jQuery.get() と同じ
$.get();

▼ コールバック関数¶

const asyncFunc = (param, callback) => {
  setTimeout(() => {
    // getDataメソッドは、数値を渡すとdataを取得してくれると仮定します。
    const data = getData(param);
    const err = data.getError();

    // 第二引数のコールバック関数は、getDataメソッドとgetErrorメソッドの後に実行される。
    callback(err, data);
  }, 0);
};

const test = 1;

// asyFuncメソッドの第一引数が、第二引数で設定したコールバック関数に渡される。
// 渡されたコールバック関数は、getDataメソッドとgetErrorメソッドの後に実行されるため、errやdataを受け取れる
asyncFunc(test, (err, data) => {
  if (err) {
    throw err;
  }
  console.log(data);
});

▼ ファイル外で読み込む¶

関数の前でexportを宣言する。

＊実装例＊

関数の定義とexportの宣言を同時に実行する。

export function foo() {
  return "foo";
}

あるいは、別々に実行する。

const foo = () => {
  return "foo";
};

export default foo;

02. データ型¶

undefined、null¶

▼ undefined¶

データを代入しない時に適用されるデータ型である。

＊実装例＊

// 変数b: 初期化されていない (値が代入されていない)
const b;

// 変数bの出力
console.log(b);  // undefied

▼ null¶

nullは、undefinedとは異なり、意図して代入しなければ適用されないデータ型である。

＊実装例＊

// 変数a: 意図をもってnullを入れている
const a = null;

console.log(a); // null

▼ undefinedの返却¶

undefinedを返却する場合、returnのみを記述する。

＊実装例＊

function foo() {
  return; // 空の『return文』。空なので『undefined』を返す。
}

const foo = foo(); // 変数『foo』には関数『foo』から返ってきた『undefined』が代入される。

console.log(foo); // 『undefined』が出力される。

03. 変数¶

変数の種類¶

▼ 一覧表¶

項目	var	let	const
再宣言	可能	不可能	不可能
再代入	可能	可能	不可能
初期化 (`undefined`化)	可能	可能	不可能
スコープ	関数スコープ	ブロックスコープ	ブロックスコープ

▼ `const`¶

基本的には、宣言にconstを使用する

if (true) {
  // ブロック外からアクセス不可
  const foo = "foo";

  // 再宣言不可
  const foo = "bar"; // ERROR

  // 再代入不可
  foo = "baz"; // ERROR
}

// ブロック内のconstにアクセス不可
console.log(foo); // ERROR

▼ `let`¶

繰り返し処理で再代入が必要であれば、constではなくletを使用する。

if (true) {
  // ブロック外からアクセス不可
  let foo = "foo";

  // 再宣言不可
  let foo = "bar"; // ERROR

  // 再代入可能
  foo = "baz";
}

// ブロック内のletにアクセス不可
console.log(foo); // ERROR

また、try-catch構文では変数への代入が保証されていないため、letを使用して、あらかじめ初期化しておく必要がある。

const asyncFunc = async () => {
  // 初期化するとundefinedになる。
  let response;

  try {
    response = await axios.get("/some/path1");
    console.info(response);
  } catch (error) {
    console.error(error);
  }

  return response;
};

▼ `var`¶

if (true) {
  // ブロック外からアクセス可
  var foo = "foo";

  // 再宣言
  var foo = "bar";

  // 再代入可能
  foo = "foo";
}

// ブロック内のvarにアクセスできる。
console.log(foo); // foo

変数の巻き上げ (ホイスト)¶

▼ 巻き上げとは¶

巻き上げは、varを使用して変数を宣言した時や、関数で発生し得る。

確認のためconsole.logメソッドを実行した場合、fooを宣言していないため、『x is not defined 』エラーになりそうである。

しかし実際は、宣言が既に済んでおり、fooに値が代入されていないことを示す『undefined』となる。

console.log(foo); // undefined

var foo = "foo"; // 宣言と代入

これは、スコープの範囲内で宣言と代入を実行した変数で、宣言処理がスコープの最初に行ったことになるという仕様のためである。

// 内部的には、最初に宣言処理したことになる
// var foo

console.log(foo); // undefined

var foo = "foo"; // 宣言と代入により、実際は宣言処理を実装していなくとも、行なったことになる。

これは関数の代入時にも起こる。

https://jsprimer.net/basic/function-scope/#function-declaration-hoisting

// 内部的には、最初に宣言処理したことになる
// var foo

foo(); // foo is not a function

var foo = function () {
  return "foo";
};

▼ `var`使用時の対策¶

意図しない挙動を防ぐため、変数の宣言と代入はスコープの最初に実行するようにする。

var foo = "foo"; // スコープの最初に宣言する。

console.log(foo); // foo

これは関数の代入時も同じである。

var foo = function () {
  return "foo";
};

foo(); // foo

▼ `let`,`const`使用時の対策¶

宣言にlet、constを使用した場合、巻き上げは起こらないため、宣言と代入の場所を気にしなくともよくなる。

console.log(foo); // foo is not defined

let foo = "foo";

分割代入¶

▼ 配列¶

配列の値を、任意の名前の変数に代入する。

＊実装例＊

const array = [1, 2, 3];

// fooに1、barに2、bazに3、を代入
const [foo, bar, baz] = array;

console.log(foo); // 1
console.log(bar); // 2
console.log(baz); // 3

▼ オブジェクト¶

オブジェクトの値を、プロパティ名と同じ名前の変数に代入する。

＊実装例＊

const obj = {
  foo: 1,
  bar: 2,
  baz: 3,
};

// プロパティ名と同じ名前の変数に代入
const {foo, baz} = obj;

console.log(foo); // 1
console.log(baz); // 3

04. 反復¶

`for of`¶

▼ `for of`とは¶

順序を保ったまま配列を走査し、値を取得する。

オブジェクトに対してentiresメソッドを使用して、一度配列に変換すれば、オブジェクトでもfor ofを使用できる。

for inを使用するより、こちらを使用した方が良い。

▼ 配列の場合¶

const array = ["foo", "bar", "baz"];

for (const value of array) {
  console.log(value);
}

// foo
// bar
// baz

配列のentiresメソッドを使用すれば、インデックス番号を取得もできる。

const array = ["foo", "bar", "baz"];

for (const [key, value] of array.entries()) {
  console.log(key);
}

// 0
// 1
// 2

▼ オブジェクトの場合¶

オブジェクトに対してentiresメソッドを実行し、一度連想配列に変換すれば、オブジェクトでもfor ... ofを使用できる。

const object = {
  x: "foo",
  y: "bar",
  z: "baz",
};

for (const [property, value] of Object.entries(object)) {
  console.log(value);
}

// foo
// bar
// baz

スプレッド構文 (`...`)¶

▼ スプレッド構文とは¶

ドット3個で記載する。

順序を保ったまま配列を走査し、値を取得する。

オブジェクトは捜査できない。

const array = ["foo", "bar", "baz"];

console.log(...array);

// foo
// baz
// baz

continue¶

`for in`¶

▼ `for in`とは¶

配列/オブジェクト (連想配列) を順序を保たずに走査し、オブジェクトのプロパティ名や配列のキー名を取得する。

▼ 配列の場合¶

const array = ["foo", "bar", "baz"];

for (const key in array) {
  console.log(key);
}

// 0
// 1
// 2

▼ オブジェクトの場合¶

const object = {
  x: "foo",
  y: "bar",
  z: "baz",
};

for (const property in object) {
  console.log(property);
  console.log(object[property]);
}

// x
// y
// z
// foo
// bar
// baz

▼ continueとは¶

反復処理の現在のループをスキップし、次のループを開始する。

const array = ["foo", "bar", "baz"];

for (const [key, value] of array.entries()) {

    // キー名が偶数の組をスキップする。
    if(!(key % 2 == 0)){
        continue;
    }

    console.log(value);
}

// foo
// baz

▼ `forEach`関数を使用した代替法¶

反復処理のループをcontinueでスキップと同じ動作を、配列を処理する関数のコールバック関数で早期リターンで実現できる。

continueを使用するより、こちらの方が良い。

https://www.deep-rain.com/programming/javascript/778#continue

PHPにも、forEach関数と同様に配列に対してコールバック関数を適用する関数 (find、fliter、map、reduce、some) があり、用途に合わせて使い分ける。

https://qiita.com/diescake/items/70d9b0cbd4e3d5cc6fce

補足としてPHPにも、forEach関数と同じような使い方をするarray_walk関数がある。

https://hiroki-it.github.io/tech-notebook/language/language_php_logic_iteration.html

const array = ["foo", "bar", "baz"];

array.forEach((value, key) => {
  // キーが偶数の組をスキップする。
  if (!(key % 2 == 0)) {
    return;
  }

  console.log(value);
});

// foo
// baz

メソッド/データ＠JavaScript¶

はじめに¶

01. 関数¶

関数オブジェクト¶

▼ 関数オブジェクトとは¶

▼ リテラル表記による関数オブジェクト¶

▼ コンストラクタ関数¶

function命令¶

▼ function命令とは¶

▼ 名前がドルマークのもの¶

▼ コールバック関数¶

▼ ファイル外で読み込む¶

02. データ型¶

undefined、null¶

▼ undefined¶

▼ null¶

▼ undefinedの返却¶

03. 変数¶

変数の種類¶

▼ 一覧表¶

▼ const¶

▼ let¶

▼ var¶

変数の巻き上げ (ホイスト)¶

▼ 巻き上げとは¶

▼ var使用時の対策¶

▼ let,const使用時の対策¶

分割代入¶

▼ 配列¶

▼ オブジェクト¶

04. 反復¶

for of¶

▼ for ofとは¶

▼ 配列の場合¶

▼ オブジェクトの場合¶

スプレッド構文 (...)¶

▼ スプレッド構文とは¶

continue¶

for in¶

▼ for inとは¶

▼ 配列の場合¶

▼ オブジェクトの場合¶

▼ continueとは¶

▼ forEach関数を使用した代替法¶

▼ `const`¶

▼ `let`¶

▼ `var`¶

▼ `var`使用時の対策¶

▼ `let`,`const`使用時の対策¶

`for of`¶

▼ `for of`とは¶

スプレッド構文 (`...`)¶

`for in`¶

▼ `for in`とは¶

▼ `forEach`関数を使用した代替法¶