Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Denoで動くReactフレームワークAleph.jsでポートフォリオサイトをリプレイスした話
Search
yud0uhu
July 07, 2022
1
34
Denoで動くReactフレームワークAleph.jsでポートフォリオサイトをリプレイスした話
全国学生エンジニア交流会 NSEEM (
https://zli.connpass.com/event/239501/)で登壇した資料です
。
by Jun 7, 2022
yud0uhu
July 07, 2022
Tweet
Share
More Decks by yud0uhu
See All by yud0uhu
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
260
早朝の渋谷の青さ、あるいは溺れた人を助ける為に飛び込んだ海の向こう側に見る、自己覚知と自己開示の尊さ
yud0uhu
1
660
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
320
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
5.6k
2023年の ゼロランタイムCSS in JS⚡️ を考える
yud0uhu
5
4.9k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
yud0uhu
2
2.9k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
1k
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
1.2k
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
200
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Faster Mobile Websites
deanohume
310
31k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Building an army of robots
kneath
306
46k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Statistics for Hackers
jakevdp
799
220k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Transcript
Denoで動くReactフレームワーク Aleph.jsでポートフォリオサイトをリプ レイスした話 全国学生エンジニア交流会 NSEEM cistLT 0Yu @yud0uhu 1
2 0Yu@denham95173179 • B3 • cistLT所属
Aleph.jsとは? 3
Aleph.jsとは? https://alephjs.org/ • Next.jsにインスパイアされたDenoのフレームワーク 4
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
Aleph.jsとは? • 設定ファイル(package.jsonとnode_modules)が不要 • TypeScriptを標準サポート • Denoのimport構文によりCDNからNPMを使える • Import Maps
に対応 • HMRでリフレッシュが高速 • ルーティングはパス名ベース • SSRとSSGをサポート • JSXで記述可能 • Plugins System に対応 6
使い方 7
使い方 $ deno run -A https://deno.land/x/aleph/install.ts $ aleph init $
aleph dev $ curl http://localhost:8080/ 8
使い方 $ aleph --version aleph.js 0.3.0-beta.19 deno 1.19.3 v8 9.9.115.8
typescript 4.5.2 🎉 9
esbuildについて 10
そもそもモジュールバンドラについて 11 https://ics.media/entry/16511/ より • Webpack、Rollup など • 複数のJSの依存関 係を解決し、すべ
てのモジュールを バンドルファイル にひとまとめにし てくれるもの
ビルドパフォーマンスの問題 • モジュールバンドラは遅い ◦ バンドルがビルドパフォーマンスを下げている • めっちゃ早いバンドラを謳う(An extremely fast JavaScript
bundler)esbuildが登場した 12
esbuildとは • Go言語で書かれたJS/TSのビルドツール • 並列処理が得意なGoの恩恵により超高速 ◦ 公式READMEによると、three.jsのビルドが webpack/rollup+terserの10-100倍 • 単体でトランスパイル/バンドル/Minifyを担ってくれる
13 https://github.com/evanw/esbuild より
esbuildがやらないこと • 他のフロントエンド言語への対応(Elm、Svelte、Vue、 Angularなど) ◦ VueはViteを使う • TypeScriptの型チェック(tscを別途実行するだけでよい) • カスタムAST操作のためのAPI
• Hot-module reloading • Module federation(異なる JavaScriptアプリケーションから動 的にコードをロードするしくみ) 14
Plugin 15
Plugin • Aleph.jsのランタイムを拡張するための機能 ◦ Marckdown LoaderやCSS Loader、JSON Loaderなどが対応 16
Plugin // alph.config.ts import windicss from "https://deno.land/x/
[email protected]
/plugin.ts"; import type {
Config } from "aleph/types"; export default <Config>{ plugins: [windicss], }; 17
MicroCMS 18
MicroCMS • 公式SDK があるのでそれを使う 19
MicroCMS // package.json { "dependencies": { "microcms-js-sdk": "^2.0.0" } }
20
MicroCMS // import_map.json { "imports": { "microcms": "https://esm.sh/microcms-js-sdk" }, "scopes":
{} } 21
MicroCMS // microcmsClient.ts import { createClient } from "microcms"; export
const microcmsClient = createClient({ serviceDomain: "your-subDomain", apiKey: `${Deno.env.get("X_MICROCMS_API_KEY")}`, }); 22
23
24
CSS Framework 25
CSS Framework • WindiCSS ◦ jie氏によりpluginが提供されている • ChackraUI 26
Linter/Formater 27
Linter/Formater // seting.json { "deno.lint": true, "editor.defaultFormatter": "denoland.vscode-deno", "editor.formatOnSave": true,
… } 28
感想 29
感想 • ルーティングとかほぼNext.js • プラグインはまだまだ非対応のものが多い ◦ β版なので仕方ない • esbuildの恩恵にあやかれるNo-bundlerビルドツールの選択肢 はいろいろ(Viteとかsnowpackとか)ある
◦ Viteの爆速開発体験is良き。Webpackに戻れなくなる 30
ご清聴ありがとうございました🎉 31