Denoに入門していきなりAleph.jsを触ってみた

2022.12.07 Saitama.js vol.4

Transcript

1. Deno に入門していきなり Aleph.js を触 ってみた 2022.12.07 Saitama.js vol.4 @takfjp
2. 自己紹介 Takeru Furuichi (@takfjp) 川越市出身です 川越まつりには1 回しか行ったことがありません コネヒト株式会社 所属 「ママリ」という出産・育児領域のサービスを開発・運営してい ます フロント: React バックエンド: CakePHP
4. 今回のテーマ 重い腰をあげてDeno を触ってみた Aleph.js について触ってみてできなかったこと 今回話さないこと Deno, Aleph.js のテクニック Deno, Aleph の詳しい解説
5. What is Deno Deno はJavaScript / TypeScript ランタイムであり、安全なデフォルトと優れた開発者エクスペリエンスを備えています。 V8 、Rust 、Tokio に基づいて構築されています。 Node.js の作者であるRyan Dahl 氏が中心となって開発されている 最新は v1.28 ES Module に準拠しており、パッケージマネージャーを介さず外部 モジュールを使用できる
6. What is Aleph.js Next.js(React) に影響を受けたDeno のフルスタックフレームワーク SSG / SSR に対応 Vue, Yew, Solid など他のJS フレームワークも使用できるようになっ た まだbeta 版
7. 触ってみた動悸 Deno を敬遠していた 業務に投入するのはまだできないし・・・ フレームワークが充実していることを知って、React で試したくなっ た 「自分でもできるかも」と思わせてくれる何かがあった
8. Deno のインストール brew install deno deno --version deno 1.28.3 (release, x86_64-apple-darwin) v8 10.9.194.5 typescript 4.8.3
9. Aleph.js のインストール deno run -A -r https://alephjs.org/init.ts ? Project Name: hello-aleph ? Select a framework: 1. React 2. React with MDX 3. Vue 4. Yew 5. Solid 6. REST API [1-6] 1
10. ? Generate `_export.ts` module for runtime that doesn't support dynamic import (deploy to Deno Deploy)? [y/N] y ? Using Unocss(TailwindCSS)? [y/N] y ? Initialize VS Code workspace configuration? [y/N] y ↓ Downloading template(react), this might take a moment... ▲ Aleph.js is ready to go! $ cd hello-aleph $ deno task dev # Start the server in `development` mode $ deno task start # Start the server in `production` mode $ deno task build # Build & Optimize the app (bundling, SSG, etc.) Docs: https://alephjs.org/docs Bugs: https://github.com/alephjs/aleph.js/issues
11. さっそく動かしてみる
12. 内部で使われている CSS unocss https://github.com/unocss/unocss TailwindCSS に影響を受けている esm.sh というCDN 経由で利用
13. import_map.json { "imports": { "aleph/": "https://deno.land/x/aleph@1.0.0-beta.21/", "aleph/server": "https://deno.land/x/aleph@1.0.0-beta.21/server/mod.ts", "aleph/dev": "https://deno.land/x/aleph@1.0.0-beta.21/server/dev.ts", "@unocss/core": "https://esm.sh/@unocss/core@0.45.29", "@unocss/preset-uno": "https://esm.sh/@unocss/preset-uno@0.45.29", ... }, "scopes": {} }
14. npm のライブラリを使ってみよう Deno のv1.28 からnpm へのサポートが強化された deno.land / esm.sh にないライブラリも以下の形式で読み込み可能 import { chalk } from "npm:chalk@5"; npm:<package-name>[@<version-requirement>][/<sub-path>] 　の形式。
15. パッケージのインポート routes/index.tsx import { Head, Link } from "aleph/react"; import styled from "npm:styled-components@5.0.0";
16. パッケージのインポート import_map.json { "imports": { ... "react-dom": "https://esm.sh/react-dom@18.2.0/", + "styled-components": "npm:styled-components@5.0.0" }, "scopes": {} }
17. 結果
18. 所感 いきなりフレームワークに手を出す前にDeno でできることは把握 しておきたい 「Deno に入門した」とはまだ言えないもやもやが残った フレームワークによっては、まだ情報が少ない ハマった時の解決策が探しづらい production に投入できるのはまだ先かも npm ライブラリのサポート強化に今後もまだまだ期待 TypeScript でのバックエンド開発はNestJS が絶賛盛り上がり中なの でそっちに集中してもよいかな
19. We're Hiring! カジュアル面談やってます！ https://connehito.com/recruit/
20. Thank you!