検索
ホームページウェブフロントエンドフロントエンドQ&AWeb3.0 が来ていますが、フロントエンドフレンドリーですか?

Web3.0 が来ていますが、フロントエンドフレンドリーですか?

Mar 15, 2023 pm 08:09 PM
フロントエンドweb3フロントエンドフレームワーク

最近、web3.0を求める声が本当に大きくなり、ますますクレイジーになってきています。フロントエンドにはどのようなテクノロジーが必要ですか?フロントエンドフレンドリーですか?次の記事でそれについて説明しますので、お役に立てれば幸いです。

Web3.0 が来ていますが、フロントエンドフレンドリーですか?

まず、web3.0 がどのように派生したのかをご紹介します。

インターネット

最初にウェブとは何かについて話しましょう. 1989 年、CERN (欧州素粒子物理学研究所) のティム バーナーズ リー率いる技術グループは、インターネット用の新しいプロトコルとそのプロトコルを使用したドキュメント システムを提出しました。 World Wide Web は WWW (World Wide Web) と呼ばれ、現在では「インターネット」として知られています。その目的は、世界中の科学者がインターネットを使用して研究文書を交換できるようにすることです。使用するテクノロジーは主に HTML、URI、URL、HTTP などで、Web コンテンツを静的に表示できます。それが私たちの

Web1.0

一般に、Web1.0 とは 1990 年代から 21 世紀初頭のインターネットを指します。端的に言えば、ブログ、掲示板、そして AOL や CompuServe などの初期のポータルから構成されるインターネットであり、中国で有名な Sina、Sohu、NetEase などの Web サイトは当時の製品です。 Web1.0 では、静的な Web ページは基本的に受動的に読み取られ、Web ページ構築プロトコルには HTTP や FTP などが使用されます。 Web1.0 の場合、Web ページのコンテンツは雑誌と同様に読み取り専用で静的であり、表示することはできますが、変更したり操作したりすることはできません。 Web1.0 では、ユーザーは情報 (Web ページ) の消費者にすぎず、情報 (Web ページ) と対話することはできません。 Web1.0 では、平均帯域幅 50k のダイヤルアップ インターネット アクセスも使用します。

一般に、Web1.0 は読み取り専用であり、分散化されています。

Web2.0

そしてWeb2.0が台頭してきたのはおそらく2005年頃でしょう。 Web2.0 の一般的な意味は、ユーザーが Web ページ上で独自のコンテンツを作成および公開でき、インターネットに積極的に参加でき、単に Web ページを受動的に読むだけではなくなることです。最終的な資金と Web ページ全体の管理は依然として Web ページの所有者によって占められています。 Facebook、Twitter、YouTube などのソーシャル メディアもこの時代の産物です。もちろん、このようにユーザー生成コンテンツが急増すると、自然独占も生まれ、次のようないくつかの問題が発生します: 1. ユーザー データは集中化される; 2. ユーザー データは移植できない; 3. ユーザー データは販売される

つまり、Web2.0 は読み取りと書き込みの共存です。

Web3.0

Web3.0 は、電力とデータを統合する分散型ネットワークです。 1 つの企業に独占されるのではなく、ユーザーの手に集中化されます。分散型ブロックチェーン技術を使用してデータをネットワークに配信します。 Web3.0 は何年も前から使われている用語ですが、一般的になり始めたのはここ 1 年です。 Web3 ではネットワークが分散化されているため、ネットワークを制御する権限はなく、ネットワーク上に構築された分散型アプリケーション (dapps) はオープンです。分散型ネットワークのオープンな性質は、どの当事者もデータを制御したりアクセスを制限したりできないことを意味します。中央企業の許可なしに、誰でもさまざまな dapp を構築して接続できます。

Web3.0 の主な機能は次のとおりです。

  • セマンティック Web - Web3.0 の鍵であり、マシンによるデータ処理を容易にします。

  • AI - AI は、Web3.0 テクノロジーの人気に影響を与える主な要素の 1 つです。ユーザーのニーズを満たすために、大量の Web データを通じてマシンがより賢くなることを可能にします。

  • 3D グラフィックス - Web3.0 は、2D よりも現実的な 3 次元のオンライン世界を提供する 3 次元テクノロジーにより、従来のインターネットを超えました。

  • ユビキティ – 同時にどこにでも存在するという概念。モバイル デバイスの普及により、多くの人がいつでもどこでもインターネットに簡単にアクセスできるようになりました。

  • オープン性と相互運用性。アプリケーション プログラミング インターフェイス、データ形式、プロトコル、およびデバイスとプラットフォーム間の相互運用性に関するオープン性を指します。

  • グローバル データ リポジトリ、プログラムやネットワーク全体で情報にアクセスする機能。

