<h2>概要</h2>
<p>React、TypeScript、Storybook、Rollup、Jestを用いてコンポーネントライブラリを作成し、Storybookに公開していくまでの流れを書いていきます。</p>
<h2>コンポーネント作成</h2>
<h3>ディレクトリ作成</h3>
<p>新規ディレクトリを作成し、プロジェクトを初期化していく。</p>
<pre><code>mkdir react-component-library
cd react-component-library
npm init -y
</code></pre>
<p>React、TypeScriptをインストールする。</p>
<pre><code>npm install react typescript @types/react --save-dev
</code></pre>
<h3>コンポーネントの作成</h3>
<p>Buttonコンポーネントを作成する。<br>
まず、プロジェクト直下にsrcディレクトリを作成し、下記のディレクトリとファイルを作成する。</p>
<pre><code>src/index.ts
src/components
src/componetns/index.ts
src/components//Button
src/components/Button/Button.tsx
src/components/Button/index.ts
</code></pre>
<p>src/components/Button/Button.tsxでButtonコンポーネントを作成します。</p>
<pre><code>import React from &quot;react&quot;;

export interface ButtonProps {
  text: string;
}
const Button = (props: ButtonProps) =&gt; {
  return &lt;button&gt;{props.text}&lt;/button&gt;;
};

export default Button;
export type { ButtonProps }
</code></pre>
<p>Button.tsxでデフォルトエクスポートされているButtonコンポーネントを下記index.tsファイルで再エクスポートする。<br>
src/components/Button/index.ts</p>
<pre><code>export { default } from &quot;./Button&quot;;
</code></pre>
<p>今度は下記ファイルでcomponentsディレクトリからボタンをエクスポートする。<br>
src/components/index.ts</p>
<pre><code>export { default as Button } from &quot;./Button&quot;;
</code></pre>
<p>最後に全てのコンポーネントをsrcディレクトリからエクスポートする。<br>
src/index.ts</p>
<pre><code>export * from './components';
</code></pre>
<h2>TypeScriptの初期化</h2>
<p>TypeScriptの初期化を行う。</p>
<pre><code>npx tsc --init
</code></pre>
<p>tsconfig.jsonの中身は以下である。</p>
<pre><code>{
  &quot;compilerOptions&quot;: {
    &quot;target&quot;: &quot;es2016&quot;,                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    &quot;jsx&quot;: &quot;react&quot;,                                /* Specify what JSX code is generated. */
    &quot;module&quot;: &quot;ESNext&quot;,                                /* Specify what module code is generated. */
    &quot;moduleResolution&quot;: &quot;node&quot;,                       /* Specify how TypeScript looks up a file from a given module specifier. */
    &quot;declaration&quot;: true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
    &quot;emitDeclarationOnly&quot;: true,                      /* Only output d.ts files and not JavaScript files. */
    &quot;sourceMap&quot;: true,                                /* Create source map files for emitted JavaScript files. In this project, we will use rollup to bundle JavaScript and we will uses TypeScript to process type files. */
    &quot;outDir&quot;: &quot;distx&quot;,                                   /* Specify an output folder for all emitted files. */
    &quot;declarationDir&quot;: &quot;types&quot;,                           /* Specify the output directory for generated declaration files. */
    &quot;allowSyntheticDefaultImports&quot;: true,             /* Allow 'import x from y' when a module doesn't have a default export. */
    &quot;esModuleInterop&quot;: true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    &quot;strict&quot;: true,                                      /* Enable all strict type-checking options. */
    &quot;skipLibCheck&quot;: true                                 /* Skip type checking all .d.ts files. */
  }
}

</code></pre>
<h2>Rollup</h2>
<p>ファイルのバンドルツールとしてライブラリのバンドルでよく使われるRollupを使用する。<br>
Rollupと4つのプラグインをインストールする。</p>
<pre><code>npm install rollup @rollup/plugin-node-resolve @rollup/plugin-typescript @rollup/plugin-commonjs rollup-plugin-dts --save-dev

