Ethereum ブロックチェーンを使ってTODO アプリを作ってみる

はじめに

ビットコイン、暗合資産、スマートコントラクト、ブロックチェーンという言葉をよく耳にするようになりました。
ただ、ブロックチェーンという技術を使って具体的に何がどうできるのか、書籍でつかめるイメージに限界を感じていました。そこで簡単なDApp（Decentralized Application）アプリを作るという経験を通して理解を深めたいと思ったことがきっかけで簡単に作れそうなものを探し始めました。
また、その中でアプリを作るときに必要なツールチェーンの使い方にも慣れることも同時に目指しました。

理解作るときに参考にしたページ

Qiitaのこちらの記事を参考にさせていただきました。
理由としては、何か作りたいけど何を作れるのかも自分でイメージできないので、TODOアプリという具体的な対象があったからです。
TODOアプリをDApp で作る、つまりネットワークがあればデータを管理するサーバーが不要なTODOアプリができる、ということですね。
また、コードの提示や解説が丁寧に書かれていたので、基本的にはツールチェーンのセットアップをやって写経をすることで使い方に慣れていくことも達成できる見込めたためです。

作ったもの

環境

Ubuntu 20.04
Node.js 14.16.1
npm 6.14.13

NodeJS, DApp  プラットフォームに関する理解メモ

Node.js：Javascript の実行環境
npm：Node.js のパッケージマネージャー, プロジェクトごとにパッケージを選べる(--save オプションではプロダクト環境でも利用する, --save-dev オプションで開発環境だけで利用するなど分ける）
npx：npm パッケージを実行するコマンド。インストールしてなくても実行はできる。
solidity：コントラクト（＝データ構造とブロックチェーンネットワークでの処理や決まりごとのまとまり）を記述するための言語。Javascript 似ているところがある。
truffle：solidity で書かれたDAppsの開発フレームワーク。コントラクトのコンパイル・デプロイ（＝マイグレーションという）ができる。
ganache-cli：Ethereum ネットワークを模擬した環境をローカルマシン上に作る。
drizzle：Reactを使ってDApp 向けのフロントエンドを開発するフレームワーク。

変更点

drizzle パッケージの仕様が変わっていて import の記述を変える必要がありました。

旧

import { Drizzle, generateStore } from 'drizzle';
import { DrizzleContext } from 'drizzle-react';

新

import { Drizzle, generateStore } from '@drizzle/store';
import { DrizzleContext } from '@drizzle/react-plugin';

また、TODOを追加したとき、done のチェックを変更したときに、データの取得が行われるまでに時間がかかるのか、TypeError: Cannot read property 'status' of undefined が出ていました。原因ははっきりさせることはできませんでしたが、その場的に以下の対応をしました。

旧（AddTodo, TodoTable の getTxStatus）

if (!txHash) return null;

新

if (!txHash) return null;
if (!transactions[txHash]) return null;

つまづいたところ

上記の変更点以外に、アプリを動かすまでにいくつかつまづきました。
・npm パッケージのインストールに成功しなかった（node_module を全部削除して、npm install を実行したらOKだった）
・最初にコントラクトのマイグレーションに成功しておらず、drizzle で作ったアプリが表示されなかった（マイグレーションしてから、yarn start すればOKだった）
・テキストフィールドを挿れたのに、アプリに表示されなかった（写経で（）と｛｝を間違えており、修正すればOKだった）
・その他エラーが出て動作しなかった（大文字・小文字の間違い、単数形・複数形の間違いがありそれを修正すればOKだった）

感想

なんとなくですが具体的なイメージを掴むことができた＆一通りのツール・フレームワークに少し慣れることができました。
ただ、まだまだ入門の入門ぐらいでしかないので、他にも題材を見つけて触ってみようと思います。