まずは、Javascriptを学ぼう!!

Javascriptの変数の定義の仕方:

var val1 = "var変数";
console.log(val1);
//=> var変数

val1 = "var変数を上書き"
console.log(val1)
//=> var変数を上書き

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

varの変数宣言では何でも出来てしまう

=>プロジェクトが大きくなってくると意図しない所で変数を再宣言,上書きしてしまう!!

そこで、、、

let , constという宣言が追加された

let: 上書きは出来るが再宣言出来ない

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

val2 = "let変数を上書き";
console.log(val2)

let val2 = "let変数を再宣言"
//=>Identifier 'val2' has already been declared

const: 上書き , 再宣言出来ない

const val3 = "const変数"
console.log(val3)
//=>const変数 

val3 = "const変数を上書き";
//=>"val3" is read-only

const val3 = "const変数を再宣言"
//=> Identifier 'val3' has already been declared

Javascriptのオブジェクトや配列は値を変えれる!!

オブジェクト:

const val4 = {
  name: "じゃけぇ",
  age: 28,
};

console.log(val4);
//=> name: "じゃけぇ", age: 28}

//nameの中身を書き換える
val4.name = "jak";

//新しいプロパティを追加する
val4.address = "Hiroshima";
console.log(val4)
//=> name: "jak", age: 28, address: "Hiroshima"}

配列:

const val5 = ['dog', 'cat'];
console.log(val5)
//=> ["dog", "cat"]

//配列の中身を変える
val5[0] = "bird"
console.log(val5)
//=> ["bird", "cat"]

//配列を追加する
val5.push("monkey")
console.log(val5)
//=> ["bird", "cat", "monkey"]

Reactでは基本constを使い、処理の中で変更が必要な場合、letを使う!!

テンプレート文字列

簡単に言うと、文字列の中にJavascriptの変数が便利に埋め込めるようになった。

「私の名前はじゃけぇです。年齢は28歳です」と表示させたい時、、、
従来の方法:

const name = "じゃけぇ";
const age = 28;

const message1 = "私の名前は" + name + "です。年齢は" + age + "です。";
console.log(message1);

上記の方法だと、コードが長くなって読みずらくなってしまう。

=> テンプレート文字列を用いる

const name = "じゃけぇ";
const age = 28;

//文字列をバッククオテ―ション(``)で囲む
const message2 = `私の名前は${name}です。年齢は${age}です。`;
console.log(message2);

アロー関数

従来の関数の書き方:

function func1(str) {
  return str;
}

console.log(func1("func1です"));
//=> func1です

const func1 = function (str) {
  return str;
};

console.log(func1("func1です。"));
//=> func1です。

アロー関数:

functionは書かずにそのまま引数を書く
=> がアロー関数の由来
処理の中で => がある。 = 関数を使っていると思って良い

const func2 = (str) => {
    return str;
};

console.log(func2("func2です。"));
//=> func2です。

引数を書いて、「=>」を書いてその後{}で処理を書いていくという書き方

引数が2つの時、、、

const func3 = (num1, num2) => {
    return num1 + num2;
};

console.log(func3(10,20));
//=>30

分割代入

const myProfile = {
    name: "じゃけぇ"
    age: 28
};

const message1 = `名前は${myProfile.name}です。年齢は${myProfile.age}`;
console.log(message1);

//=> 名前はじゃけぇです。年齢は28

myProfileという変数がもっと長かったり、もっと設定項目が多いとコードが読みずらくなる。

=> 分割代入を用いてコードを綺麗にする!

分割代入(const { name, age } = myProfile)で、

オブジェクトから指定のプロパティを抜き出して自由に使えるようになる。

const myProfile = {
  name: "じゃけぇ",
  age: 28
};

const { name, age } = myProfile;
const message2 = `名前は${name}です。年齢は${age}歳です。`;
console.log(message2);
//=> 名前はじゃけぇです。年齢は28歳です。

何と! 配列にも使える!

ちなみに、分割代入を使わない時は、、、

