React (またはさらに言えば他のフレームワーク) におけるビルド プロセスとは何ですか?

[ テクノロジー ]: ReactJS – 記事 #1

---

フレームワークはエンジニアの開発を簡素化します。これは、ReactJS の舞台裏の機能を簡単に説明する私の試みです。

---

お話の時間

私は ReactJS から始めました。はい、本当にそうです。データサイエンスに飛び込む前に、UI / UX デザインとフロントエンド開発に情熱を注いでいた私が 2 年遅れるのは夢のようです。 (私は 2 年前と同じくらい情熱を持っています。)

私は今、ある会社（自社の文化が会社の文化というよりもスタートアップの文化に近いため、自らをスタートアップと呼んでいます）でインターンをしていますが、初日の今日は文字通り何もすることがありませんでした。私のTL (チームリーダー) は、会議に忙しいためオフィスに来ませんでした。

私は彼を私の手からタイムスリップさせてしまったのでしょうか。絶対に違います。
私のデータ分析スキルを試すタスクやプロジェクトをもらえる可能性はかなり低かったです。そこで私は自らの手を汚して開発することにしました。 ReactJS を始めるのに今が最適な時期かもしれないと感じました。

---

リアクトとは何ですか?

React は動詞です (ダジャレです)。しかし、開発テクノロジーの文脈では、「Web およびネイティブ ユーザー インターフェイス用のライブラリ」 が ReactJS の公式 Web サイトで主張されています。

開発エコシステムに慣れている人なら、他の 2 つの競合他社、つまり ReactJS の兄弟である Angular と VueJS について聞いたことがあるはずです。

ここでは、最も人気のある 3 つのフロントエンド テクノロジーを簡単に比較します。

Core Concept	Library focused on UI	Full-fledged framework	Progressive framework
Data Binding	One-way data flow	Two-way data binding	Two-way data binding (optional)
Component Structure	Custom components	Directives and components	Components
Learning Curve	Moderate	Steep	Gentle
Performance	High (Virtual DOM)	Can be slower due to two-way data binding	High (Optimized rendering)
Scalability	Excellent, suitable for large-scale apps	Strong support for large-scale enterprise apps	Good scalability, but might require additional libraries for complex projects
Community and Ecosystem	Largest community, rich ecosystem	Large community, strong ecosystem	Growing community, good ecosystem
Flexibility	High, can be used with other libraries/frameworks	Less flexible due to rigid structure	Flexible, can be used incrementally

コアコンセプト UI に重点を置いたライブラリ 本格的なフレームワーク プログレッシブフレームワーク データ バインディング 一方向のデータ フロー 双方向データ バインディング 双方向データ バインディング (オプション) コンポーネントの構造 カスタム コンポーネント ディレクティブとコンポーネント コンポーネント 学習曲線 中程度 急な 優しい パフォーマンス 高 (仮想 DOM) 双方向のデータ バインディングにより速度が遅くなる可能性があります 高 (最適化されたレンダリング) スケーラビリティ 優れており、大規模なアプリに適しています 大規模なエンタープライズ アプリの強力なサポート 拡張性は優れていますが、複雑なプロジェクトの場合は追加のライブラリが必要になる場合があります コミュニティとエコシステム 最大のコミュニティ、豊かなエコシステム 大規模なコミュニティ、強力なエコシステム 成長するコミュニティ、良好なエコシステム 柔軟性 高、他のライブラリ/フレームワークと併用可能 構造が硬いため柔軟性が低い 柔軟性があり、段階的に使用できます テーブル>

---

プレーンな HTML と JS があるのに、なぜ ReactJS を使用する必要があるのでしょうか?

プレーン HTML と JS のデメリット。

次のような問題が発生します:

大規模なアプリケーションの保守の困難:

• プレーン HTML と JS には、コードを編成するための構造化されたアプローチが欠けています。

• 複雑なアプリケーションでは、イベント リスナーとスクリプト ファイル内のロジックと UI 操作が複雑に絡み合う可能性があります。

• このため、アプリケーションが成長するにつれて、コードの理解、変更、デバッグが困難になります。

非効率的な DOM 操作:

• JS で DOM を直接操作するのは非効率的になる可能性があります。

• マイナーな UI 更新であっても、状態が変化するたびに HTML 構造の完全な再レンダリングがトリガーされる可能性があります。

• アプリケーションの複雑さが増すと、パフォーマンスのボトルネックが発生する可能性があります。

限定的な再利用性:

• プレーンな HTML と JS を使用して再利用可能な UI コンポーネントを構築するのは面倒な場合があります。

• アプリケーションのさまざまな部分にコード スニペットをコピーして貼り付けることになる可能性があります。

• これにより、一貫性を維持し、変更を効率的に実装することが困難になります。

複雑な状態管理:

• プレーンな HTML や JS では、アプリケーションの状態 (UI の動作を制御するデータ) の管理が困難になります。

• データの変更とそれに対応する UI の更新を追跡することは、特に複雑なデータ フローの場合、煩雑になり、エラーが発生しやすくなる可能性があります。

---

ReactJS がどのように役立つか。

ReactJS は、コンポーネントベースのアーキテクチャ、効率的な更新のための仮想 DOM、複雑な UI とアプリケーションの状態を管理するための豊富なエコシステムを提供することで、これらの制限に対処します。

保守性の向上:

• React のコンポーネントベースのアーキテクチャと宣言型アプローチにより、特に大規模なアプリケーションにおいて、よりクリーンで保守しやすいコードベースが実現します。

強化されたパフォーマンス:

• React の仮想 DOM と効率的なレンダリング メカニズムは、複雑な Web アプリケーションであっても、よりスムーズで高速なユーザー エクスペリエンスに貢献します。

コードの再利用性:

• React のコンポーネント モデルはコードの再利用性を促進し、アプリケーション全体で簡単に共有したり組み合わせたりできるモジュール式 UI コンポーネントを構築できます。

---

違いが違いを生みます。

最初のコンポーネントを作成したとき、「これは一体何だろう?」と自問しました。 HTML ですか?