Reactの仕組み - リアクト用語キャンペーン 05

Reactの仕組み

序文

React 是開發網頁、手機前端最流行的 JavaScript 套件之一。Meta社(旧Facebook社)によって開発されたReactは、フロントエンドのページを完成させるための再利用可能なコンポーネントを開発者が作成することを可能にする。

しかし、Reactは厳密にはフレームワークではないことに注意する必要がある。ReactはUIコンポーネントのレンダリングだけを担当するからだ。しかし、ReactはAngularやVueといったフレームワークの代替ソリューションを提供し、複雑なフロントエンド・ページの機能に取り組むことを可能にしてくれる。

この記事では、Reactの仕組みや特徴、フロントエンド開発者がReact.jsを使うメリットについて解説する。

なぜフロントエンド・フレームワークが必要なのか?

この質問に答えるにあたって、なぜフロントエンドフレームワークを使う必要があるのかについて考えてみるとよいだろう。Web開発の分野では、フロントエンドフレームワークは確かにモダンなツールであり、どの技術やツールが特定の問題を解決するために開発されたものであろうと関係ない。昔は、静的なページはHTMLやCSS、あるいはJavaScriptだけで完成させることができた。

しかし、技術がますます進歩し、より多くの人々がインターネットを使用するようになると、Webページの機能はますます複雑になってきて、それがメンバー登録、ログイン、地図機能、フォーラム、メッセージ機能であるかどうか...など、それは長い間、単純なWebページよりも、解決することができますされています。

そのため、フロントエンドエンジニアとバックエンドエンジニアが存在し、フロントエンドエンジニアはUI、ビジュアルインターフェース、データやステータスの可視化などを担当する。バックエンドエンジニアは、データ処理、データベース運用、サーバー管理、API開発などを担当します。

ウェブページが複雑化したため、JavaScriptやJqueryではあらゆる複雑なフロントエンドの状態に対応できなくなり、フレームワークが誕生した。

React、Vue、Angularは、複雑なフロントエンドの状態を処理するために開発された。

リアクトJavaScriptとは?

Reactは、モジュール化によってフロントエンドのインターフェイスを作成するための強力なJavaScriptスイートです。宣言的でモジュール化されたアプローチを導入することで、フロントエンドのUI開発に革命をもたらします。

jQueryのDOM操作とは異なり、Reactはパフォーマンスを最適化するために仮想DOMを使用する。 React JavaScript(またはReact.js)は、複雑なフロントエンド画面を処理し、開発者に構造化された効率的なアプローチを提供する。

Reactの仕組み

Reactは、JavaScriptとHTMLコードをシームレスに結合する構文糖であるJSXを導入している。JSXタグはXMLに似ているが、いくつかの違いがある。

例えば、ReactはCSSの伝統的なclass属性の代わりにclassNameを使う。数値や式は中かっこで囲まれ、引用符はJavaScriptと同様に文字列を表す。

リアクト・エレメンツ

Reactは組み込み関数であらゆる種類のHTML DOM(ドキュメント・オブジェクト・モデル)を作成できるので、まずは基本的なHTML構文をおさらいしておこう。

				
					<body> 
    <h1><span class="ez-toc-section" id="hello-world"></span>こんにちは世界<span class="ez-toc-section-end"></span></h1> 
    <ul> 
        <li>犬</li> 
        <li>猫</li> 
    </ul> 
</body>
				
			

上記のHTMLの構造から、HTMLの要素はツリー構造を監視しており、ルート要素(root element)には2つの子要素があることがわかります。 h1そして2番目の子要素は ulそれを見てみると ul リストは続く。ul を含む親要素でもあります。 li の子要素は

Reactのコンセプトも同じで、Reactが開発した関数を使ってこれらの要素を構築し、これらの要素を1つの大きなHTMLにまとめてページを表示する。

React DOM

要素を作成したら、作成したDOMをページにレンダリングする必要があります。ReactDOMの組み込みのrenderを使って、作成したReact要素をブラウザにレンダリングすることができます。

				
					const disc = React.createElement("h1", "Hello World"); ReactDOM.render(dish, document.getElementById("root"));
				
			

