4.Front End Development_JavaScript - YukaKoshiba/MyknowledgeDocs GitHub Wiki

Front End Development_JavaSCript @Japanese Version
Create Date：2024/11/01
Last Update Date：2025/04/15

JavaScript

用語　 お作法　 テンプレートリテラル　 イベント　 処理のタイミング
データ型　 データ/データ構造　 メッセージ出力　 変数宣言
基本構文： 条件分岐 ( if文　 switch文 )　 loops ( for文　 while文 )　 例外処理　
演算子

関数(functions)　 アロー関数　 非同期関数(async function)　 匿名関数

オブジェクト
クラス　 オブジェクトを作成　 オブジェクトの配列にアクセスする　 スプレット構文
組み込みオブジェクトとメソッド　 メソッド
グローバルオブジェクト： Object　 RegExp(正規表現)　 window　 Number
通常のオブジェクト ： console　 String　 Math　 Date　 Object　 document　 Array(配列)　 Event　 HTMLAudioElement
DOM要素(Element)オブジェクト ： document.addEventListener利用の注意点
Category Object

正規表現(regular expressions)　ajaxの実装

デバック時のお役立ち情報： ユーザの画面と同じ様な挙動で実行する　 開発者モード

ライブラリ： D3　 jQuery　 Redux

D3：

jQuery：
お作法　 実装方法　 関数　 オブジェクトとメソッド( 属性操作　 HTML操作　 CSS操作　 DOM構造操作)　 疑似クラス　 ajaxの実装

React：
用語　 コンポーネントの使い方　 コンポーネントの命名方法　 コンポーネントの作成
JSX記述ルール/HTMLとの違い： 終了タグ コメント文 JSX構文エラーの挙動 JSX要素の作成 return規則 class属性
変数やオブジェクトの取り扱い　 スタイル指定　 propsの指定　 コンポジション(≒コンポーネントをまとめる)　 仮想DOMのレンダリング Reactのイベントハンドラー ステートレスコンポーネント(stateful component)
stateの変更　 サーバサイド処理　 lifecycle methods(またはlifecycle hooks)

Redux：
用語　 処理の流れ　 Reduxの使い方　 Reactの連携

Webページに複雑な機能を実装することを可能にするスクリプト/プログラミング言語
動的なWebページの作成が可能になる

1990年代に他のプログラミング言語から派生して作られたプログラミング言語
C言語の構文に由来しており、C言語を理解していれば比較的容易に習得できる

JavaScriptはオブジェクト指向プログラミング言語として使用でき、
オブジェクトは、プロパティ(属性)とメソッド(関数)を持つ

JavaScriptはクライアントサイドで実行されるため、ウェブページを閲覧しているユーザーのコンピュータ上で動作する

また、JavaScriptは、イベント駆動型プログラミングに基づいて動作する
これは、プログラムの実行が、ユーザーの操作やWebブラウザで発生するイベントによって駆動されるという考え方で、
プログラムは、特定のイベントが発生するまで待機し、イベントが発生したら、それに対応する処理を実行する
C言語などの手続き型プログラミングとは異なり、プログラムの実行順序が事前に決まっているわけではない

• 文末は、必ず;(セミコロン)で終わる
• 変数名には文字/数字/$/_を使用できる
  スペースは使用不可,最初の文字は数字以外
• 文字列の大文字と小文字は区別される
• 文命名規則はcamel case

console.log(変数名 or "文字列" or 関数など)

,(カンマ)で区切る事で、複数の値を一度に出力することも可能

