新しいJSランタイムのDenoとBunに入門してみた

新しいJavascriptのランタイムであるDenoとBunに入門してみました。

https://tuesday-dev-meeting.connpass.com/event/307944/

Transcript

1. 新しいJSランタイムのDenoと Bunに入門してみた 2024.02.20
2. （C）PharmaX Inc. 2024 All Rights Reserve 2 自己紹介 X@hakotensan Akira Morooka PharmaX 株式会社 薬局DX事業部 アプリケーションエンジニア 好きなもの: ボルダリング、漫画
3. 3 （C）PharmaX Inc. 2023 All Rights Reserve 発表の流れ 1. モチベーション 2. 各ランタイムの概要 3. DenoとBunの特徴 4. 感想
4. 4 （C）PharmaX Inc. 2024 All Rights Reserve モチベーション
5. （C）PharmaX Inc. 2024 All Rights Reserve 5 JavaScriptランタイムの選択肢 Webブラウザ以外のJavaScriptのラインタイムは長い間、Node.jsが主 導してきました。 しかし最近では、DenoやBunのような新しいランタイムが登場し、開発者 コミュニティに新たな選択肢が増えています。 これから先のJS界隈の開発事情をキャッチアップする意味で、Node.js以 外のランタイム「Deno」と「Bun」について調べてみました。
6. 6 （C）PharmaX Inc. 2024 All Rights Reserve 各ランタイムの概要
7. （C）PharmaX Inc. 2024 All Rights Reserve 7 Node.js • 2009年に登場 • ブラウザ以外のJavaScriptランタイムとして圧倒的なシェアでフロ ントエンド、バックエンド問わず使われている。 • イベント駆動、シングルスレッドによるノンブロッキングなIO処理 • NPMという巨大なパッケージエコシステム • 代表的なフレームワーク: Express、NextJS、etc
8. （C）PharmaX Inc. 2024 All Rights Reserve 8 Deno(ディーノ) • 2018年に登場 • Node.jsと同じ作者(ライアン・ダール)が、Node.jsの反省を踏ま えて作成 • セキュリティを意識した設計 • TypeScriptの標準サポート • NodeJS同様にイベント駆動で非同期IOに注力して開発されてい る
9. （C）PharmaX Inc. 2024 All Rights Reserve 9 Bun(バン) • 2021年に登場 • 高速なスタートアップタイムとランタイムパフォーマンスを売りにし ている(Node.jsよりも4倍早いとのこと) • TypeScriptのサポート • NPMに対する互換性(package.json互換) • JSX、textなどの多くのファイル形式のローダーがサポート (textやtomlなどをそのままimportできる)
10. （C）PharmaX Inc. 2024 All Rights Reserve 10 比較① : モジュール解決 ランタイム モジュール NodeJS CommonJSで作られていたが 現在はES Modulesもサポート Deno ES Modulesのみ Bun ES Modulesを推奨しているが、 CommonJSもサポート const { PI } = Math; exports.area = (r) => PI * r ** 2; ….. const circle = require('./circle.js'); console.log(circle.area()); const { PI } = Math; export const area = (r) => PI * r ** 2; ….. import { area } from ‘./circle.js’; console.log(circle.area()); CommonJS ES Modules
11. （C）PharmaX Inc. 2024 All Rights Reserve 11 V8 Googleが開発。ChromeなどChromium ベースのブラウザで採用。 比較② : JavaScriptエンジン ランタイム JavaScriptエンジン Node.js V8 Deno V8 Bun JavaScriptCore JavaScriptCore Safariを始めとするWebKitベースのブラウ ザで採用。 その他 SpiderMokey(Firefox), Chakra(Edge), Hermes(React Native), etc..
12. （C）PharmaX Inc. 2024 All Rights Reserve 12 比較③ : 開発言語 ランタイム 開発言語 Node.js C++, JavaScript Deno Rust Bun Zig
13. 13 （C）PharmaX Inc. 2024 All Rights Reserve Denoの特徴
14. （C）PharmaX Inc. 2024 All Rights Reserve 14 ランタイムセキュリティ • --allow-read: ファイルの読み込み許可 • --allow-write: ファイルの書き込み許可 • --allow-net: ネットワークの許可 • -A : 全ての権限を許可 Denoではネットワークや、ファイルなどの I/Oアクセスを 標準で許可されていない。 (Node.jsでは全てのアクセスを許可している ) 実行時に明示的に権限を付与するため、高いセキュリ ティが担保されている。 % deno run --allow-net server.ts https://docs.deno.com/runtime/manual/basics/permissions
15. （C）PharmaX Inc. 2024 All Rights Reserve 15 モジュール解決 Node.jsとはモジュール解決 (import)の記述が異なる。 URLを直接記述可能で、拡張子も省略しない。 (インストールせずにそのまま実行できる ) index.js はサポートされていない。対象のモジュールは 直接参照する必要がある。 // urlを直接書いてOK // 拡張子を省略しない import { serve } from "https://deno.land/std/http/server.ts"; // npm: でnpmモジュールも使える import express from "npm:express@4"; https://docs.deno.com/runtime/manual/basics/modules/
16. （C）PharmaX Inc. 2024 All Rights Reserve 16 開発エコシステム • deno check: Typescriptの型チェック • deno fmt: コードフォーマッター • deno lint: リンター • deno task: タスクランナー • deno test: テストランナー • deno bench: ベンチマーカー • etc.. フォーマッタやリンタなどが標準で使えるため、 ESlintや Pretterを別途インストールする必要がない。 https://docs.deno.com/runtime/manual/tools/
17. （C）PharmaX Inc. 2024 All Rights Reserve 17 その他 その他、Node.jpでNPMパッケージが必要だった機能が標準 サポートされているため開発体験が良い https://docs.deno.com/runtime/manual/references/cheatsheet
18. 18 （C）PharmaX Inc. 2024 All Rights Reserve Bunの特徴
19. （C）PharmaX Inc. 2024 All Rights Reserve 19 Node.jsとの互換性 Bunは「package.json」がサポートされており、 「bun install」に変えるだけで、既存の Node.jsのプロジェ クトを実行可能。 (bun installは、npm installと比べると25倍高速とのこと) https://bun.sh/docs/cli/install
20. （C）PharmaX Inc. 2024 All Rights Reserve 20 NextJSもそのまま動く NextJSもAPI互換されており、基本はそのまま動く。 (App Routerについては一部未対応とのこと ) https://bun.sh/guides/ecosystem/nextjs
21. （C）PharmaX Inc. 2024 All Rights Reserve 21 モジュール解決方法が豊富 index.js(ts)にも互換性があり、基本的には ES Modulesを推奨しているが、CommonJSにも対応し ている。拡張子の有無もサポート。 https://bun.sh/docs/runtime/modules
22. （C）PharmaX Inc. 2024 All Rights Reserve 22 独自のlockファイル package.jsonでインストールされたパッケージは、 グローバルでキャッシュされる (~/.bun/install/cache/)。 依存性の管理は、独自のロックファイル「 bun.lockb」で管 理される。 bun.lockbは高速化のためバイナリ形式になっており、エ ディタで読むことはできない。 (yarn.lockに変換可能) https://bun.sh/docs/install/lockfile (~/.bun/install/cache/ に管理されたファイル )
23. 23 （C）PharmaX Inc. 2024 All Rights Reserve 個人的な感想
24. （C）PharmaX Inc. 2024 All Rights Reserve 24 最近の開発ニーズに合わせ、エコシステムが充実している。 (テストランナー、watch機能、TypeScript、JSXのネイティブサポートな ど。) 従来のNode.jsを使用した開発環境のセットアップに比べ、早くかつ容易 に開発できるようになった。 Deno, Bun共通
25. （C）PharmaX Inc. 2024 All Rights Reserve 25 Node.jsのパラダイムを一新するというコンセプトのため、大胆な変更が 導入されている。 互換性を減らし、開発者体験が良い機能を導入している。 NPM互換が採用されたことで、NPMの資産を使えるようになり、既存 Node.jsユーザーにとっても有力な選択肢になった。 CLIツールやシンプルなスクリプトなどのユースケースは特に良さそうに 感じた。 Deno
26. （C）PharmaX Inc. 2024 All Rights Reserve 26 「既存のNode.jsを高速に置き換える」ことを目的にしていて 「互換性と速度」を強く意識している。 (他のエコシステムとの互換性やサポートが充実している) NextJSやNuxtJSなどメジャーフレームワークが、安全に置き換えれるの であれば、積極的に試したい。 Bun
27. 27 （C）PharmaX Inc. 2024 All Rights Reserve ありがとうございました！