【技術Tips】DenoでKey-valueストアとWebSocketを使ったアプリケーションを開発し、Deno Deployにデプロイする



株式会社ゆめみでサーバーサイドエンジニアをしている、うーたんです。

2023 年 4 月に株式会社ゆめみへ新卒入社し、現在はサーバーサイドエンジニアとして案件を担当しています。

技術同人誌への寄稿やコンピューター雑誌への執筆活動も行っており、ゆめみ大技林 '24I/O 2024年4月号などに寄稿したことがあります。

本記事では、Deno の紹介と、Deno Deploy、Deno KV、WebSocket を使ったサンプルアプリケーションの開発体験について、デモアプリケーションを交えてご紹介します。

デモアプリケーションの紹介

今回開発したアプリケーションは「Google スライドのスライド送りを簡単に複数端末で同期できる君」です。

URL:https://sync-google-slide.vercel.app/



このアプリケーションでは、Google スライドの URL を入力するだけで、複数の端末でスライドのページ送りを同期できます。たとえ、プレゼンテーション中に発表者がスライドを進めると、聴衆の端末でも同じタイミングでスライドが進むようになります。

主な機能

  • Google スライドの URL を入力してスライドを登録
  • 複数端末でのリアルタイム同期
  • ユーザーごとのスライド履歴管理

技術構成

  • バックエンド:Deno + Deno Deploy + Deno KV + WebSocket
  • フロントエンド:Next.js + Vercel + Material-UI

それでは、使用した技術について詳しく見ていきましょう。

Denoとは

Deno(/ˈdiːnoʊ/、ディーノと発音)は、セキュアなデフォルト設定と優れた開発者体験を提供するオープンソースのランタイムです。JavaScript、TypeScript、WebAssembly をサポートし、V8、Rust、Tokio をベースに構築されています。

Deno公式ドキュメントによると、Deno の主な特徴は次のとおりです。

  • TypeScript-ready out of the box:ゼロ設定で TypeScript を直接実行できる
  • Secure by default:他のランタイムがスクリプトに完全アクセスを与えるのに対し、Deno では細かい権限を強制できる

    たとえば、ファイルシステムへのアクセスが必要な場合は、明示的に権限を許可する必要がある。


権限を指定しない場合、Deno は安全にスクリプトを実行し、必要な権限がない場合はエラーを返す。

  • Robust built-in toolchain:Node やブラウザ JavaScript とは異なり、Deno には標準ライブラリ、リンター/フォーマッター、テストランナーなどが組み込まれている

  • Fully compatible with Node and npm:Node と npm との完全な互換性を提供する

  • Fast and reliable:高速で信頼性の高い実行環境である

  • Open-source:オープンソースプロジェクトである

Deno Deployとは

Deno Deploy は、Deno の公式クラウドプラットフォームです。Deno で書かれたアプリケーションを簡単にデプロイし、グローバルに配信できます。

Deno Deploy の主な特徴は以下です。

  • WebSocketのサポート:リアルタイム通信が必要なアプリケーションでも設定なしで動作する
  • Deno KVの利用可能:Deno の組み込み key-value ストアをクラウド上で利用できる
  • エッジコンピューティング:世界中のエッジロケーションで実行され、低レイテンシを実現する
  • HTTPSの自動設定:SSL 証明書の管理が不要で、自動的に HTTPS が有効になる
  • GitHubとの連携:GitHub リポジトリと連携して、プッシュするだけで自動デプロイが可能である

特に、WebSocket と Deno KV が簡単に利用できる点は、データの保存とリアルタイム通信を必要とするデモアプリケーションの開発において大きなメリットでした。

参考

Deno KVとは

Deno KV は、Deno に組み込まれた key-value ストアです。RDB とは異なり、シンプルな key-value のペアでデータを保存・取得できます。

なお、Deno KV は現在開発中で、仕様変更の可能性があります。使用するには、Deno に--unstable-kvフラグを渡す必要があります。

ローカル環境でのDeno KV

ローカル環境では、Deno KV は SQLite データベースを使用します。SQLite は設定不要のコンパクトかつ高速なデータベースであり、Deno KV も同様に設定不要で高速に動作します。

Deno KV on Deno Deploy

Deno Deploy では、分散データベースである FoundationDB を使用します。FoundationDB は Apple がオープンソース化した NoSQL データベースで、分散環境で高速に動作しつつトランザクション操作により全体としてデータの強い一貫性を実現できます。

Deno KV には、次の特徴があります。

  • 組み込みサポート:追加の依存関係なしで利用可能
  • シンプルなAPI:複雑なクエリ言語を覚える必要がない
  • ローカル環境:SQLite を使用し、設定不要で高速動作
  • Deno Deploy環境:FoundationDB を使用し、分散環境でも強い一貫性を実現

このデモアプリケーションでは、スライドの情報やユーザーデータを Deno KV に保存し、複数の端末間でリアルタイムに同期しています。

参考

WebSocketとは

WebSocket は、クライアントとサーバー間でリアルタイムの双方向通信を可能にするプロトコルです。HTTP とは異なり、一度接続を確立すると、サーバーからクライアントへのプッシュ通信が可能になります。

このデモアプリケーションでは、スライドのページ送りを複数の端末で同期するために WebSocket を使用しています。1 つの端末でスライドを進めると、他の端末でも同じタイミングでスライドが進むようになります。

参考

デモアプリケーションを作りました

今回開発したデモアプリケーションは「Google スライドのスライド送りを簡単に複数端末で同期できる君」です。このアプリケーションは、Google スライドの URL を入力するだけで、複数の端末でスライドのページ送りを同期できるツールです。

アプリケーションの構成

バックエンド(Deno + Deno Deploy)

  • Deno で開発された REST API と WebSocket サーバー

  • Deno Deploy でホスティング

  • Deno KV を使用してスライド情報とユーザーデータを管理

  • WebSocket を使用してリアルタイム同期

フロントエンド(Next.js + Vercel)

  • Next.js で作成したアプリケーション

  • Vercel でホスティング

主な機能

  1. リアルタイム同期:複数の端末でスライドのページ送りを同期
  2. ユーザーのスライドを管理:ユーザーごとにスライドの履歴を管理

技術的な実装

バックエンドでは、Deno の標準ライブラリと WebSocket API を使用して、リアルタイム通信を実現しています。Deno KV を使用することで、複雑なデータベース設定なしに、スライド情報を管理しています。

まとめ

このプロジェクトを通じて、Deno と Deno Deploy の機能を知ることができました。特に次の点が印象的でした。

  1. 開発の簡素化:TypeScript の標準サポートにより、型安全性を保ちながら開発を進められました
  2. デプロイの簡単さ:Deno Deploy と Vercel の組み合わせにより、フロントエンドとバックエンドを簡単にデプロイできました
  3. リアルタイム機能の実現:WebSocket と Deno KV の組み合わせにより、複雑な設定なしにリアルタイム機能やスライドの管理機能を実装できました

Deno の TypeScript の標準サポートとデフォルトでセキュアな設計は、アプリケーション開発においてメリットだと感じました。今後も Deno を使っていきたいです。

記事執筆者

*

うーたん 氏

株式会社ゆめみ

技術書同人誌博覧会のコアスタッフや若手ふんわり勉強部という若手エンジニア向け勉強会、エンジニアニメというをIT業界に関わる方が集まってアニメから得た学びについて語り合いながら交流する勉強会を主催しています。 勉強会や技術カンファレンスなどで登壇や技術同人誌を執筆も行っています。

 

Community Members

さまざまなテーマで事例や知見を学ぶ
IT・テクノロジー人材のための勉強会コミュニティ

①上記ボタンをクリックするとTECH PLAY(外部サイト)へ遷移します。

②TECH PLAYへ遷移後、アカウントをお持ちでない方は、新規会員登録をお願いいたします。

③TECH PlAY会員登録後、TECH Streetページよりグループフォローをしてください。

今後のイベント参加・メンバー登録に関する重要なお知らせはこちら