つまり、Web3.0 はインターネットの読み取り、書き込み、所有に関するすべてです。

はじめに

私たちフロントエンド開発者にとって、どのようなテクノロジーを習得し、何を知っておくべきでしょうか?簡単に言えば、Web3 開発者は、ブロックチェーン上に存在し、ブロックチェーンと対話する分散型フルスタック アプリケーションを作成します。以下で簡単に説明しましょう。

まず専門用語が何であるかを理解しましょう:

  • Web3: これは、イーサリアム ブロックチェーンとスマート コントラクト Smart Contract の間の接続です。
  • イーサリアム イーサリアム: ユーザーがスマート コントラクトを作成することでネットワークと対話できるようにする分散型オープンソース ブロックチェーン。そのネイティブ暗号通貨はイーサリアムです。イーサリアムは、時価総額の点でビットコインに次いで2番目に価値のある仮想通貨です。 2013 年にヴィタリック ブテリンによって作成されました。
  • スマート コントラクト スマート コントラクト: ブロックチェーン上に保存され、所定の条件が満たされたときに実行されるコンピューター プログラムです。スマート コントラクトは Solidity 言語で書かれています。
  • 分散型: データのステータスは中央エンティティ、プラットフォーム プラットフォーム、または個人によって収集されません。
  • ブロックチェーン: ブロックチェーン ネットワークは、情報が複数の共有ネットワークに保存されるポイントツーポイント接続です。デバイス間ではハッキングはほぼ不可能です。ネットワーク上に保存された情報の変更を困難または不可能にする方法で情報を記録するシステムです。
  • Solidity: スマート コントラクトを作成するためのオブジェクト指向プログラミング言語。これは、さまざまなブロックチェーン プラットフォーム、特にイーサリアムにスマート コントラクトを実装するために使用されます。 Solidity の構文は JavaScript に似ています。 Solidity を理解するには、JavaScript などのプログラミング言語の知識があることが最適です。 Solidity に直接ジャンプするのは悪い考えです
  • Dapp: Decentralized App の略です。これらは、分散型ネットワークまたはブロックチェーン上でバックエンド コード (主に Solidity で記述されたスマート コントラクト) を実行するアプリケーションです。 Dapps は、react、vue、Angular などのフロントエンド フレームワークを使用して構築できます。
  • ビットコイン ビットコイン: 世界で初めて広く使用された暗号通貨。
  • 暗号: 暗号通貨、暗号通貨、分散型デジタル通貨とも呼ばれます。
  • NFT: Non-Fungible Token、チェーン上に記録された所有権を持つデジタル資産。
  • DAO: 分散型自律組織、分散型自律組織。
  • メタバース: 技術的手段によって作成された仮想世界の概念。
  • DeFi 分散型金融: 分散型金融システム。
  • トークントークン: 暗号通貨やNFTなどのデジタル資産の総称として理解できます。
  • GameFi: ゲーム DeFi、中国版ブロックチェーン ゲーム、ゲーム内の金融システムは、暗号通貨と NFT を通じて現実にマッピングできます。

上記を紹介した後、開発者向けのブロックチェーンの分類について話しましょう。主にコアブロックチェーン開発(コアブロックチェーンエンジニアはブロックチェーンシステムのアーキテクチャとセキュリティプロトコルを担当します)とブロックチェーンソフトウェア開発(これらのブロックチェーン開発者はコアブロックチェーン開発者が提供する設計アーキテクチャを使用してDappsを作成します)。

開始

それでは、実際的なことに取り掛かりましょう。フロントエンド開発では、ブロックチェーンに常駐し、ブロックチェーンと対話する分散型アプリケーションを開発したいと考えています。 web3.js ライブラリと Ethers.js ライブラリ。

web3.js

web3.js は JavaScript API ライブラリです。 Ethereum 上で DApp を実行するには、web3.js ライブラリによって提供される web3 オブジェクトを使用できます。 web3.js は RPC 呼び出しを通じてローカル ノードと通信し、RPC レイヤーを公開する任意の Ethereum ノードで使用できます。 web3 には、eth オブジェクト - web3.eth (特に Ethereum ブロックチェーンとの対話用) と shh オブジェクト - web3.shh (Whisper との対話用) が含まれています。

#Add web3

