blog-hero-img

Reactの「状態」という言葉の意味(state)

pen-icon2024.3.12

この記事は約1分で読めます

align-left-icon

目次

Profile Pic

この記事の筆者:三好アキ


🟢 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
🟢『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ!Next.js/React開発入門(翔泳社/*韓国でも出版)』著者。


▼ Amazon著者ページはこちら
amazon.co.jp/stores/author/B099Z51QF2




最初にお知らせです。

【最後のReact教材】をリリースしました。

image

▼ 購入はこちらから

👉 monotein.base.shop/p/00005(Baseショップ)

👉 monotein.booth.pm/items/5611184(Boothショップ)

状態とは?

Reactでは「状態」という言葉がひんぱんに使われます。

「状態を管理する」や「状態を更新する」といったように。

日本語ではいまいち意味のつかみにくい「状態」という言葉ですが、この「状態」とは「データの状態」のことを指しています。

「アプリ内のデータの状態」です。

では「アプリ内のデータ」とは具体的に何を指すのでしょうか?

アプリが私たちユーザーに表示している「世界各地の天気」や「為替」、「料理レシピ」「口コミ」などは当然「アプリ内のデータ」です。

他にも「ユーザーがボタンをクリックしたか否か」「合計何回クリックしたか」「ユーザーがフォームに入力した文字」なども「アプリ内のデータ」に含まれます。

そして重要なポイントは、これらは時間の経過やユーザーのアクションによって常に変化していくという点です

たとえばユーザーのクリック数が今の時点では5回でも、10秒後には7回になっていることもあるでしょう。

時間の経過やユーザーの操作などによって変化するアプリ内のデータの「状態」を追跡し、管理すること。

そのためにReactではstateが使われています。


image

▼【無料フロントエンド・ガイド】は下記ページで受け取れます。

https://monotein.com/present-for-readers

Profile Pic

🟩 フロントエンド開発者入門ガイド【無料配布中】


最初にこれが知りたかった!
フロントエンド初心者が必ず押さえておきたい ― 『挫折しない勉強法』とその具体的ステップ、無料配布中。
(*名前不要・メールアドレスだけで受け取り可能です)