【入門編】MetaMaskと接続、接続アカウント情報を表示するWebサイトを作成してみた！

こんにちは、ラスク（@lusk_eng ）です。 今回は、Web3では欠かせない MetaMaskについて触れていきたいと思います。 まずは入門編として、MetaMaskを使ったブロックチェーンへの接続を試していきます。 今回の動作検証環境は以下の通りです。 OS：MacOS 12.3.1 Node : v16.14.2 npm : 8.5.0 React : 18.2.0 まずは、Web3のライブラリを利用するためのモジュールをインストールします。 インストールが完了したら、MetaMaskの公式ライブラリが利用できる状態になります。 yarn add web3-react@unstable 早速、公式ドキュメントを覗いてみましょう！ Web3ライブラリの準備が整いましたので、MetaMaskの公式ドキュメントにあるサンプルコードを実行してみましょう。 if (typeof window.ethereum !== 'undefined') { console.log('MetaMask is installed!'); } MetaMaskのChrome拡張機能が入っていれば、コンソールログに「 MetaMask is installed!