【React】Reactでよく使うJavaScriptの記法１

#### はじめに
Reactでよく使われるJavaScriptの記法についてまとめました。

主に参考にしたのは以下の講座です。
[【2023年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript](https://www.udemy.com/course/react-complete-guide/)


## npmとは		
		
参考資料
[Visual Studio Codeでnpmを使う - Qiita](https://qiita.com/TakamiChie/items/5f69c8682195d3ca9fe5)

node.js のパッケージマネージャー	
	npmを使うことで、プロジェクト内のライブラリバージョン管理を行うことができる。

## node_modules フォルダ		
		
 カレントディレクトリ配下にあり、カレントディレクトリにインストールされる	
モジュールの中身が配置されるフォルダ。	
				
## アロー関数		
 
 参考資料
 [JavaScript アロー関数を説明するよ - Qiita](https://qiita.com/may88seiji/items/4a49c7c78b55d75d693b)
		
 (引数,...)=>{...関数の本体...}

#### アロー関数

```javascript
let getTriangle = (base, height) => {
  return base * height / 2;
};
console.log('三角形の面積は' + getTriangle(10,2));//三角形の面積は10
```
		
 #### function を使った場合	

```javascript
let getTriangle = function(base,height){
 return base * height / 2;
};
console.log('三角形の面積は' + getTriangle(10,2));//三角形の面積は10
```

#### 本体が一文である場合、returnは省略できる	

```javascript
let getTriangle = (base, height) => base * height / 2;
console.log(getTriangle(10,2));//10
```

## ESModules とは

参考資料
[ESModules について - Qiita](https://qiita.com/nanocloudx/items/f541c7ff95b10b40d189)
[export defaultとexportの違いは何か？指定した複数の変数や関数、処理を別の.jsや.vueファイルにインポートする方法](https://prograshi.com/language/javascript/export-default-and-export/)

JavaScript から別の JavaScript を読み込む為の仕組み

#### html
```javascript
<script type="module" src="index.mjs">
```

 type="module" を指定する
 認証も必要なら crossorigin="use-credentials" を付与
	
#### Node	
```javascript
node --experimental-modules index.mjs
```

 拡張子を .mjs にする
 --experimental-modules フラグを付与する

#### javascript		
 別のjavascriptからクラスを呼び出す	

```javascript
import { 変数名1, 変数名3 } from 'ファイルパス'
import hello from './hello' 
```	   
		
 呼び出されるクラスを定義	
```javascript
export { 変数名１, 変数名2, 変数名3,,, };
export default () => { hello('world') }
```	   	
		
 ファイルの拡張子は .mjs	
 import の際に .mjs は省略して良い (.mjs -> .js の順で探索される為)	
 既に ES2015 (with Babel) で実装しているなら慣れ親しんでいるかも	
				
 + export default: 渡せるのは１つだけ	
 + export: 複数渡せる
 
## コールバック関数

参考資料
[【JavaScriptの超基本】コールバック関数について簡単に解説 - Qiita](https://qiita.com/ta1fukumoto/items/1d2dc5bcf4ef0ff74eaa#%E9%96%A2%E6%95%B0%E3%81%AE%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%97%E6%96%B9%E3%81%A8%E6%B8%A1%E3%81%97%E3%81%9F%E6%96%B9)

```javascript
//関数introduceを定義
const introduce = () => {
    console.log('私の名前は〇〇〇です');
};

//関数callを定義
const call = (callback) => {
    console.log('こんにちは！');
    callback();
};

//introduceをコールバック関数としてcallに渡す
call(introduce);

//以下、出力結果
//こんにちは！
//私の名前は〇〇〇です
```

## DOM

参考資料
[【JavaScript】DOMの基本 - Qiita](https://qiita.com/fumu238/items/6a6fe367988dc8c75d86)

「Document Object Model」の略
HTML(XMLなども)オブジェクトとして扱い、それを操作するためのモデル
DOM API　や DOM と呼ぶ

JavaScriptを使ってHTMLの情報を取得・変更・イベントの登録などができる

## push・pop・unshiftメソッド

参考資料
[JavaScript【 array 】11 ～ 配列のpushとpop - プログラマカレッジ (programmercollege.jp)](https://programmercollege.jp/column/7200/)
[JavaScriptでunshiftメソッドを使って配列の先頭に要素を追加する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン](https://magazine.techacademy.jp/magazine/27124#ta-toc-2)

#### pushメソッド	
:配列に新しい要素を追加し、その要素を追加した後の配列の長さを返す	

```javascript
let 配列変数 = [値1, 値2, 値3]; 
配列変数.push( 追加値1, 追加値2, 追加値3, ...);
```
	
#### popメソッド	
:配列の末尾データを削除し、配列の末尾データを削除した要素を返す

```javascript
let 配列変数 = [値1, 値2, 値3]; 
配列変数.pop();
```	
	
#### unshift	
:配列の先頭に追加し、要素追加後の配列全体の要素数を返す	

```javascript
配列名.unshift('追加したい要素');
```

## for ( 変数 of 配列 ) 文

参考資料
[【JavaScript入門】for文のループ処理はこれで完璧! for-in / for-of / forEach文も徹底解説！ | 侍エンジニアブログ (sejuku.net)](https://www.sejuku.net/blog/20777)

配列の「値」が1つずつ変数へ代入される。それぞれの「値」に対して何らかの処理を実行できる。	

```javascript
for ( 変数 of 配列 ) {
 // 繰り返しの処理を書く
}
``` 
 
## map()

参考資料
[【JavaScript】map()の使い方 - Qiita](https://qiita.com/s_ryota/items/7936051437f06d76bf8c)

配列すべての要素に対して、コールバック関数を実行してその返り値で新しい配列が生成される。	

 ```javascript
// arrayは配列
array.map((value, index, array) => {
    //　処理内容
});
```

indexとarrayについては省略可能。
+ value : 配列の要素
+ index : 配列のインデックス
+ array : 処理対象の配列

## filter()
参考資料	
[JavaScriptでfilterを使う方法【初心者向け】 | TechAcademyマガジン](https://magazine.techacademy.jp/magazine/15575)
[【JavaScript】filter()の使い方 - Qiita](https://qiita.com/s_ryota/items/d76ff60d5bf652e757a3)

配列の内容を特定の条件で絞り込むメソッド
コールバック関数で指定された条件を満たす要素だけを取り出して新しい配列を生成するメソッド

 ```javascript
// arrayは配列
array.filter((element, index, array) => {
    //　処理内容
});
```

indexとarrayについては省略可能。
+ element : 配列の要素の値
+ index : 配列のインデックス
+ array : 処理対象の配列

## indexOf
配列の何番目の要素であるか。最初に一致した位置を返す。	

参考資料
[JavaScriptのindexOfメソッドを使って文字列を検索する方法 | TechAcademyマガジン](https://magazine.techacademy.jp/magazine/14759)	

1．文字列を対象とする場合			
文字列.indexOf( 検索したい文字列[, 検索開始位置])						
2．配列を対象とする場合			
配列.indexOf( 検索したい配列要素[, 検索開始位置])						
+ 第1引数：検索のキーワードとなる値		
+ 第2引数：基本的には不要。文字列の何文字目から検索したい場合や、配列の何番目の要素から検索したい場合に、そのインデックス番号を指定。

```javascript
const text = "東京都千代田区";
const result = text.indexOf("千代田");
console.log(result); //-> 3
```
			
検索は0番目から始まるので、3が返ってくる	
検索をした時にもし対象の文字列が含まれなかった場合は、返り値として数値の-1が返される。

## reduce()

参考資料
[map・filter・reduceの書き方・使い方 - Qiita](https://qiita.com/kana-wwib/items/3acb6d448aef63748be7)
[【JavaScript入門】初心者でも分かるreduce()の使い方とサンプル例まとめ | 侍エンジニアブログ (sejuku.net)](https://www.sejuku.net/blog/69622)
[【JavaScript】reduceメソッドとは何か？第1, 第2, 第3, 第4引数の意味や初期値の設定方法を実例で解説（初心者向け、わかりやすい） (prograshi.com)](https://prograshi.com/language/javascript/how-to-use-reduce/)
[【JavaScript】reduce()の使い方 - Qiita](https://qiita.com/s_ryota/items/734ae6bbdd329f0a2a1b)

配列の要素を一つずつ取り出し、指定した処理を行っていき、最終的に一つの値を返す関数
初期値を指定することで、配列の要素の数だけ処理を実行する

```javascript
array.reduce( ( ( 引数1, 引数2, 引数3m 引数4 ), 初期値  => 処理 ), <初期値> )
```

数値であればすべて合計した値を算出し、文字であればすべて繋ぎ合わせた1つの文字列を取得できる

+ 第1引数：１つ前のコールバック関数の結果の値。最初は、初期値か対象配列array[0]の要素。
+ 第2引数：現在の要素の値。最初は、初期値が指定されている場合は対象配列array[0]の要素、指定なしの場合は対象配列array[1]の要素。
+ 第3引数：現在の要素のインデックス番号。最初は、初期値が指定されている場合は0、指定なしの場合は1。
+ 第4引数：元々の配列

```javascript
const array = [1,2,3,4,5];
const total = array.reduce((sum, value) => {
return sum + value;
}, 0);
console.log(total);
```