web3 をプロジェクトに導入することは、既存の参照メソッドと基本的に同じです

    npm: npm install web3
  • bower: bower install web3
  • metor: meteor add ethereum:web3
  • vanilla: dist./web3.min.js

#Use

次に、必要がありますweb3 のインスタンスを作成し、プロバイダーを設定します。 Mist 使用時の組み込みプロバイダーなど、既存のプロバイダーを上書きしないようにするには、最初に web3 インスタンスが既に存在するかどうかを確認する必要があります。

if (!web3) {
  web3 = new Web3(web3.currentProvider);
} else {
  web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}

この API はローカルと対話するように設計されているため、 RPC ノード、すべて この関数はデフォルトで同期 HTTP リクエストを使用します。非同期リクエストを行う場合。ほとんどの関数では、非同期をサポートするためにパラメータ リストに続いてオプションのコールバック関数を渡すことができます。

web3.eth.getBlock(48, function(error, result){
  if(!error)
      console.log(result)
  else
      console.error(error);
})

API の特定のディレクトリは、

クリックして Ethers を表示できます。 js

イーサリアム ブロックチェーンとそのエコシステム用の小さいながらも完全な JavaScript API ライブラリを提供します。これはもともと ethers.io で使用されていましたが、現在はより一般的なライブラリに拡張されています。機能は基本的にweb3.jsと似ています。

機能は次のとおりです:
  • 安全かつ信頼できる秘密キーをクライアント上に保持します
  • インポートおよびエクスポートされた JSON ウォレット ファイル (Geth、Parity、クラウドセール) をサポート
  • 任意のコントラクト ABI JavaScript メタクラスから作成ABIv2 や人間が判読できる ABI
  • などのオブジェクトは、JSON-RPC、INFURA、Etherscan、または MetaMask を介した Ethereum ノードへの接続をサポートします。
  • ライブラリは非常に小さいです (圧縮時約 88kb、非圧縮時 284kb)

ツール

もちろん、上記に加えて、私たちもそれを使用します 開発を改善するための多くのツール

    #Truffle: プロジェクトのビルド依存関係として使用される、イーサリアム仮想マシンを使用してスマート コントラクトをコンパイルおよびテストするための開発環境を提供します
  • Remix IDE: スマート コントラクトの作成と使用に最適な環境。これを使用して、ブラウザから直接スマート コントラクトを作成、変更、実行できます。どちらかというとエディタに似ています
  • MetaMask: ブラウザからイーサリアム ブロックチェーン ネットワークに接続できるようにする Chrome 拡張機能
  • Ganache: ローカル ブロックチェーン環境を提供しますスマート コントラクトをテストするには

Build

フルスタックを構築したい

Dapp プロジェクトにユーザー インターフェイスを追加したい場合は、react.js、vue .js または angular.js は、ethers.js または web3.js を使用してブロックチェーン ネットワークと簡単に統合できるため、優れた JavaScript フロントエンド フレームワークです。コードを記述せずに完全な Dapp を作成できるさまざまなプラットフォームがあります。BunzDapp builderAtra ioBubble io

結論

一般的に、Web3.0 はテクノロジーではなくコンセプトです。私たちフロントエンド開発者はパニックになる必要はありません。テクノロジーがどのように発展しても、私たちは常にフロントエンドを使用します。私たちは、react.js、vue.js、または angular.js を使用して、独自に開発した Dapp アプリケーション用の独自のプラットフォームを構築することも、nodejs を使用して、イーサリアムが提供するツールキットである web3.js を使用してプラットフォームを完成させることもできます。コントラクトのコンパイル、リリース、およびコントラクト メソッドの呼び出し。

(学習ビデオ共有:

Web フロントエンドの紹介基本プログラミング ビデオ)

以上がWeb3.0 が来ていますが、フロントエンドフレンドリーですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事は掘金社区で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
Reactを使用したフロントエンド開発:利点とテクニックReactを使用したフロントエンド開発:利点とテクニックApr 17, 2025 am 12:25 AM

Reactの利点は、その柔軟性と効率性であり、これは以下に反映されています。1)コンポーネントベースの設計により、コードの再利用性が向上します。 2)仮想DOMテクノロジーは、特に大量のデータ更新を処理する場合、パフォーマンスを最適化します。 3)リッチエコシステムは、多数のサードパーティライブラリとツールを提供します。 Reactがどのように機能し、例を使用するかを理解することにより、そのコアコンセプトとベストプラクティスをマスターして、効率的で保守可能なユーザーインターフェイスを構築できます。

