React と HTML – 違いを見抜けるか？
最初に
HTML はマークアップ言語であり、React は JavaScript ライブラリです。
どちらもフロントエンド開発に使われ、Web サイトや Web アプリをデザインしているときに耳にしたことがあるかもしれません。
では早速ですが、HTML と React のこれら２つの違いを見ていきましょう。
覚えておくべきポイント
-
HTMLはマークアップ言語であり、ReactはJSライブラリである。
-
Reactはコンポーネントベースだが、HTMLはデフォルトではこのような構造には対応していない。
-
HTMLはインタラクティビティやステートを独自に管理できないが、Reactではステートの管理が可能。
-
HTMLのウェブサイトではフルリロードが必要、Reactは変更を加えた要素だけを更新できる。
-
Reactは一方通行のデータバインディングを可能にするが、HTMLはデフォルトでデータバインディングを持たない。
-
HTMLは通常、静的なウェブサイトのコンテンツを構造化し、Reactは動的なアプリのUIを構築する。
コード化されたコンポーネントでプロトタイプを作成し、デザインと開発の間のギャップを埋めませんか？デザインハンドオフの改善、製品開発フローとUIの完全な一貫性を実現することが可能です。
詳しくは、こちらのUXPin Mergeについてのページをぜひご覧ください。
HTML とは
HTMLについて
HTML（HyperText Markup Language）は、Web の基本的なプログラミング言語構造であり、フロントエンドフレームワークが使われているかどうかに関わらず、皆さんが訪れるWeb サイトは全て、HTML、CSS、Javascript で構成されています。
また、HTMLが見出し、段落、リンク、メディアオブジェクトなどの要素を様々なタグで確定することによって、ブラウザはコンテンツを正しく解釈して表示できるようになります。
HTMLは、全ての ウェブサイトや多くの Webアプリケーションの出発点であるため、Web デザインや開発に携わる人にとって、基本的な理解が不可欠なのです。
React とは
Reactについて
React（React.JS）は、Facebook社が開発したオープンソースの JavaScript ライブラリです。開発者は当初、React を主に SPA（シングルページアプリケーション）に使っていましたが、SEO 機能を備えたマルチページサイトに対応すべく進化しました。
コンテンツを構造化する HTML とは異なり、開発者は React で再利用可能なコンポーネントを作成することができます。
そして React の各コンポーネントには独自のロジックがあり、そのレンダリングを制御します。
このレンダリングは、ページの残りの部分は静的なままでリロードの必要はありませんが、単一の要素を変更することができるように なってい るため、非常に重要です。
例えば、SNS で投稿に「いいね！」をすると、親指を立てたアイコンやハートのアイコンのみが変化しますが、同じページに HTML、CSS、Javascript が使われていたら、「いいね！」を押したり、コンテンツに触れたりするたびに、ページ全体のリロードが必要になります。
また、React は、従来の HTML、CSS、Javascript のコードと比べて、ワークフロー上のメリットも多くあります。
複雑な UI をよりシンプルなコンポーネントに分解できるため、React はその効率性と柔軟性から、開発者の間で高い人気を誇っています。
HTML と React の主な違い
React と HTML のどちらを使っても同じ Web サイトやWeb アプリケーションの構築 が可能ですが、HTML を使用してコンテンツを構造化し、React を使用してインタラクティブ性とコンポーネントベースのアーキテクチャを追加することで、両者が連携することがよくあります。
HTML と React は異なるアプリケーションを持つ２つの異なるフロントエンド技術であり、ほとんどが互いに補完し合っているのです。
では、この比較で、HTMLで作られたサイト と Reactで作られたサイト、または Web アプリケーションを構築した場合にどうなるかを検証していきます。
-
機能性：HTMLは Web 上のコンテンツを構造化し、JavaScript のライブラリである React は動的でインタラクティブなユーザーインターフェースを作成する。
-
コンポーネントベース：HTMLは本来、コンポーネント構造に対応していない。対する Reactは、コンポーネントベースのアーキテクチャを採用しており、各コンポーネントは UI の一部を表し、アプリケーション全体で再利用できるため、開発効率と一貫性が上がる。
-
インタラクティビティ：HTML 単体では、動的なコンテンツの作成やアプリケーションの状態の管理などはできず、Web ページにインタラクティブ性を持たせるには、JavaScrip tや同様の言語が必要。一方、JavaScript ライブラリである React は、インタラクティブな UI を作成し、アプリケーションの状態を効果的に管理する。
-
レンダリング：従来のHTMLベースのアプリケーションでは、ビューの変更の実装には、全ページのリフレッシュが必要なことがよくあったが、React は、仮想 DOM（ドキュメントオブジェクトモデル）を使って、変更するコンポーネントのみを更新するため、完全なページ更新の必要がなくなり、より効率的でスムーズな更新を提供できるようになる。
-
データバインディング: HTMLにはデータバインディングのためのシステムが内蔵されておらず、ユーザー入力のような UI の変更で、アプリケーションのデータも自動更新されるというわけではない。一方 React を使用した場合では、一方向のデータバインディングが可能になり、それによって、基礎データに影響を与えることなく UI コンポーネントの効率的な更新が実現する。
-
ユースケース：HTML は通常、静的な Web サイトのためのコンテンツを構造化する。対する React は動的でインタラクティブなUIを構築するため、複雑な SPA（シングルページアプリケーション）やReact Nativeを使ったモバイルアプリケーションに最適。
HTML と React の違いを見抜けるか
React と HTML の Web サイトや Web アプリケーションの違いを見分けるのは簡単ではありません。
Angular、Vueなど、どの フレームワークを使っても、ブラウザは HTML、CSS、Javascript のレンダリングが必要です。
ビルト・ウィズ のような Web サイトでさえ、開発者がこの情報を明示的に共有するか、GitHub の公開レポなどのプロジェクトのレポジトリを公開しなければ、デジタル製品の技術スタックを確認することはできません。
HTMLを掘り下げる
HTML の仕組み
ユーザーが Web ページを要求すると、ブラウザはサーバーから HTML ファイルを取り込み、それを解釈してページの構成や内容を表示します。HTML では、確定済みの HTML タグのセットを使って、段落の <p>、見出しの <h1> ～ <h6>、リンクの <a>、画像の <div>、<img> などのコンテンツ タイプを確定します。
HTML の構造
HTML は、<html> タグをルートとし、<head> タグと <body> タグが２本の枝として機能するツリー状の構造をしています。
<head> タグには、ページのスタイルや機能のためのメタデータ、スタイルシート、スクリプトが格納され、
<body> タグには、テキスト、画像、リンクなど、目に見えるすべてのコンテンツが含まれます。
このような主枝の中には、「子要素」と呼ばれる他のタグがあり、コンテンツを確定し構造化しています。
ページの読み込み
ページが読み込まれると、ブラウザは HTML を上から下へ読み、タグを解釈して、ページの構造を表す DOM（ドキュメントオブジェクトモデル）を構築します。
その後、ブラウザは DOM に従ってコンテンツを表示します。
HTML に CSS スタイルシートや JavaScript ファイルへのリンクが含まれている場合、ブラウザはそれらを取得して適用し、それがコンテンツの見た目（CSS）や動作（JavaScript）に影響を与える場合があります。
HTML の構造は、ブラウザが解釈しやすく、開発者が理解し操作しやすいようになっています。
HTMLは Web の基本的な構成要素であり、スタイル（CSS）や、JavaScript や React などのライブラリ/フレームワークのインタラクティブ機能を追加するための土台となるものです。
Reactを掘り下げる
React の仕組み
Reactは、DOM の仮想的な表現（仮想 DOM）を作成し、それを利用して性能を上げます。
ユーザーがアプリケーションと対話するとき、時間がかかる可能性がある 「DOM 全体の更新」の代わりに、React は状態が変化した 仮想DOM の部分のみを更新します。
そして、仮想DOM と実際の DOM を最も効率的な方法で整合させ、実際の DOM の変更箇所のみを更新します。このプロセスは “diffing” と呼ばれています。
React の構造
React は、JSX を返す再利用可能なコード片であるコンポーネントにコードを整理します。また、このようなコンポーネントは、ボタンのように単純なものから、ページ全体のテンプレートのように複雑なものまであります。
コンポーネントは、時間とともに変化するデータであるステートを保持し、props を介して親コンポーネントからデータを受け取り、子コンポーネントにデータを渡すこと が可能です。
このデータフローにより、明確で予測可能なコーディング構造が確立されるのです。
ページの読み込み
React アプリケーションが読み込まれると、コンポーネントを初期化し、ReactDOM ライブラリを使用して JSX を実際の DOM にレンダリングします。
この過程で、ユーザーとのインタラクションのためのイベントリスナーも設定されます。
ユーザーがアプリケーションを操作する（例：ボタンをクリックする）と、1つ以上のコンポーネントの状態がトリガーされることがあります。
React は、このような状態変化を反映するために仮想DOMを更新し、実際の DOM を効率的に更新して一致させます。
React の構造とDOM 操作のアプローチは、高速で応答性の高い複雑でインタラクティブな Web アプリケーションを構築するのに適しています。学習曲線はプレーンな HTML よりも急ですが、性能とコード整理のメリットは大きいです。
HTML や React が開発者に選ばれる理由
HTML を選ぶ理由
HTML は React よりも素直で強力でないように見えるかもしれませんが、それでも Web 開発において重要な役割を担っています。
その理由は以下の通りです：
-
基本的かつ普遍的：HTMLは、Web の基礎となる言語であり、どのブラウザもHTMLを解釈できるため、普遍的に認識され、支持される。
-
静的コンテンツに最適：ほとんどが静的なコンテンツで構成される Web サイトを構築する場合、HTMLは、わかりやすく効率的な選択肢となる。
-
習得しやすい：HTML は、初心者にとって最も簡単な言語の一つであり、Web 開発に興味のある人にとっては、出発点として最適な言語である。
-
SEOと相性がいい：検索エンジンは HTML をクロールして理解しやすいため、SEO 対策に有利。
例えば、製品やサービスを紹介するシンプルな Web サイトを作りたいビジネスには、HTMLが最適であり、Web 開発について学ぶ初心者の方にも賢い選択肢です。
React を選ぶ理由
React には、多くの開発者に好まれるような機能が以下のように備わっています：
-
コンポーネントベースのアーキテクチャ：React のコンポーネントベースのアプローチは、アプリケーション全体の再利用性と一貫性を促進し、それによって開発がより効率的になる。
-
効率的な更新：React は、Virtual DOM を使って、ページの変更が必要な部分のみを更新するため、特に複雑なアプリケーションでは高いパフォーマンスを発揮する。
-
高度な JavaScript：React は、高度な JavaScript の機能と概念を利用しているため、開発者はより強力で柔軟な力を得られる。
-
強いコミュニティとエコシステム：React には大規模で活発なコミュニティがあり、つまり、学習やトラブルシューティングのためのリソースが豊富で、ライブラリやツールのエコシステムも充実している。
例えば、Facebook、Instagram、WhatsApp では、複雑でインタラクティブ性の高い UI に React が使われており、スタートアップ企業やハイテク企業も、その効率性、拡張性、生産性から React を愛用しています。
また、フロントエンドライブラリ のコンポーネントベースの性質から、組織ではデザインシステムの構築に React が使われています。
HTMLとReact：どちらを選ぶべき？
HTMLとReactのどちらを選択するかは、以下のようにプロジェクトのニーズによって異なります：
-
静的な Web サイト向け：シンプルでほとんど静的な Web サイトを構築するのには、HTML が適した選択肢であることが多い。
-
動的で複雑なアプリケーション向け：複雑で高度にインタラクティブな Web アプリケーションを構築する上で、React は HTML よりもはるかに優れた選択肢である。
HTML と React の UX への影響
性能
HTML ベースのWeb サイトは、その静的な性質上、一般的に読み込みが速いですが、ユーザーの操作のたびに新しいページを読み込む必要がある場合だと、操作に時間がかかることがあります。
一方、変化するコンポーネントのみを更新する React の機能は、スムーズで高速なインタラクションにつながり、特に複雑なアプリケーションにおいて、より流動的な体験をユーザーに提供します。
インタラクティビティ
HTML だけでは、動的でインタラクティブな UX （ユーザーエクスペリエンス）を生み出すことはできず、インタラクティブな要素を追加するには、JavaScript などの言語が必要です。
それに対して、JavaScript ライブラリである React は、ユーザーの入力に瞬時に反応する動的でインタラクティブな UI を構築することに長けています。このインタラクティブ性は、より魅力的でアプリのような UX をもたらすこともあります。
一貫性
HTML だと、一貫性の確保には、手作業での慎重なコーディングが必要です。
対する React は、そのコンポーネントベースのアーキテクチャにより、開発者はアプリケーション全体で UI 要素の一貫した実装を保証することができ、この統一性により、一貫した LnF（ルック＆フィール）が促され、それが優れた UX にとって欠かせないものとなります。
PWA（プログレッシブ Web アプリ）
HTML、CSS、JavaScript を使った PWAの開発も可能ですが、そのプロセスはより複雑で時間がかかるものです。なので 開発者は、PWA（プログレッシブ Web アプリ）の構築に React をよく使います。PWAは、オフライン機能を含むアプリのような体験を Web 上で提供することができ、それで UX が大幅に上がります。
SEO 対策と初期読み込み時間
HTMLは、検索エンジンがクロールしてインデックスしやすく、SEO 対策につながります。また、HTML ページは、最初の HTML ファイルが読み込まれた後、すぐにレンダリングを開始することができます。
一方、React アプリケーションでは、一般的にレンダリングを開始する前に JavaScript バンドル全体を読み込む必要があります。
このレンダリングにより、初期の読み込み時間が長くなり、UX や SEO に影響を与えることがありますが、SSR（サーバーサイドレンダリング）や Next.js などの技術により、React アプリケーションのこのような問題を解決することができます。
UXPin で Merge を使ってインタラクティブなプロトタイプを作る
UXPin の Merge 技術で、プロダクトチームはレポジトリから UIコンポーネントをインポートして、UXPin のデザインキャンバスで完全に機能するインタラクティブなプロトタイプを構築できるようになります。
そしてデザインチームは、エンジニアが最終製品の開発に使うのと同じ UI 要素をプロトタイプに使用し、デザインと開発の間に「信頼できる唯一の情報源（Single source of truth）」を作成します。
Merge を使用した場合、デザイナーは React を学ぶことなく、React で アプリケーションを作成することができ、コンポーネントをドラッグ＆ドロップするだけで、さまざまなインタラクティブなプロトタイプを作成することができます。
このような高度なプロトタイプによってテストは強化され、デザインチームは改良するための有意義で実用的な結果を得ることができます。
いかがだったでしょうか？今回のブログが少しでも HTML と Reactの学習 で ぜひ参考にしていただけると幸いです。
