全国学生エンジニア交流会 NSEEM (https://zli.connpass.com/event/239501/)で登壇した資料です。

1. Denoで動くReactフレームワーク
Aleph.jsでポートフォリオサイトをリプ
レイスした話
全国学生エンジニア交流会 NSEEM
cistLT
0Yu @denham95173179
1

2. 2
0Yu@denham95173179
● B3
● cistLT所属

3. Aleph.jsとは？
3

4. Aleph.jsとは？
https://alephjs.org/
● Next.jsにインスパイアされたDenoのフレームワーク
4

5. Aleph.jsとは？
● ビルド基盤はesbuild+swc
○ もともとtscを使っていた
○ v0.3 betaからesbuild+swcに移行
● WASMのswcを使ったコードをトランスパイルし、esbuildを
使ったモジュールをビルド時にバンドルする
● package.jsonとnode_modulesが不要
○ DenoではURLでモジュールをimportする
○ esmやunpkgなどのCDNからnpm packegaeを使える
5

6. Aleph.jsとは？
● 設定ファイル(package.jsonとnode_modules)が不要
● TypeScriptを標準サポート
● Denoのimport構文によりCDNからNPMを使える
● Import Maps に対応
● HMRでリフレッシュが高速
● ルーティングはパス名ベース
● SSRとSSGをサポート
● JSXで記述可能
● Plugins System に対応
6

7. 使い方
7

8. 使い方
$ deno run -A https://deno.land/x/aleph/install.ts
$ aleph init
$ aleph dev
$ curl http://localhost:8080/
8

9. 使い方
$ aleph --version
aleph.js 0.3.0-beta.19
deno 1.19.3
v8 9.9.115.8
typescript 4.5.2
🎉
9

10. esbuildについて
10

11. そもそもモジュールバンドラについて
11
https://ics.media/entry/16511/ より
● Webpack、Rollup
など
● 複数のJSの依存関
係を解決し、すべ
てのモジュールを
バンドルファイル
にひとまとめにし
てくれるもの

12. ビルドパフォーマンスの問題
● モジュールバンドラは遅い
○ バンドルがビルドパフォーマンスを下げている
● めっちゃ早いバンドラを謳う(An extremely fast JavaScript
bundler)esbuildが登場した
12

13. esbuildとは
● Go言語で書かれたJS/TSのビルドツール
● 並列処理が得意なGoの恩恵により超高速
○ 公式READMEによると、three.jsのビルドが
webpack/rollup+terserの10-100倍
● 単体でトランスパイル/バンドル/Minifyを担ってくれる
13
https://github.com/evanw/esbuild より

14. esbuildがやらないこと
● 他のフロントエンド言語への対応（Elm、Svelte、Vue、
Angularなど）
○ VueはViteを使う
● TypeScriptの型チェック（tscを別途実行するだけでよい）
● カスタムAST操作のためのAPI
● Hot-module reloading
● Module federation(異なる JavaScriptアプリケーションから動
的にコードをロードするしくみ)
14

15. Plugin
15

16. Plugin
● Aleph.jsのランタイムを拡張するための機能
○ Marckdown LoaderやCSS Loader、JSON Loaderなどが対応
16

17. Plugin
// alph.config.ts
import windicss from "https://deno.land/x/aleph_plugin_windicss@v0.0.2/plugin.ts";
import type { Config } from "aleph/types";
export default <Config>{
plugins: [windicss],
};
17

18. MicroCMS
18

19. MicroCMS
● 公式SDK があるのでそれを使う
19

20. MicroCMS
// package.json
{
"dependencies": {
"microcms-js-sdk": "^2.0.0"
}
}
20

21. MicroCMS
// import_map.json
{
"imports": {
"microcms": "https://esm.sh/microcms-js-sdk"
},
"scopes": {}
}
21

22. MicroCMS
// microcmsClient.ts
import { createClient } from "microcms";
export const microcmsClient = createClient({
serviceDomain: "your-subDomain",
apiKey: `${Deno.env.get("X_MICROCMS_API_KEY")}`,
});
22

23. 23

24. 24

25. CSS Framework
25

26. CSS Framework
● WindiCSS
○ jie氏によりpluginが提供されている
● ChackraUI
26

27. Linter/Formater
27

28. Linter/Formater
// seting.json
{
"deno.lint": true,
"editor.defaultFormatter": "denoland.vscode-deno",
"editor.formatOnSave": true,
…
}
28

29. 感想
29

30. 感想
● ルーティングとかほぼNext.js
● プラグインはまだまだ非対応のものが多い
○ β版なので仕方ない
● esbuildの恩恵にあやかれるNo-bundlerビルドツールの選択肢
はいろいろ(Viteとかsnowpackとか)ある
○ Viteの爆速開発体験is良き。Webpackに戻れなくなる
30

31. ご清聴ありがとうございました🎉
31