【React Hooks入門】useStateを使って買い物リストを作るチュートリアル

こんにちは、フロントエンドエンジニアの[てりー](https://twitter.com/teriteri_code)です。
僕の詳しいプロフィールは[こちら](https://terrblog.com/about/)


Reactを仕事で使いこなしたい人、Reactの知識に不安がある人に向けて、具体的な勉強方法のロードマップをまとめました。

https://terrblog.com/react-typescript-how-to-master/

<!-- wp:heading -->
<h2>はじめに</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>これはReact Hooksの入門者向けの記事で、今回はuseStateを扱っています。<br>前半部分でReact HooksやuseStateの解説を行い、後半部分で関数コンポーネントを使った買い物リストの実装をチュートリアル形式で行っています。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>チュートリアルではfreeCodeCampに掲載されていた<a href="https://www.freecodecamp.org/news/how-to-build-a-shopping-list-using-react-hooks-w-starter-code-and-video-walkthrough/">How to Build a Shopping List Using React Hooks (w/ Starter Code and Video Walkthrough)</a>を実例として進めていきながら、解説を織り交ぜています。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>React学習の参考になれば幸いです。<br></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>このチュートリアルで学べる事</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li>React Hooksの基礎にあたるuseStateの使い方の基礎。</li><li>関数コンポーネントでのstateの扱い方の基礎</li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>チュートリアルの完成像</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397606/2617c0a6-8d48-fad3-9c55-1ecd8b25f2bb.gif" alt="project.gif"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>解説編</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>React Hooksとは</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>React Hooksとは2019年2月からReactに追加された機能です。<br>これを使う事で、クラスを使わずに関数コンポーネントだけでもstateを扱うことが出来る様になりました。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>関数コンポーネントで書くことで、クラスコンポーネントより処理がまとめやすくスッキリしたフォルダ構成に出来るなど、様々な恩恵が受けられます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>その他も様々な違いがあります。詳しくはこちらの記事などを参考にしてください。<br></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://tyotto-good.com/blog/reaseons-to-use-function-component" target="_blank" rel="noreferrer noopener">Reactでクラスコンポーネントより関数コンポーネントを使うべき理由5選</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>useStateとは</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>useStateを使って書くことで、React Hooksでは状態の定義や更新ができます。<br>ボタンを押すとcountが+1されるカウンターを例に見ていきましょう。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">const Counter = () =&gt; {
  const [count, setCount] = useState(0);
  return &lt;div onClick={() =&gt; setCount(count+1)}&gt;{count}&lt;/div&gt;
};</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>const [count, setCount] = useState(0);</code>では<br>左辺のcountが変数の定義で、setCountがcountの状態を更新する関数です。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><br>右辺のuseState()では、()の中にcountの初期値を入れることができます。今回は0を初期値として入れています。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>onClick={() =&gt; setCount(count+1)}</code>では<br>クリック時に更新関数のsetCountが実行されて、countに+1しています。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>useStateはこの様に</p>
<!-- /wp:paragraph -->

<!-- wp:loos-hcb/code-block {"langType":"ts","langName":"TypeScript"} -->
<div class="hcb_wrap"><pre class="prism lang-ts" data-lang="TypeScript"><code>const [変数, 変数の状態を更新する関数] = useState(初期値);</code></pre></div>
<!-- /wp:loos-hcb/code-block -->

<!-- wp:paragraph -->
<p><br>で定義を行い、変数の状態を更新する関数を実行することで、状態を変えていきます。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>チュートリアル編</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>useStateの基本的な使い方を解説したところで、実際に買い物リストのチュートリアルに入りましょう。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>改めて一度完成像を見ておきましょう。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><br><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397606/2617c0a6-8d48-fad3-9c55-1ecd8b25f2bb.gif" alt="project.gif"></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>チュートリアルの手順</h3>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true} -->
<ol><li>スタートの状態を作る</li><li>新しいアイテムを追加する</li><li>アイテムの完了/未完了を切り替える</li><li>アイテムの個数を増減できる様にする</li><li>総量を表示する</li></ol>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>1. スタートの状態を作る</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>まずは手物で環境を作りましょう。<br>僕のgithubアカウントに初期状態を作っておきましたので、<code>git clone</code>して手元に持ってきてください。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://github.com/gunners6518/shopping-list">https://github.com/gunners6518/shopping-list</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>starterフォルダ配下のApp.jsに実際のコードを書いていきます。<br><code>git clone</code>ができたら、<code>yarn install</code>、<code>yarn start</code>を行いブラウザで正しく表示されているかを確認しましょう。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397606/f8becd0c-778e-12df-db7f-a3e8dbf38587.png" alt="スクリーンショット 2020-11-15 1.53.03.png"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>2. 新しいアイテムを追加する</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Add an itemに値を入力して、+ボタンを押すことで、買い物リストにアイテムが新規追加される様にします。<br>大まかな流れとしては以下の通りです。</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>買い物リストを表示する</li><li>入力値が変わるたびに、その値を保存する</li><li>+ボタンを押した際に、アイテムを買い物リストに新規追加する</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>では進めていきましょう。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>買い物リストを表示する</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>まずは買い物リストを表示できる様にしましょう。<br>といっても初期状態では、買い物リストは0個なので、表示自体は出来ないですが、、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>買い物リストの一覧表示と聞くと、多くの人がfor文を想像するかもしれませんが。<br>Reactではmapを使います。(Reactではというより、正確には関数コンポーネントでは)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>mapの使い方について不安な方はこちらの記事が参考になります。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><br><a href="https://qiita.com/ryosuketter/items/c11a58242fa1ad9c6e4c" target="_blank" rel="noreferrer noopener">React開発で見かける配列処理系のメソッド map , filter について（React基礎講座8）</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>returnのDOMの中にitem-listの部分を書き足してください。</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">&lt;div className='item-list'&gt;
    {items.map((item, index) =&gt; (
        &lt;div className='item-container'&gt;
            &lt;div className='item-name'&gt;
                {item.isSelected ? (
                    &lt;&gt;
                        &lt;FontAwesomeIcon icon={faCheckCircle} /&gt;
                        &lt;span className='completed'&gt;{item.itemName}&lt;/span&gt;
                    &lt;/&gt;
                ) : (
                    &lt;&gt;
                        &lt;FontAwesomeIcon icon={faCircle} /&gt;
                        &lt;span&gt;{item.itemName}&lt;/span&gt;
                    &lt;/&gt;
                )}
            &lt;/div&gt;
            &lt;div className='quantity'&gt;
                &lt;button&gt;
                    &lt;FontAwesomeIcon icon={faChevronLeft} /&gt;
                &lt;/button&gt;
                &lt;span&gt; {item.quantity} &lt;/span&gt;
                &lt;button&gt;
                    &lt;FontAwesomeIcon icon={faChevronRight} /&gt;
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    ))}
&lt;/div&gt;</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>まず最初に、13行目でuseStateを使って、買い物リスト一覧のオブジェクトであるitemsを定義している部分を確認しましょう。<br>初期値は([ ])とする事で、からのオブジェクトが定義されており、初期状態では買い物リストは空になります。</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">const [items, setItems] = useState([]);</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>次に、先ほど書いたreturn内のコードを解説していきます。</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">{items.map((item, index) =&gt; (~~~))}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>itemsをmapにて加工して、<code>{item.itemName}</code>や <code>{item.quantity}</code>など、items内のデータを含むDOMで返しています。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><br>これによってitemsの要素1つ1つを買い物リストとして表示できます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>また、mapの引数にあったindexは、あとで特定の買い物リストに対して個数の増減や、todo⇄doneの切り替えなどに使う予定です。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>入力値が変わるたびに、その値を保存する</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>入力値の状態が変わるたびに、その変更を受け取り保存したい為、useStateを使います。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><br>まず入力値のuseStateを定義しましょう。</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">const [inputValue, setInputValue] = useState('');</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>初期値は空ですね。<br>次に19行目(付近)のinput内にチェンジイベント仕込みましょう。</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">&lt;input value={inputValue} onChange={(event) =&gt; setInputValue(event.target.value)} className='add-item-input' placeholder='Add an item...' /&gt;</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>onChangeを使う事で、入力値が変わるたびにイベントが発火されます。<br>useStateの更新関数である<code>setInputValue</code>の引数に<code>event.target.value</code>を入れる事で、入力値をinputValueに反映されます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>useStateを使う事で、input内の値が変わるたびに、inputValueの値が更新される状態を作れました。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>+ボタンを押した際に、アイテムを買い物リストに新規追加する</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>次にuseStateを使い、itemsに新しいオブジェクトを追加していきます。<br>まずは+ボタンがクリックされた時に走る処理を書きましょう。</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">//クリック時にitems配列に新しいitemを作る処理
    const handleAddButtonClick = () =&gt; {
        //作られるitemの定義
        const newItem = {
            itemName: inputValue,
            quantity: 1,
            isSelected: false,
        };

        //items配列にpushされる
        const newItems = [...items, newItem];

        //useStateのitemsに反映
        setItems(newItems);

        //入力値を空に
        setInputValue("");

    };</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>まずは<code>const newItem{}</code>にて新しく作られる買い物リストのオブジェクトの初期値を定義しています。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><br>itemNameはアイテムの名前、quantityはアイテムの個数、isSelectedはtodoかdoneかを値として持っています。<br><code>itemName: inputValue,</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>では、先ほど常に入力値が反映される様になった<code>inputValue</code>を新規買い物リストの名前にの部分に入れています。</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">const newItems = [...items, newItem];</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>ではスプレット構文を使って、itemsのオブジェクトの最後にnewItemを入れたnewItemsという配列を作っています。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>買い物リストを新規追加した後は更新関数setItem()を使って、反映させています。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>クリック時に処理はできたので、+ボタンをクリックした際に処理が走る様にします。</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">&lt;FontAwesomeIcon icon={faPlus} onClick={() =&gt; handleAddButtonClick()} /&gt;</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>これにて、入力値を入れて、+ボタンを押せば、買い物リストが新規追加されます。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>3. アイテムの完了/未完了を切り替える</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>さきほどのmapの配列時に書いてあったindexを引数に用いて、特定のタスクの状態を切り替えます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><br>この様な処理を書いてください。</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">//done切り替え
    const toggleComplete = (index) =&gt; {
        //itemsを展開した配列、newItemsを作る
        const newItems = [...items];
        //引数にindexから、該当するitemのisSelectedを切り替える
        newItems[index].isSelected = !newItems[index].isSelected;
        setItems(newItems);
    };</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><code>const newItems = [...items];</code>を行う事で、itemsオブジェクトを展開してnewItemsという配列にしています。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><br>配列にしたのでindexを用いて特定のアイテムの<code>isSelected</code>まで到達しています。</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">newItems[index].isSelected = !newItems[index].isSelected;</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>処理としてはisSelectedのboolean型を切り替えていますね。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>toggleCompleteの処理ができたので、今まで同様にクリックした際に発火させます。</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">&lt;div className="item-name" onClick={() =&gt; toggleComplete(index)}&gt;</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>これにてtodo⇄doneの切り替えの機能は完成です。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>4. アイテムの個数を増減できる様にする</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>実はやり方はほとんど、3の完了未完了の切り替えと同じです。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><br>クリック時に起こる処理をuseStateの更新を使って書き、ボタンをクリックした際にそれが発火する様にします。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>一気にコードを加えていきましょう。<br>まずは増える際の処理。<br>itemsオブジェクトを展開して、indexから特定のアイテムの数量を+1しています。</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">const handleQuantityIncrease = (index) =&gt; {
   //itemsを展開した配列、newItemsを作る
   const newItems = [...items];
   //quantityに+1する
   newItems[index].quantity++;
   setItems(newItems);    
   };</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>次に減る際の処理。ほとんど一緒ですね。</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">const handleQuantityDecrease = (index) =&gt; {
   //itemsを展開した配列、newItemsを作る
   const newItems = [...items];
   //quantityに-1する
   newItems[index].quantity--;
   setItems(newItems);
   };</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>増えるイベントと、減るイベントをボタンから発火させます。</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">&lt;button&gt;
    &lt;FontAwesomeIcon icon={faChevronRight} onClick={() =&gt; handleQuantityIncrease(index)} /&gt;
