Deno上で動くSlackAppの作成と所感
そもそもDenoとは
Denoは、Node.jsを作ったRyan Dahlによって作られた新しいJavaScript/TypeScriptランタイムである。Node.jsの問題点、例えばTypeScriptを使用する際に別のビルドステップが必要な点などを解決することを目的としている。DenoにはTypeScriptとWebAssemblyのサポートが組み込まれており、npmのようなパッケージ・マネージャーに頼るのではなく、URLを使ってコードを直接インポートします。
このアプローチにより、Denoは、各モジュールがサンドボックス環境で実行される、より安全でモジュール化されたアーキテクチャを持つことができます。
しかし、Denoはまだ比較的新しい技術であり、サードパーティ・ライブラリのエコシステムはまだ成長中です。
要約すると、DenoはJavaScriptとTypeScriptのための新しいランタイムであり、TypeScriptとWebAssemblyのビルトインサポートと、URLを使ってコードをインポートするユニークなアプローチによって、ウェブ開発によりセキュアでモジュール化された環境を提供することを目的としています。
これによりNode.jsと同じかそれ以上の開発体験を得ることが可能です。
Node.jsの反省を作成者がどうとらえているのかはこちらを見ていただくと詳しく知ることができます
Deno on SlackApp以前のSlackApp
Deno on Slack Appが登場する以前のSlack Appの作成方法とデメリットは以下の通りです。
Slack Appの従来の作成方法
- Slack APIを使ってSlack Appを作成していた
- Slack APIを使うには、Slack Appを作成し、OAuth & Permissionsの設定でBotトークンやスコープを設定する必要があった
- Slack Appの設定は、Slack APIのウェブサイトから行う必要があった
従来のSlack Appの作成方法のデメリット
- Slack APIを使うための設定が複雑で、開発者にとって高い学習コストがかかっていた
- Slack APIを使うには、セキュリティ設定やアクセス制限など、細かい設定が必要だった
- Slack Appの機能を拡張する際に、ソースコードの変更とSlack APIの設定変更の両方が必要だった
- Slack Appのデプロイメントが手動で行う必要があり、自動化が難しかった
つまり、従来のSlack Appの作成方法は開発者にとって複雑で手間がかかるものでした。Deno on Slack Appの登場により、これらのデメリットが解消されたと言えます。
Deno on SlackAppの概要
新プラットフォームは、ファンクション、トリガー、ワークフローなどのビルディングブロックを備えたモジュラーアーキテクチャを特徴としており、再利用性を可能にし、メンテナンスコストや技術的負債を削減します。このプラットフォームは、Slackのマネージド・インフラストラクチャとDenoのセキュア・バイ・デフォルト・ランタイム上に構築され、セキュアなサーバーレス・デプロイメントを提供します。このプラットフォームのセキュリティ機能には、ファイルシステムや外部ドメインへのアクセスを制限したコードを実行するためのきめ細かな制御機能が組み込まれており、アプリが初日からエンタープライズグレードであることを保証します。オープンベータは誰でも試すことができ、開発者やチームはタスクを自動化し、仕事のやり方を変えることができます。
今回何をつくったのか
海外のチームと協業しているのでSkackで英語の会話が必須な場面があります。
このとき「日本語だとXXと言いたいが英語ではなんていうのが適切なんだろう?」となることが多々ありました。
それをSlackAppで解決します。
具体的な使用の仕方は以下の流れです。
- SlackAppを呼び出したいチャンネル配下で呼び出す(ex. times-XXX)
- 英語でなんというのか知りたい事柄を入力し送信
- SkackAppが返答に英語の返しをいれて返却
使用する技術詳細
下準備
今回の下準備として以下が必要です。
- Slackのワークスペースが有料プランに加入していること
- OpenAI APIのアカウント作成とBillingの追加
2について補足です。
今回はOpenAI APIを使用するのでOpenAIのページでログインをしてクレジットカードを登録してBillingを追加する必要があります。料金は為替レートでやや変動があります。
環境準備
- denoのインストール
- slack cliのインストール
Macユーザならbrewでのインストールが楽ちんです。
筆者はasdfを浸かっているのでasdfでdenoのイメージを落としてきてディレクトリに適用しました。
deno install brewの場合
brew install deno
deno install asdfの場合
denoプラグインのインストール
asdf plugin-add deno https://github.com/asdf-community/asdf-deno.git
denoのインストール
asdf install deno 1.39.1
ディレクトリにdenoを有効化する
asdf local deno 1.39.1
slack cliのインストール
curl -fsSL https://downloads.slack-edge.com/slack-cli/install.sh | bash
SkackAppの動作確認
アプリケーションの作成
以下コマンドを実行
slack create my-app
ワークスペースにログインする
cliでSkack WorkSpaceにログイン
slack login
Slack Appのテスト動作を実行
cd my-app
slack run
このコマンドを実行後WorkSpaceを選択します。
cliからアプリケーションの実行URLが発行されます。
⚡ Listing triggers installed to the app...
🔗 Shortcut trigger:
Submit an issue (local) XXXXXXXXXX (shortcut)
Created: 2024-01-05 19:25:05 +09:00 (2 months ago)
Collaborators:
your name XXXXXXXXX
Can be found and used by:
everyone in all workspaces in this org granted to this app
https://slack.com/shortcuts/XXXXXXXXX/XXXXXXXXXXXXXXXXXXXXXXXXX
このURLを任意のチャンネルに貼り付けるとSlack Appが実行可能になります。
App作成とその時の感想
今回は簡単なAppを作成したのですが、その中でも学びがありました。
Denoの良い点
まずはDenoのエラーメッセージが非常に読みやすいこと。これは開発を進めるうえでとでもありがたいものでした。
そしてDenoは成長途上でありながらVScodeでの支援が充実していて開発環境を整えることが簡単なのも良い点であると感じました。
HTTPクライアントの選定とその理由
Denoでは複数のHTTPクライアントライブラリがあり、特性からあったものを選ぶ必要がありました。
今回はその候補と最終的に選定をしたライブラリを紹介します。
Denoでは、HTTPリクエストを行うためのいくつかのライブラリが利用可能です。主な候補は以下のようなものがあります:
-
std/http: Denoの標準ライブラリに含まれる、HTTPクライアントとサーバーを提供するモジュールです。シンプルで基本的な機能を提供します。
-
oak: Denoのウェブフレームワークの1つで、HTTPリクエストの処理やルーティングなどの機能を提供します。標準ライブラリの上に構築されています。
-
deno-fetch: WebブラウザのfetchAPIに似たインターフェースを提供するライブラリです。より高レベルなHTTPクライアントとして使えます。
-
axios: JavaScriptの人気のHTTPクライアントライブラリをDenoで使えるようにしたものです。Webブラウザ向けのものと同じAPIを提供します。
今回はfetchAPIを採用しました。
Node.jsでの開発のときに使用した経験があったこと、fetchAPIを下地として拡張しているものが多いが今回のリクエスト程度ならば高度なカスタムが必要無いため最も単純なものを選んだという経緯です。
現状ではデファクトスタンダードになるようなものはなく、できるならdeno-fetchやoakを使うほうがいいでしょう。
まとめ
Denoでの開発体験はとてもいいと感じました。
現状では有料登録されたWorkSpaceでしか使えませんが、個別にホスティングしたりする必要がないことや受けるメリットのほうが大きいと感じました。
まだまだNodeを置き換えるプロジェクトは群雄割拠の時代なのでそもそもDenoが目指したものやNodeのことを深くしり今後のフロントエンド開発において優位性のあるものに取り組んでいきたいと思いました。
参考資料
おまけ
作業ログは以下のスクラップにもありますのでエラー内容など見てみたい方はみてください。
Discussion