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

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

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

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

nawoo

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

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

出典:goerli-gas-heatmap.vercel.app

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

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

nawoo

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

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

出典:goerli-gas-heatmap.vercel.app
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ヶ月間の無料トライアル期間終了後に、自動的に有料プランへと移行します。
※ 無料トライアル期間中にご解約いただければ、ご利用料金は発生いたしません。

法人プランでは、「ライトプラン」「ベーシックプラン」「プレミアムプラン」の3種類を提供しております。

  • 社内勉強用
  • 企業ニーズに合わせた情報収集
  • スポットコンサルとしての活用

など、各事業者様ごとに特化した「定期購読プラン」+α のパッケージプランとして、幅広い用途でご活用頂いています。


目次

開発計画

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

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

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

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

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

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

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

nawoo

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

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

nawoo

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

準備

これより先のコンテンツは、定期購読プラン (初月無料)に登録すると閲覧可能です。
ログイン 今すぐ登録

まとめ

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

nawoo

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

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

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

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

イーサリアムnaviを運営するSTILL合同会社では、web3/crypto関連のリサーチ代行、アドバイザー業務、その他(ご依頼・ご提案・ご相談など)に関するお問い合わせを受け付けております。

まずはお気軽に、こちらからご連絡ください。

励みになるので、よかったらSNSなどでシェアしてください!
  • URLをコピーしました!
  • URLをコピーしました!
目次