useState を簡単に説明 - 非開発者向けガイド (5)

ねぇ？

私はマーケティングのバックグラウンドを持っていたので、最初は React フックがどれほど威圧的に感じられたかを覚えています。これらの専門用語や開発者の専門用語はすべて頭がくらくらするほどでした。多くのことを学び (そして多くの混乱) を経て、仕事を始めるときにあったらよかったと思うガイドを作成したいと思いました。

これまでに次のことを行ったことがある場合:

• React ドキュメントで迷った?‍?
• なぜ通常の変数を使用できないのかと疑問に思いました
• useState を他の人に説明するのに苦労しました
• 実際に意味のある例を求めています

それなら、このガイドがあなたのためです! useState を一口サイズのわかりやすい部分に分割してみましょう。

React フックとは何ですか? ?

フックはスイスアーミーナイフのようなものだと考えてください - 各ツールには特定の目的があります:

• useState: 魔法のメモ帳 (これについては詳しく説明します!)
• useEffect: 変更を監視するあなたのパーソナルアシスタント
• useContext: 全員が情報を共有するグループ チャット
• useReducer: 複雑なものに対する useState の兄のようなもの
• useMemo: 解決策を覚えている賢い友達
• useCallback: useMemo に似ていますが、関数を記憶するためのものです
• useRef: 付箋を何かに貼って後で見つけられるようにするのと同じです

useStateとは何ですか? ?

何かを書いたり、消したり、新しいものを書き込んだりできる魔法のボードを覚えていますか? useState はあなたの Web サイトの useState とまったく同じです。これは、ウェブサイトが内容を記憶し、必要に応じて更新するのに役立ちます。

const [something, setSomething] = useState(startingValue);

次のように考えてください:

• 何か: 現在ボードに書かれていること
• setSomething: 書かれた内容を変更するための特別な消しゴム/マーカー
• startingValue: 最初にボードに書く内容

useState はどのように機能するのでしょうか? ?

これを料理レシピのように説明しましょう:

1. 調理の準備（初期化）

• 調理スペース (コンポーネント) をセットアップします
• 特別なレシピカード (React の状態空間) を作成します
• 各材料はカード上に独自の場所を割り当てられます

2. レシピの変更（アップデート）

材料の分量を変更したい場合

• React は変更を付箋に書き込みます
• そのメモを「To-Do」の山に入れます
• 近々レシピを更新する予定です
• 複数の変更をグループ化します (複数の材料を一度に変更するなど)

3. 変更を加える (レンダリング)

• React はすべての付箋をレビューします
• 新しい金額を計算します
• レシピカードを更新します
• 新しいレシピをみんなに見せます

4. 仕上げ（コミット）

• React が変更を加えます
• 古い材料をクリーンアップします
• 新しい材料を設定します

現実世界の例 ?

1. シンプルなウェルカムメッセージ

const [something, setSomething] = useState(startingValue);

2. いいねボタンカウンター

function WelcomeMessage() {
  // Think of this like a greeting card where you can change the name
  const [name, setName] = useState("Guest")

  return (
    <div>
      <input value="{name}" onchange="{(e)"> setName(e.target.value)}
        placeholder="Type your name"
      />
      <p>Welcome to my website, {name}! ?</p>
    </div>
  )
}

3. ダークモードの切り替え

function LikeButton() {
  // Just like counting likes on Instagram
  const [likes, setLikes] = useState(0)

  return (
    <div>
      <p>This post has {likes} likes</p>
      <button onclick="{()"> setLikes(likes + 1)}>♥️ Like</button>
    </div>
  )
}

2. 以前の値に基づいて更新する

function DarkModeSwitch() {
  // Like a light switch for your website
  const [isDark, setIsDark] = useState(false)

  return (
    <div>



<h2>
  
  
  Common Mistakes (We All Make Them!) ?
</h2>

<h3>
  
  
  1. Trying to Change Things Directly
</h3>



<pre class="brush:php;toolbar:false">// ? Don't do this!
const [user, setUser] = useState({name: 'John'})
user.name = 'Jane'  // This is like trying to edit a photocopy

// ✅ Do this instead!
setUser({...user, name: 'Jane'})  // This is like making a new copy

useState をいつ使用する必要がありますか? ✅

次のような場合に使用してください:

• フォーム入力を追跡する
• オン/オフを切り替えます
• ものを数える
• ストアの一時的な情報
• ユーザーインタラクションを処理する

useState を使用すべきでない場合は? ⛔

次の場合は避けてください。

• 多くのコンポーネント間でデータを共有する必要があります (コンテキストを使用)
• 複雑な状態ロジックがあります (useReducer を使用します)
• 大量のデータを扱っています
• 複数の関連するものを一度に更新する必要があります

練習してみよう！ ?

理解度をテストするための小さなチャレンジです:

1. 単純なカウンターコンポーネントを作成する
2. 増加ボタンと減少ボタンを追加します
3. リセットボタンを追加します
4. ボーナス: 「2 で乗算」ボタンを追加します

解決策をコメントに記入してください。あなたが作ったものをぜひ見てみたいです。

まとめ?

useState は最初は怖いように思えるかもしれませんが、実際には、デジタル付箋システムのように、Web サイトが物事を記憶できるようにするための単なる方法です。覚えておいてください:

• 簡単に始めましょう
• 基本的な例で練習してください
• 完璧であることを心配する必要はありません
• 構築と学習を続けてください

私自身、技術的なバックグラウンドはありませんが、これらの概念を理解するのに時間がかかることは承知しています。それはまったく普通のことです。

つながろう！ ?

あなたの React の旅についてぜひ聞きたいです:

• あなたの「なるほど！」は何でしたか？ useState の瞬間?
• それを理解するのに役立つ例えは何ですか?
• 他にどのような React コンセプトを詳しく説明してほしいですか?

以下のコメント欄でご意見を共有してください!

他の React の概念を通常の人間の言語に分解したガイドを今後もお待ちしています!

コーディングを楽しんでください! ?

---

カバー画像のクレジット: ここに画像のクレジットがあります