第 1 个 DApp 開発例は、スマートコントラクトを使用してじゃんけんゲームを実現しています。この DApp の機能は次のとおりです。まず、じゃんけんゲームのインタラクティブなページがあり、ユーザーはページ上でグー、チョキ、パーのいずれかのジェスチャーを選択することができます。次に、ユーザーの選択とコンピュータのランダムな選択がスマートコントラクトに送信されて処理されます。スマートコントラクトは、2 つの選択の勝敗結果を自動的に比較し、ページにフィードバックします。ページにはじゃんけんの結果が表示されます。通常のじゃんけんゲームとは異なり、これは分散型の DApp であり、コードも公開されています。この例の開発を通じて、スマートコントラクトを実装し、そのスマートコントラクトとのインタラクションを学ぶことができます。
じゃんけんゲームのページは図 5-36 のようになります。上部はコンピュータとユーザーのじゃんけんの結果であり、下部はユーザーが出すジェスチャーを選択するボタンです。
以下は、このじゃんけんゲーム DApp を実装する具体的な開発プロセスです。主に 3 つの段階があります。まず、Truffle を使用してこのじゃんけんプロジェクトを作成し、次に勝敗結果を自動的に比較するためのスマートコントラクトを開発し、最後にじゃんけんゲームの UI、つまりゲームのユーザーインターフェースを開発します。
ここでは、設定ファイル truffle.js を更新して、ローカルのテスト環境に接続するようにします。更新内容は以下の通りです。
スマートコントラクトの実装#
次に、スマートコントラクトを実装します。このスマートコントラクトの役割は、2 つのじゃんけんオプションを受け取り、勝敗結果を返すことです。具体的なコードは以下の通りです。
注意点として、web3.js では play 関数を直接呼び出して戻り値を取得することはできません。スマートコントラクトの実行にはイーサリアムを消費するトランザクションが必要ですので、web3.js で play 関数を実行した後の戻り値はトランザクションのハッシュ値になります。じゃんけんオプションを取得するには、web3.js は js で GuessResult イベントを監視する必要があります。
スマートコントラクトでは、イベント（event）はイーサリアム仮想マシンが提供する操作ログのツールであり、ユーザーインターフェースに関数呼び出しの結果などを通知するために使用することもできます。上記の play 関数は以下の方法で監視できます。
または、直接コールバックを使用する方法もあります。コードは以下の通りです。
これにより、スマートコントラクトでこのイベントが実行されると、上記の監視が呼び出されます。
スマートコントラクトの実装が完了したら、このコントラクトをコンパイルしてバイナリファイルを生成することができます。図のように。
その後、このバイナリファイルをブロックチェーンにデプロイする必要があります。Truffle を使用してスマートコントラクトをデプロイするには、migrations フォルダにデプロイファイルを作成する必要があります。ここでは、2_deploy_contracts.js というデプロイファイルを作成し、以下の内容を入力します。
これで、truffle deploy コマンドを実行すると、スマートコントラクトがブロックチェーンにデプロイされます。図 5-38 のようになります。
じゃんけんゲームのユーザーインターフェースの実装#
スマートコントラクトが完成したら、次はユーザーインターフェースを実装します。つまり、この DApp ゲームのインタラクティブなページを作成し、最終的に完全な DApp を完成させます。このユーザーインターフェースを実装するには、3 つの JavaScript ライブラリを使用する必要があります。1 つ目は jquery で、これはよく使用される JavaScript ライブラリで、HTML 要素を操作するために使用されます。2 つ目は web3.js で、これは前述した Ethereum が提供する JavaScript の API ラッパーです。3 つ目は truffle-contract.js で、truffle-contract は Ethereum のスマートコントラクトをより良くラップしており、truffle-contract では引数にデフォルト値が自動的に追加され、ログ情報やトランザクションのハッシュ値などが追加されます。web3.js と比較して、truffle-contract を使用するとスマートコントラクトを操作するのがより簡単になります。
まず、この DApp の HTML ページを実装します。ページの機能は、2 つのじゃんけんオプションを表示し、ユーザーが「チョキ」「グー」「パー」を選択できるボタンです。このページの主な HTML コードは以下の通りです。
2. スマートコントラクトの読み込み#
HTML ページが完成したら、次に app.js を作成し、この JavaScript ファイルでスマートコントラクトを読み込み、イベントを監視します。主なコードは以下の通りです。
- スマートコントラクトの呼び出し
最後に、JavaScript ファイルで関数を実装し、ページのじゃんけんオプション、プレイヤーオプション、およびコンピュータのランダムオプションを取得し、これらの 2 つのオプションをスマートコントラクトに送信します。送信時には一定量のトランザクション料金が必要です。実装コードは以下の通りです。