</code></pre>
<ul>
<li>@rollup/plugin-node-resolve → ノード解決アルゴリズムを使用する。</li>
<li>@rollup/plugin-typescript → TypeScriptのファイルの処理の仕方をRollupに伝える。</li>
<li>@rollup/plugin-commonjs → es6だけじゃなく、commonjsでも使えるようにする。</li>
<li>rollup-plugin-dts → d.tsの定義ファイルをバンドルする。</li>
</ul>
<p>rollup.config.mjs</p>
<pre><code>import resolve from &quot;@rollup/plugin-node-resolve&quot;;
import commonjs from &quot;@rollup/plugin-commonjs&quot;;
import typescript from &quot;@rollup/plugin-typescript&quot;;
import dts from &quot;rollup-plugin-dts&quot;;

import packageJson from &quot;./package.json&quot; assert { type: &quot;json&quot; };

export default [
  {
    input: &quot;src/index.ts&quot;,
    output: [
      {
        file: packageJson.main,
        format: &quot;cjs&quot;,
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: &quot;esm&quot;,
        sourcemap: true,
      },
    ],
    plugins: [
      resolve(),
      commonjs(),
      typescript({ tsconfig: &quot;./tsconfig.json&quot; }),
    ],
  },
  {
    input: &quot;dist/esm/types/index.d.ts&quot;,
    output: [{ file: &quot;dist/index.d.ts&quot;, format: &quot;esm&quot; }],
    plugins: [dts()],
  },
];
</code></pre>
<h3>Rollupをscriptに記述</h3>
<p>package.json</p>
<pre><code>{
  &quot;name&quot;: &quot;library-sample&quot;,
  &quot;version&quot;: &quot;0.0.1&quot;,
  &quot;type&quot;: &quot;module&quot;,
  &quot;description&quot;: &quot;A react component library&quot;,
  &quot;scripts&quot;: {
    &quot;rollup&quot;: &quot;rollup -c&quot; // ← ここ
  },
  &quot;repository&quot;: {
    &quot;type&quot;: &quot;git&quot;,
    &quot;url&quot;: &quot;git+https://github.com/shun1121/library-sample.git&quot;
  },
  &quot;author&quot;: &quot;Shun&quot;,
  &quot;license&quot;: &quot;ISC&quot;,
  &quot;bugs&quot;: {
    &quot;url&quot;: &quot;https://github.com/shun1121/library-sample/issues&quot;
  },
  &quot;homepage&quot;: &quot;https://github.com/shun1121/library-sample#readme&quot;,
  &quot;devDependencies&quot;: {
    &quot;@rollup/plugin-commonjs&quot;: &quot;^24.0.1&quot;,
    &quot;@rollup/plugin-node-resolve&quot;: &quot;^15.0.1&quot;,
    &quot;@rollup/plugin-typescript&quot;: &quot;^11.0.0&quot;,
    &quot;@types/react&quot;: &quot;^18.0.28&quot;,
    &quot;react&quot;: &quot;^18.2.0&quot;,
    &quot;rollup&quot;: &quot;^3.17.2&quot;,
    &quot;rollup-plugin-dts&quot;: &quot;^5.2.0&quot;,
    &quot;tslib&quot;: &quot;^2.5.0&quot;,
    &quot;typescript&quot;: &quot;^4.9.5&quot;
  },
  &quot;main&quot;: &quot;dist/cjs/index.js&quot;,
  &quot;module&quot;: &quot;dist/esm/index.js&quot;,
  &quot;files&quot;: [
    &quot;dist&quot;
  ],
  &quot;types&quot;: &quot;dist/index.d.ts&quot;
}
</code></pre>
<h3>バンドル</h3>
<p>下記コマンドを実行してファイルをバンドルする。</p>
<pre><code>npm run rollup
</code></pre>
<p>すると、cjsとesmディレクトリが中に入っているdistディレクトリが生成される。</p>
<h2>ライブラリの公開</h2>
<h3>Git管理</h3>
<p>作成したコンポーネントライブラリ用のリモートリポジトリを作成する。</p>
<h3>パッケージの公開先設定</h3>
<p>nameを&quot;@GITHUB_USERNAME/REPOSITORY_NAME&quot;<br>
publishConfigのregistryを&quot;https://npm.pkg.github.com/GITHUB_USERNAME&quot;<br>
に変更する。</p>
<pre><code>
{
  &quot;name&quot;: &quot;@shun1121/library-sample&quot;,  // ← 変更

   ...

  &quot;publishConfig&quot;: {
    &quot;registry&quot;: &quot;https://npm.pkg.github.com/shun1121&quot; // ← 変更
  }
}
</code></pre>
<p>この修正をして下記コマンドを打つとエラーがでる。</p>
<pre><code>npm publish
</code></pre>
<p>Githubに公開する許可を得るために、npm自体をローカルにインストールするための設定を行う必要がある。<br>
ホームディレクトリに~/.npmrcファイルを作成する。<br>
その中に下記記述を行う。大文字のところを自分のユーザ名やトークンで置き換える。</p>
<pre><code>registry=https://registry.npmjs.org/
@GITHUB_USERNAME:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=YOUR_AUTH_TOKEN
</code></pre>
<p>トークンは、Settings -&gt; Developer Settings -&gt; Personal access tokensから生成する。<br>
その際に、write:packagesにチェックを入れておく。<br>
最後に、下記コマンドでパッケージを公開する。</p>
<pre><code>npm publish
</code></pre>


Reactコンポーネントライブラリの作成

<h2>Nest.jsの概要</h2>
<p>Node.jsで動作するオープンソースのバックエンド開発フレームワークで、TypeScriptで作られている。<br>
Node.jsのサーバサイドフレームワークであるExpressをコアに作られており、Expressの機能も使えるようになっている。</p>
<h2>Nest.jsのメリット</h2>
<ul>
<li>TypeScriptを用いるので型の恩恵を得られる。</li>
<li>ExpressをコアにしているのでExpressの機能やライブラリを使用することができる。</li>
<li>Nest CLIが用意されており、コマンドでプロジェクトやファイルテンプレートの生成ができる。</li>
<li>テストのフレームワークが標準で備わっているため、複雑な設定がいらない。</li>
<li>データベースはRDB、NoSQL、セキュリティ、GraphQL、WebSocketなどが使えるため、拡張性が高い。</li>
</ul>
<h2>Nest.jsのデメリット</h2>
<ul>
<li>Ruby on RailsやLaravel、Djangoなどと比べてユーザ数が少なく、それゆえ情報が少ない。</li>
<li>公式ドキュメントが日本語に対応していない。</li>
</ul>
<h2>プロジェクトの作成</h2>
<h2>Nest CLI</h2>
<p><code>nest new プロジェクト名</code>など、コマンドでプロジェクトやコントローラetc...を作ることができる。</p>
<h3>プロジェクト作成</h3>
<pre><code>nest new sample-project
</code></pre>
<p>Which package manager would you 💔 to use?<br>
はnpmでもyarnでもどちらでも大丈夫です。</p>
<p>作成されたプロジェクトをvscodeで開きます。</p>
<pre><code>cd sample-project
code .
</code></pre>
<p>main.ts - プロジェクトのエントリーポイント。nestの起動コマンドで最初に実行される。</p>
<h2>Nest.jsの基本要素</h2>
<p>以下の3つが1つの機能を作る基本要素となります。</p>
<ul>
<li>Controller</li>
<li>Service</li>
<li>Module</li>
</ul>
<h2>Nest.jsのアーキテクチャ</h2>
<p>アプリケーション       ルートモジュール       フィーチャーモジュール       フィーチャーサービス<br>
main.ts         →     app.module.ts        →    feature.module.ts        →      feature.service.ts<br>
↑<br>
→    feature.controller.ts<br>
フィーチャーコントローラ</p>
<p>main.tsがスタート地点。<br>
app.module.tsをmain.tsに登録する。ルートモジュールは開発した機能を集約し、アプリケーションに登録する役割を持ちます。<br>
feature.module.tsで開発した機能をapp.module.tsに登録する。ユーザに関するユーザモジュールなど。<br>
機能が増えていくと、フィーチャーモジュール、サービス、コントローラが増えていきます。</p>
<h2>Module</h2>
<p>Moduleは、関連するContorllerやServiceをまとめてアプリケーションとして使えるようにNest.jsに登録する役割を持ち、一つ以上のルートモジュールと０個以上のフィーチャーモジュールが必要です。</p>
<h2>Module定義</h2>
<p>module定義の例は以下のようになります。<br>
app.module.ts</p>
<pre><code>@Module({
  imports: [ItemsModule],  // モジュール内部で必要になる外部モジュールを記述。
  controllers: [AppController], //@Controllerデコレータがついたクラスを記述。
  providers: [AppService],    // @Injectableデコレータが付いたクラスを記述できる。Serviceクラスが主。
  exports: [],  // 外部のモジュールで使えるようにしたいものを記述。
})
export class AppModule {}
</code></pre>
<p>class名の上に@Module()でコレータを助けます。<br>
そして、オブジェクト形式で@Module()デコレータのプロパティを記述します。</p>
<p>items.module.ts</p>
<pre><code>@Module({
  imports: [],
  controllers: [ItemsController],
  providers: [ItemsService],
})
export class ItemsModule {}
</code></pre>
<p>ルートモジュールにItemsModuleを登録しておく。</p>
<h2>フィーチャーモジュールの作成</h2>
<p>次のNest CLIを実行します。</p>
<pre><code>nest g module items
</code></pre>
<p>すると、src/配下にitemsディレクトリが作成されます。<br>
itemsディレクトリにはitems.module.tsが作成され、app.module.tsには作成したItemsModuleがimportsの中に自動的に記述されます。</p>
<h2>Controller</h2>
<p>Controllerはクライアントからのリクエストを受け取り、レスポンスをクライアントに返します。つまり、ルーティングの機能を担います。<br>
ルーティングは特定のパスとControllerが紐づけられて行われます。<br>
下記は/usersにリクエストがくるとusersControllerを実行することができる。<br>
例）<br>
パス：/users  →  コントローラ：usersController</p>
<p>紐付け処理はControllerの中で行います。<br>
例）<br>
findAll()<br>
GET /<br>
↑は GET http://localhost:3000/ のリクエストが来たとき実行される。</p>
<h2>コントローラの作成</h2>
<pre><code>nest g controller items --no-spec
</code></pre>
<p>上記を実行すると、itemsディレクトリにitems.controller.tsが作成されます。<br>
items.controller.ts</p>
<pre><code>import { Controller } from '@nestjs/common';

@Controller('items')
export class ItemsController {}
</code></pre>
<p>@Controller('items')の引数がitemsなので、itemsControllerはitemsに紐づけられています。<br>
そして、フィーチャーモジュールのitems.module.tsを見ると、controllersプロパティにItemsControllerクラスが記述されています。</p>
<h2>ハンドラの実装</h2>
<p>items.controller.ts</p>
<pre><code>import { Controller, Get } from '@nestjs/common';

@Controller('items')
export class ItemsController {
  @Get()
  findAll() {
    return 'executed findAlll'
  }
}
</code></pre>
<p>動作確認をします。</p>
<pre><code>npm run start:dev
</code></pre>
<p>postmanで下記内容でSendすると、findAll関数で指定した文字列が表示されます。</p>
<pre><code>GET http://localhost:3000/items 
</code></pre>
<h2>Service</h2>
<p>Serviceにはロジックを定義します。<br>
Controllerから呼び出すことでユーザからのリクエストを受け付け、処理を行います。</p>
<h2>Dependency Injection (DI)</h2>
<p>依存関係のあるオブジェクトを外部から注入すること。</p>
<h3>用途</h3>
<p>本番とテスト用でインスタンスを切り替えたり、ログの出力先の切り替えの際使うことが考えられます。</p>
<h2>Service定義</h2>
<p>Serviceではクラスの上に@Injectable()デコレータをつけます。クラス内にはロジックを実現するメソッドを作成します。</p>
<h2>ControllerとServiceの紐付け</h2>
<p>フィーチャーModuleのprovidersにServiceを登録します。<br>
そして、ControllerのconstructorでServiceを引数に取ります。</p>
<h2>Serviceの作成</h2>
<pre><code>nest g service items --no-spec
</code></pre>
<p>itemsディレクトリにitems.service.tsが作成され、@Injectable()デコレーターがついたクラスが定義されています。<br>
items.module.tsのprovidersプロパティにItemsServiceが自動的に設定されています。<br>
ItemsServiceがDIコンテナに登録されたので、Serviceクラスにメソッドを定義してControllerクラスから使用します。</p>
<p>items.service.ts</p>
<pre><code>import { Injectable } from '@nestjs/common';