上記のJavaScriptコードで、次のようなHTML要素が作成される。で、この要素をHTMLに渡す。

				
					<div id="root"> 
    <h1><span class="ez-toc-section" id="hello-world-2"></span>こんにちは世界<span class="ez-toc-section-end"></span></h1> 
</div>
				
			

もちろん、上記は単純なDOMだが、ReactDOMでリストをレンダリングして構築したHTMLの例を以下に示す。

				
					const hello = React.createElement("h1", "Hello") const world = React.createElement("h1", "World") ReactDOM.render([hello, world], document.getElementById("root"))
				
			

なぜReact.jsを使うのか?

世界中の何百もの大企業がReactを使ってシステムを構築しており、Reactを使うメリットを簡単に紹介する。

使いやすい

ReactはPure JavaScriptに依存しており、モジュール化とオブジェクト指向のコンセプトも持っているため、比較的簡単に使い始めることができます。

JavaScriptについてもっと学ぶ必要がある場合、多くのウェブサイトが無料のチュートリアルを提供しており、Reactについて読む前にJavaScriptの基礎を学ぶことで、フロントエンド開発プロセスを簡素化することができる。

再利用可能要素

Reactでは、コンポーネントを他のアプリケーションに再利用できる。例えば、あるページ用にフォームを開発した場合、それを再度開発することなく、他のページで使用することができる。

さらにReactは、他のコンポーネントの中に小さなコンポーネントを使い続けることで、あまり太いコードを書くことなく複雑な機能を実現できる。Reactの各コンポーネントは独自のステートを持つため、メンテナンスが容易になる。

シンプルなフロントエンド・コンポーネントの実装

Reactは、JavaScriptオブジェクトとHTML構文およびマークアップを組み合わせたものだ。また、JSX(後のセクションで引き続き取り上げる用語)を介してコンポーネントを記述し、既存のHTMLページにReactを追加することも可能だ。 JSXは多機能なプレゼンテーションを簡素化し、システムの機能を制限することなくコードをクリーンに保つ。

ハイパフォーマンス

Virtual DomによってReactはDOMツリーを素早く更新し、特別なメカニズムとアルゴリズムによって過剰な再レンダリングとパフォーマンスへの影響を避けることができる。

検索エンジン最適化

Reactは、パフォーマンスを向上させ、JavaScriptコードの読み込み時間を短縮することで、読み込み時間を改善し、検索エンジン最適化(SEO)への一歩となる。

また、サーバーサイドを通じてSEOを最適化し、検索エンジンがクロールするのが困難で時間のかかるJavaScriptのみのウェブサイトが直面する課題のひとつを解決する。

結語

この記事では、Reactの世界に正式に足を踏み入れ、JavaScriptを通じてHTML DOMをページに生成する方法など、Reactの仕組みを説明する。

Reactチームの継続的な改善により、Reactはより使いやすくなり、Bootstrap、Tailwind CSS、Axios、Redux、Firebaseなど、さまざまなテクノロジーと連携できるようになりました。

VPS上でのReactアプリケーションのデプロイも、Node.jsとNGINXの助けを借りれば簡単です。

ご意見、ご質問がございましたら、お気軽にコメントをお寄せください!

この連載が気に入ったら、より多くの人に見てもらえるよう、遠慮なく「いいね!」やシェアをお願いします!

引用

React 白话运动 06 - React 如何工作

リアクト・ヴァナキュラー・スポーツ・シリーズ

JavaScriptの高度な関数 - React Vernacular キャンペーン 04

JavaScript非同期待ち - React Whitepaper キャンペーン03

JavaScriptのES6オブジェクト - Reactホワイトペーパーキャンペーン02

JavaScript ES6 - Reactホワイトペーパーキャンペーン01

「React 運作原理 – React 白話文運動 05」への1件のフィードバック

投稿メッセージ

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ja日本語