docs: add xapp section

docs/i18n/ja-jp/docusaurus-plugin-content-docs/current/getting-started.mdx

@@ -14,7 +14,7 @@ lang: ja-jp
 ## アプリを作成する {#create-an-app}
 最初にやるべきこと: Bolt で開発を始める前に、 [Slack アプリを作成](https://api.slack.com/apps/new)します。
 
-:::tip 
+:::tip
 
 いつもの仕事のさまたげにならないように、別に開発用のワークスペースを使用することをおすすめします — [新しいワークスペースを無料で作成](https://slack.com/get-started#create)できます。
 
@@ -50,7 +50,7 @@ Slack アプリで使用できるトークンには、ユーザートークン
 
 ![OAuth Tokens](/img/bot-token.png "OAuth Tokens")
 
-:::tip 
+:::tip
 
 トークンは、パスワードのように大切に扱い、[安全に保管](https://api.slack.com/docs/oauth-safety)してください。アプリではそのトークンを使用して、Slack ワークスペースからの情報を投稿および取得します。
 
@@ -140,7 +140,7 @@ import TabItem from '@theme/TabItem';
 
 このチュートリアルでは、[ソケットモード](https://api.slack.com/apis/connections/socket)を使用します。 Socket モードは、チームのために何かを作り始めたばかりの人にお勧めのオプションです。
 
-:::tip 
+:::tip
 
 ソケットモードを使うことで、アプリが公開された HTTP エンドポイントを公開せずに Events API やインタラクティブコンポーネントを利用できるようになります。このことは、開発時やファイヤーウォールの裏からのリクエストを受ける際に便利です。HTTP での方式はホスティング環境（[AWS](/deployments/aws-lambda) or [Heroku](/deployments/heroku)など）にデプロイするアプリや Slack App Directory で配布されるアプリに適しています。 HTTP での情報については[こちらのドキュメント](#setting-up-events)を参照してください。
 
@@ -161,7 +161,7 @@ import TabItem from '@theme/TabItem';
 
 2. Request URLを追加します。Slackはイベントに対応するHTTP POSTリクエストをこの[Request URL](https://api.slack.com/apis/connections/events-api#the-events-api__subscribing-to-event-types__events-api-request-urls)エンドポイントに送信します。Boltは`/slack/events`のパスを使用して、すべての受信リクエスト（ショートカット、イベント、インタラクティビティのペイロードなど）をリッスンします。アプリの設定でRequest URLを設定する際には、`https://<your-domain>/slack/events`のように`/slack/events`を追加します。💡
 
-:::tip 
+:::tip
 
 ローカル開発では、[ngrok](https://ngrok.com/)のようなプロキシサービスを使って公開 URL を作成し、リクエストを開発環境にトンネリングすることができます。このトンネリングの方法については、[ngrok のガイド](https://ngrok.com/docs#getting-started-expose)を参照してください。
 
@@ -188,6 +188,35 @@ import TabItem from '@theme/TabItem';
 
 もしボットに参加しているすべての場所で全てのメッセージイベントをリッスンさせたいなら、これら４つ全てのイベントを選んでください。選択したら、緑の **Save Changes** ボタンをクリックします。
 
+<Tabs groupId="socket-or-http">
+<TabItem value="socket-mode" label="Socket Mode">
+
+プロジェクトに戻り、先ほど保存した `xapp` トークンを環境変数に保存してください。
+
+```shell
+export SLACK_APP_TOKEN=xapp-<your-app-token>
+```
+
+Bolt の初期化部分のコードを変更し、アプリを再起動してください。
+
+```javascript
+// ソケットモードでトークンおよび signing secret で初期化します。
+const app = new App({
+  token: process.env.SLACK_BOT_TOKEN,
+  signingSecret: process.env.SLACK_SIGNING_SECRET,
+  socketMode: true, // add this
+  appToken: process.env.SLACK_APP_TOKEN // add this
+});
+```
+
+</TabItem>
+<TabItem value="http" label="HTTP">
+
+続けましょう！
+
+</TabItem>
+</Tabs>
+
 ---
 
 ## メッセージのリスニングと応答 {#listening-and-responding-to-a-message}
@@ -273,7 +302,7 @@ app.message('hello', async ({ message, say }) => {
 
 アプリ設定ページに戻り、左側の  **Interactivity & Shortcuts**  をクリックします。**Request URL**  ボックスがもう 1 つあることがわかります。
 
-:::tip 
+:::tip
 
 デフォルトでは、Bolt はイベントに使用しているのと同じエンドポイントをインタラクティブコンポーネントに使用するように設定されているため、上記と同じリクエスト URL (この例では `https://8e8ec2d7.ngrok.io/slack/events`) を使用します。右下隅にある  **Save Changes**  ボタンを押してください。これでアプリのインタラクティブなコンポーネントを利用する設定が有効になりました!
 
@@ -392,7 +421,7 @@ app.message('hello', async ({ message, say }) => {
 
 このボタン `accessory` オブジェクトには、`action_id` が割り当てられています。これはボタンの一意の識別子として機能するため、アプリはどのアクションに応答するかを指定できます。
 
-:::tip 
+:::tip
 
 [Block Kit ビルダー](https://app.slack.com/block-kit-builder)を使うとインタラクティブメッセージを簡単にプロトタイプすることができます。ビルダーを使用すると、ユーザー (またはそのチームメンバー) はメッセージをモックアップして、対応する JSON を生成し、それをアプリに直接貼り付けることができます。
 
@@ -524,4 +553,4 @@ app.action('button_click', async ({ body, ack, say }) => {
 
 * ボットが[`events()` メソッド](/concepts/event-listening)でリッスンできるさまざまなイベントを確認しましょう。イベントはすべて[API サイト](https://api.slack.com/events)にリストされています。
 
-* Bolt を使用すると、アプリにアタッチされているクライアントで [Web API メソッドを呼び出す](/concepts/web-api)ことができます。API サイトに [200 を超えるメソッド](https://api.slack.com/methods)を用意してあります。
+* Bolt を使用すると、アプリにアタッチされているクライアントで [Web API メソッドを呼び出す](/concepts/web-api)ことができます。API サイトに [200 を超えるメソッド](https://api.slack.com/methods)を用意してあります。