「React開発で配列を更新したい」
今回は上記のお悩みにお答えします。
React開発では配列を扱う場面があります。 そして、配列を動的に変化させて更新したいときがあると思います。
結論から言うと、「useState」を使うことで配列を更新できます。
この記事では、useStateを使ってどうやって配列を更新するのかを解説します。 解説には、Reactのサンプルアプリを作りながら進めていきます。
どんなサンプルアプリを作るかと言うと以下です。
「ボタンをクリックすると文字列が増えていくアプリ」
では、進めていきます。
useStateとは
useStateはReact hookの一つで、関数コンポーネントでstateを管理するための機能です。
これだけだと何のことかわからないですよね。 簡単に言うと以下です。
「ある状態から別の状態に変化させたいときにuseStateを使う」
「それでもわからない」って方は、以下の記事が参考になるかと思います。 useStateの使用例を見ることができます。
state変数を定義する
ここでは、Reactの基本的な開発環境を想定して解説を進めていきます。
まずはuseStateを使ってstate変数を定義します。 App.jsに以下のように記述します。
jsx
/* App.js */
import React, { useState } from "react";
const App = () => {
const [list, setList] = useState(["リスト "]);
return (
<>
<div>{list}</div>
</>
);
};
export default App;
1行目ではuseStateをimportしています。 そして、以下のようにコンポーネント内でstate変数を定義しています。
jsx
const [list, setList] = useState(["リスト "]);
上記ではlistというstate変数を定義しており、初期値は「リスト 」という文字列が入った配列です。
この配列をなんらかのきっかけで更新していきます。 ここでは、「ボタンをクリックしたときに配列の中の文字列が増えていく」という仕組みを作っていきます。
まずは配列を更新する関数を定義しておきます。
配列を更新する関数を定義する
では、以下のように記述を追加します。
jsx
/* App.js */
import React, { useState } from "react";
const App = () => {
const [list, setList] = useState(["リスト "]);
/* ↓関数を追加 */
const listUp = () => {
const newList = [...list, "リスト "];
setList(newList);
};
return (
<>
<div>{list}</div>
</>
);
};
export default App;
上記コードの真ん中辺りで、配列の要素を増やす関数「listUp」を定義しています。
jsx
const listUp = () => {
const newList = [...list, "リスト "];
setList(newList);
};
このコードの中では、「newList」という新しい配列を定義しています。 newListの中に「...list」という記述がありますが、これを「スプレッド構文」と言います。
「[...list, "リスト "]」となっているので、現在の「list」配列に「リスト 」という文字列を加えるという意味です。 「リスト 」という文字列が加わった新しい配列を「newList」として定義しています。
この新しい配列newListを「setList」に入れることで、配列が更新されます。
配列の更新が難しいのは、このように更新したい配列をnewListみたいな変数として定義しないといけないところじゃないかなと思います。
ちょっと複雑になってしまってすみません。 いったん整理すると、関数listUpが発動すると以下のことが起こります。
「配列の中に"リスト "という文字が追加される」
関数listUpが発動するごとに、"リスト "という文字列が増えていきます。 そういう関数をここで定義したわけです。
あとは、ボタンをクリックしたときに関数listUpが発動するように設定していきます。
ボタンクリックで関数を発動させる
では、以下のように記述を追加します。
jsx
/* App.js */
import React, { useState } from "react";
const App = () => {
const [list, setList] = useState(["リスト "]);
const listUp = () => {
const newList = [...list, "リスト "];
setList(newList);
};
return (
<>
<div>{list}</div>
{/* ↓buttonを追加 */}
<button onClick={listUp}>追加</button>
</>
);
};
export default App;
ここでは、以下のようなボタンを追加しました。
jsx
<button onClick={listUp}>追加</button>
このボタンをクリックすることで、関数listUpを発動させることができます。
試しに、ボタンをクリックしてみてください。 「リスト 」という文字が増えたと思います。
ボタンをクリックした回数分だけ、「リスト 」という文字がどんどん増えていきます。 ブラウザを更新すれば、元に戻ります。
まとめ
最後に記事の内容をまとめます。
useStateは関数コンポーネントでstateを管理するための機能
まずはuseStateを使ってstate変数を定義した
配列を更新する関数を定義した
その関数をボタンクリックで発動する仕組みを作った
というわけで記事は終わりです。