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
250
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
80
CloudflareのAI関連の機能さわってみた
circled9
0
670
0.0.0.0 day
circled9
0
110
小数の丸め誤差の話
circled9
0
150
数値の文字列をパースしよう
circled9
0
240
🔥 Hono v4 やってみた
circled9
1
200
JetBrains AI Assistant を試してみた
circled9
1
540
React Hooks 勉強会 vol.3
circled9
2
440
JSON.stringify()
circled9
2
500
Other Decks in Programming
See All in Programming
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
340
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
240
Ruby Parser progress report 2025
yui_knk
1
300
はじめてのMaterial3 Expressive
ym223
2
130
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2k
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
260
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
1.1k
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
120
私の後悔をAWS DMSで解決した話
hiramax
4
200
アセットのコンパイルについて
ojun9
0
110
CSC305 Summer Lecture 12
javiergs
PRO
0
140
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
280
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Balancing Empowerment & Direction
lara
3
610
Designing for humans not robots
tammielis
253
25k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Why Our Code Smells
bkeepers
PRO
339
57k
The Language of Interfaces
destraynor
161
25k
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