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
33
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
230
早朝の渋谷の青さ、あるいは溺れた人を助ける為に飛び込んだ海の向こう側に見る、自己覚知と自己開示の尊さ
yud0uhu
1
610
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
320
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
5.5k
2023年の ゼロランタイムCSS in JS⚡️ を考える
yud0uhu
5
4.8k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
yud0uhu
2
2.8k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
1k
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
1.2k
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
180
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Scaling GitHub
holman
463
140k
Being A Developer After 40
akosma
90
590k
Facilitating Awesome Meetings
lara
55
6.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Navigating Team Friction
lara
189
15k
Building Adaptive Systems
keathley
43
2.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
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