@Injectable()
export class ItemsService {
  findAll() {
    return 'ItemsService'
  }
}
</code></pre>
<p>Serviceの中のメソッドをControllerで使用したいので、ControllerのコンストラクタにDIしていきます。</p>
<p>items.controller.ts</p>
<pre><code>import { Controller, Get } from '@nestjs/common';
import { ItemsService } from './items.service';

@Controller('items')
export class ItemsController {
  constructor(private readonly itemsService: ItemsSservice) {}
  @Get()
  findAll() {
    return this.itemsService.findAll();
  }
}
</code></pre>
<p>postmanで動作確認をして、'ItemsService'と表示できていたら呼び出し成功です。</p>


Nest.js入門

<h2>概要</h2>
<p>指定のチャンネルとプロフィールのステータスにスタンプを設定するSlackアプリを個人的に使っていたのですが、ワークスペース内の他のメンバーにも使ってもらおうと思い、既存のアプリを修正しました。<br>
<a href="">https://github.com/shun1121/change-status</a></p>
<h2>主な使用技術</h2>
<ul>
<li>&quot;express&quot;: &quot;^4.18.1&quot;</li>
<li>&quot;firebase&quot;: &quot;^9.12.1&quot;</li>
<li>&quot;@slack/events-api&quot;: &quot;^3.0.1&quot;,</li>
<li>&quot;@slack/web-api&quot;: &quot;^6.7.2&quot;,</li>
<li>&quot;firebase-admin&quot;: &quot;^11.2.0&quot;,</li>
<li>&quot;firebase-functions&quot;: &quot;^3.24.1&quot;</li>
</ul>
<h2>使用するSlack API</h2>
<ul>
<li><a href="https://api.slack.com/methods/chat.postMessage">chat.postMessage</a></li>
<li><a href="https://api.slack.com/methods/users.profile.set">users.profile.set</a></li>
<li><a href="https://api.slack.com/methods/oauth.v2.access">oauth.v2.access</a></li>
</ul>
<h2>Slack Appの作成</h2>
<p><a href="https://reffect.co.jp/html/slack">こちらのサイト</a>の4章までを参考にSlackアプリの作成と、5.3章のSlash Commandの設定を行っておきます。このサイトでは<a href="https://ngrok.com/">ngrok</a>を使っていますが、cloud functionsにデプロイします。　また、私のアプリでは<code>/functions/index.js</code>で<code>web.chat.postMessage</code>を使っていますが、<code>res.send(&quot;&quot;)</code>がないとチャンネルにスタンプ送信できなかったので記述しておきます。</p>
<h3>Cloud Functionsへのデプロイ、CloudFirestoreの設定</h3>
<p><a href="https://www.boel.co.jp/tips/vol124/">このサイト</a>を参考に、作成したアプリをCloud Functionsへデプロイを行います。<br>
また、ワークスペース内のメンバーのユーザ情報を保存するのに、CloudFirestoreを使用するので<a href="https://firebase.google.com/docs/firestore/quickstart?hl=ja">こちら</a>からその設定も行っておきます。</p>
<h2>OAuthでSlack Appの共有</h2>
<p><a href="https://github.com/shun1121/change-status/blob/8f5ddafdf03deca7d6d436371949533db6bb29de/functions/index.js">既存のアプリ</a>を同じワークスペースのメンバーに使ってもらうために、OAuthを使用します。</p>
<h3>OAuth認証の手順</h3>
<ol>
<li>
<p><a href="https://slack.com/oauth/v2/authorize">https://slack.com/oauth/v2/authorize</a> に必要なパラメータを与え、Webブラウザでアクセスします。<br>
これは、SlackアプリのManage DistributionにあるSharable URLで参照でき、client_idやアプリ作成時にOAuth &amp; Permissionsで設定しているScopesが付与されているのを確認できます。</p>
</li>
<li>
<p>「(アプリ名)が(ワークスペース名)ワークスペースにアクセスする権限をリクエストしています」という画面が出るので、「許可する」ボタンを押します。</p>
</li>
<li>
<p>SlackアプリのRedirect URLsに登録したURLにリクエストが飛びます。</p>
</li>
<li>
<p>リクエストのURLに<code>code</code>から始まる認可コードが含まれているので、それを取得します。※</p>
</li>
<li>
<p>取得した認可コードを使って<a href="https://api.slack.com/methods/oauth.v2.access">oauth.v2.access</a> にリクエストしてアクセストークンを取得します。※</p>
</li>
</ol>
<p>※ 4、5に関して</p>
<pre><code class="language-js">...
app.get(&quot;/&quot;, async (req, res) =&gt; {
  const code = req.query.code;   // ※4 req.query.codeで認可コードを取得
  const error = req.query.error;
  const clientId = process.env.CLIENT_ID;
  const clientSecret = process.env.CLIENT_SECRET;
  if (code) {
    const slack = new WebClient();
    const result = await slack.oauth.v2.access({ // ※5 認可コードを使ってアクセストークンを取得
      client_id: clientId,
      client_secret: clientSecret,
      code,
    });

              ...

    const docRef = db.collection(&quot;users&quot;).doc(result.authed_user.id);
    await docRef.set({  // CloudFirestoreにアクセストークン等を保存
      id: result.authed_user.id,
      access_token: result.authed_user.access_token,
      created_at: created_at,
    });
  } else if (error) {
    res.send(&quot;認証がキャンセルされました。&quot;);
  }
});

</code></pre>
<p><a href="https://api.slack.com/methods/oauth.v2.access">oauth.v2.access</a> のレスポンスの内容は以下のような形式です。</p>
<pre><code class="language-json">{
    &quot;ok&quot;: true,
    &quot;app_id&quot;: &quot;**************&quot;,
    &quot;authed_user&quot;: {
        &quot;id&quot;: &quot;**************&quot;,
        &quot;scope&quot;: &quot;****************&quot;,
        &quot;access_token&quot;: &quot;****-**********-*******&quot;,
        &quot;token_type&quot;: &quot;***&quot;
    },
    &quot;scope&quot;: &quot;*************&quot;,
    &quot;token_type&quot;: &quot;****&quot;,
    &quot;access_token&quot;: &quot;****-*******-****************&quot;,
    &quot;bot_user_id&quot;: &quot;**********&quot;,
    &quot;team&quot;: {
        &quot;id&quot;: &quot;*******&quot;,
        &quot;name&quot;: &quot;**********&quot;
    },
    &quot;enterprise&quot;: &quot;****&quot;,
    &quot;is_enterprise_install&quot;: &quot;*****&quot;,
    &quot;response_metadata&quot;: {}
}
</code></pre>
<h2>コールドスタートに伴うoperation_timeout</h2>
<p>CloudFirestoreに保存したアクセストークンとそのユーザを紐づけ、該当のトークンを設定する処理をSlashコマンドが打たれたタイミングで行います。POSTリクエストのreq.bodyにSlashコマンドを打ったユーザの情報があるため、そちらを使用してCloudFirestoreのdocumentに設定したidと照合しています。<br>
下記記載のコードで挙動としてはほとんどできていたのですが、時間をあけてSlashコマンドを実行すると数秒から十数秒時間がかかり、<code>oparation_timeout</code>のエラーが出るようになりました。<br>
そこで、<a href="https://qiita.com/takehilo/items/9ab4a25a02b8328a6d5e">こちらの記事</a>を参考にリージョンとメモリサイズの変更を行いました。</p>
<pre><code>...
exports.slackApp = functions.runWith({ memory: '512MB' }).region(&quot;asia-northeast1&quot;).https.onRequest(app);

