lesson-2_環境構築をしよう

🛠 環境構築をしていこう

まずはアプリの雛形であるソースコードをもとに、ローカル環境を作成します。

まだ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にシェアしてください!✨ 他の人たちとアウトプットが一致しているか確認したら、次のレッスンに進みましょう!