React vs.他のフレームワーク:比較と対照オプションReact vs.他のフレームワーク:比較と対照オプションApr 17, 2025 am 12:23 AM

Reactは、大規模で複雑なアプリケーションに適したユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1. Reactのコアはコンポーネント化と仮想DOMであり、UIレンダリングパフォーマンスを向上させます。 2。Vueと比較して、Reactはより柔軟性がありますが、大規模なプロジェクトに適した急な学習曲線があります。 3。Angularと比較して、Reactはより軽く、コミュニティの生態学に依存し、柔軟性を必要とするプロジェクトに適しています。

HTMLでのDemyStifice React:すべてがどのように機能するかHTMLでのDemyStifice React:すべてがどのように機能するかApr 17, 2025 am 12:21 AM

Reactは、仮想Domを介してHTMLで動作します。 1)ReactはJSX構文を使用してHTMLのような構造を書きます。 2)仮想DOM管理UIアップデート、拡散アルゴリズムによる効率的なレンダリング。 3)Reactdom.render()を使用して、コンポーネントを実際のDOMにレンダリングします。 4)最適化とベストプラクティスには、React.MEMOとコンポーネントの分割を使用して、パフォーマンスと保守性を向上させることが含まれます。

対応中の反応:実際のアプリケーションの例対応中の反応:実際のアプリケーションの例Apr 17, 2025 am 12:20 AM

Reactは、eコマース、ソーシャルメディア、データの視覚化で広く使用されています。 1)電子商取引プラットフォームは、Reactを使用してショッピングカートコンポーネントを構築し、UseStateを使用して状態を管理し、イベントを処理するためにオンクリックし、機能をマップしてリストをレンダリングします。 2)ソーシャルメディアアプリケーションは、Effectを使用してAPIと対話し、動的なコンテンツを表示します。 3)データの視覚化は、React-ChartJS-2ライブラリを使用してチャートをレンダリングし、コンポーネント設計はアプリケーションを簡単に埋め込むことができます。

Reactを使用したフロントエンドアーキテクチャ:ベストプラクティスReactを使用したフロントエンドアーキテクチャ:ベストプラクティスApr 17, 2025 am 12:10 AM

Reactのベストプラクティスには、フロントエンドアーキテクチャが含まれます。1。コンポーネントの設計と再利用:設計単一の責任、理解しやすく、コンポーネントをテストして高い再利用を実現します。 2。状態管理:UseState、usereducer、contextapi、またはredux/mobxを使用して、過度の複雑さを避けるために状態を管理します。 3。パフォーマンスの最適化:raceme.memo、usecallback、usememo、その他の方法を介してパフォーマンスを最適化して、バランスポイントを見つけます。 4。コード組織とモジュール性:機能モジュールに従ってコードを整理して、管理可能性と保守性を向上させます。 5。テストと品質保証:コードの品質と信頼性を確保するためのJestとReactTestingLibraryを使用したテスト

HTML内の反応:動的WebページのJavaScriptを統合しますHTML内の反応:動的WebページのJavaScriptを統合しますApr 16, 2025 am 12:06 AM

HTMLにReactを統合するには、次の手順に従ってください。1。HTMLファイルにReactとReactdomを導入します。 2。反応成分を定義します。 3. ReactDomを使用してコンポーネントをHTML要素にレンダリングします。これらの手順を通じて、静的HTMLページは動的でインタラクティブな体験に変換できます。

Reactの利点:パフォーマンス、再利用性などReactの利点:パフォーマンス、再利用性などApr 15, 2025 am 12:05 AM

Reactの人気には、パフォーマンスの最適化、コンポーネントの再利用、豊富なエコシステムが含まれます。 1.パフォーマンスの最適化は、仮想DOMおよび拡散メカニズムを介して効率的な更新を実現します。 2。コンポーネントの再利用は、再利用可能なコンポーネントによって重複コードを削減します。 3.リッチなエコシステムと一方向のデータフローは、開発エクスペリエンスを向上させます。

反応:動的でインタラクティブなユーザーインターフェイスを作成します反応:動的でインタラクティブなユーザーインターフェイスを作成しますApr 14, 2025 am 12:08 AM

Reactは、動的でインタラクティブなユーザーインターフェイスを構築するための選択ツールです。 1)コンポーネント化とJSXは、UIを分割して簡単に再利用します。 2)国家管理は、UIの更新をトリガーするためにUseStateフックを通じて実装されます。 3)イベント処理メカニズムは、ユーザーの相互作用に応答し、ユーザーエクスペリエンスを向上させます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール