Zenn
📝

REACT頻出JS記法学習

2023/06/05に公開
3件
JavaScript
React
tech

REACTで頻出のJavaScript記法についてまとめです
学習中です..!

1. arrow関数

arrow関数の記法

通常の関数宣言は...

const fn = function(number){
  return number * 2;
}

console.log(fn(2));
// 4

上記をarrow関数にかきなおすと...

const fnArrow = (number) => {
  return number * 2;
}

console.log(fnArrow(2));

//　4

Arrow関数を使用することにより、関数の記述が簡略化できる(= 記述量が少なく済む)

arrow関数のルール

  • 関数の引数が1つの場合、丸括弧を省略することができる。
    ex. const func = x => { return x + 1; };

  • 関数の本体(処理式)が1つの式で構成される場合、波括弧とreturn文を省略することができる。
    ex. const func = x => x + 1;

    => 逆に、式が複数の場合は、{}とreturn文を使うこと。

  • arrow関数にはthisが存在せず、その代わりに外側のスコープのthisを参照する。

  • argumentsオブジェクトを参照することができない。

  • arrow関数はコンストラクターとして使用することができない。

この特徴にはめると、上記したarrow関数は以下のようにもっと簡略化できる。

const fnArrow = number => number * 2;

console.log(fnArrow(2));
// 4
arrow関数の基本構文
// アロー関数の宣言構文
(引数1, 引数2, ...) => {
  実行する処理;
};

// アロー関数を変数に代入する形
let 変数名 = (引数1, 引数2, ...) => {
  実行する処理
};
return文
  • returnは関数の実行を終了して、関数の呼び出し元に返す値を指定するもの。
function hello(name) {
    return 'こんにちは、' + name + 'さん';
}
 
console.log( hello('太郎') );
// こんにちは、太郎さん

2. ExportとImport

  • ExportとImportは、両方ともJavaScriptでモジュールを扱うための構文です。
  • MDN:Export / MDN:Import
  • JSチュートリアル：ExportとImport
    ExportとImportについて知るにあたり、ESモジュールについても知っておきたいところです。
    ※モジュールがわからない場合はここのページに戻る。
    一言で言えば、モジュールは単なる1つのファイルです！！
補足：ESモジュールと、モジュール化することによるメリット

【ESモジュールとは】

  • ECMAScript（JavaScript）の標準規格の1つで、モジュールを扱うための仕様。
  • ESモジュールは、ExportとImportを使って、JavaScriptのファイルやコードをモジュール化することができる。

【モジュール化するとは？】
=> 大きなアプリケーションを小さな部品に分割することで、保守性や再利用性を高める開発手法のこと。

【ESモジュールを使用するには...】
  • モジュールの導入方法
  • ESモジュールを使用するには、以下のように、HTMLファイルのscriptタグにtype属性を指定する必要がある。
    (type属性に"module"を指定することで、ブラウザはこのファイルをESモジュールとして解釈するようになる)
<script type="module" src="main.js"></script>
  • src属性にはESモジュールを定義したJavaScriptファイルのパスを指定する。
【モジュールかすることによるメリット】

1. 再利用性が高まる

  • モジュール化することによって、小さな単位で機能を分割することができるため、
    同じ機能を複数の箇所で使う必要がある場合でも、同じモジュールを利用することができる。
    ( = 再利用性が高まり、効率的な開発が可能になります。)

2. 保守性が向上する

  • モジュール化することによって、コードの変更や修正がしやすくなる。
    = 大きなアプリケーションの場合、どこでどのような変更があったかを把握するのは困難だが、モジュール化することで変更箇所を明確にすることができるから。
    = 不具合が発生した場合も、モジュール化された小さな単位でテストやデバッグが行いやすくなる。

3. 名前空間(namespace)の衝突を防ぐ
※JavaScriptでは、グローバルスコープを利用することで、どこからでもアクセスできる変数や関数を定義することができるが、複数のスクリプトで同じ名前を使った場合、名前空間の衝突が発生する可能性がある。
=> モジュール化することで、モジュールごとに独自のスコープが作られるため、名前空間の衝突を回避することができる。

Export

  • モジュールから外部に公開する関数や変数を指定。
  • 先頭にExportを付けることにより、外部からアクセス可能な関数になる。

複数の書き方がある

ex. 1. 変数の先頭につける方法

export const hello = () => {
   console.log("hello!")
};

このようにすると、helloという関数が外部でも使用できるようになる。
ex. 2. objectリテラルとしてあげる

class = User{
 constoructor(name){
    this.name = name;
  }
}

export {User}

上で定義したUserクラスが外部から使用できるようになる。

※arrow関数のルールで、arrow関数には**thisが存在せず、その代わりに外側のスコープのthisを参> 照**する。とあったと思うがこういうことだ！

import

  • 他のモジュールから関数や変数を読み込むための構文.
  • ex. module.jsで exportしたhelloという関数をmain.jsで使用する
import {hello} from "./module.js";