const myProfile = ["じゃけぇ", 28];
const message3 = 名前は${myProfile[0]}です。年齢は${myProfile[1]}歳です。`;
console.log(message3);
//=>名前はじゃけぇです。年齢は28歳です。

分割代入を使うと、、、

配列の場合、オブジェクトのように名前が決まってないので順番に受け取る
myProfileの最初の要素がname , 次の要素がageに入る

const myProfile = ["じゃけぇ", 28];
const [name, age] = myProfile;
const message4 = `名前は${name}です。年齢は${age}歳です。`;
console.log(message4);
//=> 名前はじゃけぇです。年齢は28歳です。

デフォルト値、引数など

const sayHello = (name) => console.log(`こんにちは${name}さん!`);
sayHello("じゃけぇ");
//=> こんにちはじゃけぇさん!

引数が渡されない時、、、

sayHello();
//=> こんにちはundefinedさん!
//値が入っていない初期状態undifinedと判定される

引数が渡されない時のデフォルトの値を設定したいとき
nameの後に = を付けて設定したい値を入れる

const sayHello = (name = "ゲスト") => console.log('こんにちは${name}さん！');
sayHello();
//=> こんにちはゲストさん

sayHello("じゃけぇ");
//=>こんにちはじゃけぇさん!

スプレッド構文

従来の配列の展開、、、

const arr1 = [1,2];
console.log(arr1);
//=> [1,2]

スプレッド構文で配列を展開すると、、、

const arr1 = [1, 2];
console.log(...arr1);
//  => 1 2

配列だったが実際の1,2という値になっている。
配列の中身を順場に処理して展開する

const arr1 = [1, 2];
const sumFunc = (num1, num2) => console.log(num1 + num2);
sumFunc(arr1[0], arr1[1]);
//=>3

スプレッド構文を使って引数を渡すと、、、

const sumFunc = (num1, num2) => console.log(num1 + num2);
const arr1 = [1, 2];
sumFunc(...arr1);
//=> 3

スプレッド構文で渡すと要素が順番に設定されるので、↑の行と同じ事をしている
イメージ: ...　=> 順番に処理する

展開の反対で1つにまとめる

配列をまとめて受け取るのに使える

const arr2 = [1,2,3,4,5,6];
const [num1, num2, ...arr3] = arr2;

console.log(num1);
//=>1

console.log(num2);
//=>2

console.log(arr3);
//=>[3, 4, 5]

配列のコピー、結合

const arr4 = [10, 20];
const arr5 = [30, 40];

//arr4の同じ要素を持つarr6という配列を作る
const arr6 = [...arr4];
console.log(arr6);
//=>[10, 20]

arr4とarr5を結合した新しい配列を作る

const arr4 = [10, 20];
const arr5 = [30, 40];
const arr7 = [...arr4, ...arr5];
console.log(arr7);
// => [10, 20, 30, 40]

...arr4 => arr4を展開してできた10,20
...arr5 => arr5を展開してできた30,40
よって、[10,20,30,40,50]という配列が作られる

コピーするだけなら下記のような書き方でも良いのでは、、、?

const arr4 = [10, 20];
const arr8 = arr4;

console.log(arr8);
//=> [10,20]

arr8[0] = 100;
console.log(arr4);
//=> [100,20]

元々,arr4 = [10 , 20]だったのが[100,20]になっている!

=>元の配列も変わってしまう

=> 不具合が発生する可能性がある!

配列をコピーしたいときはスプレッド構文を使う!

mapやfilterを使った配列の処理

for文を使った処理:

const nameArr = ["田中", "山田", "じゃけぇ"];
for (let index = 0; index < nameArr.length; index++) {
  console.log(nameArr[index]);
}

// =>田中
//   山田
//   じゃけぇ

mapを使った処理:

const nameArr = ["田中", "山田", "じゃけぇ"];

const nameArr2 = nameArr.map((name) => {
  return name;
});

console.log(nameArr2);
// =>["田中", "山田", "じゃけぇ"]

順場に入ってきた値をそのまま返している

for文と同じ結果になっている。

const nameArr = ["田中", "山田", "じゃけぇ"];
nameArr.map((name) => {
  console.log(name);
});

// => 田中
//    山田
//    じゃけぇ

map: 配列に対して使って、中で順番に要素が引数に設定され、それを関数内で処理させる

mapの使い方:

単純に配列をループさせて何かを処理する
returnされた結果に基づいて新しい配列を作る

filter: ある条件に一致したものだけ返して新しい配列を作る

const numArr = [1, 2, 3, 4, 5];

//この配列から奇数を取り出して新しい配列を作りたい時
const newNumArr = numArr.filter((num) => {
  return num % 2 === 1;
});
console.log(newNumArr);
// =>[1, 3, 5]

mapで配列が何番目かを表示させたいとき、、、

1つ目の引数には配列の要素が入り、2つ目の引数には順番が0から入る

const nameArr = ["田中", "山田", "じゃけぇ"];
nameArr.map((name, index) => {
  console.log(`${index + 1}番目は${name}です`);
});

// =>  1番目は田中です
//     2番目は山田です
//     3番目はじゃけぇです

const nameArr = ["田中", "山田", "じゃけぇ"];

↑の要素の"じゃけぇ"以外に「さん」を付けて新しい配列を作りたいとき、、、

const nameArr = ["田中", "山田", "じゃけぇ"];
const newNameArr = nameArr.map((name) => {
  if (name === "じゃけぇ") {
    return name;
  } else {
    return `${name}さん`;
  }
});
console.log(newNameArr);
//=>["田中さん", "山田さん", "じゃけぇ"]

三項演算子

構文: ある条件? 条件がtrueの時 : 条件がfalseの時

const val1 = 1 > 0 ? "trueです" : "falseです";
console.log(val1);
//=> trueです

const num = 1300;

//toLocalString: 金額とかで,区切りに3桁表示してくれる。
console.log(num.toLocaleString());

//=>1,300

const num = "1300";
const formattedNum =
// typeof: その変数の型が何かを判定する
  typeof num === "number" ? num.toLocalString() : "数値を入力してください";

console.log(formattedNum);
// => 数値を入力してください

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

関数のreturn部分でも三項演算子を使ったりする

論理演算子の本当の意味を知ろう(&& ||)

一般的な使い方:

const flag1 = true;
const flag2 = false;

if (flag1 || flag2) {
  console.log("1か2はtrueになります");
}
// //=>1か2はtrueになります

if (flag1 && flag2) {
  console.log("1も2もtrueになります。");
}
//=> (何も表示されない)

実は || && は、「または」 , 「かつ」という意味ではない。

例: ||の場合

const num = null;
const fee = num || "金額未設定です";
console.log(fee);
//=>金額未設定です

const num = 100;
const fee = num || "金額未設定です";
console.log(fee);
//=> 100

何故、このような事が起きるのか？

|| は左側がfalseなら右側を返すという意味

||の左側がtrueならそのまま左側を返す

例: &&の場合

const num2 = 100;
const fee2 = num2 && "何か設定されました";
console.log(fee2);
//=> 何か設定されました

const num2 = null;
const fee2 = num2 && "何か設定されました";
console.log(fee2);
// => null

&& は左側がtrueなら右側を返す　falseなら左側を返す

Reactを学ぼう!!

一旦、大事なこと:
public/index.html

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

ReactなどのSPA開発では、index.html自体は一枚で
後は、Javascriptで要素を書き換えて画面の遷移を表現する

この記述はHTMLのどの部分にJavascriptを差し込んでいくかという目印

src/index.js


import { StrictMode } from "react";
import ReactDom from "react-dom";

import App from "./App";

//renderという処理で実際にJavascriptの内容を反映する
ReactDom.render(
  <StrictMode>
    
    //import APP from "./APP"より、APP.jsというファイルを読み込む
    <App />
  </StrictMode>,

  //rootというidを取得する
  document.getElementById("root")

);

APP.js

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

index.jsで読み込まれて↓のような画面が表示される!

JSX記法について

index.js

import React from react

この記述は、Reactのコンポーネントを書いていくのに
必ず必要!!

import ReactDom from 'react-dom

index.jsには、HTMLにコンポーネントを反映していく必要がある
それに必要なReactDomをimportする

Reactでは関数を使って画面の要素であるコンポーネントを表現する

const APP = () => {
    return null;
}
//これでnullという値を返すAPPという関数が出来た

この関数を画面に反映するためにReactDomの中にあるrenderという関数を使う
ReactDom.render(<レンダリングする関数名 /> , 反映する場所)

const APP = () => {
    return null;
}

ReactDom.render(<App /> , document.getElementById("root"))

実際にJSX記法を使って画面に要素を表示してみよう!!

ReactではJavascriptの中にHTMLを書いていく感じ


import React from "react";
import ReactDom from "react-dom"

const App = () => {
  return <h1>こんにちは</h1>
}

ReactDom.render(<APP />, document.getElementById("root"));

更に、JSX記法を使って要素を追加してみよう!!

要素が複数(returnのに内容が複数)の時は、
下記のようにreturnに()を用いる


import React from "react";
import ReactDom from "react-dom"

const App = () => {
  return (
    <h1>こんにちは</h1>
    <p>お元気ですか?</p>
  )
}

ReactDom.render(<APP />, document.getElementById("root"));

しかし、、、エラーが発生!!

JSX記法のルール: returnするHTMLの内容は1つのタグで囲む!!

今回は、divタグで囲む


import React from "react";
import ReactDom from "react-dom"

const App = () => {
  return (
    <div>
        <h1>こんにちは</h1>
        <p>お元気ですか?</p>
    </div>
  )
}

ReactDom.render(<APP />, document.getElementById("root"));

しかし、余分なdivがレンダリングされてしまう

=> エラーを回避するためならReact.Fragmentタグを使う!!


import React from "react";
import ReactDom from "react-dom"

const App = () => {
  return (
    <React.Fragment>
        <h1>こんにちは</h1>
        <p>お元気ですか?</p>
    </React.Fragment>
  )
}

ReactDom.render(<APP />, document.getElementById("root"));

コンポーネントの使い方を知ろう!!

Reactでは、画面の表示の部分を色々なファイルに分けてコンポーネントとして管理する

新しいファイル App.jsを作成する

import React from 'react';
import ReactDom from "react-dom";

const App = () => {
    return(
        <> //<React.Fragment>を省略する事が出来る
           <h1>こんにちは</h1>
           <p>お元気ですか?</p>
        </>
    );
};

このままでは、Appという関数はこのファイル上でしか使えない。
export default 関数名と記述する
関数を他でも使用出来るようにする

App.js

import React from 'react';
import ReactDom from "react-dom";

const App = () => {
    return(
        <> //<React.Fragment>を省略する事が出来る
           <h1>こんにちは</h1>
           <p>お元気ですか?</p>
        </>
    );
};

export default App;

exportが記述出来たのでindex.jsでAppとう関数を使おう!!

import React from "react";
import ReactDom from "react-dom";
import App from "./App";

ReactDom.render(<App />, document.getElementById("root"));

import 使いたい関数名 from "どのファイルからimportするのか"と記述する

他のファイルで画面のレンダリングの部分を作成し、
exportして、importする事でコンポーネントとして利用出来る

コンポーネントとして利用するファイルは.jsxにするとわかりやすい

Reactでのイベントやstyleの扱い方を知ろう!!

ボタンを押した時に~したいという機能を作りたい時、、、

1 buttonタグを記述する

App.js

import React from 'react';
import ReactDom from "react-dom";

const App = () => {
    return(
        <> //<React.Fragment>を省略する事が出来る
           <h1>こんにちは</h1>
           <p>お元気ですか?</p>
           <button onClick = {}>ボタン</button>
        </>
    );
};

export default App;

Reactの特徴:
HTMLのタグの中で使うイベント , styleの名称 => 単語の繋ぎ部分が大文字(キャメルケース)

 return(
        <> //<React.Fragment>を省略する事が出来る
           <h1>こんにちは</h1>
           <p>お元気ですか?</p>
           <button onClick = {}>ボタン</button>
        </>

jsxで返しているHTMLのタグを{}で囲むと
Javascriptとして認識される
=>{}で囲って、Javascriptの関数を書いていくイメージ

import React from 'react';
import ReactDom from "react-dom";

const App = () => {
  const onClickButton = () => alert();
    return(
        <> //<React.Fragment>を省略する事が出来る
           <h1>こんにちは</h1>
           <p>お元気ですか?</p>
            
            //{}の中に割り当てたい関数名を記述する => イベントを割り当てる事が可能
           <button onClick = {onClickButton}>ボタン</button>

        </>
    );
};

export default App;

styleを割り当てる

return(
        <> 
           <h1 style = {{color: "red"}}>こんにちは</h1>
           <p>お元気ですか?</p>
           <button onClick = {onClickButton}>ボタン</button>

        </>
    );

style = {{}}:
外側の{}: Javascriptを書きますよ~という{}
内側の{}: Javascriptのオブジェクトの{}

変数を使ってstyleを割り当てる

import React from 'react';
import ReactDom from "react-dom";

const App = () => {
  const onClickButton = () => alert();
  const contentStyle = {
    color: 'blue';
    fontSize: '18px';
  };

    return(
        <> //<React.Fragment>を省略する事が出来る
          <h1 style = {{color: "red"}}>こんにちは</h1>
           <p style = {contentStyle}>お元気ですか?</p>
           <button onClick = {onClickButton}>ボタン</button>

        </>
    );
};

export default App;

一度、オブジェクトの変数を定義して中にプロパティを書いて行く。
そして、それをstyleの中に反映させていく。

Propsを知ろう!!

props: コンポーネントに対して渡す引数のようなもの ,
ある程度、動的にコンポーネントを使えるように出来る。

例: コンポーネントとして画面を別ファイルに切り出しても
条件によっては、その振る舞いを変える必要がある
通常は黒文字 , エラーの時は赤文字

「元気です」という文字は女性用なので
ピンク色にしようとすると、、、

import React from "react";

const App = () => {
  const onClickButton = () => alert();
  const contentStyle = {
    color: "blue",
    fontSize: "18px"
  };

  const contentLeadyStyle = {
    color: "pink",
    fontSize: "18px"
  };

  return (
    <React.Fragment>
      <h1 style={{ color: "red" }}>こんにちは</h1>
      <p style={contentStyle}>お元気ですか?</p>
      <p style={contentLeadyStyle}>元気です!</p>
      <button onClick={onClickButton}>ボタン</button>
    </React.Fragment>
  );
};

export default App;

しかし、出てくるたびにstyleを分けるのはメンドクサイ!!

=> 文章をコンポーネント化して、色と文章をPropsとして受け取るようにすれば良い！

srcの配下にcomponentsというフォルダを作成する
色を付けた文字を表示するコンポーネント(ColorfulMessage.jsx)を作成する

src/components/ColorfulMessage.jsx

import React from 'react';

const ColorfulMessage = () => {
  const contentStyle = {
    color: 'blue';
    fontSize: '18px'; 
  }
  return (
    <p style = {contentStyle}>お元気ですか?</p>
  )
}

blueの文字色で指定された「お元気ですか?」というメッセージを返すコンポーネントを
作成できた。

App.jsxでimportしてColorfulMessageというコンポーネントを使う

App.jsx

import React from "react";
import ColofulMessage from './components/ColorfulMessage';

const App = () => {
    const onClickButton = ()  => alert();
    const contentLedyStyle = {
        color: 'pink';
        fontSize:'18px;
    };
    return (
        <>
           <h1 style = {{color: 'red'}}>こんにちは</h1>

           //タグの中にコンポーネントを入れる事で
           //ColofulMessageというコンポーネントを使える
           <ColofulMessage />

           <p style = {contentLedyStyle}>元気です!</p>
           <button onClick = {onClickButton}>ボタン</button>
        </>
    );
};

export default App;

このままだと、青文字で「お元気ですか」としか返さない
=>Propsで条件を渡して動的に変わるコンポーネントにする

Propsを渡す場合、
渡す方 , 渡される方　両方に修正を加える

渡す方: タグの中に渡したい名称を書いて行く
App.jsx(渡す方)

import React from "react";
import ColofulMessage from './components/ColorfulMessage';

const App = () => {
    const onClickButton = ()  => alert();
    const contentLedyStyle = {
        color: 'pink';
        fontSize:'18px;
    };
    return (
        <>
           <h1 style = {{color: 'red'}}>こんにちは</h1>

           //色を渡したいのでcolor , 文章を渡すのでmessageにした(任意で決めれる)
           <ColofulMessage color = "blue" message = "お元気ですか?"/>

           <p style = {contentLedyStyle}>元気です!</p>
           <button onClick = {onClickButton}>ボタン</button>
        </>
    );
};

export default App;

このようにして、
コンポーネントに対して適当な名前を付けて要素を渡していく事で
コンポーネントに対してPropsを渡せる

ColorfulMessage.jsx(Propsを渡される方)

import React from "react";

const ColorfulMessage = (props) => {
    const contentStyle = {
        color: "blue";
        fontSize: "18px";
    };
    
    return <p style = {contentStyle}>お元気ですか?</p>;
};

export default ColorfulMessage;

ここで、Propsの中身を確認すると、、、

const ColorfulMessage = (props) => {

    console.log(props);
    //=> {color: "blue", message: "お元気ですか？"}

    //colorというプロパティに「blue」という文字列
    //messageというプロパティに「お元気ですか?」という文字列が入っている

    const contentStyle = {
        color: "blue";
        fontSize: "18px";
    };

App.jsxで設定したPropsが渡ってきていると確認出来る
=>後は、コンポーネントの中で渡ってきた要素を使えば良い

import React from "react";

const ColorfulMessage = (props) => {
    const contentStyle = {
        color: props.color;
        fontSize: "18px;
    };
    
    //returnしているHTMLっぽい所でJavascriptを書く場合、{}で囲む
    return <p style = {contentStyle}>{props.message}</p>;
};

export default ColorfulMessage;

ピンク色の「元気です！」もPropsを使って記述すると、、、

App.jsx

import React from "react";
import ColofulMessage from './components/ColorfulMessage';

const App = () => {
    const onClickButton = ()  => alert();
    return (
        <>
           <h1 style = {{color: 'red'}}>こんにちは</h1>
           <ColofulMessage color = "blue" message = "お元気ですか?"/>
           <ColofulMessage color = "pink" message = "元気です!"/>
           <p style = {contentLedyStyle}>元気です!</p>
           <button onClick = {onClickButton}>ボタン</button>
        </>
    );
};

export default App;

初めは↓のようなスタイルがあってごちゃごちゃしていたが、
共通のコンポーネントを書くことでスッキリさせる

  const contentLedyStyle = {
        color: 'pink';
        fontSize:'18px;
    };

Propsのもう一つの渡し方、、、
ColorfulMessageというタグで囲って文章を設定する

App.jsx

 <ColofulMessage color="blue">お元気ですか?</ColofulMessage>
 <ColofulMessage color="pink">元気です!</ColofulMessage>

ColofulMessageというタグで囲った中身を使うようにする
=> childrenを用いる

ColorfulMessage.jsx

import React from "react"

const ColorfulMessage = (props) => {
    const contentStyle = {
       color: props.color,
       fontSize: "18px"
    };

    return <p style = {contentStyle}>{props.children}</p>;
}

export default ColorfulMessage;

コンポーネントのタグで囲った中身をそのまま渡すと
特別なchildrenという変数に入ってくる

Stateを知ろう!!

State: それぞれのコンポーネントが持っている状態
条件によって画面が自動的に変わる部分をStateとして
定義すれば良い。

Stateを使用する場合、useStateを使う必要がある

App.jsx

import React, { useState } from "react";
import ColofulMessage from "./components/ColorfulMessage";

const App = () => {
    const onClickButton = () => alert();
    useState();
    return(
        <>
           <h1 style = {{color: 'red'}}>こんにちは</h1>
           <ColofulMessage color="blue">お元気ですか?</ColofulMessage>
           <ColofulMessage color="pink">元気です!</ColofulMessage>
           <button onClick = {onClickButton}>ボタン</button>
        </>
    )
}

import React, { useState } from "react";

useStateは、Reactの中に入っている
=> 分割代入で中身からuseStateを取り出している

useStateから実際に使う変数を設定する
useStateの中から配列の分割代入で取り出していく

import React, { useState } from "react";
import ColofulMessage from "./components/ColorfulMessage";

const App = () => {
    const onClickButton = () => alert();

    //const[Stateとして使用する変数名 , そのStateを変更する為の関数名]
    //useState()の()に、初期値を設定することが出来る(今回は0)
    const [num, setNum] = useState(0);
    return(
        <>
           <h1 style = {{color: 'red'}}>こんにちは</h1>
           <ColofulMessage color="blue">お元気ですか?</ColofulMessage>
           <ColofulMessage color="pink">元気です!</ColofulMessage>
           <button onClick = {onClickButton}>ボタン</button>
        </>
    )
}

実際にnumという変数に0が格納されているのか
確認してみよう!!

import React, { useState } from "react";
import ColofulMessage from "./components/ColorfulMessage";

const App = () => {
    const onClickButton = () => alert();

    //const[Stateとして使用する変数名 , そのStateを変更する為の関数名]
    //useState()の()に、初期値を設定することが出来る(今回は0)
    const [num, setNum] = useState(0);
    return(
        <>
           <h1 style = {{color: 'red'}}>こんにちは</h1>
           <ColofulMessage color="blue">お元気ですか?</ColofulMessage>
           <ColofulMessage color="pink">元気です!</ColofulMessage>
           <button onClick = {onClickButton}>ボタン</button>
           <p>{num}</p>
        </>
    )
}

ボタンをクリックすると数字をカウントアップする機能を実装する

App.jsx

import React, { useState } from "react";
import ColofulMessage from "./components/ColorfulMessage";

const App = () => {
    const onClickCountUp = () => {
    
        //Stateを更新するには、2つ目に設定したsetNumという関数を使う
        //その中にnumをどのように更新したいか書く
        setNum(num + 1);
    }

    //const[Stateとして使用する変数名 , そのStateを変更する為の関数名]
    //useState()の()に、初期値を設定することが出来る(今回は0)
    const [num, setNum] = useState(0);
    return(
        <>
           <h1 style = {{color: 'red'}}>こんにちは</h1>
           <ColofulMessage color="blue">お元気ですか?</ColofulMessage>
           <ColofulMessage color="pink">元気です!</ColofulMessage>
           <button onClick = {onClickCountUp}>カウントアップ!</button>
           <p>{num}</p>
        </>
    )
}

再レンダリング , useEffect

まずは、顔文字を表示させる

App.jsx

import React , { userState } from "react";
import ColorfulMessage from "./components/ColorfulMessage";

const App = () => {
   const onClickCountUp = () => {
       setNum(num + 1);
   };
   const [num, setNum] = useState(0);
   return (
    <>
      <h1 style = {{ color: "red" }}>こんにちは!</h1>
      <ColorfulMessage color = "blue">お元気ですか?</ColorfulMessage>
      <ColorfulMessage color = "pink">元気です!</ColorfulMessage>
      <p>{num}</p>
      <p>!(^^)!</p>
   );
};

export default App;

ボタンを押すと顔文字を表示/非表示させる機能を実装する

import React , { userState } from "react";
import ColorfulMessage from "./components/ColorfulMessage";

const App = () => {
   const onClickCountUp = () => {
       setNum(num + 1);
   };
   const [num, setNum] = useState(0);
   return (
    <>
      <h1 style = {{ color: "red" }}>こんにちは!</h1>
      <ColorfulMessage color = "blue">お元気ですか?</ColorfulMessage>
      <ColorfulMessage color = "pink">元気です!</ColorfulMessage>
      <br />

      //ボタンを作成する
      <button>on/off</button>

      <p>{num}</p>
      <p>!(^^)!</p>
   );
};

export default App;

表示/非表示という状態を持たせる
=> 状態を定義する
=> Stateを定義する

import React , { userState } from "react";
import ColorfulMessage from "./components/ColorfulMessage";

const App = () => {
    const [num, setNum] = useState(0);
    
   //表示/非表示を扱うStateを定義する , 初期値をtrueにする
   //faceshowFlagを更新する為の関数がsetfaceShowFlag

   const [faceShowFlag , setFaceShowFlag] = useState(true)

   const onClickCountUp = () => {
       setNum(num + 1);
   };
  
   return (
    <>
      <h1 style = {{ color: "red" }}>こんにちは!</h1>
      <ColorfulMessage color = "blue">お元気ですか?</ColorfulMessage>
      <ColorfulMessage color = "pink">元気です!</ColorfulMessage>
      <br />
      <button>on/off</button>

      <p>{num}</p>
      <p>!(^^)!</p>
   );
};

export default App;

faceShowFlagがtrueの時だけ
顔文字部分がレンダリングされるようにする
=> &&: 左側がtrueの時に右側を返す

import React , { userState } from "react";
import ColorfulMessage from "./components/ColorfulMessage";

const App = () => {
    const [num, setNum] = useState(0);
    const [faceShowFlag , setFaceShowFlag] = useState(true)
    const onClickCountUp = () => {
       setNum(num + 1);
   };
  
   return (
    <>
      <h1 style = {{ color: "red" }}>こんにちは!</h1>
      <ColorfulMessage color = "blue">お元気ですか?</ColorfulMessage>
      <ColorfulMessage color = "pink">元気です!</ColorfulMessage>
      <br />
      <button>on/off</button>
      <p>{num}</p>

      {faceShowFlag && <p>!(^^)!</p>}

   );
};

export default App;

on/offボタンが押された時に、faceShowFlagのtrue/falseを切り替える

import React , { userState } from "react";
import ColorfulMessage from "./components/ColorfulMessage";

const App = () => {
    const [num, setNum] = useState(0);
    const [faceShowFlag , setFaceShowFlag] = useState(true)
    const onClickCountUp = () => {
       setNum(num + 1);
   };

   //この中で、setFaceShowFlagを切り替える
  // useStateで定義した関数を呼び出す
  // true => false , false => trueにする
  // => 現在のフラグ(faceShowFlag)の値の逆(!を付ければ良い)

   const onClickSwitchShowFlag = () => {
       setFaceShowFlag(!faceShowFlag);
   }
  
   return (
    <>
      <h1 style = {{ color: "red" }}>こんにちは!</h1>
      <ColorfulMessage color = "blue">お元気ですか?</ColorfulMessage>
      <ColorfulMessage color = "pink">元気です!</ColorfulMessage>
      <br />

      //onClickに定義したonClickSwitchShowFlagという関数を割り当てる
      <button onClick = {onClickSwitchShowFlag} >on/off</button>

      <p>{num}</p>

      {faceShowFlag && <p>!(^^)!</p>}

   );
};

export default App;

何故、再読み込みしてないのにnumが+1されたり、顔文字が表示されるのか?

=> Reactのコンポーネントが再レンダリングされているから。

ステイトの更新があった時に、Reactがそれを検知してコンポーネントを上から読み込み
h1 style = ~の表示が変わる

import React, { useEffect, useState } from "react";
import ColorfulMessage from "./components/ColorfulMesssage";

const App = () => {
 
  //ボタンを押すたびに表示される => ボタンを押すたびに一番上から読み込まれている
  console.log("最初");
  // const onClickButton = () => alert();
  const onClickCountUp = () => {
    setNum(num + 1);
  };

画面を再読み込みしてコンソールを見てみると、、、

一番、最初にconsole.log("最初")が通過されているのがわかる

ステイト変更時はどうなるかボタンを押して確認してみると、、、

ステイトを変更すると , ボタンを押した数だけ表示される
=>setFaceShowFlagという関数でステイトが変更された時、
また、const App = () という関数コンポーネントが頭から読み込まれている

import React from "react";

const ColorfullMessge = (props) => {
  console.log("カラフル");
  const { color, children } = props;
  const contentStyle = {
    color: color,
    fontSize: "18px"
  };
  return <p style={contentStyle}>{children}</p>;
};

export default ColorfullMessge;

「カウントアップ」ボタンを押してStateを変更すると、、、

import React , { userState } from "react";
import ColorfulMessage from "./components/ColorfulMessage";

const App = () => {
    
    //ここが表示される
    console.log("最初");

    const [num, setNum] = useState(0);
    const [faceShowFlag , setFaceShowFlag] = useState(true)
    const onClickCountUp = () => {
       setNum(num + 1);
   };


   const onClickSwitchShowFlag = () => {
       setFaceShowFlag(!faceShowFlag);
   }
  
   return (
    <>
      <h1 style = {{ color: "red" }}>こんにちは!</h1>
        
       //ColofulMessageが2回読み込まれる
      <ColorfulMessage color = "blue">お元気ですか?</ColorfulMessage>
      <ColorfulMessage color = "pink">元気です!</ColorfulMessage>

      <br />
      <button onClick = {onClickSwitchShowFlag} >on/off</button>

      <p>{num}</p>

      {faceShowFlag && <p>!(^^)!</p>}

   );
};

export default App;

<ColorfulMessage color = "blue">お元気ですか?</ColorfulMessage>
<ColorfulMessage color = "pink">元気です!</ColorfulMessage>

import React from "react";

const ColorfullMessge = (props) => {

  //ここが表示される
  console.log("カラフル");

  const { color, children } = props;
  const contentStyle = {
    color: color,
    fontSize: "18px"
  };
  return <p style={contentStyle}>{children}</p>;
};

export default ColorfullMessge;

親のコンポーネントは、自分のStateが更新されたので
「最初」と表示される

親のコンポーネントが再レンダリングされ、それに追従して
「カラフル」と2回表示される

再レンダリングの仕組みを知らないと思わぬバグを引き起こす!?

カウントアップしていって、3の倍数の時に顔文字を表示する機能を実装する

numが3の倍数の時に、faceShowFlagをtrueにする


const App = () => {
  console.log("最初");
  const onClickCountUp = () => {
    setNum(num + 1);
  };
  const [num, setNum] = useState(0);
  const [faceshowFrag, setFaceShowFlag] = useState(false);

  const onClickSwitchShowFlag = () => {
    setFaceShowFlag(!faceshowFrag);
  };

if (num % 3 === 0) {
    setFaceShowFlag(true);
  } else {
    setFaceShowFlag(false);
  }

しかし、このような記述だと下記のようなエラーが出る!!

コンポーネント内で物凄い数の再レンダリングが起きている事によるエラー

原因:

//numに0という初期値が与えられる
const [num, setNum] = useState(0)

//num % 3 == 0より、

if (num % 3 === 0) {

    //こちらの処理が通り、ステイトが変更される
    setFaceShowFlag(true);

  } else {
    setFaceShowFlag(false);
}

ステイトが変更された事によって、
またコンポーネントが頭から読み込まれる

const App = () => {

このように、何度もステイトが変更されてAppがずっとループする事でエラーが起きている
=> Too many re-renders. ～というエラーが起きたら、ステイトの変更周りを注意しよう!!

解決策:
既に、setFaceShowFlagがtrueの時に、このフラグをtrueにする関数を呼ばないようにする
falseの時に、falseにする関数を呼ばないようにする

改善したコード:

if (num % 3 == 0) {
    faceshowFrag || setFaceShowFlag(true);
  } else {
    faceshowFrag && setFaceShowFlag(false);
  }

faceShowFlag || setFaceShowFlag(true);
setFaceShowFlag(true)がtrueの時にsetFaceShowFlagという関数を呼ばないようにする(falseの時に呼ぶ)
=> || : 左がfalseの時に右側の処理をやってくれる

faceShowFlag && setFaceShowFlag(false)
faceShowFlagがtrueの時にfalseにしたい
&&:左側がtrueなら右側の処理をする

しかし、on/offボタンが動かなくなってしまった!!

原因:

<button onClick={onClickSwitchShowFlag}>on/off</button>

この部分より、on/offボタンをクリックするとonClickSwitchShowFlagが呼ばれる
setFaceShowFlag(!faceshowFrag);が呼ばれて現在のfaceshowFragが反転する

ステイトが更新されたので頭から読み込まれる
if (num % 3 == 0)が読み込まれるがnumの値が変わってないので

if (num % 3 == 0) {
    //また、この部分を通る
    faceshowFrag || setFaceShowFlag(true);
  } else {
    faceshowFrag && setFaceShowFlag(false);
  }

フラグをfalseにしてもtrueにまた、更新されてしまう
結果として、on/offが効かない

扱う変数が増えたり、ステイトの数が増えると
それぞれの処理が邪魔しあって上手く動かなかったりする
=> 関心の分離をする

この部分をnumの値だけ関心を持つようにする!!

if (num % 3 == 0) {
    faceshowFrag || setFaceShowFlag(true);
  } else {
    faceshowFrag && setFaceShowFlag(false);
  }

関心の分離には、useEffectを用いる!

使い方:


const onClickCountUp = () => {
    setNum(num + 1);
};

const onClickSwitchShowFlag = () => {
    setFaceShowFlag(!faceShowFlag);
};

useEffect(()) => {
   console.log("useEffect");
});

if (num % 3 === 0 ){
    faceShowFlag || setFaceShowFlag(true);
}else{
    faceShowFlag && setFaceShowFlag(false);
}

useEffectに空の配列[]を設定する事で
最初は、useEffect!表示されるがステイトを更新すると
最初という文字しか表示されない
=> useEffectの中を通っていない
=> 空の配列を渡す事で最初の1回だけ通したい処理を書くことが出来る

例: 画面を表示するのにデータを取って来る事etc...


const onClickCountUp = () => {
    setNum(num + 1);
};

const onClickSwitchShowFlag = () => {
    setFaceShowFlag(!faceShowFlag);
};

useEffect(()) => {
   console.log("useEffect");
});

if (num % 3 === 0 ){
    faceShowFlag || setFaceShowFlag(true);
}else{
    faceShowFlag && setFaceShowFlag(false);
}

[]の中に変数を入れると
その変数が変化した時だけ通すように設定出来る!!

useEffect(() => {
    if (num % 3 == 0) {
      faceshowFrag || setFaceShowFlag(true);
    } else {
      faceshowFrag && setFaceShowFlag(false);
    }
    console.log("userEffect!!");
  }, [num]);

おまけ: default export と export

defaultとではない、もう一つのexportの仕方:

import React from "react";

//通常のexportの仕方(関数コンポーネントの定義の前にexportを付ける)
export const ColorfullMessge = (props) => {
  const { color, children } = props;
  const contentStyle = {
    color: color,
    fontSize: "18px"
  };
  return <p style={contentStyle}>{children}</p>;
};

//defaultのexportの仕方
export default ColorfullMessge;

しかし、エラーが発生した

通常のexportでは、importして使用する場合、分割代入をする

App.jsx


import React, { useEffect, useState } from "react";

//通常のexportのimport
import from {ColorfulMessage} from "./components/ColorfulMesssage";

//defaultのexportでのimport
//import ColorfulMessage from "./components/ColorfulMesssage";

Reactのコンポーネントでは、基本通常のexportを使えば良い!!

App.jsxでコンポーネントの名前を間違えたとき、、、

defaultのexportの時、、、

App.jsx


import React, { useEffect, useState } from "react";

//コンポーネントの名前を間違えても(本来は、ColorfulMessage)
import ColorfulMessag from "./components/ColorfulMesssage";

//この部分のタグも同じColorfulMessagにすれば、そのままプロジェクトが進んでしまう
<ColorfulMessag color="blue">お元気ですか？</ColorfulMessag>
<ColorfulMessag color="pink">元気ですか</ColorfulMessag>


export default App;

通常のexportの時、

エラーを出してくれる!!

Reactの講座で学んだ事をまとめてます！

まずは、Javascriptを学ぼう!!

=>プロジェクトが大きくなってくると意図しない所で変数を再宣言,上書きしてしまう!!

let , constという宣言が追加された

let: 上書きは出来るが再宣言出来ない

const: 上書き , 再宣言出来ない

Reactでは基本constを使い、処理の中で変更が必要な場合、letを使う!!

テンプレート文字列

=> テンプレート文字列を用いる

アロー関数

従来の関数の書き方:

アロー関数:

分割代入

myProfileという変数がもっと長かったり、もっと設定項目が多いとコードが読みずらくなる。

=> 分割代入を用いてコードを綺麗にする!

分割代入(const { name, age } = myProfile)で、

オブジェクトから指定のプロパティを抜き出して自由に使えるようになる。

何と! 配列にも使える!

分割代入を使うと、、、

デフォルト値、引数など

スプレッド構文

展開の反対で1つにまとめる

配列のコピー、結合

コピーするだけなら下記のような書き方でも良いのでは、、、?

元々,arr4 = [10 , 20]だったのが[100,20]になっている!

=>元の配列も変わってしまう

=> 不具合が発生する可能性がある!

mapやfilterを使った配列の処理

順場に入ってきた値をそのまま返している

for文と同じ結果になっている。

map: 配列に対して使って、中で順番に要素が引数に設定され、それを関数内で処理させる

mapの使い方:

filter: ある条件に一致したものだけ返して新しい配列を作る

mapで配列が何番目かを表示させたいとき、、、

const nameArr = ["田中", "山田", "じゃけぇ"];

↑の要素の"じゃけぇ"以外に「さん」を付けて新しい配列を作りたいとき、、、

三項演算子

関数のreturn部分でも三項演算子を使ったりする

論理演算子の本当の意味を知ろう(&& ||)

実は || && は、「または」 , 「かつ」という意味ではない。

何故、このような事が起きるのか？

|| は左側がfalseなら右側を返すという意味

||の左側がtrueならそのまま左側を返す

&& は左側がtrueなら右側を返す falseなら左側を返す

Reactを学ぼう!!

JSX記法について

Reactでは関数を使って画面の要素であるコンポーネントを表現する

実際にJSX記法を使って画面に要素を表示してみよう!!

更に、JSX記法を使って要素を追加してみよう!!

しかし、、、エラーが発生!!

JSX記法のルール: returnするHTMLの内容は1つのタグで囲む!!

しかし、余分なdivがレンダリングされてしまう

=> エラーを回避するためならReact.Fragmentタグを使う!!

コンポーネントの使い方を知ろう!!

exportが記述出来たのでindex.jsでAppとう関数を使おう!!

他のファイルで画面のレンダリングの部分を作成し、exportして、importする事でコンポーネントとして利用出来る

Reactでのイベントやstyleの扱い方を知ろう!!

1 buttonタグを記述する

styleを割り当てる

変数を使ってstyleを割り当てる

Propsを知ろう!!

「元気です」という文字は女性用なのでピンク色にしようとすると、、、

しかし、出てくるたびにstyleを分けるのはメンドクサイ!!

=> 文章をコンポーネント化して、色と文章をPropsとして受け取るようにすれば良い！

Stateを知ろう!!

ボタンをクリックすると数字をカウントアップする機能を実装する

再レンダリング , useEffect

何故、再読み込みしてないのにnumが+1されたり、顔文字が表示されるのか?

=> Reactのコンポーネントが再レンダリングされているから。

再レンダリングの仕組みを知らないと思わぬバグを引き起こす!?

しかし、on/offボタンが動かなくなってしまった!!

おまけ: default export と export

&& は左側がtrueなら右側を返す　falseなら左側を返す

他のファイルで画面のレンダリングの部分を作成し、
exportして、importする事でコンポーネントとして利用出来る

「元気です」という文字は女性用なので
ピンク色にしようとすると、、、