コンテンツへスキップ
ホーム » Web3開発講座

Web3開発講座

東京大学で開催されたWeb3開発講座の内容をレポート！Web3システムデザイン、Ethereumテストネット、サンプルアプリ開発、スマートコントラクト解説など、盛りだくさんの内容を分かりやすく紹介します。

【東京大学ブロックチェーンイノベーション寄付講座ブログ】

「Web3のためのWeb2技術」講座レポート – 理論から実践まで

先日、東京大学のブロックチェーンイノベーション寄付講座で行われた「Web3のためのWeb2技術」講座に参加しました。今回は、講座で学んだ内容を具体的なコード例や開発環境の構築手順とともに振り返ります。講座の目的は、ブロックチェーンとWeb2技術の融合によって、実際にWeb3アプリケーションを作成するためのノウハウを伝えることにありました 。

目次

1. Web3開発者になるための基本マインドと環境構築

自己研鑽と試行錯誤の重要性

講座では、Web3開発者になるためには長い道のりがあるものの、失敗を恐れずにコードを書き続けることの重要性が強調されました。特に「Do Your Own Research（DYOR）」という精神が、どの分野でも求められる姿勢として紹介され、エラー発生時にログを読み解く力や、ネット検索での情報収集の重要性が説かれました。

WEB3開発者の成長

開発環境のセットアップ

実際の開発環境構築では、以下のコマンドをターミナルで実行して、Gitリポジトリをクローンし、VSCodeでコードを確認しました。

cd ~
mkdir git
cd git
git clone https://github.com/blockchaininnovation/frontpractice.git
cd frontpractice/wagmi-project
npm install

また、サンプル設定ファイルのコピーと編集も行います。たとえば、src/wagmi.sample.ts を src/wagmi.ts にコピーして、以下のようにSepoliaエンドポイントと自分のAlchemyまたはInfuraのAPIキーに書き換えます。

export const config = createConfig({
  chains: [sepolia],
  connectors: [],
  ssr: true,
  transports: {
    [sepolia.id]: http("https://eth-sepolia.g.alchemy.com/v2/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"),
  },
});

さらに、.env.sample を .env.local にコピーし、TextDAOのコントラクトアドレス（例：0x479E7BcBdBF126D8d5B9db44c38f02BA01c6BC5）を設定します。

cp .env.sample .env.local

これにより、フロントエンドからスマートコントラクトへの接続設定が完了し、npm run dev で開発サーバーが起動、http://localhost:3000 で動作確認が可能となります。

2. システムデザインのアプローチ

講座では、Web3アプリケーションの設計について、主に２つの構成が解説されました。

バックエンドサーバーなし

  • メリット：ユーザーが直接ブロックチェーンに接続するため、完全にトラストレスな環境を実現。
  • デメリット：クライアント側の技術に依存し、UI/UXの改善やセキュリティ対策に注意が必要。

実際のサンプルプログラムでは、ReactとNext.jsを用いて、ブラウザから直接EthereumのSepoliaテストネットへ接続し、MetaMaskを使って署名やTx作成を実施しています。

バックエンドサーバーあり

  • メリット：UI/UXの向上や、データベース（MySQL等）との連携が容易になり、ユーザー体験の向上が期待できる。
  • デメリット：中央集権的な要素が入り、システム内部にブラックボックスが生まれる可能性がある。

講座内では、システム構成図を用いて各コンポーネントの役割や、どの部分が直接ブロックチェーンと連携しているかを解説しており、参加者はそれぞれのメリット・デメリットを実感しました 。

3. サンプルアプリケーションの実装とスマートコントラクト連携

フロントエンドとEthereumライブラリの連携

講座で提供されたサンプルプログラムでは、以下の主要ライブラリが利用されています。

  • React / Next.js
    ユーザーインターフェースの構築と、サーバーサイドレンダリングを活用した高速なページ表示を実現。
  • Wagmi.js と Viem
    Ethereum接続用のライブラリとして、React Hooksを利用して簡単にブロックチェーンとのやり取りができるよう設計されています。具体的には、useReadContracts() を使って、スマートコントラクトの関数（例：getProposalHeaders や getNextProposalId）を呼び出し、リアルタイムで提案内容や状態を取得する仕組みが解説されました。
ブロックチェーンアプリケーションのユーザーインターフェースと相互作用

スマートコントラクトとの連携実例

講座では、以下のような具体的なスマートコントラクトの関数呼び出し例が示されました。

  • 提案の起票（propose）
    ユーザーが提案を起票する際、対応するTxが生成され、実際にブロックチェーン上で状態が更新されます。
  • メンバー登録（memberJoin）
    自身のアカウントをDAOのメンバーとして登録するプロセスでは、memberJoin() 関数を呼び出し、引数としてメンバー情報（ID、アドレス、メタデータURIなど）を渡します。以下は、実際に送信するためのコード例です。 function handleSubmit(data: memberJoinSchemaType) { const args = { _candidates: { id: BigInt(data.candidates.id), addr: getAddress(data.candidates.addr), metadataURI: toHex("0", { size: 32 }), }, }; writeContract({ ...TextDAOFacade, functionName: "memberJoin", args: [[args._candidates]], }); }
  • 投票機能（voteHeaders）
    投票機能に関しては、ユーザーが提案IDと投票内容を入力し、voteHeaders(uint _proposalId, uint[3] calldata _headerIds) を呼び出すことで、複数の投票が実施されます。これにより、ブロックチェーン上で投票結果がリアルタイムに更新される仕組みとなっています。

4. 技術用語解説（Glossary）

  • Web3
    分散型アプリケーション（DApps）を支える次世代のウェブ。ブロックチェーン技術を用いて、中央管理者なしに安全・透明なシステム運用を実現する。
  • スマートコントラクト
    ブロックチェーン上で自動実行される契約プログラム。条件が満たされると自動的に処理を行い、資産移動やデータの記録を担う。
  • トランザクション（Tx）
    ブロックチェーンにおける状態変更を伴う操作。ガス代が必要となり、実際にブロックに取り込まれることで反映される。
  • トラストレス
    第三者に依存せず、システム自体の透明性と検証可能性を重視する設計思想。
  • Wagmi.js / Viem
    Ethereumと連携するためのJavaScriptライブラリ。Wagmi.jsはReact Hooksを活用して操作を簡単にし、ViemはEthereum特有の処理を支援する。
  • Next.js
    Reactをベースにしたフレームワークで、サーバーサイドレンダリングや静的サイト生成をサポート。高速なユーザーインターフェース構築が可能となる。

まとめ

今回の講座は、Web3の概念だけでなく、実際のコード実装や環境構築の具体例を通して、参加者がブロックチェーン開発の基礎から応用までを体系的に学べる内容となっていました。React/Next.jsとWagmi.js/Viemを用いたサンプルアプリケーションの構築や、スマートコントラクトの関数呼び出しによる状態変更の仕組みを体験することで、現場で直面する実践的な課題に対応できる力が養われたと感じました。

この講座で得た具体的な手順やコード例は、今後の開発プロジェクトにおいて非常に有用な知識となるでしょう。皆さんもぜひ、講座の内容を実際に手を動かして試してみてください。

関連リンク

以上のリンクを参考に、実際の開発やさらなる学習に役立ててください。

関連記事（ブロックチェーン公開講座シリーズ）：

タグ:

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です