hello();
//hello
  • importは複数読み込むとき、基本的に上にまとめて記述すること。
  • 同じファイルから複数importする場合は同じ行でまとめて記述可能。
import {hello,〇〇} from "./module.js";

3. コールバック関数

  • 別の関数に渡され、その関数の処理が完了した後に呼び出される関数のことを指す。
  • 非同期処理を実装する際によく使用されるもの。
    JSにおける非同期処理の詳しくは以前にまとめたページ参照。
    ex. setTimeoutやsetInterval、XMLHttpRequestなどのメソッドは、
    コールバック関数を使用して非同期処理を実現している

4. スプレット演算子

スプレッド構文 (...) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の
引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、
オブジェクト式を、0 個以上のキーと値の組 (オブジェクトリテラルの場合) を
期待された場所で展開したりすることができます。
MDN web docs

  • JavaScriptやReactのコードでよく使用される便利な演算子で、
    配列やオブジェクトの要素を展開するために使用され、コードを簡潔にすることができるもの。

  • スプレット演算子は、三つのドット（...）で表される。
    配列やオブジェクトの前に配置することで、配列の要素やオブジェクトのプロパティを展開することができる。

ex.1 配列を要素展開し、新しい配列を作成

const arr = [1, 2, 3];

//この配列の要素を、スプレット演算子を使って展開すると...

const newArr = [...arr, 4, 5, 6];
console.log(newArr); 
// [1, 2, 3, 4, 5, 6]

このように、スプレット演算子を使うことで、
配列の要素を展開し、新しい配列を作成することができる。

ex.2 オブジェクトでも使用例

const obj1 = { foo: 'bar', x: 42 };

//このオブジェクトのプロパティを、スプレット演算子を使って展開することができます。

const obj2 = { ...obj1, y: 13 };
console.log(obj2); 
// { foo: 'bar', x: 42, y: 13 }

このように、オブジェクトもプロパティを展開し、新しいオブジェクトを作成することができる。

ex. 3 関数の引数での使用例

function sum(a, b, c) {
  return a + b + c;
}

//この関数に、スプレット演算子を使って配列を引数として渡すことができる。

const arr = [1, 2, 3];
const result = sum(...arr);
console.log(result); 
// 6

このように配列の要素を関数の引数として展開し、関数を呼び出すこともできます。

注意点

  • 配列やオブジェクトが大きすぎる場合には使用しない方が良い。
    大きなデータを展開する場合には、コードのパフォーマンスに悪影響を与える可能性がある。

参考

5. JavaScriptでDOMを取得する方法

JavaScriptでDOMを取得する方法には、以下のような方法があります。

  1. document.getElementById()
  2. document.querySelector()
  3. document.querySelectorAll()
  4. document.getElementsByTagName()
  5. document.getElementsByClassName()

5.1 document.getElementById()メソッドを使用する方法

  • HTMLドキュメント内の要素の中から、指定されたID属性を持つ要素を取得するために使用される。
    id属性は文書内で一意でなければいけない。

【構文】

const element = document.getElementById('要素のID');

ex.

以下のようなHTMLがあるとして...

<!DOCTYPE html>
<html>
<head>
	<title>document.getElementById()の例</title>
</head>
<body>
	<h1 id="title">Hello World</h1>
	<p>これは、document.getElementById()の例です。</p>
</body>
</html>

上記のHTMLから id="title" を持つ要素を取得するには、このように使用できる。

const titleElement = document.getElementById('title');

5.2 document.querySelector()メソッドを使用する方法

  • 指定されたCSSセレクターに一致する最初の要素を返す、JavaScriptのメソッド。
    CSSセレクターを使用してドキュメント内の特定の要素を選択するのに便利!

【構文】

element = document.querySelector(selectors);
  • ここでのselectorは、検索したい要素を指定するCSSセレクター。
    セレクターが一致する最初の要素が返されます。一致するものが見つからない場合は null を返す。

ex.①

例えば、次のHTML要素があるとします。

<div id="myDiv">Hello World!</div>

この要素にアクセスするには、次のようにDocument.querySelector()を使用。

const myDiv = document.querySelector("#myDiv");

#myDivというセレクターを使用し、IDがmyDivである<div>要素を選択。
この要素はmyDivという名前の変数に割り当てられるようにした。

ex.②

以下のようなHTMLがあったとして...

<form>
  <label for="name-input">Name:</label>
  <input type="text" id="name-input" name="name">
  <button type="submit">Submit</button>
</form>

このフォームの送信ボタンを取得するには...

//js
const submitButton = document.querySelector('button[type="submit"]');

そしてここから、ボタンがクリックされたときにイベントリスナー処理を追加すると以下のように使用できる。

//js
const submitButton = document.querySelector('button[type="submit"]');
submitButton.addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Button clicked!');
});

<参考>

5.3 document.querySelectorAll()メソッドを使用する方法

  • 指定されたCSSセレクターに一致するすべての要素を返す、JavaScriptのメソッド.

【構文】

