React 初心者が本気で「すげぇ…」と感動した瞬間まとめ
はじめに
React を学習し始める前の React の印象は
- DOM 操作が複雑
- UI の状態管理が難しそう
- JavaScript の知識だけでは足りなさそう
という“とっつきにくさ”に感じていました。
初学者の時に公式チュートリアルで挫折した経験があったので、学習するには抵抗がありました。
ですが再度初心者向けの Udemy 講座で学習しなおしたところ、素の JS よりも圧倒的に快適で、
「今までの苦労は...？」と感じる瞬間がいくつもありました。
この記事では、React 初心者として便利だなと感じた瞬間を、コードと一緒にまとめたいと思います。
① state で値の管理がシンプルすぎる
まず最初に衝撃を受けたのは、state のわかりやすさでした。
const [count, setCount] = useState(0);
更新は set 関数を使うだけ。
setCount(count + 1);
- 画面が自動で再描画される
- DOM 操作が不要
- 値と更新関数がセットで管理される
個人的には、値と更新関数がセットで管理できるのが楽だと感じました。
② ページローディング表示が自然に書ける
React は状態の変化に応じて UI が勝手に切り替わるのでローディング画面等の切り替えが非常に楽でした。
{
loading && <p>読み込み中...</p>;
}
通信処理はこんな感じ。
setLoading(true);
const res = await axios.get("/api/users");
setUsers(res.data);
setLoading(false);
素の JS でローディング画面を作ろうとするとコードがかなり煩雑になる記憶があったので、非常に簡素に記載出来ることに感動しました。
③ コンポーネントで UI を部品化できる
React を触っていて一番“開発っぽさ”を感じたのがコンポーネントです。
// ボタンのコンポーネント。
export const PrimaryButton = ({ text, onClick }) => (
<button className="btn-primary" onClick={onClick}>
{text}
</button>
);
呼び出し側はボタン内のテキストとクリックイベントを渡すだけ。
// 呼び出し側
<PrimaryButton text="保存" onClick={handleSave} />
- 似た UI の重複をなくせる
- 修正が 1 ヶ所で済む
- 再利用性が高い
- デザインが統一される
「パーツを組み立ててアプリが出来ていく」という感覚がありコーディングがとてもしやすかったです。
HTML と CSS で Web サイトを作成しているときに、「似たようなパーツ使いまわしたいなー」と思っていたのでこの機能は本当に感動しました。
④ イベントハンドリングが簡単
素の JS だと DOM を取得し操作する必要がありますが、React は state で値を管理しているため値の更新だけであれば更新関数を使用するだけでよいので楽でした。
<input value={name} onChange={(e) => setName(e.target.value)} />
ボタンもこの通り。
<button onClick={handleSubmit}>送信</button>
- addEventListener 不要
- DOM 取得不要
上記 2 つが不要なのと、イベント処理が関数として扱えて便利でした。
⑤ axios との組み合わせが想像以上に自然
axios を使用して非同期処理がスッと書けるのも感動ポイントでした。
const fetchUsers = async () => {
const res = await axios.get("/api/users");
setUsers(res.data);
};
画面側も map を使って簡単に一覧表示ためコードがシンプル。
<ul>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
以前は Ajax や fetch 等を使用していましたが、axios を使用することで簡潔に実装できることに感動しました。
まとめ：React は初心者にとって「感動が多い」技術
React は初学者にとっては「難しそう」「とっつきにくそう」という印象がありますが、JS を一通り学習したら React もセットで学習するのをおすすめします。
- UI の操作が簡単
- 状態管理の分かりやすさ
- API 連携のしやすさ
- コンポーネント設計の簡素さ
今回説明した項目はまだ React の入門的な内容ですが、それだけでもかなり感動できたのでフロントエンドを始めるなら React は本当におすすめできる技術です。
他にも useEffect やカスタムフックなど面白い技術がたくさんあるので、是非一度学習してみてください。