3
チャプター3
JavaScriptによるUIの更新
このチャプターでは、JavaScriptとDOMメソッドを使用して、プロジェクトにh1タグを追加することから始めます。
コードエディタを開き、新しいindex.htmlファイルを作成します。HTMLファイルの中に、次のコードを追加します。
<html>
<body>
<div></div>
</body>
</html>次に、後でターゲットにできるように、divに一意のidを付けます。
<html>
<body>
<div id="app"></div>
</body>
</html>HTMLファイル内にJavaScriptを記述するには、scriptタグを追加します。
<html>
<body>
<div id="app"></div>
<script type="text/javascript"></script>
</body>
</html>次に、scriptタグの中で、DOMメソッドであるgetElementById()を使用して、idによって<div>要素を選択できます。
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
const app = document.getElementById('app');
</script>
</body>
</html>DOMメソッドを続けて使用して、新しい<h1>要素を作成できます。
<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タグが表示されるはずです。
HTMLとDOMの違い
ブラウザの開発者ツールでDOM要素を見ると、DOMに<h1>要素が含まれていることに気づくでしょう。ページのDOMはソースコード、つまり作成した元のHTMLファイルとは異なります。
これは、HTMLが初期ページコンテンツを表すのに対し、DOMが記述したJavaScriptコードによって変更された更新されたページコンテンツを表すためです。
プレーンな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>アプリやチームの規模が大きくなるにつれて、この方法でアプリケーションを構築することがますます難しくなる可能性があります。
このアプローチでは、開発者はコンピューターがどのように行うべきかを指示する手順の記述に多くの時間を費やします。しかし、表示したいものを記述し、コンピューターがDOMを更新する方法を把握できるようにするのが良いのではないでしょうか。
命令型プログラミングと宣言型プログラミング
上記のコードは、命令型プログラミングの良い例です。ユーザーインターフェースをどのように更新すべきかの手順を記述しています。しかし、ユーザーインターフェースの構築に関しては、宣言型アプローチが開発プロセスをスピードアップできるため、好まれることがよくあります。DOMメソッドを記述する代わりに、開発者が表示したいものを宣言できると便利です（この場合は、テキストを含むh1タグ）。
言い換えれば、命令型プログラミングは、ピザを作る方法についてシェフに段階的な指示を与えるようなものです。宣言型プログラミングは、ピザを作るための手順を気にせずにピザを注文するようなものです。🍕
Reactは、ユーザーインターフェースの構築に使用できる人気のある宣言型ライブラリです。
React：宣言型UIライブラリ
開発者は、ユーザーインターフェースで何が起こるかをReactに指示することができ、ReactはDOMを更新する方法の手順を代わりに把握します。
次のセクションでは、Reactを使い始める方法について説明します。
その他のリソース
この情報は役に立ちましたか？