メインコンテンツまでスキップ

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

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

このセクションでは、Webサイトの構築を通して、フロントエンドがスマートコントラクトとどのように関連するのかを学びます。

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

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

🏙️ Typescript​

TypeScriptはMicrosoftが中心となって開発を進めているオープンソースのプログラミング言語です。

TypeScriptのコードはコンパイルによりJavaScriptのコードに変換されてから実行されます。 最終的にはJavaScriptのコードとなるので、処理能力などJavaScriptと変わることはありません。 ですがTypeScriptには静的型付け機能を搭載しているという特徴があります。

静的型付けとは、ソースコード内の値やオブジェクトの型をコンパイル時に解析し、安全性が保たれているかを検証するシステム・方法のことです。 JavaScriptでは明確に型を指定する必要がないため、コード内で型の違う値を誤って操作している場合は実行時にそのエラーが判明することがあります。 TypeScriptはそれらのエラーはコンパイル時に判明するためバグの早期発見に繋がります。 バグの早期発見は開発コストを下げることにつながります。

TypeScriptのコンパイラは今回使うNext.jsに標準でインストールされるので気にする機会は少ないです。

🎢 React.jsとNext.js​

React.jsは、インタラクティブなユーザーインタフェースを構築するためのJavaScriptライブラリです。 ライブラリなので便利な機能が揃っていますが、どこでどのように使うのかは開発者に委ねられています。

Next.jsは、Webアプリケーションを作成するためのReact.jsフレームワークです。 フレームワークとは、React.jsに必要なツールや設定をNext.jsが行い、 アプリケーションに追加の構造、機能、最適化を提供することを意味します。 Next.jsが設定とアプリ構成の多くを処理し、React.jsアプリケーションの構築を支援する追加機能を備えていることです。

今回はNext.jsの大きな特徴であるサーバーサイドでのレンダリングなどについては触れませんが、 Next.jsを使用した開発を知るきっかけになればと思います。

本セクションでは1つずつコードを作成してきますが、 これらを体系的に学びたい方のためにいくつか参考リンクを載せておきます。

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

packagesディレクトリに移動し、以下のコードを実行して下さい。

yarn create next-app client --ts

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

ターミナル上でAVAX-Messenger/直下にいることを確認して、下記を実行しましょう。

yarn client dev

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

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

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

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

これからフロントエンドの表示を確認する際は、AVAX-Messenger/直下で、yarn client devを実行します。

ターミナルを閉じるときは、以下のコマンドが使えます ✍️

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

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

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

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

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

🙋‍♂️ 質問する​

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

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

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

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