チャプター3

JavaScriptでUIを更新する

このチャプターでは、JavaScriptとDOMメソッドを使用して`h1`タグをプロジェクトに追加し、プロジェクトの構築を開始します。

コードエディタを開き、新しい`index.html`ファイルを作成します。HTMLファイル内に、以下のコードを追加してください。

index.html

<html>
  <body>
    <div></div>
  </body>
</html>

その後、後でターゲットにできるように`div`に一意の`id`を付けてください。

index.html

<html>
  <body>
    <div id="app"></div>
  </body>
</html>

HTMLファイル内にJavaScriptを記述するには、`script`タグを追加します。

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript"></script>
  </body>
</html>

さて、`script`タグの内部では、DOMメソッドである`getElementById()`を使用して、`id`で`

`要素を選択できます。

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      const app = document.getElementById('app');
    </script>
  </body>
</html>

DOMメソッドを使い続けて、新しい`

`要素を作成できます。

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      // Select the div element with 'app' id
      const app = document.getElementById('app');
 
      // Create a new H1 element
      const header = document.createElement('h1');
 
      // Create a new text node for the H1 element
      const text = 'Develop. Preview. Ship.';
      const headerContent = document.createTextNode(text);
 
      // Append the text to the H1 element
      header.appendChild(headerContent);
 
      // Place the H1 element inside the div
      app.appendChild(header);
    </script>
  </body>
</html>

すべてが機能していることを確認するには、お好みのブラウザでHTMLファイルを開いてください。「Develop. Preview. Ship.」と表示された`h1`タグが見えるはずです。

`要素が含まれていることがわかります。ページのDOMはソースコード、つまり作成した元のHTMLファイルとは異なります。

これは、HTMLが初期ページコンテンツを表すのに対し、DOMは記述したJavaScriptコードによって変更された更新されたページコンテンツを表すためです。

プレーンなJavaScriptでDOMを更新するのは非常に強力ですが、冗長です。テキスト付きの`

`要素を追加するために、これだけのコードを記述しました。

index.html

<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>

アプリやチームの規模が大きくなるにつれて、この方法でアプリケーションを構築することはますます難しくなる可能性があります。

このアプローチでは、開発者はコンピューターに物事を**どのように**行うべきかを指示するコードを書くのに多くの時間を費やします。しかし、**何**を表示したいかを記述し、コンピューターにDOMを**どのように**更新するかを任せる方が良いと思いませんか？

上記のコードは、**命令型プログラミング**の好例です。ユーザーインターフェースを**どのように**更新するかについての手順を記述しています。しかし、ユーザーインターフェースを構築する場合、宣言型のアプローチが開発プロセスを高速化できるため、しばしば好まれます。DOMメソッドを記述する必要がある代わりに、開発者が**何**を表示したいか（この場合は、テキスト付きの`h1`タグ）を宣言できれば、役立つでしょう。

言い換えれば、**命令型プログラミング**は、シェフにピザの作り方を段階的に指示するようなものです。**宣言型プログラミング**は、ピザを作る手順を気にせずにピザを注文するようなものです。🍕

Reactは、ユーザーインターフェースを構築するために使用できる人気のある宣言型ライブラリです。

React: 宣言型UIライブラリ

開発者として、ユーザーインターフェースに何をしたいかをReactに伝えることができ、Reactがあなたに代わってDOMを**どのように**更新するかを判断します。

次のセクションでは、Reactを始める方法について説明します。

追加リソース

HTML vs. DOM

宣言型UIと命令型UIの比較

チャプターを完了しました3

開発者がJavaScriptを使ってUIを更新する方法を学びました。

4: Reactを始める

既存のプロジェクトにReactを追加する方法を学びましょう。

チャプター4を開始

この情報は役立ちましたか？

JavaScriptでUIを更新する

HTML vs. DOM

命令型プログラミング vs. 宣言型プログラミング

React: 宣言型UIライブラリ

チャプターを完了しました3