Submit Search
Upload
Denoで動くReactフレームワークAleph.jsでポートフォリオサイトをリプレイスした話
•
0 likes
•
222 views
yuosaka
Follow
全国学生エンジニア交流会 NSEEM (https://zli.connpass.com/event/239501/)で登壇した資料です。
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 31
Download now
Download to read offline
Recommended
three.jsを「遅い」と思わせないデータの扱い方
three.jsを「遅い」と思わせないデータの扱い方
jey en
やさしいGitの内部構造 - yapcasia2013
やさしいGitの内部構造 - yapcasia2013
DQNEO
MagicOnion入門
MagicOnion入門
torisoup
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
Takahito Tejima
DeClang 誕生!Clang ベースのハッキング対策コンパイラ【DeNA TechCon 2020 ライブ配信】
DeClang 誕生!Clang ベースのハッキング対策コンパイラ【DeNA TechCon 2020 ライブ配信】
DeNA
社内のマニュアルをSphinxで作ってみた
社内のマニュアルをSphinxで作ってみた
Iosif Takakura
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
DeNA
C#とILとネイティブと
C#とILとネイティブと
信之 岩永
Recommended
three.jsを「遅い」と思わせないデータの扱い方
three.jsを「遅い」と思わせないデータの扱い方
jey en
やさしいGitの内部構造 - yapcasia2013
やさしいGitの内部構造 - yapcasia2013
DQNEO
MagicOnion入門
MagicOnion入門
torisoup
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
Takahito Tejima
DeClang 誕生!Clang ベースのハッキング対策コンパイラ【DeNA TechCon 2020 ライブ配信】
DeClang 誕生!Clang ベースのハッキング対策コンパイラ【DeNA TechCon 2020 ライブ配信】
DeNA
社内のマニュアルをSphinxで作ってみた
社内のマニュアルをSphinxで作ってみた
Iosif Takakura
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
DeNA
C#とILとネイティブと
C#とILとネイティブと
信之 岩永
SSE4.2の文字列処理命令の紹介
SSE4.2の文字列処理命令の紹介
MITSUNARI Shigeo
Goのサーバサイド実装におけるレイヤ設計とレイヤ内実装について考える
Goのサーバサイド実装におけるレイヤ設計とレイヤ内実装について考える
pospome
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
Yoshifumi Kawai
Unityでオンラインゲーム作った話
Unityでオンラインゲーム作った話
torisoup
Riderはいいぞ!
Riderはいいぞ!
UnityTechnologiesJapan002
ARM CPUにおけるSIMDを用いた高速計算入門
ARM CPUにおけるSIMDを用いた高速計算入門
Fixstars Corporation
組み込みLinuxでのGolangのススメ
組み込みLinuxでのGolangのススメ
Tetsuyuki Kobayashi
ドメイン駆動設計をゲーム開発に活かす
ドメイン駆動設計をゲーム開発に活かす
増田 亨
[Track1-5] 製造業における最新AI適用事例のご紹介
[Track1-5] 製造業における最新AI適用事例のご紹介
Deep Learning Lab(ディープラーニング・ラボ)
Unityでオニオンアーキテクチャ
Unityでオニオンアーキテクチャ
torisoup
目grep入門 +解説
目grep入門 +解説
murachue
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計
増田 亨
ARグラスの自作と6DoF化
ARグラスの自作と6DoF化
emon 石川
WebRTCとSFU
WebRTCとSFU
Saki Homma
Houdini Mantra レンダリングのチューニング
Houdini Mantra レンダリングのチューニング
Ken Taki
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
Koichiro Matsuoka
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
mosa siru
3週連続DDDその3 ドメイン駆動設計 戦略的設計
3週連続DDDその3 ドメイン駆動設計 戦略的設計
増田 亨
IL2CPPに関する軽い話
IL2CPPに関する軽い話
Wooram Yang
20170527 inside .NET Core on Linux
20170527 inside .NET Core on Linux
Takayoshi Tanaka
XenServerによるお手軽開発サーバ運用
XenServerによるお手軽開発サーバ運用
Shinya Okano
More Related Content
What's hot
SSE4.2の文字列処理命令の紹介
SSE4.2の文字列処理命令の紹介
MITSUNARI Shigeo
Goのサーバサイド実装におけるレイヤ設計とレイヤ内実装について考える
Goのサーバサイド実装におけるレイヤ設計とレイヤ内実装について考える
pospome
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
Yoshifumi Kawai
Unityでオンラインゲーム作った話
Unityでオンラインゲーム作った話
torisoup
Riderはいいぞ!
Riderはいいぞ!
UnityTechnologiesJapan002
ARM CPUにおけるSIMDを用いた高速計算入門
ARM CPUにおけるSIMDを用いた高速計算入門
Fixstars Corporation
組み込みLinuxでのGolangのススメ
組み込みLinuxでのGolangのススメ
Tetsuyuki Kobayashi
ドメイン駆動設計をゲーム開発に活かす
ドメイン駆動設計をゲーム開発に活かす
増田 亨
[Track1-5] 製造業における最新AI適用事例のご紹介
[Track1-5] 製造業における最新AI適用事例のご紹介
Deep Learning Lab(ディープラーニング・ラボ)
Unityでオニオンアーキテクチャ
Unityでオニオンアーキテクチャ
torisoup
目grep入門 +解説
目grep入門 +解説
murachue
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計
増田 亨
ARグラスの自作と6DoF化
ARグラスの自作と6DoF化
emon 石川
WebRTCとSFU
WebRTCとSFU
Saki Homma
Houdini Mantra レンダリングのチューニング
Houdini Mantra レンダリングのチューニング
Ken Taki
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
Koichiro Matsuoka
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
mosa siru
3週連続DDDその3 ドメイン駆動設計 戦略的設計
3週連続DDDその3 ドメイン駆動設計 戦略的設計
増田 亨
IL2CPPに関する軽い話
IL2CPPに関する軽い話
Wooram Yang
What's hot
(20)
SSE4.2の文字列処理命令の紹介
SSE4.2の文字列処理命令の紹介
Goのサーバサイド実装におけるレイヤ設計とレイヤ内実装について考える
Goのサーバサイド実装におけるレイヤ設計とレイヤ内実装について考える
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
Unityでオンラインゲーム作った話
Unityでオンラインゲーム作った話
Riderはいいぞ!
Riderはいいぞ!
ARM CPUにおけるSIMDを用いた高速計算入門
ARM CPUにおけるSIMDを用いた高速計算入門
組み込みLinuxでのGolangのススメ
組み込みLinuxでのGolangのススメ
ドメイン駆動設計をゲーム開発に活かす
ドメイン駆動設計をゲーム開発に活かす
[Track1-5] 製造業における最新AI適用事例のご紹介
[Track1-5] 製造業における最新AI適用事例のご紹介
Unityでオニオンアーキテクチャ
Unityでオニオンアーキテクチャ
目grep入門 +解説
目grep入門 +解説
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計
ARグラスの自作と6DoF化
ARグラスの自作と6DoF化
WebRTCとSFU
WebRTCとSFU
Houdini Mantra レンダリングのチューニング
Houdini Mantra レンダリングのチューニング
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
3週連続DDDその3 ドメイン駆動設計 戦略的設計
3週連続DDDその3 ドメイン駆動設計 戦略的設計
IL2CPPに関する軽い話
IL2CPPに関する軽い話
Similar to Denoで動くReactフレームワークAleph.jsでポートフォリオサイトをリプレイスした話
20170527 inside .NET Core on Linux
20170527 inside .NET Core on Linux
Takayoshi Tanaka
XenServerによるお手軽開発サーバ運用
XenServerによるお手軽開発サーバ運用
Shinya Okano
ソフトウェア工学2023 14 ビルド
ソフトウェア工学2023 14 ビルド
Toru Tamaki
OWIN - .NETにおけるPSGI -
OWIN - .NETにおけるPSGI -
将 高野
Aspnet mvc 6の今を紹介
Aspnet mvc 6の今を紹介
Makoto Nishimura
Asp Net Mvc 基礎のキソ
Asp Net Mvc 基礎のキソ
Yoshitaka Seo
密着! nibohsiデプロイ 13:00-13:05 - railsアプリのデプロイ事例 -
密着! nibohsiデプロイ 13:00-13:05 - railsアプリのデプロイ事例 -
Yukihiko SAWANOBORI
Nodejuku01 ohtsu
Nodejuku01 ohtsu
Nanha Park
継続的インテグレーション3分クッキング
継続的インテグレーション3分クッキング
Takayuki Kondou
はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入
Yu Nobuoka
About .Net vNext
About .Net vNext
Kazunori Hamamoto
About .Net vNext
About .Net vNext
Kazunori Hamamoto
Jenkins study jenkins build-cicdi
Jenkins study jenkins build-cicdi
昌桓 李
Eclipse xtext 紹介
Eclipse xtext 紹介
Akira Tanaka
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門
Narami Kiyokura
Grunt入門
Grunt入門
Tsuyoshi Maeda
20170311 Developing & Deploying .NET Core on Linux
20170311 Developing & Deploying .NET Core on Linux
Takayoshi Tanaka
静的サイトどこにする?
静的サイトどこにする?
ogawatti
node-gypを使ったネイティブモジュールの作成
node-gypを使ったネイティブモジュールの作成
shigeki_ohtsu
Similar to Denoで動くReactフレームワークAleph.jsでポートフォリオサイトをリプレイスした話
(20)
20170527 inside .NET Core on Linux
20170527 inside .NET Core on Linux
XenServerによるお手軽開発サーバ運用
XenServerによるお手軽開発サーバ運用
ソフトウェア工学2023 14 ビルド
ソフトウェア工学2023 14 ビルド
OWIN - .NETにおけるPSGI -
OWIN - .NETにおけるPSGI -
Aspnet mvc 6の今を紹介
Aspnet mvc 6の今を紹介
Asp Net Mvc 基礎のキソ
Asp Net Mvc 基礎のキソ
密着! nibohsiデプロイ 13:00-13:05 - railsアプリのデプロイ事例 -
密着! nibohsiデプロイ 13:00-13:05 - railsアプリのデプロイ事例 -
Nodejuku01 ohtsu
Nodejuku01 ohtsu
継続的インテグレーション3分クッキング
継続的インテグレーション3分クッキング
はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入
About .Net vNext
About .Net vNext
About .Net vNext
About .Net vNext
Jenkins study jenkins build-cicdi
Jenkins study jenkins build-cicdi
Eclipse xtext 紹介
Eclipse xtext 紹介
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門
Grunt入門
Grunt入門
20170311 Developing & Deploying .NET Core on Linux
20170311 Developing & Deploying .NET Core on Linux
静的サイトどこにする?
静的サイトどこにする?
node-gypを使ったネイティブモジュールの作成
node-gypを使ったネイティブモジュールの作成
Denoで動くReactフレームワークAleph.jsでポートフォリオサイトをリプレイスした話
1.
Denoで動くReactフレームワーク Aleph.jsでポートフォリオサイトをリプ レイスした話 全国学生エンジニア交流会 NSEEM cistLT 0Yu @denham95173179 1
2.
2 0Yu@denham95173179 ● B3 ● cistLT所属
3.
Aleph.jsとは? 3
4.
Aleph.jsとは? https://alephjs.org/ ● Next.jsにインスパイアされたDenoのフレームワーク 4
5.
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
6.
Aleph.jsとは? ● 設定ファイル(package.jsonとnode_modules)が不要 ● TypeScriptを標準サポート ●
Denoのimport構文によりCDNからNPMを使える ● Import Maps に対応 ● HMRでリフレッシュが高速 ● ルーティングはパス名ベース ● SSRとSSGをサポート ● JSXで記述可能 ● Plugins System に対応 6
7.
使い方 7
8.
使い方 $ deno run
-A https://deno.land/x/aleph/install.ts $ aleph init $ aleph dev $ curl http://localhost:8080/ 8
9.
使い方 $ aleph --version aleph.js
0.3.0-beta.19 deno 1.19.3 v8 9.9.115.8 typescript 4.5.2 🎉 9
10.
esbuildについて 10
11.
そもそもモジュールバンドラについて 11 https://ics.media/entry/16511/ より ● Webpack、Rollup など ●
複数のJSの依存関 係を解決し、すべ てのモジュールを バンドルファイル にひとまとめにし てくれるもの
12.
ビルドパフォーマンスの問題 ● モジュールバンドラは遅い ○ バンドルがビルドパフォーマンスを下げている ●
めっちゃ早いバンドラを謳う(An extremely fast JavaScript bundler)esbuildが登場した 12
13.
esbuildとは ● Go言語で書かれたJS/TSのビルドツール ● 並列処理が得意なGoの恩恵により超高速 ○
公式READMEによると、three.jsのビルドが webpack/rollup+terserの10-100倍 ● 単体でトランスパイル/バンドル/Minifyを担ってくれる 13 https://github.com/evanw/esbuild より
14.
esbuildがやらないこと ● 他のフロントエンド言語への対応(Elm、Svelte、Vue、 Angularなど) ○ VueはViteを使う ●
TypeScriptの型チェック(tscを別途実行するだけでよい) ● カスタムAST操作のためのAPI ● Hot-module reloading ● Module federation(異なる JavaScriptアプリケーションから動 的にコードをロードするしくみ) 14
15.
Plugin 15
16.
Plugin ● Aleph.jsのランタイムを拡張するための機能 ○ Marckdown
LoaderやCSS Loader、JSON Loaderなどが対応 16
17.
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 <Config>{ plugins: [windicss], }; 17
18.
MicroCMS 18
19.
MicroCMS ● 公式SDK があるのでそれを使う 19
20.
MicroCMS // package.json { "dependencies": { "microcms-js-sdk":
"^2.0.0" } } 20
21.
MicroCMS // import_map.json { "imports": { "microcms":
"https://esm.sh/microcms-js-sdk" }, "scopes": {} } 21
22.
MicroCMS // microcmsClient.ts import {
createClient } from "microcms"; export const microcmsClient = createClient({ serviceDomain: "your-subDomain", apiKey: `${Deno.env.get("X_MICROCMS_API_KEY")}`, }); 22
23.
23
24.
24
25.
CSS Framework 25
26.
CSS Framework ● WindiCSS ○
jie氏によりpluginが提供されている ● ChackraUI 26
27.
Linter/Formater 27
28.
Linter/Formater // seting.json { "deno.lint": true, "editor.defaultFormatter":
"denoland.vscode-deno", "editor.formatOnSave": true, … } 28
29.
感想 29
30.
感想 ● ルーティングとかほぼNext.js ● プラグインはまだまだ非対応のものが多い ○
β版なので仕方ない ● esbuildの恩恵にあやかれるNo-bundlerビルドツールの選択肢 はいろいろ(Viteとかsnowpackとか)ある ○ Viteの爆速開発体験is良き。Webpackに戻れなくなる 30
31.
ご清聴ありがとうございました🎉 31
Download now