第 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 で、これは HTML 要素を操作するための一般的な JavaScript ライブラリです。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 を作成し、この js ファイルでスマートコントラクトをロードし、イベントをリッスンします。主なコードは以下の通りです。
- スマートコントラクトの呼び出し
最後に、js ファイルで関数を実装し、ページのじゃんけんオプション、つまりプレイヤーのオプションとコンピュータのランダムなオプションを取得し、これらの 2 つのオプションをスマートコントラクトに送信します。送信時には一定量のトランザクション料金が必要です。実装コードは以下の通りです。
