Zenn
👻

新しくなったReactのドキュメントを読んでみた

2024/02/09に公開
React
初心者向け
tech

はじめに

こんにちは。プログラミング勉強中のチョコ柿です。
Reactの公式ドキュメントが新しくなったということでスタートガイドのクイックスタートを読んでみて、記憶がてらにまとめてみようと思います。

全体的に学びながら読めるようになったと聞いているので楽しみです。

独学中がゆえに理解がズレてたり不足しているところがあるかもしれませんが、その際は優しく教えてくれると泣いて喜びます。

ではでは

クイックスタート

コンポーネントの作成とネスト

Reactはコンポーネントで構成されています。
コンポーネントとは独自のロジック（処理）と外見を持つUIのこと。普段サービスを使っている時にあるボタンやテキストボックスなどなど

Reactにおけるコンポーネントは、マークアップを返すJavascript関数のこと。

export function MyButton(){
return (
    <button>お試しボタン</button>
    )
}

こんな感じでボタンのコンポーネントを宣言できます。returnでマークアップを返してますね。

そして宣言したMyButtonを以下のような感じでネスト（入れ子に）できます↓

export default function MyApp(){
    return(
    <div>
        <h1>Zenn用のコードだよ</h1>
        <MyButton />
    </div>
    )
}

ここで注意するべきは、Reactのコンポーネントは大文字でスタートしなければいけません。例の場合は<MyButton />の部分です。
こうしてHTMLのタグなのかReactのタグなのかを見極めています。

JSXでマークアップ

JSXとはReactで使用されるマークアップ言語です。使用は任意らしい（強制使用じゃないの初めて知りました）ですが、ReactでJSX使っていないのを見たことないので、使用する方が無難でしょう。

先ほどの例も一応JSXで記載しているのですが、どの部分が特徴的なのか少しわかりにくいですよね。

HTMLよりもさまざまなルールがありますが、わかりやすいのは<div></div>で全体を囲っている点です。これはJSXのルールで、一つのタグで全体を囲む必要があります。
ダメな例↓

export default function MyApp(){
    return(
        <h1>Zenn用のコードだよ</h1>
        <MyButton />
    )
}

上記のコードは<h1>タグと<MyButton />タグを返そうとしているので、複数になっているのでエラーになります。
<div>や<>などで囲んであげましょう。

JSXのルールについて詳細を知りたい場合は、こちらをご参照ください。

JSXに変換するのが面倒くさいわ！という僕の同志の方々には、オンラインコンバーターをお勧めします。公式Docにも記載されているので使用しても問題ないはずです。

スタイルの追加

Reactではcssでスタイルの追加ができます。こんな感じ↓

<h1 className="title">Zenn用のコードだよ</h1>

これを見てん？と思った人も少なくないはずです。classNameってなんやねんと。これはJacascriptではclassが予約語に含まれているのでReactではclassNameになってしまうわけです。
ちなみにこういう変数名はReactではほぼキャメルケースで記載されます。

データの表示

jsxを使用することで、Javascriptにマークアップを入れることができると、今までの説明でわかったかと思います。Reactではjsxの中からJavascriptに戻ることもできます。

その時に使用するのが {} ←これです。

先に例を記載しますね。

const example={
    name:"test",
    imageUrl:'https://test.jpg',
};

export default function MyApp(){
    return(
    <div>
        <h1 className={example.name}>Zenn用のコードだよ</h1>
        <img src={example.imageUrl} />
        <MyButton />

    </div>
    )
}

exampleというオブジェクトを定義して、その中にnameやimageUrlなどを記載しています。
定義した変数を{}を使用することによって、マークアップの中で使用することはできるということです。（メンテナンスとかにめちゃくちゃ便利そうですね）

条件付きレンダー

条件分岐時の書き方についてです。
Reactでは特に制限はなく、if文を使用してもいいですし、演算子を使用して書いても構いません。
if文とか演算子についてはかなり長くなるので、わからない方はご自身でお調べくださいmm

if文の例↓

const example={
    name:"test",
    imageUrl:'https://test.jpg',
};

const data = true;
const dataCheck = () =>{
if(data){
    return <div>データはあるよ</div>
}else{
    return <div>データはないよ</div>
}

}

export default function MyApp(){
    return(
    <div>
        <h1 className={example.name}>Zenn用のコードだよ</h1>
        <img src={example.imageUrl} />
        {dataCheck}
        <MyButton />

    </div>
    )
}

演算子の例↓
※演算子はjsxの中に直接かきます

const example={
    name:"test",
    imageUrl:'https://test.jpg',
};

const data = true;

export default function MyApp(){
    return(
    <div>
        <h1 className={example.name}>Zenn用のコードだよ</h1>
        <img src={example.imageUrl} />
        {data ? <div>データはあるよ</div> : <div>データはないよ</div>}
        <MyButton />

    </div>
    )
}

リストのレンダー

コンポーネントのリストをレンダーする場合には、map関数やfor文などが使えます。
同じUIで中身を変えたい時とかに、私も使ったりしました。ちょっと複雑ですが結構便利です。
例

const lists = [
    {title:'example1', id: 1 },
    {title:'example2', id: 2 },
    {title:'example3', id: 3 },
]


