Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

2 0Yu@denham95173179 ● B3 ● cistLT所属

Slide 3

Slide 3 text

Aleph.jsとは？ 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

使い方 7

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

esbuildについて 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Plugin 15

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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 { plugins: [windicss], }; 17

Slide 18

Slide 18 text

MicroCMS 18

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

23

Slide 24

Slide 24 text

24

Slide 25

Slide 25 text

CSS Framework 25

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Linter/Formater 27

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

感想 29

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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