やをらびん
IT・個人事業

Reactの基礎#1

公開:

※ 本記事にはアフィリエイト広告（Amazonアソシエイト・楽天アフィリエイト等）が含まれています。

React

ReactはJavaScriptのライブラリでMetaによって作られました。

ReactはSPA（Single Page Application）に対応すべく、動的ページ作成のためのライブラリです。

Reactだけではすべてを網羅できないので、ReactはほかのJavaScriptライブラリと連携します。

Reactが人気な理由は少ないコードで機能を実装できるからです。

DOM

WEBブラウザはHTMLファイルを受け取ると、DOMをつくります。DOMを直接書き換えるとブラウザが再度ページを読み込みDOMを作るなど時間がかかってしまいます。

Virtual DOM

Reactはメモリ上にVirtual DOMを作成します。

Reactは必要に応じてブラウザDOMを更新するのにバーチャルDOMを使用します。

これによりWEBアプリケーションの処理を早く柔軟にすることができます。

Reconciliation

Reactは現在のバーチャルDOMと以前のバーチャルDOMが一致しているかを確認します。

変更が必要な場合は、ブラウザDOMを更新します。ブラウザDOMが更新されるとブラウザの表示が変わります。この動作をReconciliation（和解）といいます。

コンポーネント

すべてのReactアプリケーションは1つのコンポーネントを持っています。rootコンポーネントかappコンポーネントです。

コンポーネントはappコンポーネントに追加され、コンポーネントツリーを作ります。ページ全体を1つの大きなかたまりとして書くのではなく、ヘッダー・ボタン・リストといった小さな部品（コンポーネント）に分けて、それらを組み合わせて画面を作っていくイメージです。私が実際に触ってみて、この「部品に分けて組み立てる」考え方がReactの一番の肝だと感じました。

コンポーネントは関数として書くのが今の主流です。名前は大文字から始めるのがルールで、私は最初小文字で書いてしまって表示されず、少しハマりました。

function Hello() {
  return <h1>こんにちは！</h1>;
}

JSX

上のコードで、JavaScriptの中にHTMLのようなタグを書いている部分がありました。これをJSXといいます。

JSXはHTMLそっくりですが、あくまでJavaScriptなので少しだけ違うところがあります。私がつまずいたのは次のあたりでした。

  • class ではなく className と書く
  • return で返せる要素は1つだけ（複数並べるときは全体を1つのタグで囲むか、<>...</> で囲む）
  • タグの中では { } で囲むとJavaScriptの式を埋め込める
function Profile() {
  const name = "びんせん";
  return <p className="name">名前は{name}です</p>;
}

{name} の部分に変数の中身が入って表示されます。文字列だけでなく計算結果なども埋め込めるので、動的なページを作るのにとても便利でした。

props

コンポーネントは部品なので、使い回せると便利です。そこで、呼び出す側から値を渡す仕組みがpropsです。

propsは関数の引数のように受け取り、渡すときはHTMLの属性のように書きます。

function Greeting(props) {
  return <h1>こんにちは、{props.name}さん！</h1>;
}

function App() {
  return (
    <div>
      <Greeting name="太郎" />
      <Greeting name="花子" />
    </div>
  );
}

同じ Greeting コンポーネントに、渡す name を変えるだけで別々の表示になります。1度作った部品を値違いで何度も使い回せるのがpropsの気持ちよさで、ここまで来ると「なるほど、これがReactか」と少し感覚がつかめてきました。

今回はここまでです。次回はコンポーネントの中で値を管理するstateについて触れていきたいと思います。

ぜひ参考にしてください！また！