開発環境を用意しよう

🍽 フロントエンドを作成しよう

このセクションでは、スマートコントラクトと連携するフロントエンドを構築します。

今回はtypescript + React.js + Next.jsを使ってフロントエンド開発を進めていきます。

typescript: プログラミング言語
React.js: ライブラリ
Next.js: React.jsのフレームワーク

それぞれの概要についてはこちらに説明を載せていますので、初めて触れる方はご参照ください 💁

🛠️ 　フロントエンドのセットアップをしよう

AVAX-Subnet/packagesディレクトリに移動し、以下のコマンドを実行して下さい。

yarn create next-app client --ts

ここではcreate-next-appというパッケージを利用してclientという名前のプロジェクトを作成しました。 --tsはtypescriptを使用することを指定しています。clientディレクトリにはNext.jsを使ったプロジェクト開発に最低限必要なものがあらかじめ作成されます。

この段階で、フォルダ構造は下記のようになっているはずです。

 AVAX-Subnet
  ├── .gitignore
  ├── genesis/
  ├── package.json
  ├── packages/
+ │   ├── client/
  │   └── contract/
  └── tsconfig.json

clientディレクトリ内に生成されたpackage.jsonの設定を確認します。contractディレクトリのpackage.jsonと同様に、"private": trueとなっていることを確認し、設定されていない場合は記述しておきます。

ここで、開発環境がきちんと動作するか確認したいと思います。clientディレクトリ内にnode_modules/やyarn.lockが生成されている場合は、いったん削除してください。次に、ターミナル上でAVAX-Subnet直下に移動し下記を実行しましょう。

yarn install
yarn client dev

あなたのお使いのブラウザでhttp://localhost:3000へアクセスするとWebサイトのフロントエンドが表示されるはずです。

⚠️ 本手順ではChromeブラウザを使用しておりますので、何か不具合が生じた場合はブラウザを合わせるのも1つの解決策かもしれません。

例)ローカル環境で表示されているWebサイト

ここでの create-next-app はversion 13.1.1を使用しています（yarn create next-app --versionで確認できます）。 version の違いによりここで表示されるフロントエンドが別のものでも、この後のディレクトリ構成などに大きな違いがなければ問題ありません。

上記のような形でフロントエンドが確認できれば成功です。

これからフロントエンドの表示を確認する際は,AVAX-Subnet上でyarn client dev(clientディレクトリ上ではyarn dev)を実行します。

Webサイトの立ち上げを終了する場合は以下のコマンドが使えます ✍️

Mac: ctrl + c
Windows: ctrl + shift + w

clientディレクトリのフォルダ構造は以下のようになっています。 ※node_modulesは内部ファイルの表示を省略しています。

client
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package-lock.json
├── package.json
├── pages
│   ├── _app.tsx
│   ├── api
│   │   └── hello.ts
│   └── index.tsx
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── styles
│   ├── Home.module.css
│   └── globals.css
└── tsconfig.json

続いてclientディレクトリ直下で以下のコマンドを実行して必要なパッケージをインストールしてください。

yarn add ethers@^5.7.2 @metamask/providers@^10.0.0

ethers: スマートコントラクトとの連携に使用します。
@metamask/providers: metamaskとの連携の際にオブジェクトの型を取得するために使用します。

🐊 tailwind をセットアップしよう

本プロジェクトはtailwindを使用してブラウザの見た目を構築します。

こちらを参考にtailwindをセットアップします。

まずは必要なパッケージのインストールやinitコマンドを実行します。

clientディレクトリ直下で以下のコマンドを実行します。

yarn add --dev tailwindcss@^3.2.4 postcss@^8.4.20 autoprefixer@^10.4.13
npx tailwindcss init -p

続いて、tailwind.config.js内に以下のコードを貼り付けてtailwindを使用するファイルへのパスを記述します。

vscodeがエラーを出す可能性もありますが、気にせず進めて問題ありません。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

./styles/globals.css内を以下のコードで上書きしてください。

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwindの初期設定が終了したので、挙動を確認します。

pages/index.tsx内を以下のコードで上書きしてください。

import type { NextPage } from "next";

const Home: NextPage = () => {
  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
};

export default Home;

AVAX-Subnetディレクトリ直下でyarn client devを実行し、ブラウザでhttp://localhost:3000へアクセスします。

以下のようなフロントエンドが確認できれば成功です。

🙋‍♂️ 質問する

ここまでの作業で何かわからないことがある場合は、Discordの#avalancheで質問をしてください。

ヘルプをするときのフローが円滑になるので、エラーレポートには下記の3点を記載してください ✨

質問が関連しているセクション番号とレッスン番号
何をしようとしていたか
エラー文をコピー&ペースト
エラー画面のスクリーンショット

フロントエンドの環境構築が完了したら次のレッスンに進みましょう 🎉

🍽 フロントエンドを作成しよう​

🛠️ フロントエンドのセットアップをしよう​

🐊 tailwind をセットアップしよう​

🙋‍♂️ 質問する​

🍽 フロントエンドを作成しよう

🛠️ 　フロントエンドのセットアップをしよう

🐊 tailwind をセットアップしよう

🙋‍♂️ 質問する