Denoで動くReactフレームワークAleph.jsでポートフォリオサイトをリプレイスした話

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

Transcript

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