Solidity の Web IDE、Remix を使って SmartContract を動かしてみた

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください

【4/18開催】VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜
Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチンで構築する方法を紹介するイベントです。
https://tech-lab.connpass.com/event/311864/

サイオステクノロジーの菊地啓哉です。今回は、SmartContract を扱える言語 Solidity を開発・実行できるWeb IDE の Remix で、プログラムを動かすところまでを簡単に説明したいと思います。

1 対象
2 Remix へアクセス
3 画面構成
4 実行するファイル
5 コンパイル
6 デプロイと実行
7 まとめ

対象

SmartContract、Solidity などに興味のある方
Java や C# など開発経験が少しでもある方

コードの書き方としては、Solidity は Java などに似ているので、そのあたりの理解があると取っつきやすいかと思います。

Remix へアクセス

以下の URL へアクセスしてください。
Remix – Ethereum IDE

初めてアクセスすると、短いチュートリアルが始まります。

画面構成

Remix を開くと、まず次のような表示になるかと思います。

かいつまんで説明します。

①：File explorerアイコン。この画像のように、workspace 内のファイルが表示されます（⑤の部分）。
②：Solidity compilerアイコン。作成した Solidityファイルをコンパイルするためのペインを表示します。
③：Deploy & run transactionsアイコン。コンパイルした Solidityファイルをデプロイし、デプロイされたプログラムを実行することができます。
④：WORKSPACE領域。workspaceの切り替えや作成ができます。１つのworkspace内に関係の無いファイルが多くなるとわかりにくくなってしまうので、ファイル数や目的に応じて適宜、workdspaceを作成、切り替えてください。
⑤：ファイル一覧。パソコンと同じように、ディレクトリやファイルがあります。デフォルトで contractsディレクトリに Solidityファイル、scriptsディレクトリにデプロイなどで使えるTypeScriptファイルがあります。

実行するファイル

デフォルトで作られるファイルのうち、1_Storage.sol を今回は使用します。もし無ければ作成してください。ファイルの中身は以下のようになっています。

// SPDX-License-Identifier: GPL-3.0

pragma solidity >=0.8.2 <0.9.0;

/**
 * @title Storage
 * @dev Store & retrieve value in a variable
 * @custom:dev-run-script ./scripts/deploy_with_ethers.ts
 */
contract Storage {

    uint256 number;

    /**
     * @dev Store value in variable
     * @param num value to store
     */
    function store(uint256 num) public {
        number = num;
    }

    /**
     * @dev Return value 
     * @return value of 'number'
     */
    function retrieve() public view returns (uint256){
        return number;
    }
}

3行目でコンパイラのバージョンの範囲を指定しています。後述するコンパイラのところで確認して、あっていないようであれば変更してください。

コードの中身も軽く説明いたします。

1行目：ライセンスに関するただのコメントですが、書かないと Remix に警告が表示されるので、明記します。

3行目：上述の通り、コンパイラのバージョンを指定します。上記のサンプルでは、0.8.2以上、0.9.0未満としています。

contract Storage：Storageという contract の定義を開始します。contract は、Java における class のようなものです。

uint256 number;：internal な状態変数numberを定義します。型はuint256（符号なし256 bit整数）です。

function store～：storeという関数を定義します。この関数は、状態変数numberに引数の値を設定します。

function retrieve～：retrieveという関数を定義します。この関数は、状態変数numberの値を返却します。

これで、サンプルプログラムができました。ここではuint256の状態変数１つだけを扱っていますが、状態変数に保存した値もブロックチェーンに書き込まれるため、実際にもっと複雑な contract を作る時には、状態変数に例えばNFTの所有者のアドレスや、何かの文字列などを保存して使います。

このファイルを開いた状態にしておいてください。

コンパイル

Solidity compilerアイコンをクリックし、Conpilerペインを表示します。以下のような画面になります。

⑥：コンパイラのバージョンを確認できます。この画像だと、0.8.18です。
⑦：コンパイルを実行します。コンパイル対象はボタンに表示されているファイルです。先に書いた通り、1_Storage.solを開いている状態であれば、1_Storage.solがボタンに表示されているかと思います。

コンパイルボタンを押して、1_Storage.solをコンパイルしましょう。特に問題無ければ、コンパイルが成功し、Solidity compilerアイコンに緑色のチェックマークがつくかと思います。コンパイルできないようであれば、メッセージにしたがって修正してください。

デプロイと実行

コンパイルしたプログラムをデプロイし、その関数を実行します。Deploy & run transactionsアイコンをクリックすると、次のようなペインになります。

⑧：デプロイ先の環境を指定します。デフォルトで選ばれていると思いますが、Remix VMを使います。ウォレットを接続してtestnetなどにデプロイすることもできますが、ガス代と呼ばれる手数料として、それぞれのネットワークで使われる通貨を支払う必要があります。Remix VM上であれば、ガス代を使っても、画面を開きなおしたりすれば所持金が復活します。
⑨：実行者を選択できます。執筆時点で、Remix VMであれば、初期状態はみんな100 ETH持っています。お金持ちですね。
⑩：デプロイします。対象はボタンの上に表示されているコンパイル済みの contract です。

1_Storage はそのままデプロイできますので、そのままボタンを押します。引数のある constructor を定義すると場合は、引数を入力できるようになりますので、引数を入力後にボタンを押します。

デプロイを実行すると、”Deployed Contracts” のところに、今デプロイしたSTORAGE が表示されます。下の画像のように定義されている関数に対応するボタンが表示されます。また、アカウントを確認すると、所持ETH が少し減っていることが確認できるかと思います。デプロイのためにガス代として ETH を支払っています。

まずは、retrieveのボタンを押してください。画像のように、ボタン下に結果が表示されます。uint256のデフォルト値である0が返ってきていることが確かめられます。
また、アカウントを確認すると、実行前と変わらない、ETH を持っている状態のままです。状態変数に書き込まない関数を直接呼び出すとガス代はかかりません。

次に、storeボタンの右に好きな uint256 の値を入力し、ボタンを押してください。transaction が実行され、入力した値が保存されます。また、この時にはガス代がかかるため、アカウントを確認すると、所持 ETH が減っていることを確認できます。また、retrieveのボタンを再度押すことで、状態が変更されていることを確認できます。