denoとtypescriptの関係について改めて考えてみる

TSKaigi Hokuriku 2025 13:00 〜 13:30 （toggleルーム）の発表に使用した資料です。

Transcript

1. denoとtypescriptの関係について 改めて考えてみる 株式会社iimon 比嘉　一晃
2. X：@higakazuaki9 • 比嘉 一晃（ひが かずあき） • 沖縄県出身 • 株式会社ｉｉｍｏｎ　エンジニア ◦ 不動産DXのツールを提供 https://iimon.co.jp/ • 現在の担当業務の技術スタック ◦ vanilla-tsやReact、Django、AWS、 Google Cloud（Firebase）...etc • これまでの経験 ◦ Angular、React、Vue.js、Spring Boot、Django、Fast API、Ruby on Rails…etc • 性格 ◦ 人懐っこい、面倒くさがり、ねことビー ル好き（お酒の失敗は、、、色々ありま す） プロフィール
3. 株式会社ｉｉｍｏｎ
4. はじめに 本日はDenoについて お話していきます ...
5. Denoってなに？ モダンなWeb開発のための オープンソースな JavaScript Runtime by 公式サイト（https://deno.com/）
6. Deno ・v8、Rust、tokioをベースとしたJavaScriptおよびTypeScriptの実行環境 ・JSConf EU 2018にて、Node.jsの作者Ryan Dahl氏の講演「Design Mistake in Node」 　の中で挙げられたNode.jsに関する10の反省点を踏まえ、公表 ・2024年10月にメジャーバージョンが初めてアップデートされ V2となる Overview
7. Denoってなに？ 特徴 • TypeScriptゼロコンフィグでサポート • npmとnodeのfirst-classをサポート • Web標準APIのサポート • 開発に便利なツールの提供 • セキュアな実行環境
8. Denoってなに？ 特徴 • TypeScriptゼロコンフィグでサポート • npmとnodeのfirst-classをサポート • Web標準APIのサポート • 開発に便利なツールの提供 • セキュアな実行環境
9. TypeScriptゼロコンフィグでサポート Denoをダウンロード＆インストール（豊富なインストール方法） Mac: Shell、npm、Nix、asdf、vfox、Cargo、Docker Windows: PowerShell、npm、Scoop、Choco、Winget、vfox、Cargo、Docker Linux: Shell、npm、Nix、asdf、vfox、Cargo、Docker →インストール後、バージョンを確認（ v8やTypeScriptのバージョンも確認可） Installation
10. Version Change TypeScriptゼロコンフィグでサポート upgradeコマンドでバージョンを変更（ v8やTypeScriptのバージョンも変更）
11. initコマンドでDenoの プロジェクトを構築 TypeScriptゼロコンフィグでサポート Initialize Project
12. 初期の構成はシンプル deno.jsonでプロジェクト管理 TypeScriptゼロコンフィグでサポート Initialize Directory
13. Greet TypeScriptゼロコンフィグでサポート TypeScriptを書いて即実行 →TypeScriptのインストールやtsconfig.jsonの セットアップは一切不要（すぐ動きます）
14. Denoってなに？ 特徴 • TypeScriptゼロコンフィグでサポート • npmとnodeのfirst-classをサポート • Web標準APIのサポート • 開発に便利なツールの提供 • セキュアな実行環境
15. npmとnodeのサポート Denoのインストール時にローカルに npmのレ ジストリのキャッシュを構築 deno.jsonでimportmapも定義可 npm
16. npmとnodeのサポート node Denoをインストール時にローカルに node api のレジストリのキャッシュを構築 トップレベルでawaitも利用可
17. npmとnodeのサポート package.json package.jsonの読み込みもサポート npm importと混在している場合は deno install で依存を解消
18. Denoってなに？ 特徴 • TypeScriptゼロコンフィグでサポート • npmとnodeのfirst-classをサポート • Web標準APIのサポート • 開発に便利なツールの提供 • セキュアな実行環境
19. Web標準APIのサポート Fetch Denoが提供しているusers apiをfetchしてみた
20. Web標準APIのサポート Web Worker Web Workerを起動＆ファイルを読み込み →ログに出力 ファイル読み込みには Deno APIのreadTextFileを 使用
21. Denoってなに？ 特徴 • TypeScriptゼロコンフィグでサポート • npmとnodeのfirst-classをサポート • Web標準APIのサポート • 開発に便利なツールの提供 • セキュアな実行環境
22. 開発に必要なツール Lint Denoに標準搭載されている Lint deno.jsonでルールをカスタムするこ とも可能
23. 開発に必要なツール Lint Lint Error ・remove constructor(nothing super) ・super before using this ・use const insteed
24. 開発に必要なツール Test Denoに標準搭載されている Test JSRのパッケージも利用しつつ、手 軽にテストすることが可能 JSRとは... モダンなJS、TS開発のためのオー プンソースなパッケージレジストリ by 公式サイト: https://jsr.io/
25. 開発に必要なツール Standalone Executable Deno.server APIで簡単なAPIの処理を書いてコ ンパイル
26. 開発に必要なツール Standalone Executable コンパイル後のファイルを実行して サーバーにアクセス
27. 開発に必要なツール Formatter Denoに標準搭載されている Formatter deno.jsonでルールをカスタムすることも可能
28. 開発に必要なツール Formatter fmtコマンドでフォーマットの実行 エディタの設定でSave on Formatも可
29. Denoってなに？ 特徴 • TypeScriptゼロコンフィグでサポート • npmとnodeのfirst-classをサポート • Web標準APIのサポート • 開発に便利なツールの提供 • セキュアな実行環境
30. セキュリティ Security Denoはデフォルトでファイル実行時にセ キュリティチェックが入る
31. セキュリティ Security ・ ・ ・ オプションをつけずにそのまま実行する とセキュリティチェック対象の項目の許可 を求められる
32. セキュリティ Security 拒否すると処理されずに終了する
33. セキュリティ Security --allow-all（または-A） 全ての権限を許可 --allow-read ファイル読み込みの許可 --allow-write ファイル書き込みの許可 --allow-net ネットワークへのアクセス許可 --allow-env envへのアクセス許可 …etc オプションをつけることで許可の チェックを省略できる
34. Denoってなに？ 特徴 • TypeScriptゼロコンフィグでサポート • npmとnodeのfirst-classをサポート • Web標準APIのサポート • 開発に便利なツールの提供 • セキュアな実行環境 • 豊富なDeno CLI • トップレベルでのawait（async不要） • Deno APIを活用した効率的な開発 • Deno.jsonによる柔軟なプロジェクト管理 • JSRなどのモダンなパッケージの活用 モダンな TypeScriptの開発体験を 手軽にセキュアに提供
35. Denoで何をしよう 例えば... Web開発をしてみる
36. Vite-React with Deno Project Initialize and Build Viteを使ったReactプロジェクトの 構築をDenoで実施
37. Vite-React with Deno Server Start 開発サーバーを立ち上げて いつものHello React
38. Vite-React with Deno Custom App Appをカスタム Hooksなどを使っていつもの感じの Reactで開発
39. Vite-React with Deno Directory ディレクトリ構成もいつもの Vite-Reactプロジェクトと同じ感 じ →package.json、tsconfig、 vite.configなど
40. Denoで何をしよう 例えば... AIを活用した CLIを作ってみる
41. CLI Tool with Gemini API Weather App Gemini APIとdaxを使ってお天 気アプリを作成
42. CLI Tool with Gemini API Install and Exec deno installのnameオプションで名前をつ けてCLIとして保存できる
43. Denoで何をしよう 例えば... データ分析してみる
44. Jupyter with Deno Setup Jupyter VSCode Jupyter extension https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter DenoでJupyter Notebookを利用 するためのセットアップ
45. Jupyter with Deno Select Kernal DenoのKernelが選択できる
46. Jupyter with Deno Hello Jupyter Jupyter上でTypeScriptが動く
47. Jupyter with Deno penguins ちゃんとDataFrameが型付けされていることを確認 ペンギンデータで遊んでみる
48. Jupyter with Deno penguins headやtoRecodesなど基本的 なDataFrameの関数も利用可
49. Jupyter with Deno penguins dropNullsなどの欠損値補完 やdescribeでの集計データの 確認なども可能
50. Jupyter with Deno penguins Plotでデータをプロット
51. Jupyter with Deno penguins Plotでデータをプロット 基本的なデータ分析は十 分にできそう
52. まとめ Denoの使いどころ ・npm、Nodeとの互換性を活かしたプロジェクトの刷新 ・AIを利用したツール類の量産（ MCP Toolなどとの連携） ・よくわからないコードをセキュアに実行 （特に生成AIで出されたものなど） ・TypeScriptを利用したスムーズなデータ分析 …etc まだまだ方向転換などはあるかも
53. Appendix
54. Appendix ・デプロイまわり https://deno.com/deploy ・Fresh（Deno推しのシンプルWebフレームワーク） https://fresh.deno.dev/ ・WebAssembly https://docs.deno.com/runtime/reference/wasm/ ・Deno API Reference https://docs.deno.com/api/deno/ ・Deno標準ライブラリ https://docs.deno.com/runtime/reference/std/ Denoにまつわる情報のリンク集
55. ご清聴ありがとうございました！