</code></pre>
<p>この変更を行ってから、コールドスタート時でも遅くとも2300ms以内にレスポンスが返るようになり、timeoutエラーを防ぐことができました。</p>
<h2>参考</h2>
<p><a href="https://api.slack.com/authentication/oauth-v2#exchanging">https://api.slack.com/authentication/oauth-v2#exchanging</a><br>
<a href="https://nado1999.me/articles/slack-oauth-token-20220407">https://nado1999.me/articles/slack-oauth-token-20220407</a><br>
<a href="https://qiita.com/subarunari/items/3e4c6060fcefd4c65257">https://qiita.com/subarunari/items/3e4c6060fcefd4c65257</a><br>
<a href="https://qiita.com/dbgso/items/a95a3364d9a8c67f3387">https://qiita.com/dbgso/items/a95a3364d9a8c67f3387</a><br>
<a href="https://qiita.com/takehilo/items/9ab4a25a02b8328a6d5e">https://qiita.com/takehilo/items/9ab4a25a02b8328a6d5e</a><br>
<a href="https://reffect.co.jp/html/slack#ngrok">https://reffect.co.jp/html/slack#ngrok</a><br>
<a href="https://firebase.google.com/docs/firestore/quickstart?hl=ja">https://firebase.google.com/docs/firestore/quickstart?hl=ja</a><br>
<a href="https://www.boel.co.jp/tips/vol124/">https://www.boel.co.jp/tips/vol124/</a></p>


Expressで作成したSlackアプリをワークスペース内で共有するときの手順と詰まった点

<h2>環境</h2>
<p>・Next.js: 12.2.5<br>
・TypeScript: 4.7.4</p>
<h2>アクセストークンを環境変数として設置</h2>
<p>Githubの「personal profile」から、「Settings」→「Developer settings」→「Personal access token」でアクセストークンを作成し、.env.localファイルに記述しておきます。</p>
<h2>Apollo Clientの導入</h2>
<p>@apollo/client と graphql をインストールします。</p>
<pre><code>yarn add @apollo/client graphql
</code></pre>
<h2>Apollo Clientの作成、クエリ作成の準備</h2>
<h3>clientの作成</h3>
<pre><code>import { ApolloClient, InMemoryCache } from &quot;@apollo/client&quot;;

const client = new ApolloClient({
    uri: &quot;https://api.github.com/graphql&quot;,
    cache: new InMemoryCache(),
});

