Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript & TypeScript 用のオールインワンツールキット「Bun」

semigura
December 11, 2023
200

JavaScript & TypeScript 用のオールインワンツールキット「Bun」

2023/12/08(金) 19:30〜 We Are JavaScripters! @43rd【初心者歓迎・LT会】で発表したスライドです。
https://twitter.com/@semigura

semigura

December 11, 2023
Tweet

More Decks by semigura

Transcript

  1. all-in-one 8 バンドラー Bun.build({ entrypoints: ['./src/index.tsx'], outdir: './build', minify: true,

    // additional config }); JavaScript ファイル/CLIでバンドル可 import { expect, test } from "bun:test"; test("2 + 2", () => { expect(2 + 2).toBe(4); }); テストランナー Jest 互換 $ bun add eslint -D npm 互換 パッケージマネージャー
  2. 速い 10 React SSRのHTTPリクエスト - Node.js v20.5.0 - 13,967 リクエスト/秒

    - Deno.serve() v1.36.2 - 32,921 リクエスト/ 秒 - Bun v1.0 - 66,706 リクエスト/秒 Bun のレンダリングは、Deno のほぼ 2 倍、 Node.js の約 5 倍速いとのこと https://bun.sh/
  3. 14 実計測してみる `bun create next-app` と `npx create-next-app@latest` を比較 -

    テスト(Next.js ビルトインの Jest と bun:test) - パッケージインストール
  4. テストランナー 15 import { render, screen } from "@testing-library/react"; import

    { expect, it, describe } from "bun:test"; import App from "./App"; describe("render a component", () => { render(<App />); it("exists img element has className='App-logo' and alt='logo'", () => { const logoElement = screen.getByRole("img", { name: /logo/i }); expect(logoElement).not.toBeNull(); expect(logoElement.className).toBe("App-logo"); expect(logoElement.alt).toBe("logo"); }); it("exists link element has href='https://reactjs.org/'", () => { const linkElement = screen.getByRole("link", { name: /learn react/i }); expect(linkElement).not.toBeNull(); expect(linkElement.href).toBe("https://reactjs.org/"); }); it("if exists link element has target='_blank' then it has rel='noopener noreferrer'", () => { const blankLinkElement = screen.getByRole("link", { target: "_blank" }); expect(blankLinkElement).not.toBeNull(); expect(blankLinkElement.rel).toBe("noopener noreferrer"); }); });
  5. テストランナー 16 function App() { return ( <div className="App"> <header

    className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.tsx</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } import { render, screen } from "@testing-library/react"; import { expect, it, describe } from "bun:test"; import App from "./App"; describe("render a component", () => { render(<App />); it("exists img element has className='App-logo' and alt='logo'", () => { const logoElement = screen.getByRole("img", { name: /logo/i }); expect(logoElement).not.toBeNull(); expect(logoElement.className).toBe("App-logo"); expect(logoElement.alt).toBe("logo"); }); it("exists link element has href='https://reactjs.org/'", () => { const linkElement = screen.getByRole("link", { name: /learn react/i }); expect(linkElement).not.toBeNull(); expect(linkElement.href).toBe("https://reactjs.org/"); }); it("if exists link element has target='_blank' then it has rel='noopener noreferrer'", () => { const blankLinkElement = screen.getByRole("link", { target: "_blank" }); expect(blankLinkElement).not.toBeNull(); expect(blankLinkElement.rel).toBe("noopener noreferrer"); }); });
  6. テストランナー 17 ✓ render a component > exists img element

    has className='App-logo' and alt='logo' [13.53ms] ✓ render a component > exists link element has href='https://reactjs.org/' [1.56ms] ✓ render a component > if exists link element has target='_blank' then it has rel='noopener noreferrer' [0.36ms] 3 pass 0 fail 7 expect() calls Ran 3 tests across 1 files. [436.00ms] PASS src/App.test.js render a component ✓ exists img element has className='App-logo' and alt='logo' (80 ms) ✓ exists link element has href='https://reactjs.org/' (32 ms) ✓ if exists link element has target='_blank' then it has rel='noopener noreferrer' (10 ms) Test Suites: 1 passed, 1 total Tests: 3 passed, 3 total Snapshots: 0 total Time: 1.155 s Jest Time: 1.155 s Bun Ran 3 tests across 1 files. [436.00ms] 約2.64倍の速度差
  7. パッケージインストール 18 $ npm i added 333 packages, and audited

    334 packages in 9s $ bun i 331 packages installed [1.60s] bun yarn 約6.6倍 npm 約5.92倍 pnpm 約7.75倍※ create-next-app の初期状態で 差があるので、 もっと大規模だとかなりの 差になることが予想できる! $ yarn ✨ Done in 10.56s. $ pnpm i Done in 12.4s
  8. 開発が活発に行われている 20 - tsc などの CLI が最大 2 倍高速化 -

    エラーのシンタックスハイライト改善 - custom test matchers と additional expect matchers の追加 等
  9. 21 - メリット - パッケージインストール、テストの速度に優位性がある - create-next-app の初期状態だけで差があったので、 大規模なプロジェクトだとより速さを体感できそう -

    開発スピードの向上や CI の最適化につながる - バンドラー、テストランナー、パッケージマネージャーはどれも Webpack, Jest, npm と互換があり乗り換えコストを感じることがなく使える - 開発が活発 - 留意点 - 他ツールに比べて情報は少ない - Jest と完全互換ではない メリット・留意点