console.log(変数名, "文字列", 関数()

// 1行のみのコメント文
/* 複数行のコメント文 */

• 変数(variables)
  値を格納する特定の記憶の番地
  変数を宣言する(declaration)＝変数に名前を付ける
　
• 初期化(initialized)
  変数に最初にどのような値を入れるか決めること
  初期化することで、予期せぬ値や、エラー、バグを防ぐ
  初期化されていない時、console.log()など画面表示をすると、"undefined"と表示される
• 変数(variables)
  値を格納する特定の記憶の番地
  変数を宣言する(declaration)＝変数に名前を付ける
  * グローバルスコープ
  　関数やforループの様なブロックの外で宣言された変数
  * ローカルスコープ
  　関数の中で変数を宣言したもの
  　ブロックの外では変数にアクセスが出来ない為、参照エラーになる
• immutable
  String(文字列)など、不変で一度作成されると変更できない性質
  変数に別の値を代入し表面上値が変更されているように見えても新しい文字列が作成されている
  意図しない操作を防ぐだけでなく、文字列が変更されないことでプログラムの動作が予測しやすくなり、メモリ管理やパフォーマンスが最適化される
• mutable
  Array(配列)など、一度作成された後も、その値や状態を変更できる性質
• non primitive
  mutableで、undefined, null, boolean, number, string, symbolではないデータ型
• DOM(Document Object Model)
  JavaScriptとHTMLおよびXMLをやりとりする際に利用するAPI(仕組み)
  HTMLやXMLの文書構造をノードのツリーとして読み込む
  ＝文書内の各要素(タグ,テキストなど)をオブジェクトとして表現し、
  それらのオブジェクトをツリー構造で管理する
  JavaScriptからDOMを操作することで、Webページのコンテンツや構造、スタイルなどを動的に変更できる
  kum 参考
• NodeList
  DOMで使用される、ノード(HTML要素など)の集合を表すオブジェクト
  =ノードのリスト(配列のようなもの)を管理するもの
  配列に似ているが、配列ではない為、push()等配列に対して行う操作は出来ない
• コンストラクタ
  通常の関数と似ているが、大文字で始まり、new演算子で初期化される
  新しいオブジェクトを作成し、その初期化を行うための特別な関数
  =クラスの定義に基づいて新しいオブジェクトを作成する
• ホイスティング
  関数宣言は、コードのどこで宣言されていても、関数の呼び出しよりも前に解釈される
  ＝関数を宣言する前に呼び出すことが可能

三項演算子など、リファクタリング(外部の動作を変えずにソースコードの内部構造を変更する)により、コードの可読性向上やパフォーマンスの向上を狙う事が出来る

JavaScriptでは割り算の商を返す演算子は無い
整数の商だけが必要な場合は、Math.floor()関数を使って、商を算出できる

let integerQuotient = Math.floor(dividend / divisor); 

// if-else statement
if (score > 0) {
  return score
} else {
  return default_score
}

// ternary operator
return score > 0 ? score : default_score

// 変数に対して三項演算子をセットすることも可能
const 値をセットする変数  = 条件を確認したい値 < 0 ? 0未満 : 0以上;

他のプログラミング言語の様な、変数の型指定は不要

let 変数名; // 変数を宣言
変数名 = "値"; //　変数を初期化
変数名 = "値"または他変数名;　// 変数の値を変更する

オブジェクトを新しく作成したい場合は、newキーワードを利用する

• null
  値が無い
• array(配列)
  同じ型のデータを連続したメモリ領域に格納するためのデータ構造
  各要素に順番に0から番号(インデックス)が割り当てられる
  配列に格納されたデータを"要素"、配列に格納できる最大サイズを"サイズ"と呼ぶ
  mutable(= 要素の追加、削除、変更などが可能)
• stack
  LIFO(last-in-first-out)方式で格納されるデータ構造
• call
  スタック構造に格納された関数呼び出しのコレクション
  関数を呼び出すとスタックの一番上に追加され、関数が戻るとスタックの一番上/最後から削除される

イベントとは、Webページ上で発生する出来事を指す

JavaScriptでは、以下のような様々なイベントが発生する
・ユーザーの操作：クリック、マウスオーバ、キー入力など
・Webブラウザの動作：ページの読み込み完了フォーム送信など
・タイマー：一定時間経過など

JavaScriptのEventの全体図

上記のようなイベントは、それぞれに対応するEventHandller(＝イベントが発生したときに実行される関数)を登録することで、処理できる
＝JavaScriptでは、イベントが発生した際に実行されるイベントハンドラを定義する

EventHandllerは、以下2つのいずれかの方法で定義が出来る
1.HTML要素の属性として記述する
2.JavaScriptコード内でで定義する

イベントが発生すると、イベントに関する情報を持つイベントオブジェクトが生成される
イベントオブジェクトは、発生したイベントに関する情報を提供し、
発生したイベントの種類、発生源の要素、マウスの座標、キー入力された文字などの情報が含まれる
EventHandllerの引数としてイベントオブジェクトを受け取ることで、イベントに関する情報を取得し、処理に利用できる

EventListenrは、特定のイベントが発生した際、どの関数を実行するかをWebブラウザに伝える仕組み
addEventListener()メソッドを使って、EventListenrをDOM要素に登録する
これにより、複数のEventHandllerを1つの要素に登録したり、後からEventHandllerを追加したりすることが可能になる

<h5イベントの伝播(イベントバブリングとイベントキャプチャリング)

DOMのツリー構造において、ある要素でイベントが発生すると、そのイベントは親要素へと伝播していくことがある
イベントの伝播には、2つの方式がある
・イベントバブリング：子要素から親要素へとイベントが伝播する方式 ・イベントキャプチャリング：親要素から子要素へとイベントが伝播する方式
addEventListener()メソッドの第3引数で、イベントの伝播方式を指定できる

Webページの読み込みは、以下の順番で読み込まれる
そのため、記述方法によっては、読み込み前に関数やイベントが実行されてしまい、エラーの原因になることがある
(例)HTMLの読み込みが完了する前にDOM操作を行いエラーが発生するなど

処理のタイミング：
1.HTMLの解析:ブラウザはHTMLファイルを上から順番に解析し、DOMツリーを構築し始める
2.<script>タグの実行：<script>タグに遭遇すると、ブラウザはHTMLの解析を一時停止し、その <script>タグ内のJavaScriptコードを実行する
3.DOMContentLoaded イベントの発生：HTMLの解析が完了し、DOMツリーが完全に構築されると、DOMContentLoaded イベントが発生する
※この時点では、画像やCSSなどの外部リソースのロードはまだ完了していない可能性がある
4.コールバック関数の実行：DOMContentLoadedイベントが発生した直後に、document.addEventListener('DOMContentLoaded', ...)で登録されたコールバック関数が実行される

// if: 条件がtrueであれば処理を行う
if (条件1) {
  処理
} else if (条件2) {
  処理
} else {
  処理
} 

// switch:　条件に応じて異なる処理を実行する
switch (条件式) {
  case value1:
    console.log("case1に該当");
    break;
  case value2:
    console.log("case2に該当");
    break;
  // どのcaseにも一致しない場合に実行する処理
  default:
    console.log("非該当");
}

条件にBoolean値を設定する際には、if (変数===true)ではなく、単純にif (true)と記述する

for (let i = 0; 繰返し条件; i = i + 1) {
　 処理
}
for (let 変数 of 配列/反復可能オブジェクト) {
処理
}

// while:　条件を満たす限り、処理を繰り返す
while (条件) {
  処理
}

オプションチェーン(Optional Chaining):
オブジェクトのプロパティやメソッドにアクセスする際、そのプロパティやメソッドが存在しない場合にエラーが発生するのを防ぐ構文

const user = {
  address: {
    street: 'Main Street',
    city: 'New York'
  }
};
// オプションチェーンを使用しない場合
const city = user.address.city; // ddressプロパティが存在しない場合、エラーが発生する
// オプションチェーンを使用する場合
const city = user?.address?.city; // エラーが発生せず、cityはundefinedになる

"(ダブルクォート)/'(シングルクォート)の代わりに`(バッククォート文字)で囲む記述方法
文字列の中に変数を含めることが出来るようになり、JavaScriptで文字列をより柔軟に文字列の扱う事が出来る様になる
従来の"(ダブルクォート)/'(シングルクォート)で囲った文字列を+(加算演算子)で連結させるよりも、コードの可読性が高い

変数は${}で囲む
テンプレートリテラル内で関数の呼び出しも可能

const name = "Tom";
const templateLiteral = `Hello, my name is ${name}~!`; //テンプレートリテラル
console.log(templateLiteral);

// テンプレートリテラル内で関数を呼び出したい時
`
${呼び出したい関数名(引数)}
`

JavaScriptで配列やオブジェクト、文字列を展開するための便利な機能
配列やオブジェクトの要素を「展開」するための記法で、[…]で記述する

配列やオブジェクトの中身を取り出し、別の配列やオブジェクトに展開したり、関数の引数として展開したりできる

// 配列の結合
const array1 = [1, 2];
const array2 = [3, 4];
const combinedArray = [...array1, ...array2]; // [1, 2, 3, 4]

// 配列のコピー
const array1 = [1, 2];
const array2 = [...array1]; // [1, 2]

// 関数の引数として配列を展開
function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
const result = sum(...numbers); // 6

try {
  // エラーが発生する可能性のあるコードを記述
} catch (error) {
  // エラーが発生した場合に実行されるコード
  console.error("エラーが発生しました:", error);
} finally {
  // 必ず実行されるコード（省略可能）
  console.log("処理終了");
}

関数の宣言方法は2つある

// 関数宣言
function 関数名(パラメータ) {
  処理を記述
  return 戻り値;
}

// 関数の呼び出し
関数名(引数);

パラメータ: 関数呼び出し時に値が与えられる特別な変数
関数の結果を動的に変更することができる

引数: 関数を呼び出す際に関数のパラメータへ渡す値

returnキーワード: 関数やブロック兄部のコードの実行を停止する
＝returnの後ろに何か処理を記述することは出来ない

ハードコード: 関数内に明確に"Heelo!"の様な文字列を記述しているコードの事を指し、再利用性が悪くなる
関数にパラメータを定義し、ハードコードを防ぐ

// 関数の呼出し(関数の処理が実行される)
関数名()

// 関数の参照(関数の処理が実行される)
関数名  // 関数自体が値として扱われ、関数を他の関数に渡したり、高階関数を利用したい時に利用する

関数をより簡潔に記述するための構文
匿名の関数
従来の関数(function)キーワードを使った関数定義と比べて、特に短い関数の記述が出来る
自身のthisを持たない為、意図しない参照を防ぐことが出来る

引数が一つだけの場合：括弧を省略できる 引数がない場合：空の括弧が必要

処理が一行の場合は、中括号とreturn を省略できる

// アロー関数の定義
const exampleFunction = () => {
  // code goes here
}
// アロー関数の呼び出し
exampleArrowFunction();

// 引数を1つ持つアロー関数の定義
const exampleFunction = parameter => {
  console.log(`Hello, ${name}!`);
};
// 引数の持つアロー関数の呼び出し
exampleArrowFunction(parameter);

// 引数を2つ以上持つアロー関数の定義
const exampleFunction = (parameter1, parameter2) => {
  return parameter1 * parameter2;
};
// 引数の持つアロー関数の呼び出し
multiplyTwoNumbers(3, 4);

explicitly return: returnを記載する

const isSpam = (msg) => {
  reurn false;
};

implicitly return: returnを記載しない

const isSpam = msg => false;

非同期処理(=並行処理)が出来る関数
fetch()で、APIによるデータ取得(非同期通信: an asynchronous operation)をする際によく利用する
try-catchで例外処理の実相を忘れない事

// fetch非同期関数の作成
// function宣言の場合
async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}
// アロー関数の場合
const fetchData = async () => {
　　const res = await fetch(forumLatest);
　　const data = await res.json();
};

