Zenn
Open7

web3 developer に少し近づくまでの記録

Solidity
Ethereum
#
web3
DApps
linnefromicelinnefromice

※ この界隈の入り口としては、どれでもいいんだけど blockchain は手段だったりするので、タイトルは"web3"という単語を採用してみる。

linnefromicelinnefromice

https://ethereum.org/en/

blockchain, ethereum, solidity, web3, dapps などその辺りをググると、やっぱり ethereum.org が一番体系的

多分 web 開発者であれば、一回"Developer"メニュー内の概要レベルの話見てから、"Learn"メニュー見た方が全体感分かりやすそう。

(今振り返って思う)読むおすすめ順を書いてみる。

  • Ethereum development documentation | ethereum.org
    • Intro to Ethereum
    • Intro to Ether
    • Intro to dapps
    • Web2 vs Web3
      • (Ethereum, Ether の話を我慢して dapps, web3 まで来ると、従来のwebからどう違うのか、なぜ blockchain が中心にいて、また ethereum なのか、というのが大分わかってくると思う)
  • Learn メニュー
    • 以下2つは飛ばしてもいい、developer の方よんだら大丈夫だと思う
      • What is Ethereum?
      • What is ether (ETH)?
    • 以下はこの ethereum を持って創れるものの話なので、(ボリューミーだけど)軽くは見て言葉は把握したい
      • Smart contracts
        • (↑表示順と違うけど、こちらが先がいいと思う)
      • Decentralized finance (DeFi)
      • Decentralized autonomous organizations (DAOs)

ここまでで(全部読めていれば)、最初に書いたような概念はざっくり理解できると思う。
とはいえ英語ベースなので、きつい部分もあると思うので、上記の ethereum.org の記事を読んでいるところに挟んだり、助走として最初に入れられるような日本語の記事を後続でメモしたい。

※補足
ethereum.org の developer ページに、技術的なトピックを含んだページもあるが意図的に飛ばしている

linnefromicelinnefromice

(日本語の記事をメモしたい、と記述したけど、すいません、嘘です。英語の記事も混ぜます...m(_ _)m)

web3

少しまとめてみる

  • これまでのweb(web2.0)
    • 誰でもアクセス/参加できる仕組みが基本として、様々なサービス/アプリケーションが多くの人に提供されている
      • またユーザーの使いやすさに焦点を置いた継続的な改善も行われ、Google のように無料で利用できるサービスも多く提供されている
    • ただし、そのデータは中央集権的に管理されていてユーザーはその実態や利用先は全く把握できない
      • また、サービス利用時もサービス管理者が仲介者として存在しているので、利用したいサービスの効用を得るためにシステムにおける処理以上の時間がかかることもある
      • 他にも、単一障害点の存在などが課題としてよく挙げられている
    • 個人情報の提供などの必要性により、サービス利用できるユーザーが絞られることもある
  • で、web3.0?
    • 非中央集権的なアプリケーション/サービスを提供できる
      • ブロックチェーンの技術を利用したアプリケーションを構築することで、中央管理者が存在しない状態にできる
        • 透明性 ... 処理結果(≒トランザクション)は誰でも閲覧可能
          • (ブロックチェーン自体の話だが)また、この"処理結果"である”取引"は過去の取引結果との紐付きを持っていて、データ同士のつながりがあり、これが延々繋がっている。さらにデータ自体の暗号化もある。
            • これにより、攻撃者は他の全ユーザーを上回る計算は必要になり、改ざんが事実上不可能になっている
          • dapps のコード自体 github で公開されていることも多い(特にスマートコントラクトは公開されていることが多い)
        • 耐障害性 ... ブロックチェーンのネットワークにデプロイされることで、単一障害点が存在しない
        • 誰でもウォレットのアカウントさえあれば、利用できる(ウォレットのアカウント自体は誰でも作れる)

ざっくり把握するための参考

linnefromicelinnefromice

ここまでで ethereum そのものと、web3 と今の web の違い、web3 の目的がざっくり分かれば、web3 developer として関わっていく、作っていく具体的なモノ/コトが少し理解しやすくなる
代表的なものは↓

※翻訳しながらでも読めば ethereum.org のページ直接でもいいと思います

DeFi

DAOs

NFT

linnefromicelinnefromice

ようやく developer に向かう話

ここまでの話のいくつかをベースに web3, ethereum とその周辺を含めた概観がわかってくると、開発周りの話が理解しやすくなると思います。

順番としては↓

  • Solidity 自体
    • ブロックチェーンのトランザクションを作成する実体であり、スマートコントラクトを構築できるプログラミングから入ると良さそう
  • dapps のインターフェース(≒フロントエンド)
    • Solidity を使ったスマートコントラクトの構築自体を把握してから、それを操作するフロントの作り方を学ぶと理解しやすいと思います
      • web developer であれば、スマートコントラクトをwebサービスのサーバサイドと見立てて、ここをフロントエンドとして理解しやすいと思います
      • ただ ethereum 特有の知識は必要なので、Solidity から入るといいと思います
    • 可能であれば、手前で Solidity 勉強時に作ったスマートコントラクトと接続できるといいと思いますが、スマートコントラクトの再作成も踏まえて web でよくあるカウンターアプリ、TODOアプリとかでやるといいと思います
    • zenn にも良記事があります

https://zenn.dev/razokulover/articles/067fd5cf55292e

linnefromicelinnefromice

Solidity

https://docs.soliditylang.org/en/v0.8.10/

公式ドキュメントをしっかりと見て学べたらそれでいいのですが、チュートリアル/ハンズオンを写経しながら、必要な部分でドキュメントを参照していくスタイルでもいいと思います

僕は下記を写経しました

  • Solidity 基礎編 - YouTube
    • 解説->コーディングと進めてくれるので、一回流し聞きしてから再度聴いて写経したりしました
      • 動作確認/デプロイなどはできなくても十分勉強できます
    • 必ず自分のローカルで動かした方がいいと思います
  • #1 Solidity Tutorial & Ethereum Blockchain Programming Course | CryptoZombies
    • 対話型学習ツールで概念の説明もありボリューミーですが、一つ前の写経を踏まえてだとサクサク進むことができます
      • 頭の整理、復習にとてもいいと思います

これらを利用して写経などで学びながら必要なところはきちんとドキュメントを読みましょう

linnefromicelinnefromice

先述の通り Solidity が少しわかったらスマートコントラクトを操作するためのインターフェース構築です。

dapps の interface

(webもネイティブアプリもありますが、今回はwebベースで記述します)

スマートコントラクトの接続には、この辺のライブラリがよく使われてる印象(最近は etherjs?)

ベースのフレームワーク自体はどれでもいいんですが、Reactベースが多い気がします
ref: チュートリアル ... Tutorial: Intro to React – React

写経のテーマとしては、

で十分量があると思いますが、自分の方でも作ってみました(宣伝ですm(_ _)m)

https://zenn.dev/linnefromice/articles/create-simple-dapps-with-hardhat-and-react-ts

また実際の wallet と接続する部分のみにフォーカスすればこの辺りを利用します

最近自分が開発で利用したのはweb3-reactで、ウォレットの接続に利用しました。
ウォレット利用のためのAPIを hooks を提供してくれるので実装に組み込みやすかったです。

ref NoahZinsmeister/web3-react: 🧰 A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

最後に参考情報として有名な dapps の interface を置いておきます。
wallet 側操作の検知などはよく参考にしました。