スマートコントラクトの上にシンプルなDAPPを構築する方法は？

トリュフ、ガナッシュ、メタマスクをセットアップして、Solidity Smart Contractを使用して単純なイーサリアムDAPPを構築およびテストします。

2025/07/10 16:50

開発環境を設定します

スマートコントラクトの上にシンプルなDAPPの構築を開始するには、まず適切な開発環境を確立する必要があります。 Ethereumベースの開発に最も人気のあるツールの1つは、トリュフで、スマートコントラクトをコンパイル、展開、テストするためのフレームワークを提供します。

• node.jsとnpmをインストールして、JavaScriptパッケージを管理します
• npm install -g truffle実行してトリュフスイートをグローバルに取り付ける
• プロジェクトディレクトリでtruffle initを使用して、新しいプロジェクトを足場にする

トリュフがセットアップされると、テスト目的でローカルブロックチェーンも必要になります。 Ganacheは、Ethereum Networkをローカルでシミュレートする一般的に使用されるツールです。 Ganacheをダウンロードしてインストールし、新しいワークスペースを起動して、テストアカウントとプライベートキーを生成します。

さらに、分散型アプリケーションとの相互作用を可能にするイーサリアムウォレットであるMetamaskを使用して、ブラウザをブロックチェーンに接続します。 Seamless Testingのために、Ganacheが提供するLocal NetworkをMetamaskに追加してください。

基本的なスマートコントラクトを書く

環境の準備が整ったので、基本的なスマートコントラクトを書く時が来ました。 Solidityは、Ethereum Smart Contractsの作成に使用される主要言語です。トリュフで生成されたcontractsフォルダー内に新しい.solファイルを作成します。

これがサンプル契約です：

 pragma solidity ^0.8.0;契約simplestorage {





uint storedData; function set(uint x) public { storedData = x; } function get() public view returns (uint) { return storedData; }
 }

この契約は、変数のstoredDataと2つの機能を定義します。1つはその価値を更新し、もう1つはそれを取得するために。 Solidityバージョンが、トリュフの構成で指定されたバージョンと一致していることを確認してください。

契約書を書いた後、 migrationsフォルダーに移行スクリプトを作成します。このスクリプトは、トリュフに契約をブロックチェーンに展開する方法を伝えます。

スマートコントラクトのコンパイルと展開

スマートコントラクトが書かれていると、次のステップはコンパイルして展開することです。ターミナルで、プロジェクトルートに移動して実行します。

• truffle compile - これにより、ソリッドコードがイーサリアム仮想マシン（EVM）によって読み取り可能なbytecodeにコンパイルされます
• truffle migrate - これにより、Ganacheが管理するローカルブロックチェーンに契約を展開します

移行コマンドを実行する前に、Ganacheが実行されていることを確認してください。展開が成功したことを示すトランザクションログが表示されます。

展開後、コンソールに印刷された契約アドレスに注意してください。このアドレスは、フロントエンドアプリケーションをスマートコントラクトに接続するときに後で使用されます。

また、ガナッシュのトランザクションをチェックするか、トリュフコンソールをtruffle consoleで使用し、展開された契約と手動で対話することにより、展開を検証することもできます。

フロントエンドインターフェイスの構築

DAPPのフロントエンドにより、ユーザーはスマートコントラクトと対話できます。 DAPPを構築するための一般的なスタックには、UIおよびWeb3.jsまたはEthers.jsのReact.jsがブロックチェーンインタラクションに含まれます。

Reactアプリを作成することから始めます：

• npx create-react-app my-dapp新しいReactプロジェクトを足場にします
• Project Directoryに移動し、 npm install web3またはnpm install ethersインストールします

次に、スマートコントラクトABI（アプリケーションバイナリインターフェイス）を統合し、アドレスをフロントエンドに統合します。 ABIはコンピレーション中に自動的に生成され、 build/contractsディレクトリにあります。

Reactコンポーネントでは、Web3をインポートし、ユーザーのウォレット（メタマスクなど）への接続をインスタンス化します。

 import Web3 from 'web3'; const web3 = new web3（window.ethereum）;
 window.ethereum.enable（）;

次に、ABIと契約アドレスを使用して、契約インスタンスを作成します。

 const contractInstance = new web3.eth.Contract(abi, contractAddress);

このセットアップを使用すると、ボタンハンドラー内のスマートコントラクトからsetを呼び出しget 、画面に結果を表示することができます。

フロントエンドをスマートコントラクトに接続します

契約インスタンスが作成されたら、ユーザーがブラウザを介して直接対話できる機能を実装できます。

たとえば、 get関数を呼び出すには：

 contractInstance.methods.get().call()
 .then(result => console.log(result));

set関数を使用してトランザクションを送信するには：

 contractInstance.methods.set(42).send({ from: accountAddress })
 .on('transactionHash', hash => console.log(hash));

トランザクションを実行する前に、メタマスクが接続されてロック解除されていることを確認してください。また、ユーザーエクスペリエンスを向上させるためにエラーを優雅に処理します。

UIコンポーネントを更新して、ブロックチェーンに保存されている現在の値を反映し、新しい値を設定するための入力フィールドを許可します。これにより、DAPPの完全に機能的なインターフェイスが作成されます。

npm startでReactアプリを実行し、ガナッシュとブラウザコンソールの変化を観察しながらボタンと対話することにより、フロー全体をテストします。

よくある質問

DAPPと通常のWebアプリの違いは何ですか？

DAPP（分散型アプリケーション）はブロックチェーンネットワークで動作し、バックエンドロジックにスマートコントラクトを使用しますが、通常のWebアプリは集中サーバーに依存しています。 Dappsは、分散型の性質による透明性、不変性、検閲抵抗を提供します。

スマートコントラクトをローカルに展開するときにガス料金を支払う必要がありますか？

いいえ、ガナッシュなどのローカルブロックチェーンを使用する場合、ガス料金はシミュレートされ、実際のエーテルは必要ありません。トランザクションは実際のコストなしで即座に処理されるため、テストに最適です。

DAPPのフロントエンドに反応する以外に、他のフレームワークを使用できますか？

はい、Vue.js、Angular、またはPlain HTML/CSS/JavaScriptなどのフロントエンドフレームワークを使用できます。重要なのは、Web3プロバイダーを統合し、スマートコントラクトと正しく対話することです。

ローカルブロックチェーンの代わりにDAPPをテストネットに展開することは可能ですか？

はい、より広範なテストのために、Rinkeby、Ropsten、Goerliなどのネットワークに展開できます。これらのネットワークに関連する蛇口から入手できるテストエーテルが必要です。トリュフの構成には、正しいネットワーク設定とニーモニックが含まれていることを確認してください。