React Foundations: 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で<div>要素を選択できます：

index.html

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

DOMメソッドを使用して新しい<h1>要素を作成できます：

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      // 'app' idを持つdiv要素を選択
      const app = document.getElementById('app');
 
      // 新しいH1要素を作成
      const header = document.createElement('h1');
 
      // H1要素用の新しいテキストノードを作成
      const text = 'Develop. Preview. Ship.';
      const headerContent = document.createTextNode(text);
 
      // テキストをH1要素に追加
      header.appendChild(headerContent);
 
      // H1要素をdiv内に配置
      app.appendChild(header);
    </script>
  </body>
</html>

すべてが正しく動作していることを確認するために、お好きなブラウザでHTMLファイルを開いてください。「Develop. Preview. Ship.」というh1タグが表示されるはずです。

HTML vs. DOM

ブラウザの開発者ツール内でDOM要素を見ると、DOMに<h1>要素が含まれていることに気付くでしょう。ページのDOMはソースコード（つまり、作成した元のHTMLファイル）とは異なります。

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

プレーンなJavaScriptでDOMを更新するのは非常に強力ですが、冗長です。テキストを含む<h1>要素を追加するために、これだけのコードを記述しました：

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を更新するかを考えさせることができたら良いと思いませんか？

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

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

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

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

React: 宣言型UIライブラリ

開発者として、Reactにユーザーインターフェースに対して何を起こしたいかを伝えると、ReactはどのようにDOMを更新するかの手順を代わりに考えてくれます。

次のセクションでは、Reactの使い始め方を探っていきます。

追加リソース:

HTML vs. DOM

宣言型UIと命令型の比較

JavaScriptでUIを更新する

HTML vs. DOM

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

React: 宣言型UIライブラリ

On this page