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
27
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
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
240
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
5k
2023年の ゼロランタイムCSS in JS⚡️ を考える
yud0uhu
5
4.6k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
yud0uhu
2
2.4k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
920
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
1.1k
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
95
ブログを自作した話
yud0uhu
1
18
Wasmで動くRust製マークダウンパーサーを自作した話
yud0uhu
1
25
Featured
See All Featured
A Tale of Four Properties
chriscoyier
158
23k
Six Lessons from altMBA
skipperchong
27
3.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
RailsConf 2023
tenderlove
29
1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
The Language of Interfaces
destraynor
156
24k
Faster Mobile Websites
deanohume
306
31k
Why Our Code Smells
bkeepers
PRO
335
57k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Facilitating Awesome Meetings
lara
51
6.2k
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