こんにちは！インターン中のRyuseiです。
今回は「React」の学習内容を備忘録としてまとめていきます！
最近はHTMLやCSS、Bootstrap、JavaScriptの基本を学んできましたが、
今回はさらに進んで「React」の世界へ。
学びながら感じた「jQueryとの違い」「JavaScriptの範囲」「Reactの特徴」なども整理しておこうと思います。
Reactとは？
Reactは「ユーザーインターフェース（UI）を構築するためのJavaScriptライブラリ」です。
例えばボタンを押したら文字が増える！
そんな「動き」を作るのにReactが使われます。
ここで大事なのは、何がJavaScriptで、何がReactで、何がjQueryなのかをしっかり区別して理解すること。
これを曖昧にしてしまうと、学んだ内容の再利用や応用が効かなくなります。
しっかり整理しながら学んでいこうと思います！
Reactアプリの作成
まずはReactアプリの雛形を作ってみました。
以下のコマンドをターミナルで実行すると、Reactの開発環境が整います。
npx create-react-app react-tutorial
実行後、Reactアプリの基本構成が自動生成されます。
便利すぎる…！
Reactの基本：propsとstate
propsとは？
- 親コンポーネントから子コンポーネントに渡すデータ
これを使用することでreactで一番大事な機能である、コンポーネントごとの管理がしやすくなります。具体例を下に載せているんですが実際、僕も理解するのにとても時間がかかったのでわかりやすく説明して参考にしてもらえたら嬉しいです。
コンポーネントに直接書き込まないようにする方法で生まれたこの「props」は親要素に内容を書き込むことで小コンポーネントにその情報を渡して使用するんですが、そうすることによって小コンポーネントは親コンポーネントから受け取った情報しか持ちません。なので親要素の別の箇所で小コンポーネントを使用する際でもまっさらなコンポーネントに情報を付加して使用することができ、汎用性の高いコンポーネントを作成できるようになるのがこの「props」のいいところです。
- 子では読むだけで、変更はできない（読み取り専用）
function Greeting(props) {
return <h1>こんにちは、{props.name}さん！</h1>;
}
<Greeting name="太郎" />
上の例では、Greetingという部品（コンポーネント）にname="太郎"というデータを渡しています。Greetingの中でprops.nameとしてそのデータを表示できます。
stateとは？
- そのコンポーネント自身で持つデータ
- ユーザー操作や時間経過で変化するデータを管理
使用例としてはYouTubeの再生と停止ボタンのような感じで親で状態によって表示するものを変えたりすることができます。このstateで注意しなければいけないのはstateの呼び出し方法とprevの使い方です。前者では関数の呼び出しで無限呼び出しが起こってエラーになる場合があるので注意しなければいけません。
さらにインクリメントなどを行う場合にも注意が必要です。ここでstate用のprevを使用しないと連続で内容変更などがあった際にラグがあると、その分のイベント処理が実行されなくなってしまうので、イベントの発生回数などを正確にしたい場合は、以下のコードのように書く必要があります。
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // countというstateを作成
return (
<div>
<p>現在のカウント: {count}</p>
<button onClick={() => setCount(count + 1)}>＋1する</button>
</div>
);
}
countはstateで、ボタンを押すとsetCountを使ってcountが更新されます。
このようにstateは「変化する値」を持つために使うんですね！
propsとstateの違いまとめ
| 項目 | props | state |
|---|---|---|
| 説明 | 親→子に渡すデータ（読み取り専用） | コンポーネント内部で持つデータ（変更可） |
| 変更できるか | 変更不可（親が変更する） | 自分で変更できる（setStateを使う） |
| 使い方 | <Component propName="値" />で渡す | useStateで作成・更新 |
これらを使うとカレンダーなどを簡単に実装できてより実用的なアプリ開発が行えるようになります。現在作成中のWebページではカレンダーセクションを作ってみたりしているので完成したら処理の確認も込めて記事にしていけたらいいと思っています。まだまだ学習しなければいけないことがたくさんありますが頑張って学んでいこうと思います。また進捗があったら更新しますので、お楽しみに！