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
Fresh
Search
circled9
July 21, 2022
Programming
0
240
Fresh
新潟WEBアプリケーション勉強会 Vol.1でFreshについて話した資料です。
https://steeq.connpass.com/event/254066/
circled9
July 21, 2022
Tweet
Share
More Decks by circled9
See All by circled9
キースイッチ入門
circled9
0
69
CloudflareのAI関連の機能さわってみた
circled9
0
550
0.0.0.0 day
circled9
0
97
小数の丸め誤差の話
circled9
0
130
数値の文字列をパースしよう
circled9
0
210
🔥 Hono v4 やってみた
circled9
1
180
JetBrains AI Assistant を試してみた
circled9
1
500
React Hooks 勉強会 vol.3
circled9
2
430
JSON.stringify()
circled9
2
490
Other Decks in Programming
See All in Programming
監視 やばい
syossan27
12
10k
ぽちぽち選択するだけでOSSを読めるVSCode拡張機能
ymbigo
14
6.5k
JAWS DAYS 2025 re_Cheers: WEB
komakichi
0
120
Flutterでllama.cppをつかってローカルLLMを試してみた
sakuraidayo
0
150
Design Pressure
hynek
0
100
音声プラットフォームのアーキテクチャ変遷から学ぶ、クラウドネイティブなバッチ処理 (20250422_CNDS2025_Batch_Architecture)
thousanda
0
430
Beyond_the_Prompt__Evaluating__Testing__and_Securing_LLM_Applications.pdf
meteatamel
0
110
オープンソースコントリビュート入門
_katsuma
0
130
M5UnitUnified 最新動向 2025/05
gob
0
140
Serving TUIs over SSH with Go
caarlos0
0
740
UMAPをざっくりと理解 / Overview of UMAP
kaityo256
PRO
3
1.6k
バイラテラルアップサンプリング
fadis
3
580
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
49
7.8k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Thoughts on Productivity
jonyablonski
69
4.6k
Side Projects
sachag
453
42k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
The Cult of Friendly URLs
andyhume
78
6.4k
Adopting Sorbet at Scale
ufuk
76
9.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
800
Making Projects Easy
brettharned
116
6.2k
Code Review Best Practice
trishagee
68
18k
Transcript
Fresh The next-gen web framework. @circled9 2022-07-20 1
About Me দҪ ਖ਼ࢤ Matsui Masashi @circled9 Frontend Engineer water-cell
inc. 2
ۙگ • ϦϞʔτͰՈ͔Βग़ͯͳ͍ • ௨ۈ͕ΘΓʹຖࢄาͯͨ͠Β૫ͤͨ • ମॏ6kgݮɺෲғ8cmݮʢࣾൺʣ • Ͱ݈߁அͻ͔͔ͬͬͨ •
݁͠ੴʢnͿΓ2ճ......ʣ • ࠓΞϧίʔϧ߇͑·͢ 3
ࠓ͢͜ͱ • deno • CSR, SSR • Fresh 4
͡Ίʹ • ࠓdenoͷWebϑϨʔϜϫʔΫͷFreshͷհΛ͠·͢ɻ • ͱ͍͏ͷΛΰʔϧʹͯ͠ɺͦͷपลͷΛ͍͖ͯ͠·͢ɻ • ͳͷͰFreshࣗମͷগͳΊͰ͢ɺ͝ΊΜͳ͍͞ɻ 5
deno 6
......ͷલʹ 7
Node.js 8
Node.js • JavaScript͕ಈ͘ϥϯλΠϜ • αʔόʔαΠυͷ࣮ߦڥͱ͚ͯͩ͠Ͱͳ͘ɺϑϩϯτΤϯυͷπʔ ϧͱͯ͠ΘΕΔ • ݱࡏͷ࠷৽൛18.6.0 9
deno 10
deno • JavaScriptͱTypeScript͕ಈ͘ϥϯλΠϜ • Node.jsͷ࡞ऀ ( Ryan Dahl ) ͕࡞ͬͨ
• ݱࡏͷ࠷৽൛1.23.4 $ deno --version deno 1.23.4 (release, aarch64-apple-darwin) v8 10.4.132.8 typescript 4.7.4 11
deno • Webඪ४ͷػೳΛαϙʔτ͍ͯ͠Δ • fetchͱ͔ • Secure by default •
໌ࣔతʹڐՄ͠ͳ͍ͱϑΝΠϧͷಡΈॻ͖ͳͲͷػೳ͕͑ͳ͍ 12
deno • ֤छπʔϧdenoࣗମ͕ఏڙ͍ͯ͠Δ • lint, fmt, test • όϯυϧͯ͠୯ಠͷJavaScriptϑΝΠϧʹ͢Δ͜ͱͰ͖Δ •
ϒϥβ͚ͷόϯυϥʔͳ͍ • ͳͷͰϒϥβ͚ʹesbuildͳͲΛ͏ 13
CSR, SSR 14
CSR, SSR • ϨϯμϦϯάͷํ๏ͷݺͼํ • ͦΕͧΕҎԼͷ಄จࣈΛऔ͍ͬͯΔ • Client Side Rendering
• Server Side Rendering • ଞʹSSGͱISR͕͋Δ͕͜͜ͰׂѪ • Static Site Generation • Incremental Static Regeneration 15
CSR • ΫϥΠΞϯτଆͰը໘ΛϨϯμʔ͢Δ • αʔόʔ੩తͳHTMLJSΛ৴͢Δ͚ͩ • HTMLʹۭͷdiv͚͕ͩఆٛ͞Ε͍ͯΔ͜ͱ͕ଟ͍ 16
SSR • αʔόʔଆͰHTMLΛϨϯμʔͯ͠ΫϥΠΞϯτʹ৴͢Δ • JS͕࣮ߦͰ͖ͳ͍ΫϩʔϥʔʹରԠͰ͖Δ • ͨͩͷHTMLʹͳΔͷͰΫϥΠΞϯτଆͰhydrateΛߦ͏ 17
hydrate • ਫͰ͢తͳҙຯɺଟ • αʔόʔ͕ੜͨ͠HTMLΠϕϯτͳͲ͕ઃఆ͞Ε͍ͯͳ͍ • hydrate͢Δ͜ͱͰΫϦοΫͳͲͷΠϕϯτͳͲ͕ઃఆ͞ΕΔ 18
͜Μͳײ͡ // ࡶͳΧϯλʔ const Counter = () => { const
[count, setCount] = useState(0); const plus = () => setCount(count + 1); const minus = () => setCount(count - 1); return ( <div> <div>{count}</div> <button onClick={plus}>+</button> <button onClick={minus}>-</button> </div> ); }; <!-- Ϩϯμʔ͢Δͱ͜͏ͳΔ --> <div> <div>0</div> <button>+</button> <button>-</button> </div> 19
Fresh 20
Fresh • denoͷWebϑϨʔϜϫʔΫ • denoͷެࣜϒϩάͰΘΕ͍ͯΔ • ࠷ۙ1.0ʹͳͬͨ 21
Fresh • ΤοδαʔόʔͰͷSSRΛఆ͍ͯ͠Δ • PreactͰϨϯμϦϯάΛߦ͏ • Island ArchitectureΛ࠾༻͍ͯ͠Δ 22
Preact 23
Preact • Fast 3kB alternative to React with the same
modern API • ↑ ެࣜΑΓҾ༻ • ܰྔ൛React • hooksͱ͔ͪΌΜͱ͑Δ 24
Island Architecture 25
Island Architecture • ը໘ͷཁૉΛౡʹݟཱͯͨΞʔΩςΫνϟ • ੩తͳཁૉ୯७ͳHTMLͱͯ͠ѻ͏ • ΠϯλϥΫςΟϒͳཁૉ͚ͩhydrate͢Δ 26
https://www.patterns.dev/posts/islands-architecture/
FreshͷϝϦοτɾσϝϦοτ • ͳΜ͔͠ΌΔ 28
ऴྃ 29