Async/Await: awaitキーワードでfetch()メソッドの非同期性を処理する

名前を持たない関数のこと
通常の関数は名前で識別されますが、匿名関数は変数に代入したり、他の関数に引数として渡したり、その場で直接実行したりすることができる

キーと値のペアを格納するデータ構造
JavaScriptでは、配列や変数もオブジェクトの一種として扱われる

オブジェクト指向プログラミングにおけるオブジェジェクトの設計図

this:オブジェクト指向プログラミングにおいて非常に重要なキーワード
現在のオブジェクトを指す
※同じthisでも、thisが使われる場所により、参照するオブジェクトが変わる

const ObjectName = {
  key1 = value1,
  key2 = value2
};

プロパティ: オブジェクトが持つ変数のようなもの
keyとvalueが1つのプロパティのセット

key: プロパティの名前
スペースが含まれる時はダブルクオート(")で囲む必要がある

value: プロパティに格納されているデータ

配列の中にオブジェクトを格納する

const locations = [
// オブジェクト
  {
    key1: value1, // プロパティ
    key2: value2
  },
  {
    key1: value3,
    key2: value4
  }
];

オブジェクトの値にアクセスするには、いくつかの方法ある

1.ドット記法(dot notation)

最も一般的な方法
オブジェクト名.プロパティ名(=key)で取り出す

2.ブラケット記法(bracket notation)

プロパティ名が変数であったり、特殊な文字を含んでいる場合などに使用する
オブジェクト名.[変数名] or オブジェクト名.["文字列"]で取り出す

3.object destructuring syntax

従来の代入方法より、簡潔かつ直感的にコードを書くことができる
const {key名1, key名2} = オブジェクト名;で取り出せる

// オブジェクトの定義
const car = {      // オブジェクト名
  color: "赤",     // プロパティ名と値
  maker: "Corp",
  year: 2023
};
// プロパティへのアクセス
console.log(car.color);    // "red" // ドット記法
console.log(car["color"]); // "red" // ブラケット記法

let key = "maker";
console.log(car[key]); // "red" // ブラケット記法

const {color, maker} = car; // destructuring

// 値の変更
car.year = 2024;

組み込みオブジェクト：Javオブジェクトのプロパティとして定義された関数aScriptの実行環境にあらかじめ用意されているオブジェクト

プロパティ：オブジェクトが持つデータや属性を表す(＝状態)

特定のオブジェクトに関連付けられ、そのオブジェクトのプロパティとして定義された関数
メソッドは、そのオブジェクトを通して呼び出される関数で、
オブジェクトの状態や動作を操作するために使用される

組み込みオブジェくクトの内、JavaScriptのプログラムが実行される環境で常に利用できるオブジェクトのこと
グローバルオブジェクトのプロパティやメソッドは、どこからでもアクセスができる

JavaScriptにおけるすべてのオブジェクトの祖先となるオブジェクト
すべてのオブジェクトは、Object.prototypeからプロパティとメソッドを継承する

class Person {
  constructor(name, age) {
      this.name = name;
      this.age = age;
   }
}

const regex = /ab+c/;
const str = "abbbc";
const result = regex.test(str);

ウェブページが表示されるブラウザのウィンドウ全体を制御したり、
ウィンドウに関する情報を取得したりするために使用する

グローバルオブジェクトであるため、varやletで宣言されたグローバル変数はwindowオブジェクトのプロパティとなる
alert()やconsole.log()などのグローバル関数は、実際にはwindow.alert()やwindow.console.log()として呼び出される

windowオブジェクトはグローバルオブジェクトであるため、プロパティやメソッドを呼び出す際のwindow.を省略できる

window.document;

window.location;

window.navigator;

window.history;

window.innerWidth;

window.innerHeight;

window.outerWidth;

window.outerHeight;

window.open();

window.close();

window.resizeTo(width, height);

window.moveTo();

window.popup('URL', 'WindowName', 'Window Option');

window.open('popup.html', 'popup', width=400,height=300,left=100,top=100');

window.setTimeout();

window.setInterval();

// 3秒後に"Hello World"を表示する
setTimeout(() => {
  console.log("Hello, world!");
}, 3000);

window.scrollTo();

window.scrollBy();

window.confirm();

window.prompt();

fetch();

        // GETリクエストでデータを取得し、コンソールに結果を表示する
        fetch('https://.../xxx.json')
　　　　　 // 一度JSON形式にパース(変換)する
         // (GETリクエストは最初の取得結果を直接をコンソール表示は不可)
          .then((res) => res.json()).then((data) => {
            console.log(data)
          }).catch((err) => { // 例外発生時の処理
        console.error(`There was an error: ${err}`)
        });
    

数値型の値を扱うためのオブジェクト
数値の変換や、数値に関する定数や関数を提供する

Number.isNaN(値or変数);

Number.parseInt(値or変数);

グローバルオブジェクトに該当しない通常の組み込みオブジェクトは、特定のオブジェクトのプロパティやメソッドとして存在する
これらのオブジェクトを使用するには、まず親となるオブジェクトにアクセスする必要がある

ブラウザの開発者ツール内のコンソールへのアクセスを提供する
主にデバッグやログ出力に使用される

console.log(変数名など);

console.info();

console.warn();

console.error();

console.dir();

console.table();

console.time();

console.timeEnd();

console.group();

console.groupEnd();

console.trace();

console.assert();

文字列を扱うためのオブジェクト

str.split(",")

"hello".replace(/l/g, "1");

数学的な計算を行う

日時に関する計算を行う

オブジェクトの操作を行う

HTMLの要素が階層的に表現されている
console.dir(document)を使うと、ブラウザの開発者コンソールでdocumentオブジェクトの内容を確認できる

// 全pタグを取得
const paragraphs = document.querySelectorAll('p');

// クラス名が"my-class" の要素を取得
const myClass = document.querySelectorAll('.my-class');

// idが"my-id"の要素を取得
const myId = document.querySelectorAll('#my-id');

// 複数のセレクタを指定して、該当する要素を全て選択する
const elements = document.querySelectorAll('p, h1, .my-class');

// 子孫要素を全て選択する
const linksInDiv = document.querySelectorAll('div a');

// 一番最初の"h1"の要素を取得
let h1 = document.querySelector("h1");

// 一番最初のidが"button1"の要素を取得
const button1 = document.querySelector("#button1");

// idが"title"の要素を取得
const mainTitleElement = document.getElementById('title');

// 子要素を全て削除
const parentElement = document.getElementById('parent');
const childElements = document.querySelectorAll('.child');
.remove()または
childElements.forEach(element => {
    parentElement.removeChild(element);
  });

配列オブジェクト
JavaScriptの配列は、オブジェクトの一種であり、様々なメソッドが用意されている

C言語やJavaと同様に、要素の型を指定して配列を宣言する
動的型付けであり、配列に異なる型の要素を混在させることができる

let array = []; // 配列を宣言する
let array = [値1, 値2, 値3]; // 配列に値を入れる

console.log(array); // 配列の全ての値を表示
console.log(array[0]); // 配列の最初の値を表示

let i = array.length // .length(配列の要素数を取得するプロパティ)

// 値が配列に含まれるかどうかを確認する
if (配列名.includes(値)) {
  // 処理を記述
}

// 配列の重複した値を排除する
const nums = [1, 2, 3, 2, 4, 1];
const uniqueNums = [...new Set(nums)]; // [1, 2, 3, 4]

// callデータ
const callStack = [
  `文字列`,
  '文字列',
  "文字列"
]

配列名.push(追加する値)

const 変数名 = 配列名.pop()

配列名.unshift(追加する値)

const 変数名 = 配列名.shift()

const listItemsArray = Array.from(document.querySelectorAll('li'));

const 変数名 = 配列名.map()

配列名.join()

配列名.reduse(式, 初期値)

配列名.forEach((element) => 処理);

const numbers = [1, 2, 3, 4, 5];
// 配列numbersの中から、3より大きい最初の要素を見つける
const foundNumber = numbers.find(number => number > 3);
console.log(foundNumber); // 出力: 4

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// 1つ目と2つ目の配列を取り出す
const firstTwo = nums.slice(0, 2); // [1, 2]
// 末尾の21つ目の配列を取り出す
const firstTwo = nums.slice(-2);   // [9, 10]

ArrayName.sort((a, b) => {
// 最初の配列名が2番目の配列名より小さければ、最初と2番目の配列を並べ替える
  if (a.name < b.name) {
    return -1;
  }

  if (a.name > b.name) {
    return 1;
  }

  return 0;
});

const developerObj = {
  name: 'John',
  age: 34,
}
developerObj.hasOwnProperty('name'); // true
developerObj.hasOwnProperty('salary'); // false

発生したイベントに関する情報を持つオブジェクト
イベントが発生すると、ブラウザによって生成され、イベントハンドラに引数として渡される
イベントの種類や発生源、発生時刻などの情報を提供する
＝DOM(Document Object Model)で発生したイベントに関する情報を持つオブジェクト

HTMLの<audio>要素をJavaScriptから操作するためのオブジェクト
音声ファイルの再生、一時停止、音量調整などができる

HTML文書の要素(タグ)をJavaScriptから操作するためのオブジェクト
DOM要素はブラウザなどのWebページを表示する環境が提供するオブジェクトで、
DOM要素はJavaScriptの言語仕様ではなく、WebブラウザのAPI(Application Programming Interface)の一部

監視する要素.addEventListener(イベント名, 関数);

elementName.removeAttribute(attributeName);

要素名.classList.add('追加するクラス名');

output.classList.add('hide');

要素名.classList.remove('削除するクラス名')

output.classList.remove('(セレクタ)

const getElements = document.querySelectorAll('.className');

const getElement = document.querySelector('.className');

const getElement = document.getElementById('getElement');

elementName.setAttribute(attributeName, attributeValue);

const 変数名 = document.createElement('要素名');

const 変数名 = document.createTextNode("テキスト文");>/code>

親要素名.appendChild(子要素名);

        HTMLのdialog要素.showModal();
    

        const button = document.getElementById('myButton');
        button.addEventListener('click', () => {
          button.disabled = true;
        });
    

処理の読み込みの順番の関係で、document.addEventListener利用する際には、イベントリスナーを登録するタイミングが非常に重要
イベントリスナーは、HTMLドキュメントの要素が完全に読み込まれ、DOM (Document Object Model) が構築された後に登録する必要がある
タイミングをあっていないんと、読み込もうとしているDOMがないことで、エラーが発生する可能性がある
以下3通りの回避方法がある：

1.DOMContentLoadedイベントを使用する(推奨)
DOMContentLoadedイベントは、HTMLドキュメントが完全に解析され、DOMツリーが構築されたときに発生する
画像、スタイルシート、サブフレームなどの外部リソースのロードが完了する前でも発生するため、比較的早くイベントリスナーを登録できる

document.addEventListener('DOMContentLoaded', function() {
  // ここにイベントリスナーを登録するコードを記述
  document.getElementById('answerCheck2').addEventListener('click', function()
  {
     // 処理を記述
  }
});

2.<script>タグをHTMLの最後に配置する
HTMLドキュメントは上から順に解析・実行されるため、必ず全てのDOMの読み込みが完了してから、JavaScriptが実行される
ただし、JavaScriptコードの実行が、すべてのHTML要素のロード完了後になるため、DOMContentLoaded イベントよりも遅れる可能性がある

<body>
<script>
document.getElementById('answerCheck2').addEventListener('click', function()
{
// 処理を記述
}
</script>
</body>

3.<script>タグにdefer属性を追加する
HTMLの解析と並行してスクリプトがダウンロードされますが、スクリプトの実行はHTMLの解析が完了するまで遅延される
ただし、古いブラウザでは、サポートされていない可能性がある

<head>
  <script  defer>
    document.getElementById('answerCheck2').addEventListener('click', function()
    {
       // 処理を記述
    }
  </script>
</hed>
<body>
</body>

innerText: HTML要素に表示されるテキストを制御する

innerHTML: JavaScriptでHTML要素の内容の取得/変更を行う

---HTML ---
<p id="info">Sample Text</p>

// JavaScript
const currentValue = document.getElementById("info"); 
console.log(currentValue.id); // "info"
console.log(currentValue.tagName); // "P"
console.log(currentValue.textContent); // "Sample Text"

// Webページ読込み時に"SampleText"と記載されていたものが、JavaScript実行により、"Hello World"と書き換える
info.innerText = "Hello World"; 
console.log(currentValue.textContent); // "Hello World"

// HTMLを書き換える
info.innerHTML = "<h3>Changed!</h3>";
// CSSを書き換える
info.style.color = "blue";

ボタンid名.style.display = "block"; // 表示
ボタンid名.style.display = "none";  // 非表示

onclick: クリック時に実行する

//をクリック時、myFunction関数を呼び出す
button.onclick = myFunction;

JavaScriptやPythonで使用され、特定のカテゴリとその関連情報を格納するためのオブジェクト
ブログプラットフォーム、eコマースサイト、学習プラットフォームなどで利用される

const allCategories = {
  299: { category: "Career Advice", className: "career" },
  409: { category: "Project Feedback", className: "feedback" },
  417: { category: "freeCodeCamp Support", className: "support" },
  421: { category: "JavaScript", className: "javascript" },
  423: { category: "HTML - CSS", className: "html-css" },
  424: { category: "Python", className: "python" },
  432: { category: "You Can Do This!", className: "motivation" },
  560: { category: "Backend Development", className: "backend" },
};

省略記法の文字クラスを使うことで、パターンに文字を書かなくても特定の文字にマッチさせることができる
=文字列中の特定の文字にマッチさせる際に利用する
"regex "と略されることが多い

書き方: /一致するか確認したい文字列/
[ ]で囲むと、順不同で一致したと判断する
|(代替シーケンス)を使用すると、複数のパターンを指定できる

正規表現にはエスケープシーケンスがある為、エラーが出る際には確認する

// helloを含むか確認する
const regex = /hello/;
// 順不同で、h,e,l,l,oのいずれか1文字と一致するか確認する
const regex = /[helo]/;
// yesまたはnoに一致するか確認する
const regex = /yes|no/;

const str = 'example string';
const regex = /example/; // 正規表現
const result = str.match(regex); // Returns ['example']

マッチした場合には、consoleに以下が表示される
[ '正規表現マッチした値', index: 文字列内のマッチした値のインデックス, input: 'マッチした元の文字列', groups: マッチしたグループ ]
※マッチしなかった場合にはnullが出力される

フラグ
g(global):マッチした後も、パターンマッチング検索を続ける

const regex = /hello/g;

i(insensitive):大文字と小文字の区別をしない

const regex = /Hello/i;
// hello,Hello,HELLO,hElLoなど、検索できる

文字クラス[0-9]:任意の数字にマッチさせる表記法
正規表現で"+"修飾子を使うと、1回以上出現するパターンマッチが可能
桁のパターンに1回以上マッチさせるには、各桁の文字クラスの後にプラスを追加する
\d: どんな数字でもマッチさせる[0-9]の省略系の文字クラス

const regex = [0-9]+; // 文字クラス
const regex = /\d+/g; // 省略系の文字クラス

キャプチャグループ
正規表現において、マッチした部分文字列を後で再利用するための仕組み
マッチした文字列の一部をグループ化し、そのグループに番号を割り当てることで、マッチした文字列全体だけでなく、特定の部分文字列を取り出すことができる
( )で囲む

非キャプチャグループ
(?: )で記載する

?:オプション(一致してもしなくても良い)

// 直前の文字を0回または1回マッチさせる
const regex = /cat?s/;
console.log(regex.test("cat"));  // true
console.log(regex.test("cats")); // true

XMLHttpRequestという特別なJavaScriptオブジェクトを作成する必要がある
このオブジェクトを使うと、ページのロードやリフレッシュと同時にではなく、その後で非同期的にサーバーにリクエストを送信し、追加の情報を取得できる

function ajax_request(argument)
{
  // XMLHttpRequestオブジェクトを作成する
  var aj = new XMLHttpRequest();
aj.onreadystatechange = function() {
// リクエストが完了し、サーバからの応答に成功した場合
if (aj.readyState === 4 && aj.status === 200) {
// do something to the page
}
};
aj.open("GET", /* url */, true);
aj.send();
}

XMLHttpRequestオブジェクトには、リクエストの状態が変化するたびに実行されるonreadystatechangeというプロパティがあり、0から4までの5つの状態を持つ
0(UNSENT)：リクエストが初期化されていない状態
1(OPENED)：open() メソッドが呼び出され、リクエストが準備完了した状態
2(HEADERS_RECEIVED)：send() メソッドが呼び出され、サーバーがリクエストを受け付け、レスポンスヘッダーが利用可能になった状態
3(HEADERS_RECEIVED)：レスポンスボディをダウンロード中。responseText に部分的なデータが含まれることがあります
4(DONE)：リクエスト完了(データ全体が読み込まれた)
最終的にうまく行けば、States 200がサーバから返却される
※上記は、HTTPという通信プロトコルの標準的な動作

プログラムが自動実行される際、ユーザの画面と挙動が異なることがある
同じ様な挙動で実行したい時は、以下のコードを記述する

// 自動実行の際、ユーザの画面と同じ様な挙動で実行する
document.querySelector('#purchase-btn').click();

開発者モードのコンソールタブを見ると、どこでエラーが発生しているか見ることが出来る
また、console.log()で出力した結果を確認することも出来る

D3はData-Driven Documentsの略で、日本語ではデータ駆動文書
データを視覚化するためのJavaScriptライブラリ
Webページ上で、複雑なグラフやインタラクティブな視覚化を作成することができる

標準のDOM APIをラップした、D3.js独自のDOM操作メソッド群を持ち、データ視覚化のほぼ全ての事に対応している
一方で、D3.jsのDOM操作はクセが強く、サンプルをただコピペして、少し修正するだけで使う事は難しいこともある

公式サイト
参考

• データ駆動 : データに基づき、DOM(Document Object Model)を操作し、動的な視覚化
• 柔軟性 : SVG、HTML、CSSなどを組み合わせて、自由度の高い視覚化が可能

• グラフ作成 : 折れ線グラフ、棒グラフ、円グラフ、散布図など、多様なグラフ作成
• 地図の表示 : GeoJSONデータを使って、地図を作成し、データを重ねた表示
• インタラクティブな視覚化 : ユーザーの操作に応じた視覚化変化
• アニメーション : グラフ要素をアニメーションさせた視覚的に分かりやすい表現

データ、スケール、視覚表現を結びつけることで、データの可視化を行う
SVGという描画領域に配置されることで初めて画面上に表示される

(1)CDNを利用する

  <head>
    <!-- Importing D3.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js" integrity="sha512-M7nHCiNUOwFt6Us3r8alutZLm9qMt4s9951uo8jqO4UwJ1hziseL6O3ndFyigx6+LREfZqnhHxYjKRJ8ZQ69DQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  </head>
</html>

(2)ローカルに保存して利用する

<html>
  <head>
    <!-- Importing D3.js -->
    <script src="d3.v7.min.js"></script>
  </head>
</html>

配列やJSON形式でデータを用意する

<body>
  <script>
    const data = [10, 20, 30, 40, 50];
  </script>
</body>

SVG : ウェブページに画像やグラフィックを埋め込むためのXMLベースのフォーマット

  <script>
    // prepare datas for creating graph
    const data = [10, 20, 30, 40, 50];
    // add below code
    // create SVG element
    const svg = d3.select("body")        // Which element to create SVG for
                  .append("svg")         // Create a SVG element for selected elements
                  .attr("width", 500)    // Set the “width” attribute of the SVG created
                  .attr("height", 300);  // Set the “height” attribute of the SVG created
  </script>

data()メソッドでデータを要素に結び付ける

  <script>
    // prepare datas for creating graph
    const data = [10, 20, 30, 40, 50];
    // create SVG element
    const svg = d3.select("body")        // Which element to create SVG for
                  .append("svg")         // Create a SVG element for selected elements
                  .attr("width", 500)    // Set the “width” attribute of the SVG created
                  .attr("height", 300);  // Set the “height” attribute of the SVG created

散布図

    // add below code
    // Link datas and elements
    svg.selectAll("circle")  // Select elements to link datas
       .data(data)           // Link datas to selected elements
       .enter()              // Create actually elements
       .append("circle")     // Add elements to link datas
       .attr("cx", (d, i) => i * 50 + 25)  // Set an attribute
       .attr("cy", 50)                     // (same as above)
       .attr("r", (d) => d);               // (same as above)
  </script>

棒グラフ

    // add below code
    // Link datas and elements
    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", 0)
       .attr("y", 0)
       .attr("width", 25)
       .attr("height", 100);
  </script>

D3.jsでX軸およびY軸を追加する手順は、
1.スケールの作成 : データの範囲をグラフの座標系にマッピングするためのスケールを作成する
2.軸の生成 : d3.axisBottom()やd3.axisLeft()を使って軸を生成し、スケールを設定する
3.軸の追加 : SVGに軸を追加(append)し、位置やスタイルを調整する

// Create Scale
const xScale = d3.scaleLinear()
  .domain([0, data.length - 1]) // an index of datas
  .range([0, 500]); // a range of X-axis


const yScale = d3.scaleLinear()
  .domain([0, d3.max(data)]) // a maximum data
  .range([300, 0]); // a range of Y-axis

// Create axis
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
// Add axis to the SVG element
svg.append("g")
.attr("transform", "translate(0," + 300 + ")")
.call(xAxis);
svg.append("g")
.call(yAxis);

D3.jsでX軸およびY軸を追加する手順は、
1.スケールの作成 : データの範囲をグラフの座標系にマッピングするためのスケールを作成する
2.軸の生成 : d3.axisBottom()やd3.axisLeft()を使って軸を生成し、スケールを設定する
3.軸の追加 : SVGに軸を追加(append)し、位置やスタイルを調整する

// Create Scale
const xScale = d3.scaleLinear()
  .domain([0, data.length - 1]) // an index of datas
  .range([0, 500]); // a range of X-axis
const yScale = d3.scaleLinear()
.domain([0, d3.max(data)]) // a maximum data
.range([300, 0]); // a range of Y-axis
// Create axis
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
// Add axis to the SVG element
svg.append("g")
.attr("transform", "translate(0," + 300 + ")")
.call(xAxis);
svg.append("g")
.call(yAxis);

SVGのtext要素を利用して、グラフの上部にタイトルを追加できる

// Add title to SVG
svg.append("text")
   .attr("x", width / 2)
   .attr("y", 20)
   .attr("text-anchor", "middle")
   .style("font-size", "16px")
   .text("Graph's Title");

SVGのg要素を利用して、凡例を追加できる

// Create legend group
var legend = svg.selectAll(".legend")
                .data(data)
                .enter().append("g")
                .attr("class", "legend")
                .attr("transform", function(d, i) {
                  return "translate(0," + i * 20 + ")";
                });
// Add rectangle in legend
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d) { return color(d.key); });
// Add label in legend
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d.key; });

// Add data labels
svg.selectAll(".do\t")
   .data(data)
   .enter().append("text")
   .attr("class", "label")
   .attr("x", function(d) { return xScale(d.x); })
   .attr("y", function(d) { return yScale(d.y); })
   .attr("dy", "-.35em")
   .text(function(d) { return d.y; });

ライブラリによって提供される為、JavaScriptの元々の組み込みメソッドではない

        // 1番最初のanchor要素を選択する
        const anchor = d3.select("a");

        // 全anchor要素を選択して、配列で取得する
        const anchors = d3.selectAll("a");

        // body要素を選択して、h1要素を追加する
        d3.select("body").append("h1");

        // body要素にh1要素を追加し、h1要素にLearning D3を追加する
        d3.select("body").append("h1").text("Learning D3");

        // ul要素の中のliを全て選択し、datasetと照らし合わせる
        
          

          <script>
            const dataset = ["a", "b", "c"];
            d3.select("ul").selectAll("li")
              .data(dataset)
           </script>
         
        

        // ul要素中のliを全選択し、datasetと照らし合わせ、不足している要素を追加する
        
          

          <script>
            const dataset = ["a", "b", "c"];
            d3.select("ul").selectAll("li")
              .data(dataset)
              .enter()
              .append("li")
              .text("New item");
           </script>
         
        

        // body要素を選択して、文字列がblueなh1要素を追加する
        d3.select("body").append("h1")
          .style("color","blue");

        // body要素を選択して、div要素にclass="bar"を追加する
        d3.select("body").append("div")
          .attr("class", "bar");

        // Create Scale
        const xScale = d3.scaleLinear();

        // Create Scale
        const xScale = d3.scaleLinear()
                         .domain([0, data.length - 1]);

        // Create Scale
        const xScale = d3.scaleLinear()
                         .domain([0, data.length - 1])
                         .range([0, 500]); 
  

        // Create axis
        const xAxis = d3.axisBottom(xScale);
        const yAxis = d3.axisLeft(yScale);
  

        // Create Scale to SVG
        svg.append("g")
           .attr("class", "x-axis")
           .attr("transform", "translate(0," + height + ")")
           .call(xAxis);
  

追加するテキストに接尾語を付ける

  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("h2")
  .data(dataset)
  .enter()
  .append("h2")
  .text(function(d) {
    return d + " USD";
  });

  </script>

JavaScriptのライブラリの一つで、Webページの動的な要素を簡単に操作するためのツール
JavaScriptのコードを簡潔に記述でき、開発効率を大幅に高めることができる

ブラウザ間の差異を吸収し、クロスブラウザ開発を容易にする
近年では、Reactなどの登場により、jQueryの利用は減少傾向にある

公式サイト

• $関数 セレクタに基づいてDOM要素を選択し、jQueryオブジェクトを生成する
  $('セレクタ')
  セレクタには、CSSセレクタと同様の記法を使用できる
• jQueryオブジェクトのメソッドは、多くの場合、jQueryオブジェクト自身を返す
  これにより複数のメソッドを連続して呼び出すことができ、コードを簡潔に記述できる
  (＝メソッドチェーン)
• $関数によって生成されたjQueryオブジェクトに対して、
  様々なjQueryメソッドを呼び出すことで、DOM操作やイベント処理などを行う
　
• イベント処理を簡潔に記述するためのメソッドが提供されている
  $('セレクタ').on('イベント名', 関数);
on()メソッドを使用することで、
  複数のイベントハンドラーを登録したり、イベントの伝播を制御できる

(1)プログラムをダウンロードして使用する
公式サイトなどからプログラム一式をダウンロードし、入手したファイルを解凍したものをサーバー上の関連ファイルの保管場所にアップロードする

<script type="text/javascript" src="js/jquery-X.X.X.min.js"></script>

(2)CDN(Content Delivery Network)を利用する
直接パソコンにダウンロードするのではなく、他のサーバー上にあるjQueryプログラムを読み込む方法

<script src="https://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js"></script>>

関数はすべて$で始まる(通常はドル記号演算子 or blingと呼ばれる)

$(function(){
    $(対象要素/セレクタ).メソッド()
});document ready

$('セレクタ')で要素を指定し、.method()で処理を行う

    // idがmyDivをdisabledにする
    $("#myDiv").prop("disabled", true);
    

    // クラス名がtitleの要素の表示内容を強調表示する
    $(".title").html("表示文字");
    

    // bodyに対して、animatedと0hingeのクラス名を追加
    $("body").addClass("animated hinge");
    

    // idがmyDivの要素からhighlightクラスを削除
    $("#myDiv").removeClass("highlight"); 
    

    // idがcontentの要素の文字色をredにする
    $("#content").css("color", "red");
    

    // idがmyDivの要素内に含まれる要素を全て削除
    $("#myDiv"").remove();
    

    // idがmyDivの要素にidがleft-well, right-wellの子要素を追加する
    $("#myDiv").appendTo("#left-well");
    $("#myDiv").appendTo("#right-well");
    

    // idが#target5の内容をそのままコピーし、#right-wellの中に新しく追加する
    $("#target5").clone().appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
    

    // idがtarget1の親要素のcssを変更する
    $("#target1").parent().css("background-color", "red");
    

    // idがright-wellの子要素のcssを変更する
    $("#right-well").children().css("color", "orange");
    

    // 読み込み時に実行する関数
    $(document).ready() {
      // 実行したい処理
    }
    

:nth-child(num): CSSの擬似クラスの一つで、ある要素の親要素内の、特定の子要素を選択するために使用する

// クラスがtargetの2番目の要素を指定し、animatedとbounceのクラスを追加する
$(".target:nth-child(2)").addClass("animated bounce");

:even: CSSの疑似クラスの一つで、親要素内の偶数番目の子要素にスタイルを適用したいときに使用する

// クラスがtargetの偶数番目の要素を指定し、animatedとshakeのクラスを追加する
$(".target:even").addClass("animated shake");

ユーザーインターフェースを構築するためのJavaScriptライブラリ
Facebookによって作成され、維持されているオープンソースのビューライブラリ
最新のWebアプリケーションのユーザーインターフェース(UI)をレンダリングするための優れたツール
Webページやアプリケーション用の再利用可能なコンポーネント駆動型のユーザーインターフェースを構築する際によく使われ、人気が高い
Facebook、Instagram、Netflixなどの大手企業がReactを使用している

仮想DOMを使用することで、高速なレンダリングを実現する
大規模なWebアプリケーション開発に適している

基本的な処理の流れ

• コンポーネント
  WebページのUIの部品のこと(画面要素の1単位)
  1つのWEBページ全体にコンポーネントを1つだけ表示させたり、他のコンポーネントと組み合わせて表示もできる
  （例:ヘッダー,フッター,ボタンなど）を独立した単位として扱い、再利用できるようにカプセル化したもの
• コンポジション
  複数のコンポーネントを組み合わせて、より大きなコンポーネントを作成すること
• 仮想DOM(Document Object Model)
  Reactの最大の特徴の1つで、仮想DOMは実際のDOMの軽量なコピー
  UIの変更のたび全体を更新するのではなく変更が必要な部分のみ効率的に更新する為、アプリケーションパフォーマンスが大幅に向上する
• レンダリング
  仮想DOM(Virtual DOM)で表現されたUIを、実際のブラウザのDOMに反映させること
  レンダリングするには、ReactDOM APIの呼び出しが必要
  レンダリングすると、コンポーネントのstateが変化する
• JSX
  一般的にReactのライブラリを利用する際に利用が推奨されているJavaScriptの構文拡張(a syntax extension)
  JavaScript内で直接HTMLを書くことができるReactの独自のマークアップ言語
  コードを読みやすく保つことができ、アプリケーション全体のデータの流れを簡単に管理できる
• バインド(bind)
  プログラミングにおいて、ある関数やオブジェクトの特定のコンテキスト(実行環境)に、特定の値(通常はthis)を結びつけること
  イベントハンドラー内でthisを使う場合、クラスコンポーネントのメソッドをバインドする必要がある

基本的には、HTMLとJSXと似ているが、いくつかの重要な違いがある

const JSX = <h1>Hello JSX!</h1>;

複数の要素をreturnしたい場合は、

const JSX = {  // valid JSX
<div>
  <p>Paragraph One</p>
  <p>Paragraph Two</p>
  <p>Paragraph Three</p>
</div>
}
const JSX = {  // invalid JSX
<p>Paragraph One</p>
<p>Paragraph Two</p>
<p>Paragraph Three</p>
}

<div class="myDiv">     // HTML
<div className="myDiv"> // JSX

void elements:
や

code>
// HTML
<p>paragraph-1<br>
   paragraph-2</p>
<hr>
// JSX
<p>paragraph-1<br />
paragraph-2</p>
<hr />

code>
{/*　the comment text */}

JSXは有効なJavaScriptではない為、実行前にJSXコードをJavaScriptにコンパイルする
この時、一般的にトランスパイラのBabelというツールが使用される
構文的に無効なJSXを書いた場合、コンパイルに失敗する
一見複雑に見える問題の根底には、Reactのレンダリング処理に関するシンプルな問題が隠れている可能性が高い

変数やオブジェクトの宣言は、通常のJavaScriptと変わらないが、値を利用する歳に変数名/オブジェクト名を{ }で囲む

code>
function MyComponent() {
  const myObject = {'this is treated as JavaScript code'};
  return (
    

      {/* オブジェクトの内容を表示する場合 */}
      <p>{JSON.stringify(myObject)}</p>
      {/* オブジェクトの値をプロップとして渡す場合 */}
      <OtherComponent data={myObject} />
    
  );
}

HTMLと同じstylesheetを参照する方法に加え、要素の中にstyleを指定するReactのinline stylesでも適用可能

<div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>
または
const style = {color: "yellow", fontSize: 16};
<div style={style}>Mellow Yellow</div>

return内にHTMLタグを長々と記載していくと可読性が低下する為、複数のファイルに分けてコンポーネントとして管理する
拡張子は、.jsx/.jsどちらでも構わないが、コンポーネント化したファイルは.jsxにした方が良い

// index.js
// コンポーネント化したApp.jsをindex.jsでインポートする
index.js：コンポーネント化したApp.jsをimportして使用している。
App.js：画面のレンダリング部分(return内のHTMLタグ)をコンポーネント化している。
import React from "react";
import ReacrDom from "react-dom";
import App from;
ReactDom.render(, document.getElementById("root"));

// App.jsx
import React from "react";

const App = () => {
   return (
      <>
        <h1>Hello,</h1>
        <p>How are you?</p>
      </>
   );
};

//他のファイルで使用できるようになる
export default App;

Reactのコンポーネントはアッパーキャメルケース(=パスカルケース)で命名する必要がある
(=先頭が大文字で始まり、単語の区切りを大文字とする変数名の付け方)
例: 〇 App, MyComponentなど
　 ✕ app, myComponentなど

作成方法はJavaScriptの関数、またはクラスとして定義する2種類がある

props: コンポーネントに渡される引数のようなもの
　　　　　 変数だけでなく、配列を渡すことも可能(データを扱う際にはJavaScriptのjoin()等を使用する)
state: 各コンポーネントが持つ状態、stateが変更されると再レンダリングされる

1.JavaScriptの関数で定義する
関数コンポーネントはpropsを受け取り、React要素であるJSX(≒HTML) or nullを返す

const DemoComponent = function(props) {
  return (
    <div className='customClass' />
	// { }内で、&&で繋いで返すことも可能
	{this.props.name && <h1>Displayed!</h1>}
  );
};

2.ES6クラス構文を利用する

// React.Componentを拡張したMyComponentNameの作成
class MyComponentName extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <h1>Hi</h1>
    );
  }
}

