Chapter 3: UIの更新とJavaScript

この章ではプレーンな JavaScript だけで DOM を操作し，UI を更新する流れを体験します。手順を追っていくと，後の章で React に切り替える理由が自然と見えてきます。

HTML ファイルを準備する

任意のフォルダに index.html を作成します。
次のコードを入力し，<div> 要素だけを用意します。

index.html

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

後で JavaScript からこの要素を参照できるように，id を付けます。

index.html

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

Note

id 属性はページ内で一意である必要があります。同じ値を複数の要素に付けないようにしましょう。

JavaScript を記述する <script> タグを追加します。

index.html

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

DOM を命令的に操作する

<script> タグの中で DOM API を呼び出し，id="app" の要素を取得します。

index.html

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

続いて <h1> 要素を生成し，テキストを挿入してから DOM に追加します。

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>

保存してブラウザで開くと，「Develop. Preview. Ship.」という <h1> が表示されます。これが命令的に DOM を更新する基本の流れです。

HTML と DOM は別物

ブラウザの開発者ツールを開くと，元の HTML ファイルには無かった <h1> が DOM に追加されているのが分かります。

HTMLコードと実際のDOM

HTML：最初に読み込まれたソースコード
DOM：JavaScript による変更を反映した，現在の画面構造

この違いを押さえておくと，バグ調査や React DevTools を使ったデバッグがやりやすくなります。

命令的 vs 宣言的

先ほどの処理をもう一度見てみましょう。

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 API を細かく書くスタイルは 命令的プログラミング (Imperative) と呼ばれます。「どのように (how)」更新するかを手順で指示しているからです。

一方で，React が採用しているのは 宣言的プログラミング (Declarative) です。最終的に「何を表示したいか (what)」を宣言すれば，React が裏側で最適な DOM 更新手順を取ってくれます。

ピザの例えで覚えるとわかりやすい

命令的：生地を伸ばす → 具材を載せる → 焼く…とシェフに逐一指示する
宣言的：マルゲリータを一枚お願いします！と注文する

次のステップ

ここまでで，

DOM の更新は命令的な手順の積み重ねになる
規模が大きくなるとコード量と複雑さが一気に増える

という課題が見えてきました。次の Chapter では React を導入し，宣言的に UI を記述する体験へ移っていきます。