😊

【初心者向け】Reactについての基礎事項

2023/12/29に公開

React

駆け出しエンジニア

駆け出し

tech

対象読者

Reactに興味がある初心者の方。
JavaScriptについて一通り学習したことがある方。
Props,State,再レンダリングについてざっくりイメージを掴みたい方。

Reactの基本的な考え方

まずは基礎的な２つの考え方を紹介します。

コンポーネント
レンダリング

・コンポーネントは、一言でいうと箱を作るということです。
画面上に見れるコンテンツを小さな箱ごとに作るイメージです。

・再レンダリングは、画面を構成する情報の再読み込みのことです。
Webアプリケーションでは、
ユーザーが画面に対してアクションする（ボタンを押す、フォームに入力する等）
↓①
そのアクションがあった場合ごとに、ブラウザ側で何らかの処理が行われる
↓②
その処理の結果がユーザーの画面上に現れる

ここで、ユーザーの画面上に処理の結果が表示されるのには、処理があった後の②の過程で、
画面を構成する情報の再読み込みが起こる必要があります。
この再読み込みのことを再レンダリングといいます。

実践・アプリケーションの作り方

大きな箱（親コンポーネント）を作る

大きな箱（ここではSample）は以下のように作成できます。

Const Sample = () => {
 Return (
             <>//「からタグ」と呼びます。<div>でもOK。Returnする内容がひとまとまりならOK
<p> Hello World</p>
<p> Happy World </p>
<>
)
}
 
Root.render (
<StrictMode>
             <Sample />
</StrictMode>
)

箱の中に箱を作る

大きな箱（親コンポーネント）の中に小さな箱（子コンポーネント）を配置していきます。
ここでポイントなのが、大きい箱と小さい箱を連携することです。
何も記述しないと、大きい箱の中に小さい箱を入れることができないので、
大きい箱→「小さい箱を使う」と宣言する
小さい箱→「大きい箱に使われる」と宣言する　必要があります。

「小さい箱を使う」宣言がimportの記述で、「大きい箱に使われる」宣言がexportです。
以下に具体例を示します。

Import { Sample } from “./Sample”;
//途中の記載は省いています。
Root.render(
<StrictMode>
             <Sample />
             </Sample>
);
 
 
Export const Sample = () => {
 Return (
             <>
               <p>Hello World  </p>
             </>
)
};

大きな箱（親コンポーネント）から小さな箱（子コンポーネント）へ情報を渡す

例えば、中身が全く同じで色だけが違う小さな箱があったとき、そのすべての小さな箱を作成するのは、非効率であるし、管理がとても難しいですね。

そんな時に、小さな箱のひな型を作り、大きな箱から小さな箱を呼び出すときに、色の情報だけ渡せば、小さな箱の中身についての記載は一回で済みますね。

ではこの「大きな箱から小さな箱を呼び出すときに、色の情報だけ渡す」にはどうしたらいいかの手順を以下で書いていきます。

・一言でいうと、propsを使います。
Propsは大きい箱（親）から小さい箱（子）に渡す引数のようなものです。

まずは親側でpropsを子側に渡します。
書き方は以下のようです。
＜ColorChagne color=”green”/＞
この文はColorChangeという子コンポーネントに対してcolor=”green”という情報（props）を渡しています。

今度は子側が親からもらったpropsの情報を使えるようにしていきます。
Export const ColorChange = (props) => {
　　Const {color} = props; //オブジェクトの分割代入
　　Const style = { color : color};
Return <p style={style}>こんにちは</p>
}
・ポイントはコンポーネントで引数としてpropsを受け取ること。
・もし＜ColorChange＞＜/ColorChange＞のタグ間にある情報を受け取りたい場合は、
子側ではprops.childrenで受け取ることができます。

ユーザーのアクションに対応してイベントを起こす