指定できること
・propsが渡されなかった場合に使用されるデフォルト値
・データ型

const MyComponent = (props) => {
  return (
    <div>
      <h1>Shopping quantity: {props.quantity}</h1>
    </div>
  )
};

// Set default Props
MyComponent.defaultProps = { quantity: 0 }

// Set propTypes
MyComponent.propTypes = { quantity: PropTypes.number.isRequired }

複数のコンポーネントを1つにまとめて、アプリケーションとして表示する際は、 親コンポーネントの中にまとめたい子コンポーネントを戻り値として返す

// child Component
const ChildComponent1 = () => { // logic }
const ChildComponent2 = () => { // logic }

const ParentComponent = () => {
  // logic
  return (
    <App>
      <ChildComponent1 />
      <ChildComponent2 />
    </App>
  )
}

親複数のコンポーネントを含む際は、propsが複数存在する為、"this.props"と現在のコンポーネントのpropsを明示する必要がある
その際は、JavaScriptのbind()メソッドでthisが指す対象を固定させる

// thisのスコープを正しく設定する為、handleChangeメソッドをクラスのコンテキストにバインドする
this.handleClick = this.handleClick.bind(this)

handleChange():フォーム要素の値が変更された際に呼び出される関数で、変更された値を状態に反映させる

ReactDOM.render()関数を使って、仮想DOMをブラウザのDOM(HTML DOM)へ反映させる
JSXで記述したReactの処理の流れより、JSXを記述した後で、ReactDOM.render()関数を記述する

// 仮想DOMの"React要素"をブラウザのDOM(HTML DOM)へ反映させる
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);

// 仮想DOMの"コンポーネント"をブラウザのDOM(HTML DOM)へ反映させる
// Greetingコンポーネントの作成
const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
}
// GreetingコンポーネントをブラウザのDOM(HTML DOM)へ反映させる
const root = ReactDOM.createRoot(document.getElementById('root'));
// Greetingコンポーネントのpropsにname = "Alice"を渡す
root.render();

