DApps初学者のSolidityから始める学習ロードマップ


※完全に個人の備忘録記事

興味はあったけど何から学習したら良いかと重たすぎる腰をようやく持ち上げて諸々やってみたら良いチュートリアルがたくさんあって学習が捗っているので学習した内容を共有します。

皆さんのおすすめのチュートリアルや学習教材あれば教えてもらえると嬉しいです。

## 1. CryptoZombie
https://cryptozombies.io/jp/

■学べること
- Solidity
- Truffle


定番ですね。
名前は知っていましたが、CryptoKitties的なGameFiの一種かと思ってました。

著名なBotterさんもここから学習を始めたと言っていた人もいたのでまず触ってみました。
ブラウザ上のEditorでSolidityを学ぶことができます。

お題に従ってコードを書いて合っていたら次のお題に進むという感じで学習を進めます。
こんな感じのコースが設定されており、Beginnerのコースは日本語も対応しています。
（Advanced以降は英語のみ）

![スクリーンショット 2022-03-16 21.01.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245027/fff1d040-a325-15f6-c4d1-a078316eaecb.png)

自分はBeginnerとAdvancedの一部までやりました。
一旦アプリ作るところとDeployまで学んで実際にものを作ってみたかったので。

Oracleはまた時間ある時にやろうかなと後回しにしています。
![スクリーンショット 2022-03-16 21.01.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245027/35bbd67d-72f1-9692-a81a-98811338f6cc.png)


## 2. TruffleとGanacheを使ったÐapps開発の環境構築 ＋ チュートリアル
https://qiita.com/romorimori/items/155bb1f5e4cced629ce8

クリプトゾンビでコードの書き方を学んだがローカル環境での開発手法は出てこなかったので包括してそうなこの記事を参考に写経する形で対応しました。

■学べること
- Truffle
- Ganache

Ganacheでローカル環境を作成してTruffleのconfigをローカル環境に向けて開発を進めます。
CryptoZombieではTruffleの使い方はなんちゃって感がありましたが、ここではTruffleのコマンドを実際に実行しながら雛形作成してContract作って、migration作ってローカルにdeployしてというのを学べます。

## 3. 簡単なDAppを作ってみる Hello, world編
https://qiita.com/N_Shogo/items/bb939da3e5cbc51dbb66

続いても先ほどと似たようなチュートリアルですが、今回はさらにClient側も触ります。
なのでブラウザ上からMetamaskで繋いでTransaction発行してというのができます。

ここまで来るとDApp感が出てきます。

■学べること
- Web3.js

## 4. TruffleでINFURAにコントラクトをデプロイする[web3.js]
https://noumenon-th.net/programming/2018/06/06/truffle_infura/

続いてローカル環境での開発したものをテストネットへデプロイする方法を学びます。
ここができるとデプロイ先を変えることで本番へのデプロイ方法もなんとなくイメージがつくようになります。

このチュートリアルではRinkebyのテストネット利用が学べます。

※RinkebyのFaucetはこちらがおすすめ
https://faucets.chain.link/rinkeby

実際に自分がやったのはこれの1つ前で学んだHello, worldのDAppのデプロイ先をローカル環境からテストネットに変えただけです。
なのでコード的には変えていません。

+αでDAppをClient側をVercelにデプロイしたりしてFrontはVercel上のアプリ、Contractはテストネットといったようにローカル環境からの脱出も行いました。


■学べること
- Infura
- Rinkeby
- Faucet


## 5. Build a Web3 Dapp in React & Login with MetaMask
https://dev.to/jacobedawson/build-a-web3-dapp-in-react-login-with-metamask-4chp

続いてコントラクトとかデプロイとかはぼんやり触ったので次はClient側をより学んでいきます。
このチュートリアルでは以下のリソースを用いて一般的なDAppでよくあるMetamaskのログイン的なものを作ります。
- React
- Chakra UI


■学べること
- useDApp（Connect Wallet）
- Uniswap like UI


## 6. Send React Web3 Transactions via MetaMask with useDapp
https://dev.to/jacobedawson/send-react-web3-dapp-transactions-via-metamask-2b8n

1つ前と同じ人のチュートリアルで続編です。
1つ前はuseDAppのhooksを用いてウォレットに接続するというのをやりましたが、この記事ではuseDAppを用いてContractへTransactionを実際に送ります。

■学べること
- useDApp（Send Transaction）


ちなみにここで作成したものもVercelにデプロイしてます。
https://crypto-sandbox.vercel.app/

![スクリーンショット 2022-03-16 23.50.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245027/80ad5dec-66b1-e00c-45aa-747b99fa48fe.png)


## 7. CryptoZombie How to Build an Oracle 1 - 3
ここまででBlockChain側のSolidityとClient側のweb3jsやuseDappを学習したのでここからは好きな領域ややりたいこと（アビトラボット作るとか自分のDapp作るとか）に必要な知識をスポットで学習していくのが良いです。

自分はこれまでの学習でevent/emitについての理解を深めたいなと考えていました。
いまいちuseDappでのeventのwatchの仕方が分からなかったり。

そこで調べならが学習していてのですが、どうにもよく分からんので途中でやめていたCryptoZombieに戻りました。
そしたらこのOracleの項目で結構eventとかも出てきていたので学習的にはこれやってよかったなと思いました。

■学べること
- Oracle / Contract / Clientのシーケンス
- OracleのContractの書き方
- Event / Emit周りの扱い方

今まではClient <> BlockChainだけのシンプルな処理でしたが、Oracleが入ってくることによって非同期通信のハンドリングがより求められます。
その際に処理を通知するEventなどの知識が必要となるため出てきていた感じですね。

正直後半の方は疲れて何やってるか分からんず写経状態でしたが、web3jsでのeventの監視のベーシックなどころは学べます。

## 番外編
上記で記載しているチュートリアル系の記事以外で個人的に勉強になった記事

### [Dex（分散型取引所）の一つであるPancakeSwapを開発面から理解する](https://qiita.com/pet_sensei/items/411935ac9733f6ac37ec)
Pancakeswapを題材にTransactionの読み方やContractの読み方を記載している記事
正直理解度は低いですが、今までの知識が実際のプロダクトでどのように使われているかがぼんやりわかる。


### [UNISWAP(V2)　テストネットRopstenでETHからDAIの交換をしてみる！](https://spotlight.soy/detail?article_id=dfsrpuj8t)
タイトルの通り
jsのコードをコピペして動きを確認するだけ。


## その他やりたいこと
続いて何をやるかはまだ検討中ですが、以下あたりやろうかなと
- Contractを用いたTODOアプリ的な何か
- useDAppを使わないTransaction発行
- 他チェーンへの展開

また何か学んだら続き書いて行きます。