elementList = parentNode.querySelectorAll(selectors);
  • ここでのselectorsは、検索したい要素を指定するCSSセレクターです。
    セレクターが一致するすべての要素がNodeListとして返される。

ex.

次のHTML要素があるとする。

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

このリストからすべての項目を取得するには、次のようにDocument.querySelectorAll()を使用する。

const items = document.querySelectorAll('li');
items.forEach(item => console.log(item.textContent));

<参考>

5.4 document.getElementsByTagName()メソッドを使用する方法

  • HTMLドキュメント内の要素の中から、指定されたタグ名を持つ一致するすべての要素を取得するために使用される。
    このメソッドは、getElementById()メソッドと同様に一般的に使用されるDOM要素取得メソッドの1つ。

【構文】

const elements = document.getElementsByTagName('タグ名');

ex.

以下のようなHTMLがあったとする..

<!DOCTYPE html>
<html>
<head>
	<title>document.getElementsByTagName()の例</title>
</head>
<body>
	<h1>タイトル1</h1>
	<p>これは、document.getElementsByTagName()の例です。</p>
	<h2>タイトル2</h2>
	<p>これは、document.getElementsByTagName()の例です。</p>
</body>
</html>

このHTMLから、 h1 要素を取得するには、以下のように使用することができる。

const h1Elements = document.getElementsByTagName('h1');

5.5 document.getElementsByClassName()メソッドを使用する方法

この方法は、指定されたクラス名に一致するすべての要素を取得する方法。

const elements = document.getElementsByClassName('example');

ex.
以下のようなHTMLがあったとして...

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>

クラス名が"box"である要素を取得するには、次のように使用するjことができる。

const boxes = document.getElementsByClassName("box");

上記のコードを実行すると、"boxes"という変数に"box"クラスを持つ全てのHTML要素が取得される。
この場合、変数"boxes"には3つの要素が含まれている。

取得した要素を操作する場合は、配列のようにインデックス番号で指定することができる！！
ex. 1つ目の要素のテキストを取得するには、以下のようにコードを書くことができます。

const firstBox = boxes[0];
const text = firstBox.innerText;
console.log(text); // "1"が表示される
復習：addEventListener()メソッド

JavaScriptにおけるイベントリスナー:

イベントが発生した際に実行される関数のことをイベントリスナーという。

イベント：ユーザーの操作やページの読み込みなど、ある特定の状況が発生したことを示すもの
リスナ：イベントが発生したときに実行される関数のこと
ex. ユーザーがボタンをクリックしたとき,ページが読み込まれたとき,など。
このようなイベントに対して、リスナーを設定することができる。

【基本構文】

target.addEventListener(type, listener[, options]);
//日本語にするなら
対象要素.addEventListener( 種類, 関数, false );

【ex. ボタン要素にclickイベントのリスナーを設定】

// ボタンの要素を取得
const button = document.querySelector('button');

// イベントリスナーを設定
button.addEventListener('click', function() {
  // ボタンがクリックされたときに実行される処理
});
  • 以下は同じようにarrow関数で設定する例
button.addEventListener('click', () => {
  // ボタンがクリックされたときに実行される処理
});

補足：DOMを取得する方法の種類の使い分け基準

1. 取得する要素の数

要素が1つしかない場合は getElementById や querySelector を使用するのが適している。
複数の要素を取得する場合は getElementsByClassName や getElementsByTagName、querySelectorAll を使用するのが適している。

2. 取得する要素の種類

getElementById はID属性を持つ要素を取得するのに適しています。
querySelector や querySelectorAll はCSSセレクタを使用できるので、より柔軟な要素の選択ができます。
getElementsByTagName はタグ名を指定して要素を取得するのに適しています。

状況に合わせて使い分けが必要。

コード内で使用する方法を統一することで、可読性の向上や保守性の向上にもつながる。

Discussion

AirichanAirichan

コメントしていただき、
また教えていただきありがとうございます！！
これは失礼致しました！再度勉強し修正いたします！！

Riya AmemiyaRiya Amemiya

元の配列やオブジェクトが変更されないようにするため、
展開前のオブジェクトや配列を変更しないように注意する必要がある。
展開前のオブジェクトや配列が変更された場合、展開後の配列やオブジェクトにも変更が反映されてしまう。

スプレット演算子は展開したらメモリを新たに確保するので展開前のオブジェクトを変更しても展開後の配列などに反映されません

const obj1 = { foo: 'bar', x: 42 };
const obj2 = { ...obj1, y: 13 };
obj1.foo = "foo"
console.log(obj1,obj2) // { foo: 'foo', x: 42 } { foo: 'bar', x: 42, y: 13 }

const obj1 = { foo: 'bar', x: 42 };
const obj2 = obj1 // 浅いコピー
obj1.foo = "foo"
console.log(obj1,obj2) // { foo: 'foo', x: 42 } { foo: 'foo', x: 42 }
AirichanAirichan

ご指摘、コメントありがとうございます！
勉強になりますもう一度勉強します！！