はじめに

この記事は、Nuxt.jsを使ってEtherumのブロックチェーン上で動くアプリを開発しようという人向けにはじめの一歩として書きました。EthereumはReactを使って実装する情報は多く存在するのですが、VueやNuxtでの情報はそれほど多くありません。最近使われることの多くなってきたNuxtでEthereumのアプリ開発を行いたいという人の助けになれば幸いです。

前提条件

この記事では、説明の簡略化のために、以下の条件を満たしている環境を前提にしています。

node 10以上がインストールされている(今回は10.16.3を使用)
yarnがインストールされている
GethやGanacheなどを使用し、ローカルでブロックチェーンが動いている状態
- Geth : https://github.com/ethereum/go-ethereum/wiki/geth
- Ganache : https://www.trufflesuite.com/ganache

Nuxtのプロジェクトを作成する

まずは、nuxtのプロジェクトを作りましょう。

$ yarn create nuxt-app nuxt-web3

プロジェクトの初期設定が始まりますが、今回は、細かい設定は全部[enter]連打で初期値で設定しても大丈夫です。

$ yarn create nuxt-app nuxt-web3
yarn create v1.19.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-nuxt-app@2.11.1" with binaries:
      - create-nuxt-app

create-nuxt-app v2.11.1
✨  Generating Nuxt.js project in nuxt-web3
? Project name nuxt-web3
? Project description My best Nuxt.js project
? Author name Aram Mine
? Choose the package manager Yarn
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)

🎉  Successfully created project nuxt-web3

  To get started:

	cd nuxt-web3
	yarn dev

  To build & start for production:

	cd nuxt-web3
	yarn build
	yarn start

✨  Done in 173.50s.

出来上がったらすぐに動作確認してみましょう

$ cd nuxt-web3
$ yarn dev

localhost:3000にブラウザでアクセスして、nuxtの初期画面が表示される確認しましょう。

npmモジュールの追加

Ethereumのアプリを動かすのに必要なweb3.jsをpackge.jsonに追加します。

$ yarn add web3.js

ブロックチェーンと接続する

準備はここまでで、ここから本番のnuxtアプリをブロックチェーンにつないでいく行程に入ります。まずはweb3.jsを使って、ブロックチェーンと接続します。このとき、あらゆるページからブロックチェーンにアクセスすることが想定されるので、pluginとして登録し、appにインスタンスを追加する形式でつなぎ込んでいきます。

pluginを作る

まずは、ブロックチェーンと接続するpluginを作ります。

~/plugins/web3.js

import Web3 from "web3"

export default async function(context, inject) {
    const httpEndpoint = "http://127.0.0.1:7545" //ここを変えればいろんなチェーンに繋げられます
    const web3 = new Web3(new Web3.providers.HttpProvider(httpEndpoint))

    inject('web3',web3)
}

httpEndpoint に接続するブロックチェーンの情報を設定しているので、ここを書き換えればいろいろなチェーンにつなぐことができます。また、開発環境と本番環境で分けたいなどは、環境変数を使って出し分けると使いやすくなります。

また、MetaMaskを使った実装をした経験がある人からすると、見慣れた実装と違い、さっぱりした印象に見えるかもしれません。これは接続するチェーンの指定をコード側で行っているからです。MetaMaskを使う場合は、MetaMaskが接続するチェーンを設定する機能を持ち、その接続設定を引き継いで動作させるために複雑な書き方になっています。もちろん、MetaMaskを使った接続方法をそのまま流用しても動きますのでご安心ください。

pluginをすべてのページで読み込まれるようにする

次に、このpluginがすべてのページで自動的に読み込まれるように、nuxt.config.jsに設定を追加します。pluginsの設定に、1行追加して、さきほどのpluginが読み込まれるようにしましょう。

nuxt.config.js

...
plugins: [
    { src: '~/plugins/web3.js' } //この行を追加してください。
  ],
...

たったこの2つを設定するだけで、ブロックチェーンとの接続はできます。

動作確認

実は、ここまでの実装だけでは動作確認をすることはできません。ブロックチェーンが止まっていたり、そのURLにブロックチェーンがなくても、エラーとならずに問題なく動作してしまいます。その理由は実際にブロックチェーン上の情報を取得するまで、ブロックチェーンと通信することがないためです。そこで、実際にブロックチェーンと通信を発生させるために、ブロックチェーン上の情報を見に行くコードを入れて動作確認してみましょう。

ここでは単純に接続できていることの動作確認するだけなので、console.logでの簡易的な確認という形でお茶を濁しますが、今回の実装であればこれで十分だと思います。

pages/index.vue

...
export default {
  components: {
    Logo
  },
  mounted() {
    console.log('Current Block Number')
    this.$web3.eth.getBlockNumber().then(console.log)
  }
}
...

eth.getBlockNumber()はその時点のBlockHeight すなわち承認済みの最新のブロックの番号を返してくれるメソッドです。よってこの番号を取得するために実際にブロックチェーンへのアクセスが発生するため、ブロックチェーンと正しく接続されていないと、エラーが発生します。

では、実際に動かしてみましょう。

$ yarn dev

ブラウザのデバッグツールで、console.logを見てみましょう。

Current Block Number
516

などと表示されていればOKです。

POST http://127.0.0.1:7545/ net::ERR_CONNECTION_REFUSED
Uncaught (in promise) Error: Invalid JSON RPC response: ""
    at Object.InvalidResponse (errors.js?5f2e:42)
    at XMLHttpRequest.request.onreadystatechange (index.js?8148:98)

などと表示された場合は、ブロックチェーンとうまく接続できていません。ブロックチェーンが止まっているかもしれないですし、またはアクセス周りの設定でlocalhost:3000からの参照を禁止しているかもしれません。チェーン側の設定を見直してみると良いでしょう。

まとめ

NuxtでEthereum、web3を使ったアプリケーション開発は比較的容易に始められます。Nuxtを使って、ブロックチェーンを活用したアプリを開発してみようと思う方が少しでも増えてくれれば幸いです。

ソースコード：https://github.com/gaiax/nuxt-web3