---
title: まとめ
actions: ['答え合わせ', 'ヒント']
requireLogin: true
material:
  saveZombie: false
  zombieDeck:
    zombie:
      lesson: 6
    hideSliders: true
    answer: 1
---

よくやったな！スマートコントラクトとやり取りする、初めてのWeb3.jsを上手に書けたぞ！

ご褒美として、お主だけの`The Phantom of Web3`ゾンビを与えよう！レベル3.0(Web3.0だからな😉)で、仕上げにキツネのマスク付きだ！右側でチェックするのだ。

## 次のステップ

このレッスンは、あえて基本的なものとした。スマートコントラクトとやりとりするために必要なコアロジックを見せたかったが、コードのWeb3.js部分はかなり繰り返しが多く、完全に実装するのにあまりたくさんの時間を使いたくなかったし、これ以上レッスンをやって新しい概念を紹介するつもりはない。

だからこの実装は基礎的なものにした。以下は、お主が自分で構築を行う場合にフロントエンドにゾンビゲームを完全に実装させるための概念のチェックリストだ:

1. `attack`および`changeName`、`changeDna`関数、そしてERC721の`transfer`、 `ownerOf`、`balanceOf`関数などの実装。これらの関数の実装は、我々がやった他の`send`トランザクションと同じだ。

2. `setKittyContractAddress`や`setLevelUpFee`、さらに`withdraw`を実行できる"管理者ページ"の実装。ここでもフロントエンドに特別なロジックはなく、これらの実装はすでに説明した関数と同じである。`onlyOwner`修飾子があるので、コントラクトをデプロイしたのと同じEthereumアドレスから呼び出したことを確認しなければならないだけだ。

3. アプリに実装したい異なった閲覧ページがいくつかある:

  a. 特定のゾンビの情報を閲覧できる、パーマリンク付きの個別のゾンビのページ。このページはゾンビの外見を表し、その名前やオーナー(ユーザーのプロフィールページへのリンク付きで)、また勝敗のカウントやバトル履歴を表示する。

  b. パーマリンクでユーザーのゾンビ軍団を見ることができるユーザーページ。個別のゾンビをクリックしてページを表示し、またユーザーがMetaMaskにログイン済みでゾンビ軍隊を所有している場合は、そのクリックすることでそのゾンビを攻撃することになる。

  c. 現在のユーザーのゾンビ軍団を表示するホームページ。ユーザーページのバリエーションとして（これは我々がindex.htmlで実装を開始したページだ）。

4. ユーザーがCryptoKittiesを捕食できるようにするUIのメソッド。ホームページ上の各ゾンビに「Feed Me」と表示するボタンをつけ、それをクリックするとユーザーにキティのIDを入力するよう要求するテキストボックスを作ればよい(またはキティのURL。例: <a href="https://www.cryptokitties.co/kitty/578397" target=_blank>https://www.cryptokitties.co/kitty/578397</a>)。これで`feedOnKitty`関数のトリガーを引く。

5. 別のユーザーのゾンビを攻撃するための、ユーザー向けUIのメソッド。

  この実装方法の1つとして、ユーザーが別のユーザーのページを閲覧している時に「このゾンビを攻撃する」ボタンがあるとよい。 ユーザーがボタンをクリックすると、そのユーザーのゾンビ軍団を含むモーダルがポップアップし「どのゾンビで攻撃しますか？」と促す。

  ユーザーのホームページには、各ゾンビに「ゾンビを攻撃する」というボタンをつけることもできる。ユーザーがそれをクリックするとモーダルの検索フィールドが表示されるので、ゾンビのIDを入力して検索する。または「ランダムなゾンビを攻撃する」というオプションで、ランダムな番号を検索する。

  またクールダウン期間が経過していないユーザーのゾンビをグレーアウトして、そのゾンビではまだ攻撃ができないことと、どれくらい待たなければならないかをUIでユーザーに示すこともできる。

6. ユーザーのホームページには、ゾンビごとに名前の変更、DNAの変更、レベルアップ（有料）のオプションもある。ユーザーがまだ十分なレベルでない場合、オプションはグレーアウトされる。

7. 新規ユーザーの場合、最初のゾンビをゾンビ軍団の中に作成するよう促すメッセージを表示し、`createRandomZombie（）`関数を呼び出す必要がある。

8. 最後のチャプターで説明したように、`Attack`イベントと一緒に、ユーザーの`address`を`indexed`プロパティとしてスマートコントラクトに追加したい。こうしてリアルタイム通知をの作成が可能になる　— ユーザーのゾンビ１体が攻撃されたときにポップアップアラートを表示できるので、彼らは攻撃したユーザーやゾンビを閲覧して反撃することができる。

9. 同一データへのリクエストでInfuraを常に使うわけではないから、ある種のフロントエンドキャッシュレイヤーを実装したい。（現在の`displayZombies`の実装は、インターフェースをリフレッシュするたびにゾンビごとに` getZombieDetails`を呼び出すが、実際は軍団に追加された新しいゾンビに対してこの関数を呼び出す必要がある）。

10. リアルタイムのチャットルーム。これでゾンビ軍団を倒す時に、所有者のプレーヤーたちに話しかけられるぞ？Yes、プリーズ！

これはスタートに過ぎない。これはすでに大きなリストだが、我々はもっと多くの機能を思いつくはずだ。

HTML、CSS、JavaScript、ReactやVue.jsのようなフレームワークなど、完全なインターフェイスを作成していくための多くのフロントエンドコードが存在するから、このフロントエンド全体を構築するのはおそらくそれだけで10レッスンのフルコースとなってしまう。だからかっこよく実装をするのはお主の宿題だ。

> 注: スマートコントラクトは分散されていますが、DAppとやりとりするためのこのフロントエンドは、どこかのWebサーバーに完全に集約化されます。
>
> しかし <a href="https://medium.com/loom-network/loom-network-is-live-scalable-ethereum-dapps-coming-soon-to-a-dappchain-near-you-29d26da00880" target=_blank>Loom Network</a>で開発中のSDKを使って、もうすぐ集中化されたウェブサーバーの代わりに専用のDAppチェーンからこういったフロントエンドを提供することができるようになります。こうしてイーサリアムとLoom DAppチェーン間で、あなたのアプリは100%ブロックチェーン上で動くことになります。

## まとめ

これでレッスン６は終了だ。これでスマートコントラクトと、ユーザーがそれとやり取りできるフロントエンドをコーディングするのに必要な全スキルが揃ったぞ！

次のレッスンでは、パズルの最後のピース ー イーサリアムへのスマートコントラクトのデプロイをやっていくからな。

「次のチャプター」をクリックして、ご褒美を申請しよう！
