js/Tsx/React　　編集中

バックエンドエンジニアがバックエンドとwebクライアントをReactで行いたい為のアウトプットです。強つよエンジニアではないのでご了承下さい。

とほほ入門参照
ES2015(ES6) の新機能の理解がある前提
バニラJavascriptの記法
→アロー関数、スプレッド構文、分割代入、mapやfilter
Reactの基本
→JSX構文、stateやprops、useStateとuseEffect
https://www.tohoho-web.com/js/what.htm#es2015

js

0,環境構築

bash

npm -v
10.9.1
node -v
v20.18.0
create-react-app --version
5.0.1
#C:ドライブではなくD:ドライブに作成したいのでcmdなりでD:に切り替える
D:
cd D:\src_d
#新規プロジェクトを作成
npx create-react-app {プロジェクト名} --template typescript
#例：$ npx create-react-app vanilla-js
#プロジェクト名はnpmの命名規則で小文字指定の模様

# プロジェクトを起動
cd {プロジェクト名}
yarn start

#Gitフックでコード整形やLintを自動化するためのツールを開発環境に追加
yarn --version
yarn add -D husky lint-staged prettier

App.test.js
logo.svg
reportWebVitals.js
setup.Tests.js
index.css
App.cssを削除

App

// import logo from './logo.svg';
// import './App.css';