export default client;
</code></pre>
<p>apollo clientの基本設定としては上記の記述で大丈夫ですが、<br>
認証をリクエストに付与したいので、<a href="https://www.apollographql.com/docs/react/networking/authentication/#header">こちら</a>を参考にclientを作成します。</p>
<pre><code>import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

　　　　　...

export const getStaticProps: GetStaticProps = async () =&gt; {
  const httpLink = createHttpLink({
    uri: 'https://api.github.com/graphql',
  });

  const authLink = setContext((_, { headers }) =&gt; {
    return {
      headers: {
        ...headers,
        authorization: `Bearer ${process.env.GITHUB_ACCESS_TOKEN}`,
      }
    }
  });

  const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache()
  });
};
</code></pre>
<p>createHttpLinkを使って、エンドポイントをhttpLink変数に格納します。<br>
次に、setContextを使って認証の設定を行っています。ここにリクエストを行うためのgithubアクセストークンを設置します。<br>
clientインスタンス作成の際に、直接uriを指定せず、認証が付与されたuriを記述します。</p>
<pre><code>link: authLink.concat(httpLink),
</code></pre>
<h2>GitHub GraphQL API エクスプローラで取得するデータを確認する。</h2>
<p><a href="https://docs.github.com/ja/graphql/overview/explorer">GitHub GraphQL API エクスプローラ</a>のページで取得するデータを確認します。今回は以下のようなデータを取得します。</p>
<pre><code>query MyQuery {
　　user(login: ユーザ名) {
     　　 name
 　　     url
   　　   repositories(
     　　   first: 5
       　　 orderBy: { field: CREATED_AT, direction: ASC }
        　　privacy: PUBLIC
 　　     ) {
   　　     nodes {
     　　     createdAt
       　　   description
         　　 forkCount
     　　     name
       　　   stargazerCount
       　　   url
         　　 languages(first: 5, orderBy: { field: SIZE, direction: ASC }) {
           　　 nodes {
             　　 color
              　　name

　　　　　　　　　... 

}
</code></pre>
<p>こちらをプロジェクトのファイルに落とし込みます。</p>
<pre><code>import { gql } from &quot;@apollo/client&quot;;

export const query = gql`
  query getRepositories(
    $user_id: String!
  ) {
    user(login: $user_id) {
      name
      url
      repositories(
        first: 5
        orderBy: { field: CREATED_AT, direction: ASC }
        privacy: PUBLIC
      ) {
        nodes {
          createdAt
          description
          forkCount
          name
          stargazerCount
          url
          languages(first: 5, orderBy: { field: SIZE, direction: ASC }) {
            nodes {
              color
              name
            }
            totalCount
            totalSize
            edges {
              node {
                color
                id
                name
              }
              size
            }
          }
        }
      }
    }
  }
`;
</code></pre>
<p>次に、上記で作成したqueryと変数user_idをもとにデータを作成します。</p>
<pre><code>const { data } = await apolloClient.query&lt;GithubType&gt;({
    query: query,
    variables: {
      user_id: process.env.GITHUB_USER_ID,
    },
});
</code></pre>
<p>これで、login: $user_id で指定した変数に　user_id: process.env.GITHUB_USER_ID を格納し、このユーザのリポジトリデータを取得することができます。</p>
<h2>参考</h2>
<p><a href="https://www.apollographql.com/docs/react/networking/authentication/#header">https://www.apollographql.com/docs/react/networking/authentication/#header</a><br>
<a href="https://www.apollographql.com/docs/react/get-started">https://www.apollographql.com/docs/react/get-started</a><br>
<a href="https://morioh.com/p/dc00760034d8">https://morioh.com/p/dc00760034d8</a><br>
<a href="https://www.youtube.com/watch?v=JUEw1yHJ8Ao">https://www.youtube.com/watch?v=JUEw1yHJ8Ao</a><br>
<a href="https://docs.github.com/ja/graphql/overview/explorer">https://docs.github.com/ja/graphql/overview/explorer</a></p>
