Zenn
📘

ゼロから学ぶ React, Next.js②【React Foundations】Chapter2,3

に公開
Next.js
React
tech

公式チュートリアルはこちら
https://nextjs.org/learn/react-foundations/rendering-ui
https://nextjs.org/learn/react-foundations/updating-ui-with-javascript

【Chapter2】 ユーザーインターフェース（UI）のレンダリング

React の仕組みを理解するには、まずブラウザがコードをどのように解釈してユーザーインターフェース（UI）を作成（またはレンダリング）するかを基本的に理解する必要があります。

ユーザーが Web ページにアクセスすると、サーバーはブラウザに次のような HTML ファイルを返します。

ブラウザは HTML を読み取り、Document Object Model（DOM）を構築します。

DOM とは？

DOM は HTML 要素のオブジェクト表現です。コードとユーザーインターフェース（UI）の間の橋渡し役を果たし、親子関係を持つツリー状の構造を持っています。

DOM メソッドと JavaScript を使用して、ユーザーイベントをリッスンし、ユーザーインターフェース内の特定の要素を選択、追加、更新、削除することで DOM を操作できます。DOM 操作では、特定の要素をターゲットにするだけでなく、そのスタイルやコンテンツを変更することもできます。

次のセクションでは、JavaScript と DOM メソッドの使用方法について学習します。

追加のリソース

【Chapter3】 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() を使用して、<div> 要素を id で選択できます。

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 ファイル）とは異なります。

2つの図は、レンダリングされた 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 を使い始める方法を探ります。

次の章

https://zenn.dev/gunjo/articles/ebee18d07df3ac

Discussion