知っておくと実装に役立つ！JavaScriptのテクニックのまとめ

Post on:2021年4月22日

はじめに

JavaScriptは世界で最もクールな言語の一つであることは間違いなく、日々ますます人気が高まっています。多くのデベロッパーがJavaScriptを使用し続け、コミュニティには有用なテクニックやヒントがあります。
その中から特に有用なJavaScriptのテクニックとヒントを共有したいと思います！

1. JavaScriptにおける機能継承

JavaScriptにおける機能継承とは、オブジェクトのインスタンスに拡張関数を適用することによって機能を受け取るプロセスのことです。この関数は、一部のデータをプライベートの非公開に保つために使用できるクロージャスコープを提供します。拡張関数は動的オブジェクト拡張を使用して、オブジェクトインスタンスを新しいプロパティとメソッドで拡張します。

// ベースの関数
function Drinks(data) {
  var that = {}; // 空のオブジェクトを作成
  that.name = data.name; // nameプロパティを追加
  return that; // オブジェクトを返す
};

// ベースの関数から継承する機能
function Coffee(data) {
  // Drinksオブジェクトを作成
  var that = Drinks(data);
  // ベースオブジェクトを拡張
  that.giveName = function() {
    return 'This is ' + that.name;
  };
  return that;
};

// 使用方法
var firstCoffee = Coffee({ name: 'Cappuccino' });
console.log(firstCoffee.giveName());
// This is Cappuccinoを出力します。

// ベースの関数

function Drinks(data) {

var that = {}; // 空のオブジェクトを作成

that.name = data.name; // nameプロパティを追加

return that; // オブジェクトを返す

};

// ベースの関数から継承する機能

function Coffee(data) {

// Drinksオブジェクトを作成

var that = Drinks(data);

// ベースオブジェクトを拡張

that.giveName = function() {

return 'This is ' + that.name;

};

return that;

};

// 使用方法

var firstCoffee = Coffee({ name: 'Cappuccino' });

console.log(firstCoffee.giveName());

// This is Cappuccinoを出力します。

このテクニックはFunctional Inheritance on JS Tips（@loverajoel）の引用です。

2. .map()の置換

.map()にも.from()という代替手段があり、下記のように使用することができます。

let dogs = [
    { name: ‘Rio’, age: 2 },
    { name: ‘Mac’, age: 3 },
    { name: ‘Bruno’, age: 5 },
    { name: ‘Jucas’, age: 10 },
    { name: ‘Furr’, age: 8 },
    { name: ‘Blu’, age: 7 },
]


let dogsNames = Array.from(dogs, ({name}) => name);
console.log(dogsNames);
// [“Rio”, “Mac”, “Bruno”, “Jucas”, “Furr”, “Blu”]を返します。

let dogs = [

{ name: ‘Rio’, age: 2 },

{ name: ‘Mac’, age: 3 },

{ name: ‘Bruno’, age: 5 },

{ name: ‘Jucas’, age: 10 },

{ name: ‘Furr’, age: 8 },

{ name: ‘Blu’, age: 7 },

]

let dogsNames = Array.from(dogs, ({name}) => name);

console.log(dogsNames);

// [“Rio”, “Mac”, “Bruno”, “Jucas”, “Furr”, “Blu”]を返します。

3. 数値から文字列に、文字列から数値に

通常、文字列を数値に変換するには、下記のようにします。

let num = 4
let newNum = num.toString();

1 2	let num = 4 let newNum = num.toString();

そして、文字列を数値に変換するには、下記のようにします。

let num = "4"
let stringNumber = Number(num);

1 2	let num = "4" let stringNumber = Number(num);

さらに、高速にコーディングするためには、下記のようにします。

let num = 15;
let numString = num + ""; // 数値から文字列に
let stringNum = +s; // 文字列から数値に

let num = 15;

let numString = num + ""; // 数値から文字列に

let stringNum = +s; // 文字列から数値に

4. lengthを使用して配列のサイズを変更したり、空にする

JavaScriptでは、lengthという組み込みメソッドをオーバーライドして、任意の値を割り当てることができます。

例を見てみましょう。

let array_values = [1, 2, 3, 4, 5, 6, 7, 8];  
console.log(array_values.length); 
// 8  
array_values.length = 5;  
console.log(array_values.length); 
// 5  
console.log(array_values); 
// [1, 2, 3, 4, 5]

let array_values = [1, 2, 3, 4, 5, 6, 7, 8];

console.log(array_values.length);

// 8

array_values.length = 5;

console.log(array_values.length);

// 5

console.log(array_values);

// [1, 2, 3, 4, 5]

下記のように、配列を空にする場合にも使用できます。

let array_values = [1, 2, 3, 4, 5, 6, 7,8]; 
console.log(array_values.length); 
// 8  
array_values.length = 0;   
console.log(array_values.length); 
// 0 
console.log(array_values); 
// []

let array_values = [1, 2, 3, 4, 5, 6, 7,8];

console.log(array_values.length);

// 8

array_values.length = 0;

console.log(array_values.length);

// 0

console.log(array_values);

// []

5. 配列の分割で値を入れ替える

分割代入（destructuring assignment）構文とは、配列から値を取り出したり、オブジェクトからプロパティを取り出して、別の変数にすることができるJavaScriptの式です。これを使用して、下記のように値を高速に入れ替えることができます。

let a = 1, b = 2
[a, b] = [b, a]
console.log(a) // 結果 -> 2
console.log(b) // 結果 -> 1

let a = 1, b = 2

[a, b] = [b, a]

console.log(a) // 結果 -> 2

console.log(b) // 結果 -> 1

6. 配列から重複を削除する

このテクニックはとても簡単です。
例えば、数値、文字列、ブール値を含む配列を作成したところ、値が複数回繰り返されているので、重複した値を削除したいとします。どうすればいいかというと、

const array = [1, 3, 2, 3, 2, 1, true, false, true, 'Kio', 2, 3];
const filteredArray = [...new Set(array)];
console.log(filteredArray) // [1, 3, 2, true, false, "Kio"]

const array = [1, 3, 2, 3, 2, 1, true, false, true, 'Kio', 2, 3];

const filteredArray = [...new Set(array)];

console.log(filteredArray) // [1, 3, 2, true, false, "Kio"]

7. ループのコードを少なくする

下記のように、ループのコードを少なくすることができます。

const names = ["Kio", "Rio", "Mac"];

// ロングバージョン
for (let i = 0; i < names.length; i++) {
  const name = names[i];
  console.log(name);
}

// ショートバージョン
for (let name of names) console.log(name);

const names = ["Kio", "Rio", "Mac"];

// ロングバージョン

for (let i = 0; i < names.length; i++) {

const name = names[i];

console.log(name);

}

// ショートバージョン

for (let name of names) console.log(name);

8. パフォーマンス

Googleのようにコードが実行された時間をJavaScriptで取得することもできます。

検索にかかった時間が表示される

これは下記のようになります。

const firstTime = performance.now();
something();
const secondTime = performance.now();
console.log(`The something function took ${secondTime - firstTime} milliseconds.`);