REACTで頻出のJavaScript記法① arrow関数/Export,Import/ コールバック関数

Ruby on Railsをしばらくやっていて、少々JavaScriptに関して
忘れてる部分も多いので復習しながら頑張っていきます！

1. arrow関数

• arrow関数は、JavaScriptで簡潔に関数を定義するための構文。
  =>を使って関数を定義することができる。
• MDN: arrow関数について
• JS基礎：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";

モジュールは HTTP(s) 経由でのみ動作します。ローカルでは機能しません。
file:// プロトコル経由で Web ページをローカルで開いた場合、import/export ディレクティブが動作しない。モジュールをテストするには、静的サーバ のようなローカル Webサーバ、あるいは、VS Code のLive Server Extension のようなエディタのもつ “ライブサーバ” 機能を使用します。

3. コールバック関数

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