Discord埋め込みアプリの公式サンプルの取得とインストールと実行確認1/2

Discord は、さまざまな趣味ごとに用意されたサーバーの中で会話や交流が楽しめるプラットフォームです。

2024 年 3 月に Discord 上でプレイできるアプリを作成できる「Discord 埋め込みアプリソフトウェア開発キット (SDK) 」が公開されたので、ローカル環境に公式サンプルをダウンロード・インストールして、実行結果をウェブブラウザで確認します。

パート１（全２話）では、「Discord 埋め込みアプリソフトウェア開発キット (SDK) 」を用いた公式サンプルをダウンロード・インストールする手順を紹介します。
環境変数を定義する .env ファイルや、 npm install コマンドがインストールする内容についても紹介します。

前回の記事
公式のガイド
公式サンプルのダウンロード
環境変数を設定した .env の作成
1. .env ファイルについて
2. `.env`ファイルとは？
公式サンプルに必要なパッケージのインストール
1. devDependencies
今回はここまで
参照サイト Thank You!

前回の記事

前回は、Discord 上で動作するアプリを作成するための「Discord 埋め込みアプリソフトウェア開発キット (SDK) 」のインストールの手順を紹介しました。
PC ローカルで開発中の Discord 埋め込みアプリをインターネット上に公開して安全にテストするために cloudflared をインストールする手順も紹介しました。

公式のガイド

Discord 上でプレイできるゲームの作り方については公式の「Discord Developer Portal — Documentation — Getting Started」を参考にします。

そのページの中に書いてあるように、アプリ開発の際は、他の人が利用していない自分のサーバーでビルドおよびテストを行うように書かれています。

アプリ開発にあたっては、他の人がアクティブに利用していないサーバーでビルドおよびテストを行ってください。自分のサーバーがまだない方は、無料で作成できます。
Discord Developer Portal — Documentation — Getting Started

自分用の Discord のサーバーを作成する手順については後日公開の記事を参照してください。

公式サンプルのダウンロード

git コマンドで公式サンプルのソースなどをダウンロードします。

discord 埋め込みアプリの公式サンプルを git でカレントディレクトリにダウンロードします.

コマンドプロンプトのカレントディレクトリの直下に getting-started-activity フォルダが作成されてダウンロードされるので、 git コマンドを入力する前に、ダウンロード先の上位のディレクトリに cd コマンドで移動しましょう。

cd コマンドで異なるドライブのディレクトリに移動するには /d をつけます。
以下の例では mkdir でダウンロード先のディレクトリを作成しながら移動しました。

Microsoft Windows [Version 10.0.19045.4291]
(c) Microsoft Corporation. All rights reserved.

C:\Users\User>cd /d g:\dev

g:\Dev>mkdir Discord

g:\Dev>cd Discord

g:\Dev\Discord>mkdir EmbeddedApp

g:\Dev\Discord>cd EmbeddedApp

ダウンロード先のディレクトリに移動したら、以下の git コマンドで、カレントディレクトリの下に公式サンプルをダウンロードします。

git clone https://github.com/discord/getting-started-activity.git

git コマンドは筆者の環境では数秒で完了しました。

g:\Dev\Discord\EmbeddedApp>git clone https://github.com/discord/getting-started-activity.git
Cloning into 'getting-started-activity'...
remote: Enumerating objects: 23, done.
remote: Counting objects: 100% (14/14), done.
remote: Compressing objects: 100% (12/12), done.
Receiving objects:  69% (16/23)
Receiving objects: 100% (23/23), 47.23 KiB | 9.45 MiB/s, done.
Resolving deltas: 100% (3/3), done.

コマンドプロンプトのカレントディレクトリをエクスプローラで開くと getting-started-activity フォルダが作成されています。

環境変数を設定した .env の作成

ダウンロードにより作成されたフォルダ内にある example.env をコピー・リネームして .env ファイルを作成します。

discord 埋め込みアプリの公式サンプルの example.env をコピー＆リネームして .env ファイルを作成します..

コマンドプロンプトで copy コマンドを使って同様のことができます。

copy example.env .env

example.env ファイルには以下のテキストデータが保存されていました。

VITE_DISCORD_CLIENT_ID=YOUR_DISCORD_CLIENT_ID_HERE
DISCORD_CLIENT_SECRET=YOUR_DISCORD_CLIENT_SECRET

.env ファイルについて

.env ファイルは環境変数を定義したテキストファイルです。

`.env`ファイルとは？

`.env`（ドットエンヴ）ファイルは、環境変数を保存するためのシンプルなテキストファイルです。環境変数とは、プログラムが動作する環境に関する情報（例：データベースの接続情報、APIキーなど）を格納する変数のことです。
【Python】.envファイルについて分かりやすく理解したいときのための記事｜ごろじ

PHP などでも .env は使われているようですが、 Node.js でも 2023 年 9 月からサポートされました。

2023年9月頭にリリースされたNode.js v20.6.0にbuilt-in .env file supportという記載がありました。
Node.jsでdotenvがいらなくなったっぽいので使ってみる #JavaScript – Qiita

公式サンプルに必要なパッケージのインストール

ダウンロードした公式サンプルのフォルダ getting-started-activity の client フォルダに cd コマンドで移動します。

g:\Dev\Discord\EmbeddedApp>cd getting-started-activity

g:\Dev\Discord\EmbeddedApp\getting-started-activity>cd client

client ディレクトリで npm install を実行します。

npm install

npm install を使うと同じディレクトリの package.json の Dependencies と devDependencies に書かれたパッケージをインストールします。
※ npm install には他の使い方もあります。

npm installとpackage.jsonが存在するディレクトリでコマンドを打てば、package.jsonに記述されている依存パッケージを自動でインストールしてくれる
npmとpackage.json #Node.js – Qiita

公式サンプルの client/package.json には devDependencies だけがあります。

{
  "name": "getting-started-activity",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^5.0.8"
  }
}

devDependencies は開発で必要なパッケージのリストです。
vite というビルドツールが要素として記述されています。
参照：はじめに | Vite

devDependencies

devDependencies の頭にある dev は development(開発)という意味があり
その名の通り開発環境でのみ利用し、
本番環境にデプロイする際には不要なパッケージや依存関係を保存します。
eslint,prettier,tailwindcss などです。
dependenciesとdevDependenciesの違い

そのため今回は npm install により開発に必要な vite がインストールされました。

今回の npm install の結果は以下です。

g:\Dev\Discord\EmbeddedApp\getting-started-activity\client>npm install

added 10 packages, and audited 11 packages in 3s

3 packages are looking for funding
  run `npm fund` for details

1 moderate severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

g:\Dev\Discord\EmbeddedApp\getting-started-activity\client>

今回はここまで

今回、パート１（全２話）では、Discord 上でプレイできるアプリを作成できる「Discord 埋め込みアプリソフトウェア開発キット (SDK) 」を用いた公式サンプルをダウンロード・インストールする手順を紹介しました。
環境変数を定義する .env ファイルや、 npm install コマンドがインストールする内容についても紹介しました。