はじめに
2018年末くらいにブロックチェーンの勉強を何となく始めて、何となくTruffleのペットショップチュートリアルをやり、次は何かを作ろうかなと思いながら勉強していたのですが、調べれば調べるほどよく分からない理論やツールが出てきたので、勉強しながら作り、作りながら勉強しようと決めました。
この180日で180個ウェブサイトを作るプロジェクトに感化され、いっぱい作ろうと思ったものの、1日1個のDAppsを半年作るのは時間的にも知識的にも厳しかったので、とりあえず10個10週間で作ろうと決めて始めてみました。（結果的にInfuraのプロジェクト作成可能数の限度が10個だったので丁度よかったです。）
こちらにプロジェクトまとめたページを作りました。（herokuの無料枠で作ったので繋がるまでちょっと時間かかります。）
プログラミング自体もほぼほぼ初心者なので、完成したものはUI、UX的にどうなのとかバグがあるとかは全然あると思いますが生暖かい目で見ていただけると嬉しいです。
作ったDApps
作成したものをざっと紹介し、学んだこと、できなかったこと、改善点等をざっと書きたいと思います。全てRopstenテストネットにデプロイしたのでMetamaskでRopstenネットワークを選べば一応全て遊べます。
ルーレットアプリ
etherを賭けてルーレットを回し、当たったらetherがもらえます。
学んだこと
- HTML5 Canvas機能
- canvasを指定して作って、そこに色々描画する機能。座標で色々絵を書く。
- rotateで座標系を回転させる時は中心が左上になるので、Canvas中心を軸に回転させたい時は、Canvasをずらして、回転させて元に戻す必要がある。
- ルーレットを回転させるには座標系を少しずらして描画を繰り返す。
- etherを送りたい時にはetherのやりとりが発生するファンクションにpayableをつけるだけ。
分からなかったこと、改善点
- ルーレット上の数字が全て中心に対して横向きになっているので、外側を向くように設定すべき。ただ、座標の設定がとても面倒くさそう。（算数力が足りない）
小括
正直ルーレット自体を画像で取得する方が見た目的にも良かった。（ルーレットの止まった場所と実際に矢印が示している数字を合わせるのに算数的な意味で2日くらいかかったし、本当は数字は連番ではないので。ただフリーの画像を探したけど見つからなかった。。。）
DApps的な意味での学びはあまりなかった。
ギャラリー
ERC1155を使った写真（NFT）の売買ができる。（写真者初期登録の最初の3枚のみ）。アプリ内ではartというfungible tokenで画像をやりとりしている。
学んだこと
- ERC1155
- fungible tokenとnon-fungible tokenを合わせた規格（まだ色々と議論中？）
- NFTだけどERC721で作るNFTとは違って同じNFTをいくつも発行できる。
- ただし、そのNFTそれぞれにはidが振っているので厳密にはそれぞれ違うtoken（FFで例えるとポーションはNFTで10個とか買えるが、内部ではそれぞれのポーションにidが振ってある。）
- truffleではデフォルトでコンパイラのバージョンが現状0.5.0に固定されているのでそれ以降のバージョンを使いたいときはtruffle-configでsolcのバージョンを指定する必要がある
- external関数を継承したコントラクトのファンクションから呼び出すにはthisを使うと呼び出せる。（thisはデプロイしたそのコントラクトアドレス）
分からなかったこと、改善点
- 画像を誰でも登録して、売買できる様にしたかった。
- ERC1155内の参照したい変数がprivateとかで外から見れなかったので、ERC1155の中身自体をいじってしまったので、継承した上で何かしら別の変数を作るべきだった。
小括
- 無料の範囲で画像のアップロードをする方法がいまいち分からなかったけど、今考えると画像をアップしてもらって、そのURLだけユーザーが入力する形にすれば一応簡単にできたかも。（この際AWSとか勉強しても良かったかな。。。でも無料じゃないっぽいんだよなぁ）
計算ゲーム
ただ簡単な計算をしてERC20トークンを稼ぐゲーム
学んだこと
- ERC20の基本的な実装方法
分からなかったこと、改善点
- もっと色々なERC20のファンクションを使えば良かった。（Cappedとか）
小括
この週はあまり時間がなくて大したことはできなかった。
学位の管理アプリ
教育機関が学位（学士とか修士）の卒業証明をブロックチェーン上に登録できる様にする。
学んだこと
- React
- React Truffle Boxの使い方
- 色々なものをstateで管理する。（ユーザー入力や非同期で取得した情報など）
- なので、stateにデプロイしたコントラクトのインスタンスとか入れれば良い。
- JSXという記法でhtmlっぽくかけるけどクラス名はclassNameを使うとか、複数のクラス名を入れるのは少しだけ工夫が必要だったりちょっと慣れが必要
- propsは変えてはいけないもので、stateは変えてもいいもの。（正しいかはいまいち分からない）
- bilerplateはテンプレートみたいなもの。
- Github pagesへのReactアプリのアップロード方法
分からなかったこと、改善点
- おそらくDOMをしっかり理解出来てないからか、Reactのメリットがいまいち分からなかった。
- 慣れてないだけからか、自分のコード追うのが辛い。多分もっとうまくリファクタリング出来そうな気がする。
小括
React全く触ったことなかったので、チュートリアルやって、ドットインストールでTodoアプリを作って、何となく使い方は理解したけど、もう少し複雑なことをやらないとReactのパワーが分からなそう。
リバーシアプリ
リバーシして勝ったらetherを貰える。
学んだこと
- オセロの実装は以外に大変（何も見ないで挑戦してみたものの不慣れなReactも合間ってデバッグに無駄に時間がかかった。）
- drizzle-reactの実装
分からなかったこと、改善点
- オセロは置けるところがなかったらパスされる処理を書いてないので、追加したい。
- Plasmaを使って、オセロ自体はサイドチェーンでサクサクやりたかったが、Plasmaの実装がうまくいかなかった。（Loomのサンプルとか試したけどうまくいかなかった）
- Reduxが何なのかいまいち分からない中でdrizzleが何をしてるのかよく分からなかった。
小括
1個オセロを置くごとにトランザクション待ちになるし、gasも払う必要があるので基本的にゲームとしては成り立ってない。
自分がゲームマスターとしてゲーム始めてるので誰かがゲームにジョインしたらそれが終わるまで、他の人は何も出来ない。
Plasmaは何とか実装したかった。。。
Script言語のクイズ
Script言語をクイズ形式で勉強するアプリ
学んだこと
- Script言語とは（LIFOのチューリング不完全な言語）
- BitcoinのP2PKHトランザクション等のScript言語での処理
- HTMLのondragoverとかondropの使い方
分からなかったこと、改善点
- Script言語のADDに関して足し算の順番を入れ替えると本来正解でも不正解になってしまうため、そこは要修正（if文か何か入れるだけ）
小括
Scriptへの理解が深まったが、今回使ってない色々なOPコードがあるので時間があるときに勉強したい。（トランザクションで実際に使われるているのかは知らないが。）
ICOコントラクトその1
Crowdsaleを使ってICOを行うアプリ。1etherで1オリジナルトークンを買える。
学んだこと
- Crowdsaleの基本的な実装方法
- openzepplein-test-helpersの使い方
- chaiなどからメソッドを引っ張ってきているので、openzepplein-test-helpersに入ってなかったらchaiから直接requireが必要
分からなかったこと、改善点
- テストの網羅性が分からなかったので、solidity-coverageでカバー率を確認しようとしたが上手く使えなかった。（エラーが最後まで消すことが出来なかった。）
小括
本当は次のその2のところまでやりたかったが、エラーが直せず、一番シンプルなCrowdsaleで実装した。
ICOコントラクトその2
Crowdsaleを使ってICOを行うアプリ。1etherで1オリジナルトークンを買える。その1にプラスして、期間限定（トークンを購入できる期間が限られる）、目標金額に達さなければ返金。最大金額の設定（ICOで売るトークン量のMaxを設定）
学んだこと
- mocha contextの使い方
- chaiの使い方（should.be.to, expect等）
- contextはdescribeのエイリアス
分からなかったこと、改善点
- テストのリファクタリングの方法
- ファイルを複数に分けたりヘルパー作ったり、ベストプラクティスがいまいちまだ分からない。
小括
AliceのICOプロジェクトを参考にしたが、各ツールのバージョンが違うため、理解するのに少し時間がかかった。実際に使われているコントラクトを読むのは非常に勉強になった。（理解できなかったとこももちろんあるけども。）
ログインコントラクト
ブロックチェーン上に登録したパスワードの照会アプリ。IDはMetamaskのアドレス、パスワードリセットは最初に登録した友達からリセットコードを聞かないといけない。
学んだこと
- 使っているweb3.jsのバージョンが0.20だった。。。（npmインストールされてるものが1.0.0だから1.0.0だと思ってた。）
分からなかったこと、改善点
- web3.js 1.0.0で一から環境を作ろうとしたがエラーとか出たり、npmの使い方がいまいち分からなかった。
- develop環境用のサーバー立てたりする方法がいまいち分からなかった。
小括
今までのアプリはTruffle boxを使っていたので、コントラクトインスタンスの読み込み等をあまり考えてなかった。一から自分で実装しようとしたら上手くいかなかったので、基本的なweb3の使い方とnpm、node.jsの使い方の勉強が必要。というか自分が使ってるweb3.jsのバージョンが古いことに気づかなかったのは恥ずかしい。。
ログインの度にガス代かかるのはどうかと思うけど、とりあえず機能としてはやりたいことはできた。
3行ラブレター
3行で書くラブレター。メインネットにデプロイしたい（Etherをまず買わないといけないので来月あたりにデプロイ予定）。Ropstenネットワークにはデプロイ済み
学んだこと
- firebaseで静的サイトを公開する方法
- Bootstrapにモーダル機能があること（便利！）
- 1つのファンクションでたくさんの変数を使うとEVMのstack数の限界に達する。（16個まで？）
分からなかったこと、改善点
- 元々メインネットであげようと思ってたので、メインネットへのデプロイ方法が分からない。（調べれば出てきたけど、実際やらないとエラーとか出てくる可能性があるので未知数）
小括
クレカで簡単にether買えるかなと思ってたら、本人認証必要だったりするのでちょっと後でデプロイすることにする。
総括
元々1週間に1個は作ろう！って始めたくせに最後の方はエラー直すのに2日とかかかって、2週間近く1つのアプリに時間をかけていたのが反省点です。
10個作ったものの、10週間プラス2日くらい。2日オーバーしてしまいました。ただ10個作ると色々学べました。
基本的な知識はもちろんまだまだ勉強することありますが、10個DAppsを作ったことで、「何が分からないか分からない」から「これが分からない」にシフトできたのは大きいと思います。（そこを重点的に勉強すれば良いだけですしね。）
また、ブロックチェーンに関わるテクノロジーがすごい速さで開発されていってるので、情報がネット上にほとんどないのは辛かったです。たった半年前の記事ですらSolidityバージョン0.4.xxで微妙に0.5.0と違ったり、バグが出た時は日本語はもちろん英語でも情報がなかったりするので、最新情報（ブロックチェーン自体のテクノロジーではなく、実装的な意味での情報）を色々な人がどんどんアップデートしていって頂けるといいなぁって感じでした。（自分でも頑張ります。）
あとは数学の勉強が楽しかったです。楕円曲線とはとか、SH256が具体的にどんな計算をしているかとか。定義とかをどんどん辿っていくと、もうほぼ理解できませんでしたが。
できなかったことを中心に上手くいったらQiitaで書く感じでやっていきたいと思います！