export default function MyApp(){
    return(
    <div>
        <ul>
            {lists.map((list) =>(
                <li key={list.id}>
                    {list.title}
                </li>
            ))}
        </ul>

    </div>
    )
}

listsという配列にオブジェクトを複数定義して、マークアップの方にmap関数を埋め込んで表示させています。
また、liタグにkey属性というものが登場しています。これはReactの仮想DOMというところに大きく関わってきます。

この仮想DOM側で情報を認識するためにkey属性が必要ということです。
そしてkey属性にはDBなどから取得するidを使うのが一般的らしいです。
ただDBからidを取得しない場合でもindexなどを引数で使えばどうにかはなります。

イベントに応答する

もちろんですが、イベントも使えます。Javascriptと大きく変わらないので、公式のコードを丸パクリで記載しておきますw

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

フックの使用

フック(Hook)という便利なものがReactには存在します。これは状態管理などにものすごい役に立つ機能です。
フックの大きな特徴として、use~という形式になっています。コードを見ている中でuse~という関数があったら「フックなんだな〜」と思ってください。
この後の章で具体例を出すので、詳細はそちらを参照ください。

画面の更新

ここでは前章のフックの例としてuseStateを使用します。
もしあなたが、カウンターアプリ的なのを作っていたとしたら、ボタンを押したときにクリックされた数を覚えておくという機能が必要になってきますよね。

そんな時に役立つのがuseStateです。
先にコードを記載します。

import { useState } from 'react';
const [count, setCount] = useState(0);
const handleClick = () =>{
    setCount(count + 1)
}


export default function MyApp(){
    return(
    <div>
        <h1 className={example.name}>Zenn用のコードだよ</h1>
        <button onClick = {handleClick}>カウント用ボタン</button>
    </div>
    )
}

まずuseStateというフックをReactからインポートします

import { useState } from 'react';

次に、早速useStateを記載します。
useStateの構造は、const [任意の変数名, set変数名] = useState(任意の変数名の初期値)　という構造です。
この場合、[任意の変数名 = 現在のstate(状態)]で[set変数名 = 現在のstateを更新するための関数]になっています。
※set~と書くのは決まりではないですがこの書き方が一般的です

そして実際の関数の部分です

const handleClick = () =>{
    setCount(count + 1)
}

これはsetCountにcount + 1というロジックが記載されているので、このhandleClick関数を実行すると、countに1追加されます。
最初の宣言時に初期値は"0"にしているので、1回目のカウントでは0+1となり、"1"が表示されるわけです。
逆に2回目のカウントでは、"1"をcountで記憶してくれているので、1+1となり"2"が表示されるという流れになります。

このようにある変数の状態を初期値で設定できて、それを関数で操作することで状態を変更することができるのです。

これはフックの中の1つの機能で、他にもさまざまな種類のフックが存在します。
全部見たい人はこちらからご参照ください！

コンポーネント間でデータの共有

クイックスタートとは名ばかりのなっがいDocもこれで最後の章です。

タイトルの通り、コンポーネント間でデータを共有したい時に使える技術でpropsなんて呼ばれたりします。
先ほどの例だと、ボタンをクリックした回数を他のコンポーネントにも表示させたい時などに役立つと思います。

公式Docの画像がわかりやすかったのでそのまま持ってきました。
どちらかのMyButtonをクリックすると、MyAppにcountが連携されて、別のcountも更新されるという流れです。
これを実現するために
MyAppにcountのstateとクリックイベントを移動→MyAppからコンポーネント(MyButton)にstateとクリックイベントを渡す という流れにすると、MyButtonがクリックされたらMyAppのstateが変更されます。

  1. MyAppにstateとクリックイベントを移動
function MyButton(){
    return (
        <button>カウント用ボタン</button>
        )
}

export default function MyApp(){
    const [count, setCount] = useState(0);
    const handleClick = () =>{
    setCount(count + 1)
    }
    return(
    <div>
        <MyButton />
        <MyButton />
    </div>
    )
}
  1. MyAppから各MYButtonにstateとクリックイベントを渡す
function MyButton(){
    return (
        <button>カウント用ボタン</button>
        )
}

export default function MyApp(){
    const [count, setCount] = useState(0);
    const handleClick = () =>{
    setCount(count + 1)
    }
    return(
    <div>
        <MyButton onClick = {handleClick} count = {count} />
        <MyButton onClick = {handleClick} count = {count}/>
    </div>
    )
}

onClick = {handleClick} count = {count}ここで、子要素(MyButton)にクリックイベントとcountを投げつけてます。この投げている情報たちがpropsです！！

あとはMyButtonがキャッチする必要があるので、キャッチさせてあげましょう。
3. MyButton側でpropsを受け取る。

function MyButton({count, handleClick}){
return (
    <button onClick = {handleClick}>現在{count}回</button>
    )
}

という感じです。
この手法は「stateのリフトアップ」と呼ばれているそうです。

まとめ

どうやらこのクイックスタートガイドでReactのコンセプトのうち80%が網羅されているそうです by公式
まだまだ奥深いですが、基本的なところを曖昧になっていたり忘れていたりするので時々振り返ってみようと思います。
ここまで読んでいただきありがとうございます。皆様の何かの一助になれば幸いです！
お疲れ様でしたmm

参考文献

React公式スタートガイド：https://ja.react.dev/learn

Discussion