最近Reactを触り始め、Javascriptで使う構文やメソッドをいくつか使ってみたので、アウトプットもかねて整理してみました。
1. mapメソッド
与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。
const array1 = [1, 4, 9, 16];
// Pass a function to map
const map1 = array1.map((x) => x * 2);
console.log(map1);
// Expected output: Array [2, 8, 18, 32]
2. filterメソッド
配列内の各要素に対して与えられた関数を適用し、条件を満たす要素のみを含む新しい配列を生成します。
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]
3. sortメソッド
配列の要素を適切な位置にソートし、その配列を返します。デフォルトでは、文字列順にソートされますが、関数を渡すことでカスタムソートも可能です。
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// Expected output: Array ["Dec", "Feb", "Jan", "March"]
const array1 = [1, 30, 4, 21, 100000];
array1.sort((a, b) => a - b);
console.log(array1);
// Expected output: Array [1, 4, 21, 30, 100000]
4. reduceメソッド
累積結果（アキュムレータ）を次の要素に渡しながら、配列の全ての要素を順番に処理します。累積結果を次の要素に渡すことで、配列を1つの値にまとめます。
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
console.log(array1.reduce(reducer));
// Expected output: 10
console.log(array1.reduce(reducer, 5));
// Expected output: 15
5. テンプレート文字列
文字列に変数や式を埋め込むための構文です。バッククォート（`）で囲み、${}を使って変数や式を挿入します。
const user = 'Alice';
const greeting = `Hello, ${user}!`;
console.log(greeting);
// Expected output: Hello, Alice!
6. アロー関数
より簡潔な関数定義方法です。従来のfunctionキーワードの代わりに、矢印（=>）を使います。
const add = (a, b) => a + b;
console.log(add(2, 3));
// Expected output: 5
7. 分割代入
配列やオブジェクトの値を簡単に取り出す方法です。
//配列の分割代入を使うと、配列の要素を個別の変数に簡単に割り当てることができます。
const [a, b] = [10, 20];
console.log(a); // Expected output: 10
console.log(b); // Expected output: 20
//オブジェクトの分割代入を使うと、オブジェクトのプロパティを個別の変数に簡単に割り当てることができます。
const user = { name: 'Alice', age: 25 };
const { name, age } = user;
console.log(name); // Expected output: Alice
console.log(age); // Expected output: 25
8. デフォルト値
関数の引数や分割代入の際に、値が未定義の場合に使われるデフォルトの値を設定する方法です。
function greet(name = 'Guest') {
return `Hello, ${name}!`;
}
console.log(greet('Alice')); // Expected output: Hello, Alice!
console.log(greet()); // Expected output: Hello, Guest!
9. スプレッド構文
配列やオブジェクトの要素を展開する方法です。
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2);
// Expected output: Array [1, 2, 3, 4, 5, 6]
const user1 = { name: 'Alice', age: 25 };
const user2 = { ...user1, city: 'Wonderland' };
console.log(user2);
// Expected output: Object { name: "Alice", age: 25, city: "Wonderland" }
10. 省略記法
オブジェクトリテラルでプロパティ名と変数名が同じ場合に、省略記法を使うことでコードを簡潔にできます。
//従来の方法
//オブジェクトを作成する際に、プロパティ名と変数名を両方指定します。
const name = 'Alice';
const age = 25;
const user = {
name: name,
age: age
};
//省略記法
//プロパティ名と変数名が同じ場合、変数名だけを指定します。
const name = 'Alice';
const age = 25;
const user = { name, age };
console.log(user);
// Expected output: Object { name: "Alice", age: 25 }
11. 論理演算子
条件によって異なる値を返すために使われます。特に、短絡評価（ショートサーキット評価）を活用できます。
AND（&&）演算子
AND 演算子は、すべての条件が真（true）である場合に真を返します。途中で一つでも偽（false）を見つけると、その時点で評価を止めて、その偽の値を返します
console.log(true && 'Yes'); // 'Yes'を出力（両方とも真）
console.log(false && 'Yes'); // falseを出力（最初の条件が偽）
OR（||）演算子
動作: OR 演算子は、一つでも条件が真である場合に真を返します。途中で一つでも真を見つけると、その時点で評価を止めて、その真の値を返します。
console.log(false || 'No'); // 'No'を出力（最初の条件が偽）
console.log(true || 'No'); // trueを出力（最初の条件が真）
12. 三項演算子
三項演算子は、条件に基づいて異なる値を返すためのシンプルな方法です。条件 ? 真の場合の値 : 偽の場合の値 の形式で使います。
const age = 20;
const canDrink = age >= 21 ? 'Yes' : 'No';
console.log(canDrink);
// Expected output: No
13. オプショナルチェイニング
オプショナルチェイニングは、ネストされたオブジェクトのプロパティに安全にアクセスするための構文です。もしプロパティが存在しない場合、エラーを発生させずに undefined を返します。
const user = { name: 'Alice', address: { city: 'Wonderland' } };
console.log(user?.address?.city); // Expected output: Wonderland
console.log(user?.contact?.email); // Expected output: undefined
14. Null合体演算子
Null合体演算子（??）を使うと、nullまたはundefinedの場合にデフォルト値を提供するための演算子です。
const name = null ?? 'Guest';
const age = 1 ?? 18;
console.log(name); // Expected output: Guest
console.log(age); // Expected output: 1
15. pushメソッド
配列の末尾に1つまたは複数の要素を追加し、その新しい長さを返します。
const array = ['a', 'b', 'c'];
const newLength = array.push('d');
console.log(array); // Expected output: Array ["a", "b", "c", "d"]
console.log(newLength); // Expected output: 4
16. popメソッド
配列の末尾から1つの要素を取り除き、その要素を返します。
const array = ['a', 'b', 'c'];
const removedElement = array.pop();
console.log(array); // Expected output: Array ["a", "b"]
console.log(removedElement); // Expected output: "c"
17. spliceメソッド
配列から要素を追加、削除、または置き換えるためのメソッドです。
const array = ['a', 'b', 'c', 'd', 'e'];
const removedElements = array.splice(2, 2, 'x', 'y');
//spliceメソッドは、以下の3つのパラメータを受け取ります：
//開始位置: 最初のパラメータ（ここでは 2）は、操作を開始する配列のインデックスです。インデックスは0から始まります。ここでは、'c'が位置するインデックス2から操作を開始します。
//削除する要素の数: 次のパラメータ（ここでは 2）は、配列から削除する要素の数です。この例では、インデックス2から2つの要素（'c'と'd'）を削除します。
//追加する要素: その後に続くパラメータ（ここでは 'x' と 'y'）は、削除した位置に追加する新しい要素です。この例では、削除された位置に'x'と'y'を追加します。
console.log(array); // Expected output: Array ["a", "b", "x", "y", "e"]
console.log(removedElements); // Expected output: Array ["c", "d"]
18. reverseメソッド
配列の要素の順番を逆にします。
const array = ['a', 'b', 'c'];
const reversedArray = array.reverse();
console.log(array); // Expected output: Array ["c", "b", "a"]
console.log(reversedArray); // Expected output: Array ["c", "b", "a"]
19. fillメソッド
配列の要素を指定した値で埋めます。
const array = [1, 2, 3, 4];
array.fill(0, 2, 4);
//fillメソッドは、以下の3つのパラメータを受け取ります：
//値: 最初のパラメータ（ここでは 0）は、指定した範囲に埋める値です。この例では、2番目の要素から4番目の要素の手前まで（インデックス2から3まで）を0で埋めます。
//開始位置: 次のパラメータ（ここでは 2）は、埋め始める位置のインデックスです。この例では、インデックス2（つまり3番目の要素）から始めます。
//終了位置: 最後のパラメータ（ここでは 4）は、埋めを終える位置のインデックスです。この例では、インデックス4の手前まで（つまり4番目の要素の手前まで）を指定します。
console.log(array); // Expected output: Array [1, 2, 0, 0]
20. concatメソッド
2つ以上の配列を結合し、新しい配列を生成します。
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const newArray = array1.concat(array2);
console.log(newArray);
// Expected output: Array ["a", "b", "c", "d", "e", "f"]
21. joinメソッド
配列のすべての要素を文字列に結合し、その結果を1つの文字列として返します。指定された区切り文字を使用することもできます。
const elements = ['Fire', 'Air', 'Water'];
const result = elements.join();
console.log(result);
// Expected output: "Fire,Air,Water"
const resultWithSeparator = elements.join('-');
console.log(resultWithSeparator);
// Expected output: "Fire-Air-Water"
22. sliceメソッド
配列の一部を抽出し、新しい配列として返します。元の配列は変更されません。
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
const result = animals.slice(2);
console.log(result);
// Expected output: Array ["camel", "duck", "elephant"]
const resultWithEnd = animals.slice(2, 4);
console.log(resultWithEnd);
// Expected output: Array ["camel", "duck"]
23. findメソッド
配列内の要素に対して指定された関数を適用し、条件を満たす最初の要素を返します。条件を満たす要素が存在しない場合はundefinedを返します。
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// Expected output: 12
24. someメソッド
配列内の少なくとも1つの要素が条件を満たすかどうかをテストします。条件を満たす要素があればtrue、そうでなければfalseを返します。
const array = [1, 2, 3, 4, 5];
const even = array.some(element => element % 2 === 0);
console.log(even);
// Expected output: true
25. everyメソッド
配列内のすべての要素が条件を満たすかどうかをテストします。すべての要素が条件を満たす場合はtrue、そうでなければfalseを返します。
const array = [1, 30, 39, 29, 10, 13];
const elements = array.every(currentValue => currentValue < 40);
console.log(elements);
// Expected output: true
＊＊＊
参考文献
Qiita Dragon1208(2024)「【初心者向け】Reactでよく使うJavaScriptのメソッドや構文13選とReact Hooks(プチ紹介)」,https://qiita.com/Dragon1208/items/a14d0cdcc70f60934659 2024年07月01日アクセス.