&lt;/button&gt;</code></pre>
<!-- /wp:code -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">&lt;button&gt;
    &lt;FontAwesomeIcon icon={faChevronLeft} onClick={() =&gt; handleQuantityIDecrease(index)} /&gt;
&lt;/button&gt;</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>これにて増減の機能は完成です。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>5. 総量を表示する</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>総量の表示もuseStateを使って、アイテムの数が増減する、アイテムが新規で作られるといった時に、数が更新される様にします。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>まずはuseStateを使って、定義を作ります。</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">const [totalItemCount, setTotalItemCount] = useState(0);</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>トータル表示のところでは、useStateにて定義した<code>totalItemCount</code>を入れていきます。</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">&lt;div className='total'&gt;Total: {totalItemCount}&lt;/div&gt;</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>次に、最新の総量を計算する処理を書きます。</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">const calculateTotal = () =&gt; {
    const totalItemCount = items.reduce((total, item) =&gt; {
        return total + item.quantity;
    }, 0);

    setTotalItemCount(totalItemCount);
};</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><code>items.reduce((total, item) =&gt; {return total + item.quantity;}, 0);</code>ではreduceを使う事で、itemsオブジェクトからitem.quantityを1つずつ抜き取り、totalにその値を加えるということを繰り返すことで、<code>item.quantity</code>の合計値を出しています。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>最後に<code>calculateTotal</code>を個数が変わる処理の最後に入れて、再計算を毎回行える様にしてください。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><br>こんな感じになります。</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">const handleAddButtonClick = () =&gt; {
    // ...other code
        calculateTotal();
    };

    const handleQuantityIncrease = (index) =&gt; {
    // ...other code
        calculateTotal();
    };

    const handleQuantityDecrease = (index) =&gt; {
    // ...other code
        calculateTotal();
    };</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3>ついに完成！！</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>お疲れ様です。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><br>皆さんの手元でも、この様にちゃんと動作していますか？？</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397606/2617c0a6-8d48-fad3-9c55-1ecd8b25f2bb.gif" alt="project.gif"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>上手くいかなくてどうしても原因がわからない時は、github内にfinalというフォルダがあり、完成形のコードが入っているので参考にしてみてください。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>まとめ</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>このチュートリアルではuseStateで、items、inputValue、totalItemCounと3つ状態管理をおこなっていきました。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><br>実際に手を動かしuseStateを扱うことで、関数コンポーネントで状態を扱っていくことのイメージは掴めたと思います。</p>
<!-- /wp:paragraph -->

## 独学でフロントエンドエンジニアを目指している人へ

フロントエンドの仕事を得るまでにどんな勉強をしたら良いのかをまとめました！！

興味ある方は是非ご覧ください。

https://terrblog.com/how-to-get-front-end-job/