JavaScriptをベースにしたReact独自のイベントハンドラーを持つ

stateを持たない(クラスコンポーネントのthis.stateや関数コンポーネントのuseStateフックを使って状態を管理する箇所が無)コンポーネントのこと
複雑なロジックは実装できないが、処理がシンプルな為、パフォーマンスが向上する

Reactでは、ステートを直接変更しないことを想定している為、ステートの変更には常にthis.setState()を使用する

Reactはパフォーマンスを向上させるために、複数のステート更新をバッチ処理することがある(setStateメソッドによるステート更新が非同期になる可能性がある)
setStateメソッドには、この問題を回避する代替構文が存在するが、必要になることはほとんどない
詳細

// クラス型コンポーネントの状態(state)を更新する
this.setState({
  username: 'Lewis'
});

// Reactコンポーネントをサーバーサイドでレンダリングし、HTML文字列に変換する
ReactDOMServer.renderToString();

コンポーネントのライフサイクルの特定の時点でアクションを実行する機会を提供するいくつかの特別なメソッド
コンポーネントの誕生から死までの過程において、特定のタイミングで自動的に呼び出される関数
Ver.17以降、廃止予定

デフォルトの動作では、コンポーネントが新しいpropsを受信すると、propsが変更されていなくても再レンダリングされる
このメソッドでpropsを比較し、再レンダリングの実行してコンポーネントを更新するかどうかをReactに伝えるブール値を返す

