---
title: "NFTビューアーの開発方法(5ステップチュートリアル)"
description: "Alchemy NFT APIを使って、指定したウォレットアドレスのNFTを表示するdappを構築する方法を学びます。"
---

# NFTビューアーの開発方法(5ステップチュートリアル)

NFTスマートコントラクトの顕著な特徴の1つは、アートワークや画像、ファイル自体を含んでおらず、それらとそのメタデータへのリンクやURIのみを含んでいるという点です。これらのトークンはそうしたファイルやデータのオフチェーンでの所在地を示すものであり、したがってブロックチェーンはこのコンテンツをホストする責任を負いません。

次のセクションで見ていくように、ERC-1155はERC-721に対する改善であり、そのコードが非代替性トークンと準代替性トークン\(NFT\)の両方に対応している点が特徴です。

### NFTビューアーの要件

- Node >= 16.13.x
- Alchemy
- React.js
- TailwindCSS
- [NFT Viewer GitHubリポジトリ](https://github.com/alchemyplatform/Build-Your-NFT-Explorer)

### NFTビューアーのチュートリアル

Alchemyを使用してNFTビューアーdappを作成する手順は以下の通りです。

### 1. リポジトリをクローンする

NFT Viewerリポジトリをクローンするには、ターミナルを開いて以下のコマンドを実行してください。

<CodeSnippet
  code={`git clone https://github.com/alchemyplatform/Build-Your-NFT-Explorer.git`}
  language="text"
  theme="dark"
/>

### 2. npmをインストールする

NPMは「node package manager」の略です。npmをインストールするには、ターミナルから以下のコマンドを実行するだけです。

<CodeSnippet code={`npm install`} language="text" theme="dark" />

### 3. Alchemyでアカウントを作成する

[新しいAlchemyアカウント](https://dashboard.alchemy.com/signup/?a=d30817db92)を作成するか、すでにAlchemy開発者の場合は新しいアプリを作成してください。

アプリを作成したら、API Keyをコピーします。

<ImageBlock
  src="https://media.alchemy.com/1703688790-copy-api-key-on-alchemy.jpeg"
  alt="Alchemyダッシュボード：新しいアプリの作成とAPI Keyのコピー"
  width={1223}
  height={1009}
  caption="新しいAlchemyアプリを作成し、API Keyをコピーする"
/>

### 4. fetNFTs.jsファイル内のAPI Keyを置き換える

続いて、src/utils/fetchNFTs.js内のconst apiKey = "demo";を、自分のAlchemy API Keyに更新してください。

その後、ターミナルで以下のコマンドを実行します。

<CodeSnippet code={`npm start`} language="text" theme="dark" />

### 5. ウォレットアドレスを入力する

指定したウォレットアドレスが保有するNFTを表示するには、そのウォレットのアドレス文字列を入力するだけです。

<ImageBlock
  src="https://media.alchemy.com/1703688886-nft-viewer-user-interface.jpg"
  alt="NFT Viewer DappのユーザーインターフェースB"
  width={1600}
  height={817}
  caption="NFT Viewer DappのユーザーインターフェースB"
/>

このチュートリアルの詳細については、[この動画](https://www.youtube.com/watch?v=YehktV6LSqw)を参照してください。

### Alchemy NFT APIの使用

AlchemyのNFT APIを使用すると、ブロックチェーン上のNFTに関して必要な情報をすばやく取得でき、Ethereum、Polygon、Arbitrum、Optimism、およびEthereumテストネットに対応しています。

データを手動でスキャン、インデックス化、保存する代わりに、単一のリクエストを送信するだけで、ERC-721とERC-1155両方のトークンに関する特定のNFT情報を取得できます。これには、あるアドレスが保有するすべてのNFTを検索したり、特定のNFTトークンのメタデータ/属性を取得したりといった情報の取得が含まれます。

詳細については、[NFT APIドキュメント](https://www.alchemy.com/docs/reference/nft-api-quickstart)をご覧ください。

## NFT\(非代替性トークン\)とは？

**「NFT」という用語は、アート、音楽、ビデオゲームのアセットなど、実世界の作品を表すデジタルアセットを指します。**‍

2014年に登場したばかりですが、デジタルアートワークの売買にNFTを利用する動きは依然として人気を集め続けています。現在、Ethereum上にはNFT向けの複数のスマートコントラクト実装が存在し、主要な2つのトークン規格が[ERC-721とERC-1155](https://www.alchemy.com/blog/comparing-erc-721-to-erc-1155)です。

### ERC-721トークンとは？

2017年9月にEthereum Improvement Proposal\(EIP\)として初めて公開されて以来、ERC721トークン、別名Non-Fungible Tokens\(NFT\)は、開発者がEthereumブロックチェーン上で任意のデータの所有権をトークン化することを可能にしています。

ERC-721は、スマートコントラクトが技術的に実装しなければならない最小限のインターフェースを定義しています。この基本インターフェースは、トークンの所有権、取引、管理を可能にするものです。ERC-721はトークン関連情報の規格を必須としておらず、また最低要件を超える機能の実装を排除するものでもありません。

ERC-721トークン規格は、トークンの設計の幅を大きく広げました。各非代替性トークンは固有のIDに紐づけられているため、それぞれが所有者にとって唯一無二のものとなります。一方、ERC-20トークン規格に準拠したトークンは代替可能であり、互いに交換可能であることを意味します。

[Dapper Labs](https://www.alchemy.com/dapps/dapper-labs)の最高技術責任者であるDieter Shirley氏が、EIP\(Ethereum Improvement Proposal\)のドラフトとしてERC-721を設計し、これが最終的にゲーム[CryptoKitties](https://www.alchemy.com/dapps/cryptokitties)の基盤となりました。その他のERC-721の著者には、William Entriken氏、Jacob Evans氏、Nastassia Sachs氏がいます。

### ERC-1155とは？

**ERC-1155トークン規格は準代替性トークン向けのものであり、ERC20とERC721トークンの限界を解決するためにEnjinの開発チームによって作られました。**

以前は、ERC-20またはERC-721のもとで、代替可能な通貨と非代替性の通貨それぞれに対して別個のコントラクトが必要でした。さらに、旧来の規格は各コントラクトを別々のアドレスに分けることで、特定の機能を制限していました。その結果、Ethereumブロックチェーン上には未使用のバイトコードが散乱することになりました。

## まとめ

NFTはまだ黎明期にありますが、デジタル所有権、新たな収益源、コミュニティエンゲージメントの強化など、アーティストに並外れたメリットをもたらしつつあります。

NFT[アプリ](https://www.alchemy.com/dapps/top/defi-dapps)について引き続き学ぶには、以下のような関連チュートリアルをご覧ください。

1. [ERC-721トークンの作成方法](https://www.alchemy.com/docs/how-to-interact-with-erc-721-tokens-in-solidity)
1. [ERC-1155トークンの作成方法](https://www.alchemy.com/docs/how-to-interact-with-erc-20-tokens-in-solidity)
1. [ERC721AによるNFTのバッチミント方法](https://www.alchemy.com/overviews/erc721-vs-erc721a-batch-minting-nfts)