ここまででは、コンテンツが画面上にどのように表示されるのかについての内容でしたが、このままでは、ユーザーがボタンを押したら、画面の情報が切り替わるといった動きを実装できません。なので、ここでは、アプリケーションで動きを作るための方法を記載します。
・基本的な考え方はJavaScriptと同じです。例を以下に示します。
例えばindex.jsにおいて、

Export const Sample = () =>{
Const onClickButton = () => console.log(“hoge”);
Return (
<button onClick = {onClickButton}> 押してください </button>
)
}
では、ボタンを押したら、「はじめまして」という表示が出てきて、もう一度押すと表示が消えて、再度押すと表示されて…というような機能を実装するにはどうしたらいいでしょうか？
ポイントは、表示をされているか（されていないか）の状態がわかる変数（つまりフラグ）を用意しておくことです。Reactではこういったものをstateと呼びます。

以下実践した内容です。

Import { useState } from “react”;
Export const Sample = () =>{
Const [isShow, setIsShow]= useState(false);
Const onClickButton = () => setIsShow(!isShow);
Return (
<button onClick = {onClickButton}> 押してください </button>
｛isShow && <p>はじめまして</p>｝
)
}

Const [isShow, setIsShow]= useState(false);について
・useStateは配列を返却するため、配列の分割代入で受け取っています。
・hoge,setHogeのように命名します。hogeが変数名で、setHogeがその変数に値を入れる変数になります。
・上記のコードではclickedはfalseで初期化されています。

Const onClickButton = () => setIsShow(!isShow);について
・isShowは「はじめました」が表示状態かどうかの情報をfalse/trueで保持しており、
setIsShow関数によってisShow = !isShow のように再代入されています。

ここまで見てきて、ユーザーのアクションによって、小さい箱の情報が更新される流れについてはざっくり理解できました。
では、小さい箱の情報の更新が、ブラウザ画面上に反映されるのはどんな流れなのでしょうか・・・？
そうです！再レンダリングです！

では再レンダリングを起こすにはどうしたらいいでしょうか。
実際のところ、useStateでset~~~の関数を使って変数の更新を行うと、
自動的にコンポーネント全体（親コンポーネント＋自分自身の箱＋自分以外の小さな箱）の情報の再読み込みが行われます。

――＋αの情報――
他コンポーネントの再レンダリングが起きるパターン２つ

Propsを引き受ける子コンポーネントはpropsが変更されると、自動的に子コンポーネントは再レンダリングされる。
②親コンポーネントが再レンダリングされる→子のコンポーネントも自動的に再レンダリングされる

・useEffectについて
Import {useEffect} from “react”;
UseEffect(()=>{console.log(“numが変化したときに、この文が表示されます“)},[num])
第一引数には関数を、第二引数に配列を受け取ります。
第二引数で指定された変数が変更したときのみuseEffectの関数が再レンダリング（再評価）します。

見た目を整える

Styleを当てていく方法です。
以下のように書いていきます。

<p style = {{color: “blue”}}>Hello World</p>

もしくは

Const contentStyle = {
Color:”blue”
};
<p style = {contentStyle}>Hello World</p>

※なお、CSSではbackground-colorのようにハイフンを使いますが、ReactではbackgroundColorのようにキャメルケースで書きます。

その他覚えておくといいこと(流し読みでOK)

・Package.json: どんなライブラリが利用されているかは”depencies”に記載されています。
・Import { StrictMode} from “react”;　は、root.render(<StrictMode><p>Hello World</p> </StrictMode>)のように使う。これを入れておくと、Reactにいろいろチェックしてもらえて便利。
・コンポーネントの名前は大文字始まり（パスカルケース）で、これを守らないとエラーが起きます。
・拡張子は .jsx　というものがある。コンポーネントを記述するファイルはjsでなく、こちらにすることがある。

・Index.jsに書いてある以下のコードはテンプレの内容なので初心者はあまり気にしなくてOK
Import ( createRoot ) from “react-dom/client”
Const rootElement = document.getElementById(“root”);
Const root = createRoot(rootElement);
Root.render();
・Stateについては、子コンポーネントの一番上に記述する必要がある。