function App() {
  return (
    <div className="App">
      HHELLO
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
// import './index.css';
import App from './App';
// import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();

1,JS

変数宣言

/**
 * const.let変数宣言
 */
// var val1 = "var変数";
// console.log(val1);

// //var変数は上書き可能
// val1 = "var変数を上書き";
// console.log(val1);

// //var変数は再宣言可能
// var val1 = "var変数を再宣言";
// console.log(val1);

// let val2 = "let変数";
// console.log(val2);

// //letは上書き可能
// val2 = "let変数上書き"
// console.log(val2);

// //letは再宣言不可能
// // let val2 = "let変数を再宣言";

const val3 = "const変数";
console.log(val3);

//const変数は上書き不可
//val3 = "const変数を上書き";

//const変数は再宣言不可
// const val3 = "const変数を再宣言";

 //ただし、constで定義したオブジェクトはプロパティの変更が可能
 const val4 = {
   name: "MIYA",
   age: 10
 }
 //console.log(val4);
 val4.name = "みや";
 val4.address = "[e-mail]";
 console.log(val4);

配列

 const val6 = ["dog", "cat"];
 val6[0] = "miya";//インデックス番号0番目の配列dogをmiyaに変更
 val6.push("enemy")//敵を追加
 console.log(val6);

文字列　従来”私の名前は”＋name+"です"

//template文字列はバッククオート``shift＋＠で${}にはjsのプロパティを記述できる
const name = "miya";

const mesage2 = `私の名前は${name}です`;
console.log(mesage2);

アロー関数

/**アロー関数 */
//従来の関数
// function func1(str) {
//   return str;
// }
// console.log(func1("func1です"));

// //const変数でfunction関数
// const func1 = function (str) {
//   return str;
// }
// console.log(func1("func1です"));

//アロー関数
//引数の（）代入イコール大なり=> {}で関数の本体
const func2 = (str) => {
  return str;
};
console.log(func2("func2です"));

//引数が１つの場合()を省略可能
const func3 = str => {
  return str;
};
console.log(func3("func3です"));

//関数の処理が単一式の場合return｛｝省略可能だが（）必要
const func4 = (str) =>
  str;
console.log(func4("func4です"));




// func5という名前の関数を作ります。引数（ひきすう）はnum1とnum2という2つの数字です。
const func5 = (num1, num2) => num1 + num2;  // num1とnum2を足して、その結果を返します

// 関数func5を使って、10と20を足し算して結果を表示します。
// つまり、10 + 20 = 30がコンソールに表示されます。
console.log(func5(10, 20));

// func6という名前の関数を作ります。引数はnum1とnum2です。
const func6 = (num1, num2) => ({
  // ここではオブジェクト（ものの情報をまとめた箱）を返しています
  hoge: num1,  // num1の値を「hoge」という名前のものとして箱に入れます
  huge: num2,  // num2の値を「huge」という名前のものとして箱に入れます
});

// 関数func6を使って、10と20を入れたオブジェクトを作り、それを表示します。
// 結果は、{ hoge: 10, huge: 20 } という形で表示されます。
console.log(func6(10, 20));

分割代入（配列やオブジェクトに対して使う）

const myProfile = {
  name: "みや",
  age: 99
};

//オブジェクトの分割代入
//const mesage3 = `名前は${myProfile.name}です。年齢は${myProfile.age}歳です。`
//console.log(mesage3);

//オブジェクト名myprofile.～を毎度記述は長冗なので分割代入
const { name, age } = myProfile;
const mesage4 = `私の名前は${name}で歳は${age}です。`
console.log(mesage4);

//配列の分割代入
const myProfile = ["miya", 99];

//const mesage5 = `名前は${myProfile[0]}です。年齢は${myProfile[1]}歳だ`;
//console.log(mesage5);

//[]配列にインデックス番号ではなく好きな変数名を定義できる
const [name, age] = myProfile;
const mesage6 = `名前は${name}です。年齢は${age}歳よ`;
console.log(mesage6);

デフォルト値（引数、分割代入で使う）

//例1
 const sayHello = (name = "guest") => console.log(`こんにちは！${name}さん`);
 sayHello()//引数に"値"が何も入ってないとundefinedと表される為nameにguestをデフォ値として入れる

//例2
 const myProfile = {
     age: 99
 };

 const { age, name = "guest" } = myProfile;
 console.log(age);
 console.log(name);//name定義してないのでundefinedになるが="guest"をデフォルト値定義しておくことでオブジェクトの初期値として扱える

オブジェクトの記法

const name = "みや";
const age = 99;

const myProfile1 = {
    name: name,//プロパティと変数名が同じとき省略可能
    age: age
};
console.log(myProfile1);

const myProfile2 = { name, age };//オブジェクト代入を利用し実際に変数名を省略した記法
console.log(myProfile2);

スプレッド構文...

//配列の展開
const arr1 = [1, 2];

 console.log(arr1); //(2) [1, 2]
 console.log(...arr1);//そのまま値として出力可能　1 2

const sumFunc = (num1, num2) =>console.log(num1 + num2);
sumFunc(arr1[0], arr1[1]);//3
sumFunc(...arr1);//3　同じ意味合いの記述

スプレッド構文

//まとめるスプレッド構文（配列の分割代入の際に使う）
const arr2 = [1, 2, 3, 4, 5];
const [num1, num2, ...arr3] = arr2;//分割代入で値を取り出す際にarr3変数名に...でまとめる
console.log(num1);//1
console.log(num2);//2
console.log(arr3);//(3) [3, 4, 5]

//配列のコピー、結合
const arr4 = [10, 20];
const arr5 = [30, 40];

//既存の配列を別の配列を定義したいとき
const arr6 = [...arr4];
console.log(arr6);

//配列同士結合
const arr7 = [...arr4, ...arr5];
console.log(arr7);


const arr10 = [...arr4];
arr6[0] = 100;
console.log(arr10);//(2) [100, 20]
console.log(arr4);//(2) [10, 20]

/**
 * const arr8 = arr4;//=で定義すると同じ中身を参照することとなり以下の結果になる
arr8[0] = 100;
console.log(arr8);
console.log(arr4);//arr8[0]に100を代入したのにarr4にも反映しちゃうので注意
 */

map filter

//従来のfor文
// const nameArr5 = ["a", "b", "c"];
// for (let index = 0; index < nameArr5.length; index++) {
//     console.log(nameArr5[index]);
// }

//map
const nameArr6 = ["a", "b", "c"];
nameArr6.map((name) => {//アロー関数とループする値()を入れ{}中に処理
    console.log(name);
});

const nameArr7 = ["a", "b", "c"];
const nameArr8 = nameArr7.map((name) => {
    return name;//戻り値で新しい配列nameArr8が生成できる
});
console.log(nameArr8);//(3) ['a', 'b', 'c']

//返却値を受け取らずループしてコンソールに出力したいだけの場合アロー関数で定義
const nameArr9 = ["a", "b", "c"];
nameArr9.map((name) => console.log(name));//a b c




//filter
//配列の特定の要素を抜き出したい場合に用いる
//奇数の場合出力
const numArr = [1, 2, 3, 4, 5];
const newNumArr = numArr.filter((num) => {
    return num % 2 === 1;
});
console.log(newNumArr);//(3) [1, 3, 5]

//従来のfor文
const nameArr5 = ["a", "b", "c"];
for (let index = 0; index < nameArr5.length; index++) {
    console.log(`${index + 1}番目は${nameArr5[index]}です`);
}
//1番目はaです
//2番目はbです
//3番目はcです

//何番目の要素か？ ()第二引数に indexを入れ何番目かをインクリメントでループさせる
const nameArr05 = ["a", "b", "c"];
nameArr05.map((name, index) => console.log(
    `${index + 1}番目は${name}です`));
//1番目はaです
//2番目はbです
//3番目はcです

//例題　miya以外に「さん」を付けて新しい配列に定義しましょう
const nameArr = ["miya", "neko", "neko"];
const newNameArr = nameArr.map((name) => {
    if (name === "miya") {
        return name;
    } else {
        return `${name}さん`
    }
});
console.log(newNameArr);//(3) ['miya', 'nekoさん', 'nekoさん']

//※ループしながら画面に表示する際にmapかなり使う

三項演算子　ある条件式がtrueの時；条件がfolseの時

 const vali = 1 > 0 ? "true" : "false";
 console.log(vali);//true 1は2より大きい

//例
 const num = "1300";//文字列ではなく数値の場合trueとして1.300が出力される
//console.log(num.toLocaleString());//toLocaleStringは数値を三桁区切りのカンマ表示が可能となる
 const formattedNum =
typeof num === "number" ? num.toLocaleString() : "数値入力してね";
 console.log(formattedNum);//数値入力してね

//例
const checkSum = (num1, num2) => {
    return num1 + num2 > 100 ? "100超えている" : "許容範囲内です";
}
console.log(checkSum(40, 50));//許容範囲内です

Reactの基礎jsx

project/
├── index.html # 提供されたHTMLファイル
├── src/
│ └── index.js # Reactのエントリーポイント
└── package.json # プロジェクトの設定ファイル

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React App</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>

HTML「!」マークで雛形生成
React「rfce」で関数コンポーネントの雛形が生成
※VS Codeの拡張機能「ES7 React/Redux/GraphQL/React-Native snippets」install済

index.js(jsx記法マナー)

// Reactライブラリから新しいroot APIをインポート
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

// HTMLの中でReactが操作するルート要素（通常は<div id="root">）を取得
const rootElement = document.getElementById("root");

// Reactのroot（アプリケーションのエントリーポイント）を作成
const root = createRoot(rootElement);

//アロー関数を用いて画面表示 Appコンポーネント大字始まり
const App = () => {
    return (//複数行の場合は()丸括弧で囲み
        <>
            <h1>HelloWorlld</h1>
            <p>お元気ですか？</p>
        </>
    );
};

// Reactコンポーネントをルート要素にレンダリングする
root.render(
    <StrictMode>
        <h1>こんにちは</h1>
        <App />
    </StrictMode>);

StrictModeタグとは厳しい
Reactアプリケーションの潜在的な問題を洗い出すための警告機能

React 18以降の仕様について

要素は何かしらのタグ（例えば<div>など）で囲む必要がある。
<div>タグの代わりとして<React.Fragment>を使用する方法

以下のインポート文を利用することで、<React.Fragment>を使えるようになる。

js

import React, { StrictMode } from "react";

<React.Fragment>
  <h1>Hello</h1>
  <p>World</p>
</React.Fragment>

js

//<React.Fragment>の省略形として空タグ<>を使用可能
//空タグ<>と</>は<React.Fragment>と同じ役割を果たす
import { StrictMode } from "react";//React,不要

<>
  <h1>Hello</h1>
  <p>World</p>
</>

/**
<React.Fragment>または空タグの使用目的
レンダリングに影響を与えず、グループ化したい複数の要素を1つの親要素で包む必要がある場合に使用する。
DOMに余計な要素を追加しないため、クリーンなHTML構造を保てる。
*/

App.jsx (コンポーネント）

//関数を用いて画面表示 Appコンポーネント大字始まり
export const App = () => {
    return (
        <>
            <h1>HelloWorlld</h1>
            <p>お元気ですか？</p>
        </>
    );
};

srcフォルダ配下にApp.jsxを作成しApp関数をコピペ
外部からアクセスする為にexprtを頭文字に記述

index.js

// Reactライブラリから新しいroot APIをインポート
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";

// HTMLの中でReactが操作するルート要素（通常は<div id="root">）を取得
const rootElement = document.getElementById("root");

// Reactのroot（アプリケーションのエントリーポイント）を作成
const root = createRoot(rootElement);

// Reactコンポーネントをルート要素にレンダリングする
// ここでは何も渡していないので、エラーまたは空の出力になる
root.render(
    <StrictMode>
        <App />//再度Appを入力するとimport { App } from "./App";がインポートされる
    </StrictMode>);

※Reactでは、JSX内で中括弧（{}）を使うことで、JavaScriptの式を埋め込むことができます。また、変数名やプロパティ名はキャメルケース（camelCase）が推奨されています。

App.jsx Reactでeventやstyleの扱い方（例ボタンを押下際にどうこうしたい）

//event
export const App = () => { 
    return (
        <>
            <h1>HelloWorlld</h1>
            <p>お元気ですか？</p>
            <button onClick={() => alert("click")}>add</button>//アロー関数をonClickイベントハンドラ内で直接定義
        </>
    );
};

//毎回アロー関数を定義することは、パフォーマンスの低下や可読性の低下を招く原因になるため、関数を事前に定義して使う方が推奨されます

export const App = () => {
    const onClickButton = () => alert("aa");//イベントハンドラを事前に定義
    return (
        <>
            <h1>HelloWorlld</h1>
            <p>お元気ですか？</p>
            {/* <button onClick={() => alert("click")}>add</button> */}
            <button onClick={onClickButton}>add</button>
        </>
    );
};

//style
//直接Helloを赤色を定義
export const App = () => {
    const onClickButton = () => alert("aa");
    return (
        <>
            <h1 style={{ color: "red" }}>hello</h1>//直接collarを文字列で定義
            <h1>HelloWorlld</h1>
            <p>How are you?</p>
            <button onClick={onClickButton}>add</button>
        </>
    );
};

//事前に新たな変数名でcollar定義を青色とする
export const App = () => {
    const onClickButton = () => alert("aa");
    const contentStyle = {
        color: "blue",//新たな変数名でblueを定義
        fontSize: "18px",
        margin: 100
    };
    return (
        <>
            <h1 style={{ color: "red" }}>hello</h1>
            <h1>HelloWorlld</h1>
            <p style={contentStyle}>How are you?</p>//事前定義した変数名でblueを定義
            <button onClick={onClickButton}>add</button>
        </>
    );
};

**Hooks（フック）は、React 16.8から導入された機能で、クラスコンポーネントを使わなくても関数コンポーネント内で状態管理（state）やライフサイクル（lifecycle）**を扱えるようにするものです。以下に詳細を説明します

JPA、RestAPI、ReactをJSONでつなぐ仕組み
fetchを使ってAPIにリクエストを送る。とは、React（やJavaScript）が外部のデータを取得したり送信したりするための手段