React

https://nextjs.org/learn/react-foundations

Reactとは？

インタラクティブなユーザーインターフェイス (UI) を構築するためのJavaScriptライブラリ

Reactはライブラリで、UIを構築するのに役立つAPIを提供するが、アプリケーションのどこでそれらの関数を使うかは開発者に任されている

DOMとは？

HTML要素のオブジェクト表現
親子関係のあるツリーのような構造を持つ

DOMを操作することでUIを更新できる

JavaScriptによるDOMの更新

プレーンなJavaScriptによるDOMの更新は命令的で記述が冗長になる

例: <h1>要素を追加するためのコード

<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const text = 'Develop. Preview. Ship.';
  const headerContent = document.createTextNode(text);
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

命令形プログラミングと宣言型プログラミング

ユーザーインターフェイスの構築に関して、宣言型のアプローチが好まれる
命令形プログラミングがシェフにピザの作り方を段階的に指示するものだとすると、宣言型プログラミングはピザを作る手順を気にせずにピザを注文するようなもの

Reactは、宣言型のライブラリ

ReactによるDOMの更新

<script type="text/jsx">
  const app = document.getElementById("app")
  ReactDOM.render(<h1>Develop. Preview. Ship.</h1>, app)
</script>

コンポーネント

ユーザーインターフェイスは、コンポーネントと呼ばれる小さな構成要素に分割できる
UIの一部を更新する必要がある場合は、特定のコンポーネントを更新できる

コンポーネントの作成

React においてコンポーネントは単なる関数で、UI要素を返す関数である

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
ReactDOM.render(<Header />, app);

• Reactコンポーネントは、単純なHTMLやJavaScriptと区別するために先頭を大文字にする必要がある
• Reactコンポーネントを使用するには山かっこを利用する (<>)

コンポーネントのネスト

Reactのコンポーネントは相互にネストできる
これによりコンポーネントの再利用が容易になっている

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}
 
ReactDOM.render(<HomePage />, app);

Props

React コンポーネントに引数を渡す方法
親コンポーネントから子コンポーネントにPropsを渡すことができる

React は単方向データフローで、データはツリーの上から下に向かって流れる

Propsの使用

HTML属性を渡すのと同じように渡すことができる

function Header(props) {
  console.log(props); // { title: "React" }
  return <h1>Develop. Preview. Ship.</h1>;
}

function HomePage() {
  return (
    <div>
      <Header title="React" />
    </div>
  );
}

propsはオブジェクトなので、分割代入を利用できる
それによりpropsに明示的に名前を付けることができる

function Header({ title }) {
  console.log(title);
  return <h1>{title}</h1>;
}

JSX内では、{} を利用することで任意のJavaScript式を利用できる

リストの反復処理

{} を利用してJavaScriptランドに入り、array.map()メソッドで反復処理ができる
各配列内の項目には一意に識別できるようkeyが必要
（実際にはアイテムIDなど、一意であることが保証されている名前を使用する必要がある）

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
    </div>
  );
}

State

イベント

Reactはイベント名はキャメルケースで表記される
onClick, onChange, onSubmitなどがある

function HomePage() {
  // ...
  return (
    <div>
      {/* ... */}
      <button onClick={}>Like</button>
    </div>
  );
}

State と Hooks

React には Hooks と呼ばれる一連の関数がある
Hooks を使用すると状態などの追加ロジックをコンポーネントに追加できる
状態はユーザーの操作によってトリガーされ、時間の経過とともに変化するUI内の情報と考えることができる

useState()

useState() は状態を管理するための React Hooks

配列の最初の項目はステートの値で、名前は何でも良くて分かりやすいものを付ける
配列の2番めの項目は、値を更新する関数で、名前は何でも良いがステート変数の名前にsetを付けるのが一般的

useStateの引数に状態の初期値を渡すこともできる（ここでは0に設定）

const [likes, setLikes] = React.useState(0);

React から Next.js へ

React は UI の構築に優れているが、そのUIを完全に機能するスケーラブルなアプリケーションとして独自に構築するにはある程度の作業が必要
Next.js がセットアップと設定の多くを処理し、Reactアプリケーションの構築を支援してくれる