Solanaのウォレット開発にチャレンジしてみよう
🥭 Solana Wallet 開発プロジェクトへようこそ
このプロジェクトでは、Solana対応のウォレットの開発を行なっていきます。
プロジェクトを進めるには以下の技術が必要です。
⛅️ Solana とは何か？
Solana（ソラナ）は、スケーラビリティを優先した方法で分散型アプリケーション（dApps）の基盤を提供しようとするプラットフォームです。
Solanaは、 Ethereum, Cardanoなどと競合するブロックチェーン・プロジェクトの1つで、暗号資産を利用した製品やサービスのエコシステムを成長させることを目的としています。
Solanaは、差別化を図るため、取引決済時間の短縮を図るアーキテクチャ設計の選択と、開発者が複数のプログラミング言語でカスタマイズ可能なアプリケーションを作成・起動できる、柔軟性に重点を置いたインフラを組み合わせて導入しています。
これらの機能を実現するために、 Solanaのネットワークのネイティブ暗号資産であるSOLは、カスタムプログラムの実行、トランザクションの送信、 Solanaネットワークをサポートする人へのインセンティブに使用されています。
最近ですと、Move and Earnの「STEPN」がSolana基盤で作られていることで、注目を浴びてますね 👟
👛 ウォレット（Wallet） とは何か？
暗号資産のウォレットは、秘密鍵（あなたの暗号資産にアクセスするためのパスワード）を安全で利用しやすいものにし、BTCやETH, そして今回扱うSOLなどの暗号資産の出入庫を可能にします。ウォレットには、Ledger（USBメモリのようなもの）のようなハードウェアウォレットからモバイルアプリまでさまざまな形態があります。ウォレットを使 うと、オンラインでクレジットカードを使って買い物をするのと同じくらい簡単に暗号資産を使用することができます。
🛠 何を開発するのか？
このレッスンでは、オンチェーン資金の受け取りと送金によってSolanaブロックチェーン上で資金の確認、エアドロップ、送金ができる最低限の機能的なウォレットを作っていきます。
次のセクションで環境構築を行い、それ以降でウォレットの作成や復元、残高の確認や送金などの機能を開発していきます。
すでにMetaMaskやPhantomといったウォレットを使ったことがある方にとっては、内部の仕組みや動きを知ることができ、ウォレットに対する知識がより深まると思います。
- レッスン完了後の画面イメージ
🌍 プロジェクトをアップグレードする
UNCHAIN のプロジェクトは UNCHAIN License により運用されています。
プロジェクトに参加していて、「こうすればもっと分かりやすいのに!」「これは間違っている!」と思ったら、ぜひpull requestを送ってください。
GitHubから直接コードを編集して直接pull requestを送る方法は、こちらを参照してください。
どんなリクエストでも大歓迎です 🎉
また、プロジェクトを自分のGitHubアカウントにForkして、中身を編集してからpull requestを送ることもできます。
⚡️ Issueを作成する
pull request送るほどでもないけど、提案を残したい! と思ったら、こちら にIssueを作成してみましょう。
Issueの作成方法に関しては、こちらを参照してください。
pull requestやissueの作成は実際にチームで開発する際、重要な作業になるので、ぜひトライしてみてください。
UNCHAINのプロジェクトをみんなでより良いものにしていきましょう ✨
次のレッスンに進んでプログラミングの環境構築しましょう 🎉
Documentation created by mango55555go（UNCHAIN discord ID: mango55555go#6826）
環境構築をしよう
🛠 環境構築をしていこう
まずはアプリの雛形であるソースコードをもとに、ローカル環境を作成します。
まだGitHubのアカウントをお持ちでない方は、こちら の手順に沿ってアカウントを作成してください。
GitHubのアカウントをお持ちの方は、下記の手順に沿ってフロントエンドの基盤となるリポジトリをあなたのGitHubにフォークしましょう。
1. こちらからunchain-tech/Solana-Walletリポジトリにアクセスをして、ページ右上のForkボタンをクリックします。
2. Create a new forkページが開くので、「Copy the main branch only」という項目にチェックが入っていることを確認します。
3. 設定が完了したらCreate forkボタンをクリックします。あなたのGitHubアカウントにSolana-Walletリポジトリのフォークが作成されたことを確認してください。
それでは、フォークしたリポジトリをローカル環境にクローンしましょう。
CodeボタンをクリックしてSSHを選択し、Gitリンクをコピーしましょう。
ターミナルで任意の作業ディレクトリに移動し、先ほどコピーしたリンクを貼り付け、下記を実行してください。
git clone コピーした_github_リンク
ターミナル上でSolana-Walletに移動して下記を実行しましょう。
npm install
npmコマンドを実行することで、 JavaScriptライブラリのインストールが行われます。
次に、下記を実行してみましょう。
npm run dev
あなたのローカル環境で、Webサイトのフロントエンドが立ち上がりましたか？
ローカル環境で表示されている Web サイト
上記のような形でフロントエンドが確認できれば成功です。
これからフロントエンドの表示を確認したい時は、ターミナルに向かい、Solana-Walletディレクトリ上で、npm run devを実行します。これからも必要となる作業ですので、よく覚えておいてください。
ターミナルを閉じるときは、以下のコマンドが使えます ✍️
- Mac:
ctrl + c - Windows:
ctrl + shift + w
🎁 雛形のソースコードについて
雛形ではすでに @solana/web3.js というライブラリがインストールされるようになっています。 このJavascriptで記述されたライブラリは、 Solanaのプログラムと対話するプログラムを書くのに役立ちます。
また Tailwind CSS というUtility Firstを掲げて設計されたCSSフレームワークも導入しています。
これからウォレット開発を進めていく上で変更されるファイルは以下になります。
pages/index.jsおよびcomponents/各コンポーネント/index.js: メインで変更を加えていくファイルpackage.jsonおよびpackage-lock.json: ライブラリを新しく追加した際に変更されるファイル
✅ テストスクリプトについて
このプロジェクトには、各コンポーネントのテストスクリプトがcomponents/各コンポーネント/index.test.jsとして格納されていま す。これらは、期待するMVPの機能が実装されているかをテストする内容となっており、テストフレームワークとしてJestを、UIコンポーネントのテストを行うためにTesting Libraryを導入しています。Solanaネットワークとやり取りを行う機能をモック（模擬）しているため、ブラウザ上で実際に動作確認を行うよりもより迅速に機能テストを行うことが可能です。ただし、あくまでも模擬的なので、各コンポーネントの実装ができたら実際にSolanaネットワークを使用した動作確認をブラウザ上で行いましょう！
🙋♂️ 質問する
ここまでの作業で何かわからないことがある場合は、Discordの#solanaで質問をしてください。
ヘルプをするときのフローが円滑になるので、エラーレポートには下記の3点を記載してください ✨
1. 質問が関連しているセクション番号とレッスン番号
2. 何をしようとしていたか
3. エラー文をコピー&ペースト
4. エラー画面のスクリーンショット
ターミナルでnpm run devを実行した出力結果をDiscordの#solanaにシェアしてください!✨ 他の人たちとアウトプットが一致しているか確認したら、次のレッスンに進みましょう!