1.Reactとは
React（リアクト）は、Meta（旧Facebook）社が開発した、オープンソースのJavaScriptライブラリです。
特にUIの構築に特化したライブラリで、SPA（Single Page Application）の作成に適しています。
1.React製のフレームワーク
近年では、Reactをベースに様々なフレームワークが開発されています。
そのため、一度Reactの基礎を学べば、以下のようなフレームワークでも同じように開発できるようになります。
Reactベースのフレームワーク
- Next.js
- Remix
- Gatsby
- Waku
※Meta（旧Facebook）社が提供していた開発ツールCRA（Create React App）は、2025年に非推奨になりました。
公式ブログ：Create React App の非推奨化
2.Reactの特徴
2-1.コンポーネントを使ったUI構築
Reactでは、コンポーネントと呼ばれるUIの部品を使います。
そして、開発したコンポーネントを組み合わせて、ページやWebアプリケーションの画面を構築できます。
つまり、パーツ単位でUIを作成できるので、コード自体の可読性が上がります。また、コンポーネントは、別の画面でも使いまわせるので、開発スピードが上がります。
2-2.JSXベースの開発
JSXは、HTMLとJavaScriptを組み合わせたマークアップ構文です。
以下は、JSXの例です。
引用元：https://ja.legacy.reactjs.org/docs/introducing-jsx.html
上記のように、JSXを使えば、UIの見た目とそのロジックを、直感的に分かりやすい形で記述できます。
2-3.応用の広さ
Reactは、一度基礎を習得してしまえば、様々な分野で活用できます。例えば、Webアプリケーションだけでなく、モバイルアプリケーションやNode.jsを使ったサーバーなどにも応用できます。
また、ReactはJavaScriptライブラリであり、既存のWeb サイトやアプリケーションへの部分的な導入が可能です。
必要な箇所にコンポーネントを追加すれば、既存のコードを大きく書き換える必要がないため、導入しやすいというメリットがあります。
3.React Hooksの紹介
React Hooksは、React側があらかじめ用意してくれているコンポーネント群です。
Reactの機能について理解する場合、React Hooksの紹介が欠かせません。
ここでは、代表的なReact Hookを3つ紹介します。
3-1.useState
useStateは、コンポーネントのデータを管理するフックです。
ユーザーが入力したデータを保持したり、更新したりする場合に使用します。
useStateの例
const[value, setValue]=useState(0);
3-2.useEffect
useStateは、レンダリングをトリガーに処理を行うフックです。データフェッチや、DOMの書き換えに使用されます。
useEffectの例
useEffect(()=>{
console.log("コンポーネントが表示されました。");
},[]);
3-3.useRef
useRefは、useStateと同様にデータを管理するフックです。
ただし、useRefはデータが更新されても再レンダリングされません。
useRefは、DOM要素の参照によく使われます。
useRefの例
const inputRef =useRef(null);
useEffect(()=>{
inputRef.current.focus();
},[]);
return(
<div>
<input ref={inputRef} placeholder="自動フォーカス"/>
</div>
);
あとがき
今回は、筆者がよく使うNext.jsの基礎となっているReactについて解説しました。
今後、React Hooksについては、個別に解説記事を作ろうと思います。
今まで「何となく」で使っていた（使えてしまっていた）ライブラリですが、今後記事を執筆する際に、改めてインプットし直すことで、より洗練されたコードを書けるようになれたらと思います。