Goerli（テストネット）のガス価格をヒートマップで確認できるサイトを作ってみたので解説【開発】

2022年11月25日

こんにちは、フルオンチェーンNFTクリエイターのnawooです。

先日、GoerliテストネットでNFTのデプロイをおこなっていた際に、「ガス代が不足している」というエラーが出てしまいました。

確認してみると、ガス価格がなんと100gweiを超えていたのです。

nawoo

以前は0.0000001gweiぐらいと安かったのですが、最近は時間帯によってすごく高くなっているようです。

これがEthereumメインネットであれば、こういう時に筆者は以下の「GasNow」というサイトを確認しています。

GasNowでは、1週間分のガス価格を1時間ごとのヒートマップで確認できるので、「平日の夜は高いな」「土日の昼間は安いぞ」といった情報が、一目で分かるようになっています。

しかし、残念ながらGoerliテストネット版のGasNowのようなwebサイトは、執筆時点では見つけられませんでした。

nawoo

Goerliテストネットでもこういうサイトがあるかと思ったのですが、見つけられなかったため、今回は勉強を兼ねて自分で作ってみることにしました。

こうして完成したサイトが、以下の「Goerli Gas Heatmap」です。

nawoo

できるだけ簡単に作りたかったので、ガス価格のヒートマップを表示するだけのシンプルなサイトにしました。

また、ネットワークはGoerliのみです。1時間ごとのガス価格は、単純に毎時00分の最新ブロックのガス価格を使うことにしました。

過去1週間分のヒートマップが確認できます。セルは価格帯ごとに色分けされていて、ひと目でガス価格の推移が分かるようになっています。セルにマウスを重ねてしばらく待つとツールチップに詳細情報が表示されます。

nawoo

さて、今回の記事では、このサイトをどのように作ったのか解説していきたいと思います。

でははじめに、この記事の構成について説明します。

STEP

開発計画

まずは、「Goerli Gas Heatmap」を構築するにあたりどういった手順で進めるか、またどのような技術スタックを採用するか等について述べていきます。

STEP

準備

さらに、今回の開発をおこなうに当たり必要となるアカウント作成やAPIキーの取得、設定などをおこなっていきます。

STEP

バックエンド開発

続いてバックエンド開発として、Next.jsでAPIを作り、それをVercel Serverless Functionsで実行し、そしてその後でAPIを定期的に呼び出すためにQStashを使っていきます。

STEP

フロントエンド開発

最後に、STEP3で作成したデータが溜まるまでの時間を使い、データベースから情報を読み込んでヒートマップを表示するサイトを作成します。

本記事が、ガス価格のヒートマップを表示するサイトの構築方法、ならびにweb3サービスの具体的な開発手順などについて理解したいと思われている方にとって、少しでもお役に立てれば幸いです。

※本記事は一般的な情報提供を目的としたものであり、法的または投資上のアドバイスとして解釈されることを意図したものではなく、また解釈されるべきではありません。ゆえに、特定のFT/NFTの購入を推奨するものではございませんので、あくまで勉強の一環としてご活用ください。

「定期購読プラン」は現在、トライアル期間を設けているため、初回は30日間無料でプランにご登録いただけます。この機会にぜひお試しいただき、サービスの魅力を体験していただければ幸いです。

※ 1ヶ月間の無料トライアル期間終了後に、自動的に有料プランへと移行します。
※ 無料トライアル期間中にご解約いただければ、ご利用料金は発生いたしません。

定期購読プランに登録する

開発計画

今回のサイトでは、バックエンドとフロントエンドの両方が必要です。

バックエンド
- 1時間ごとにガス価格を取得してデータベースに保存する機能
フロントエンド
- データベースから過去のガス価格を読み込んでヒートマップを表示するWebサイト

nawoo

さて、これをどうやって実現すればいいか、あれこれ調べてみたところ、以下の参考になりそうな記事を見つけました。

▼「Bitcoin(BTC)のチャートを表示するサイトを作成する」という内容の記事
Periodic Data Updates with Next.js and Vercel Serverless Functions

こちらの記事では、バックエンドで1時間ごとにBTC価格を取得してデータベースに保存する方法が、分かりやすく解説されています。

「BTC価格を取得」の部分を、「Goerliのガス価格を取得」に変更すれば、そのまま使えそうですね。

なお、上記事で採用している技術スタックは、以下の通りです。

BTC価格の取得
- Next.js API + Vercel Serverless Functions
データベース
- Upstash Redis
定期的な実行
- Upstash QStash
Webサイト
- Next.js + Vercel

nawoo

すべて無料で使えるサービスです。筆者も上記事と全く同じ方法を採用することにしました。

また、ブロックチェーンへのアクセスには、Alchemyのノードとethers.jsを使いました。

nawoo

ちなみに「Upstash Redis」「Upstash QStash」「Vercel Serverless Functions」は未経験なので少し不安もありましたが、なんとか頑張ってトライしてみました(笑)

準備

無料トライアルを開始

この続き: 7,457文字 / 画像13枚

この続きは、定期購読プラン (初月無料)メンバー専用です。今すぐイーサリアムnaviメンバーシップに参加しましょう！
ログイン

まとめ

さて、以上で「Goerliテストネット版のGasNowのようなwebサイト」の完成です。

nawoo

シンプルですが便利なサイトになったのではないでしょうか？また、今回は趣味の開発なので、時間をかけずに完成させることを優先しました。

あちこち手抜き仕様ですし、テストやエラー処理なども省略していますが、本記事がガス価格のヒートマップを表示するサイトの構築方法、ならびにweb3サービスの具体的な開発手順などについて理解したいと思われている方にとって、少しでもお役に立ったのであれば幸いです。

なお、ソースコードはGitHubで公開していますので、よければご参考ください。

励みになりますので、参考になったという方はぜひTwitterでのシェア・コメントなどしていただけると嬉しいです。

🆕記事をアップしました🆕

今回は、Goerliのガス価格をヒートマップで確認できるサイトを作り、その構築方法ならびにweb3サービスの具体的な開発手順などについて解説しました📝

実はありそうでなかったサービス💫
テストネットのgas代を調べる際に、ご活用いただけます⛽️https://t.co/wUeHvqZsEO
— イーサリアムnavi🧭 (@ethereumnavi) November 25, 2022