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

はじめに

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

主に参考にしたのは以下の講座です。
【2023年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript

npmとは

参考資料
Visual Studio Codeでnpmを使う - Qiita

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

node_modules フォルダ

カレントディレクトリ配下にあり、カレントディレクトリにインストールされる
モジュールの中身が配置されるフォルダ。

アロー関数

参考資料
JavaScript アロー関数を説明するよ - Qiita

(引数,...)=>{...関数の本体...}

アロー関数

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

function を使った場合

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

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

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

ESModules とは

参考資料
ESModules について - Qiita
export defaultとexportの違いは何か？指定した複数の変数や関数、処理を別の.jsや.vueファイルにインポートする方法

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

html

<script type="module" src="index.mjs">

type="module" を指定する
認証も必要なら crossorigin="use-credentials" を付与

Node

node --experimental-modules index.mjs

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

javascript

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

import { 変数名1, 変数名3 } from 'ファイルパス'
import hello from './hello' 

呼び出されるクラスを定義

export { 変数名１, 変数名2, 変数名3,,, };
export default () => { hello('world') }

ファイルの拡張子は .mjs
import の際に .mjs は省略して良い (.mjs -> .js の順で探索される為)
既に ES2015 (with Babel) で実装しているなら慣れ親しんでいるかも

• export default: 渡せるのは１つだけ
• export: 複数渡せる

コールバック関数

参考資料
【JavaScriptの超基本】コールバック関数について簡単に解説 - Qiita

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

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

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

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

DOM

参考資料
【JavaScript】DOMの基本 - Qiita

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

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

push・pop・unshiftメソッド

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

pushメソッド

:配列に新しい要素を追加し、その要素を追加した後の配列の長さを返す

let 配列変数 = [値1, 値2, 値3]; 
配列変数.push( 追加値1, 追加値2, 追加値3, ...);

popメソッド

:配列の末尾データを削除し、配列の末尾データを削除した要素を返す

let 配列変数 = [値1, 値2, 値3]; 
配列変数.pop();

unshift

:配列の先頭に追加し、要素追加後の配列全体の要素数を返す

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

for ( 変数 of 配列 ) 文

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

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

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

map()

参考資料
【JavaScript】map()の使い方 - Qiita

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

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

indexとarrayについては省略可能。

• value : 配列の要素
• index : 配列のインデックス
• array : 処理対象の配列

filter()

参考資料
JavaScriptでfilterを使う方法【初心者向け】 | TechAcademyマガジン
【JavaScript】filter()の使い方 - Qiita

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

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

indexとarrayについては省略可能。

• element : 配列の要素の値
• index : 配列のインデックス
• array : 処理対象の配列

indexOf

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

参考資料
JavaScriptのindexOfメソッドを使って文字列を検索する方法 | TechAcademyマガジン

1．文字列を対象とする場合
文字列.indexOf( 検索したい文字列[, 検索開始位置])
2．配列を対象とする場合
配列.indexOf( 検索したい配列要素[, 検索開始位置])

• 第1引数：検索のキーワードとなる値
• 第2引数：基本的には不要。文字列の何文字目から検索したい場合や、配列の何番目の要素から検索したい場合に、そのインデックス番号を指定。

const text = "東京都千代田区";
const result = text.indexOf("千代田");
console.log(result); //-> 3

検索は0番目から始まるので、3が返ってくる
検索をした時にもし対象の文字列が含まれなかった場合は、返り値として数値の-1が返される。

reduce()

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

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

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

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

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

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