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

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

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

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

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

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

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

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

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

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

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

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

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

開発計画

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

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

▼「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

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

準備

まとめ

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

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

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

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

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

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

実はありそうでなかったサービス💫
テストネットのgas代を調べる際に、ご活用いただけます⛽️https://t.co/wUeHvqZsEO

— イーサリアムnavi🧭 (@ethereumnavi) November 25, 2022

• 法人プランLP：https://ethereumnavi.com/lp/corporate/
• Twitter：@STILL_Corp
• メールアドレス：info@still-llc.com