日付: 2026-04-25
時間: 約 60 分
⚠️鋭意学習中の内容につき、一部誤りのある可能性があります。もし誤っている内容があったらすぐに修正しますので、お気づきの方はそっとご指摘いただけたらとても喜びます🙇
はじめに
こんにちは。今回はReact Nativeを学習しました。基本のReact Nativeプロジェクトの作り方から単一画面での状態管理のやり方まで超基本を触りました。もう何年も前に expo go というアプリを実機に入れて動作確認をしていたことを思い出しました。今回もそのやり方で動作確認しつつ学習を進めました。
今日の学習教材は以下です。
今日やったこと
- 教材どおり tutorial/ 配下に Expo（--template blank-typescript）でプロジェクトを作り、ルートの App.tsx にカウンタUIを実装した
- useState で count を持ち、setCount((c) => c + 1) の関数形更新で増分した
- View / Text / Pressable と StyleSheet でレイアウトする
- Pressable の style={({ pressed }) => ...} で押下中だけ opacity を変える、なども試した
学んだこと
1. 宣言的UIで「正」はまず useState から
1画面の局所の数値は useState 1本で足りる。画面が増え、状態の受け渡しが煩雑になってから Context や外部ストアを考える、という段階的な置き方が知った。どの教材でもまずはuseStateを最初に解説していることが多いのはそういうことなんだなと改めて思った。
2. Stale state と setState((prev) => ...) という対処
同じ再レンダー前の count を閉包が掴み続けると、期待どおりに増えないことがある。直前の state に基づく更新は setCount((c) => c + 1) の関数形が定番、という理解を固めた。
3. React Native では Text コンポーネントで文字を描画する
ブラウザのイメージで View 直下に文字列を置きがちで、Text が必須であることを知った。
ハマったところ・メモ
- Pressable の「戻る」は自分で onPressOut 書かなくてよい。下記例の、style属性に渡るpressedは、ボタンタップ時はtrueだが、その後falseで再レンダーされる。
<Pressable
onPress={() => setCount((c) => c + 1)}
style={({ pressed }) => [
styles.button,
pressed && styles.buttonPressed,
]}
終わりに
今日は1画面のみのとてもシンプルな内容でしたが、ReactやFlutterと似たような記法でReact Nativeも実装できることを知りました。最近React Native関連のオンラインイベントに参加して様々な知見や工夫を知って興味を持っているので、ナビゲーションとかさらにステップアップして学んでみたいと思います。