JavaScriptアプリケーションのStateを管理するフレームワーク(ライブラリ)
＝JavaScriptアプリケーションの状態管理ライブラリ
Reactの開発者が、異なるコンポーネント間でデータを共有することを容易にする為、Reduxを開発した
Reactと組み合わせて使割れる事が多いが、別の言語やフレームワークでも利用できる

JavaScript自体がプログラミング言語であるのに対し、Reduxは特定の目的に特化したツールキットのようなもの

Reduxでは、stateを一箇所に集めて管理し、アプリケーションの状態を予測可能にし、バグを減らすことを目的としている
一般的にアプリケーションが複雑になるにつれて、状態を管理することが難しくなるReduxは、状態を一元管理することで、状態の追跡やデバッグを容易にする
★Reduxで状態を一元管理することで、状態の追跡やデバッグを容易にする★

Reduxではstateは読み取り専用になっている為、常にstoreから新しいstateのコピーを受け取って、各stateを変更する
＝絶対にstateを直接変更してはならない
※Reduxではstateの不変性を強制していない為、変更しようと思えば変更できる

公式サイト

• Store：オブジェクト、アプリケーションの状態を保持する唯一の場所
  アプリケーション内に複数のstateを保持していたとしても、Storeの1個のオブジェクト内で管理される
  任意のデータを保存でき、文字列、数値、配列、オブジェクト、関数など、さまざまな種類のデータを保持できる
  =どのstateを更新したい場合においても、Storeを経由しなければならない
• Action：発生したActionイベントの情報を含むJavaScriptのオブジェクト
  Reduxでのステートの更新は、すべてActionのDispatchによって引き起こされる
  必ずtypeプロパティを持ち、状態をどのように変更したいかを示す追加の情報はpayloadを含んでいることが一般的
• 純粋関数
  APIのエンドポイントを呼び出したり、何か他に隠れた機能もない関数
• Reducer：新しい状態を返す純粋関数
  アクションに応じて行われる状態の変更を担当するのみ
  引数としてstateとactionを受け取り、新しいstateを返す

処理の流れ