<aside> <img src="/icons/list_gray.svg" alt="/icons/list_gray.svg" width="40px" /> 目次

</aside>

<aside> 💡 このSectionを読んで習得できること

Lesson1：環境構築

1-1：雛形のダウンロード

まずはじめに、今回作成するサイトの雛形（template）をGitHubからローカルの開発環境にダウンロードしていきましょう。

以下の手順でダウンロードしてください

  1. VWBL-Tutorial-Appレポジトリにアクセス

  2. 画面右上の「**Fork（フォーク）」**ボタンを選択

    Untitled

  3. Ownerに自分のアカウントが指定されていることを確認して、「Copy the Lesson-0 branch only」のチェックを外し、「Create Fork」ボタンを押す

    Untitled (5).png

  4. こちらを参考に、Forkしたプロジェクトのコードを自身のGitHubレポジトリからローカルの開発環境へClone（クローン）する

これでVWBL（リモート）から自身のGitHub（リモート）にプロジェクトをForkし、Forkしたレポジトリをローカル環境にCloneすることができました。開発はローカル環境で開発し、自身のレポジトリForkしたプロジェクトに対してcommitする形で進めていきましょう。

<aside> 💡 **上記の手順でよく分からない箇所がある方は、公式ドキュメント**にアクセスしていただき、 ご自身の開発環境（Mac, Windows, Linux）に合わせて以下の項目をご確認ください。

</aside>

うまくローカル環境にダウンロードできた人は、以下のコマンドでリモートレポジトリのLesson-0ブランチをもとに、自分がこれから開発していくブランチ（ここではtutorial）を作成しましょう。

$ git branch tutorial origin/Lesson-0

tutorialブランチが作成できた人は、そちらのブランチに移動できていることを確認して、ターミナルで以下のコマンドを順に実行していきましょう。

$ yarn install
$ yarn start

うまくサイトが立ち上がればOKです！（webpack周りでwarningが出るかと思いますが、本開発に影響はないので無視していただいて大丈夫です）

必要なUIは既に作成済みのため、立ち上げに成功した方はWebサイトを一通り触ってみてください！👍

1-2：ディレクト構成の把握

少しディレクトリが多いので、雛形のディレクトリ構成（src内）について簡単に補足しておきます。

srcディレクトリは、以下のようなディレクト構成となっています。

本教材をよりスムーズに学習できるように、以下の構成図を読みながら、お手元のエディターで実際にコードを確認してみてください。

Untitled

ディレクトリ構成が複雑でやっていける気がしない😢、と思った方がいるかもしれませんが、安心してください。 今回はあくまでVWBL SDKの習得が目的のため、必要なUIコンポーネントは予め用意させていただいてます。

皆さんには、以下5つのファイルのロジック部分のみを編集していただきます😎

<aside> 💡 上記のcontainerとは、指定した変数のstate（状態）を一箇所で一元管理してくれるモノで、基本的にアプリ内の全てのコンポーネントはそのstateをどこからでも参照することができます。 今回の場合は、vwbl-container.js内のuseVwblで機能開発に必要な変数のstateを保存してもらい、vwbl-container.jsを除く上記４つのファイルからそれらのstateを参照していきます。

</aside>

1-3：必要なパッケージのインストール

今回サイトを作っていくにあたって必要なnpm packagesをインストールしていきましょう。

本開発では以下のパッケージを必要とします。

簡単に上記のパッケージを補足しておくと、

web3は、web3.jsのメインパッケージで、ブロックチェーンとの通信をする際に使用します。かなり前から存在するため、多くのブロックチェーンアプリケーション開発で使用されているパッケージとなっています。

また、vwbl-sdkは、本ドキュメントを通して習得するパッケージです。開発者は、VWBL SDKを使用することで、簡単にVWBLの機能を組み込んだアプリケーションを開発することができます。

以下のコマンドでインストールしていきましょう。

$ yarn add web3 vwbl-sdk

うまくインストールが完了すればOKです！

<aside> 💡 今回はweb3.jsを扱いますが、SDK自体はethers.jsにも対応しているので、興味のある方はVWBLEthersクラスの公式ドキュメントやGitHubをご確認ください。

</aside>

1-4：環境変数の設定

最後に、rootディレクトリに**.envファイル**を作成して、本開発で必要となる開発環境を設定していきましょう。

以下のコマンドを実行するか、GUIを使用して、rootディレクトリにenvファイルを作成してください。

$ cp .env.example .env

今回設定する必要があるのは、env.exampleファイルに記載されている以下の環境変数となります。

REACT_APP_CHAIN_ID=
REACT_APP_VWBL_NETWORK_URL=
REACT_APP_NFT_CONTRACT_ADDRESS=
REACT_APP_NFT_STORAGE_KEY=

各環境変数がどういったものなのか、上から順番に解説していきます。

各ブロックチェーンに割り振られた識別用IDです。

今回は開発に必要なガス代が十分に手に入る Polygon（ポリゴン）のテストネットである Mumbai（ムンバイ）チェーンを使っていきます。

自身のメタマスクにMumbaiチェーンが設定されていない方は、Blockchain Explorerにアクセスして右下の「Add Mumbai Network」ボタンを押して追加しておきましょう。

また、開発用ウォレットアドレス内にMumbai上のMATICトークンが無い人は、公式のFaucetで0.5MATICを受け取っておきましょう。

<aside> 💡 お使いのブラウザにメタマスク拡張機能がインストールできていない方は、メタマスク公式から拡張機能をダウンロードしてください。

</aside>

必要な作業が済んだ方は、以下のchainIdを環境変数に設定していきましょう。今回はMumbaiを利用するため、chainIdは80001となります。

REACT_APP_CHAIN_ID=80001

<aside> 💡 各チェーンに関する情報はChainList というサイトにて確認することができるので覚えておくと便利です。 例えば、今回扱うMumbaiに関する情報はこちらから確認できます。

</aside>

VWBL NetworkのURLです。VWBL Networkは現在 Phase1 のため、鍵管理サーバーのURLが必要となります。

本ドキュメントではVWBL SDKの習得を目的としているため、VWBL NetworkのURLには開発環境のものを指定します。 以下の環境変数を設定しましょう。

REACT_APP_VWBL_NETWORK_URL=https://dev.vwbl.network/

<aside> 💡 本番環境を利用する際はhttps://vwbl.network を設定しましょう。 VWBLに関する End Point はこちらのドキュメントにまとまっているので適宜ご確認ください。

</aside>

最終的に以下のように環境変数が設定されていればOKです！

REACT_APP_CHAIN_ID=80001
REACT_APP_VWBL_NETWORK_URL=https://dev.vwbl.network/
REACT_APP_NFT_CONTRACT_ADDRESS=0x9D486D71E756D2fAF445B3E254D9F4419C8f5327
REACT_APP_NFT_STORAGE_KEY={YOUR_API_KEY}