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
Kotlin/JSでもSSGしたい!
Search
Yuta Tomiyama
February 27, 2021
Programming
1
210
Kotlin/JSでもSSGしたい!
Zli・LOCAL学生部 合同LT会2021 にて発表
ポートフォリオ:
https://yt8492.com
Yuta Tomiyama
February 27, 2021
Tweet
Share
More Decks by Yuta Tomiyama
See All by Yuta Tomiyama
Android Autoが思ったよりしんどい話
yt8492
0
120
apollo-kotlinにcontributeした話
yt8492
0
56
DMM TVのSDカードダウンロード機能を実装した話
yt8492
1
640
今だからこそ知りたいKotlin Multiplatform
yt8492
0
210
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
1.1k
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
160
Compose for Webを始めよう
yt8492
0
330
Compose Multiplatform 1.0.0
yt8492
0
140
Kotlin/NativeからCの標準ライブラリを呼び出そう
yt8492
0
290
Other Decks in Programming
See All in Programming
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
Activities at Cairo Library
cairolibrary720
0
1.2k
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
日付と正規化
megmogmog1965
0
140
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
Mastering Developer Experience: A Roadmap for Success 【開発生産性Conference 2024】
findyinc
1
380
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Building an army of robots
kneath
301
42k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Six Lessons from altMBA
skipperchong
24
3.2k
We Have a Design System, Now What?
morganepeng
46
7k
Typedesign – Prime Four
hannesfritz
37
2.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Transcript
Kotlin/JSでもSSGしたい! Zli・LOCAL学生部 合同LT会2021
自己紹介 HN: マヤミト 会津大学26期 (学部3年) 所属サークル: Zli GitHub: https://github.com/yt8492 好きな言語:
Kotlin, Java, Scala 趣味: Kotlin, 同人音声, VTuber Twitter: yt8492
突然ですが 僕のポートフォリオを見てください
使用技術 - Kotlin/JS - 1.4.30 - React - styled-components -
kotlin-wrappers - kotlin-react - kotlin-styled - kotlin-css
皆さんはこう思いませんでしたか?
皆さんはこう思いませんでしたか? HTMLとCSSだけでいいじゃん
それはそう
イケてない点 - 吐き出されたJSがデカい - 291kB - そもそもJS(React)を使う意味とは - このページに動的な要素ないじゃん -
HTMLとCSSだけで表現可能 - レンダリングされた状態で返してほしい
💡Kotlin/JSからHTMLを生成しよう
Reactの要素をHTMLにレンダリングする - ReactDOMServer.renderToString でReactの要素をHTMLのStringに変換する - kotlin-reactにはない😇 - なので自分でラッパーを書きます
Reactの要素をHTMLにレンダリングする
スタイルが死んでる🤔
styled-componentsのスタイルもレンダリングが必要 - ServerStyleSheetを用いてReactの要素をラップする必要がある - kotlin-styledにはない() - なので自分でラッパーを書きます
今度こそレンダリングする
できた🎉
デバッグが大変だな🤔 1. コードを書く 2. GradleのタスクでKotlin/JSをJavaScriptにトランスパイルする ./gradlew browserWebpack 3. Nodeで吐き出されたJSを実行しHTMLを生成する node
main.js 4. 画像などのリソースが配置されたディレクトリにコピーする 5. ブラウザから開く
SSGにする前はデバッグが簡単だった 1. Gradleのタスクでホットリロードが有効な状態でブラウザで動かす ./gradlew browserRun -t 2. コードを書く 3. 変更が反映される
開発中はCSR、本番はSSGにする - Gradleはモジュールを分けることができる - sharedモジュールにReactの要素と画像などのリソースを置く - 開発用のcsrモジュールと本番用のssgモジュールを作り、それぞれからsharedモ ジュールを参照する - resourcesのリソースは参照できなかったのでシンボリックリンクで対応
- いい方法知ってたら誰か教えて - csrモジュールのmain関数にはブラウザで動かすためのコードを書く - ./gradlew :csr:browserRun -t - ssgモジュールのmain関数にはnodeで動かすSSGのコードを書く - ./gradlew :ssg:browserWebpack - node main.js
shared csr ssg - Reactの要素 - 画像などのリソース - ブラウザで開くための HTML
- SSGのためのラッパー関数
開発が楽になった🎉
KotlinでSSGするまとめ - Reactやstyled-componentsのSSGに必要な関数は自分でラッパーを書く必要が ある - 逆にラッパーさえ用意してしまえばすんなりできてしまった - デバッグ用にCSRのモジュールも用意すると楽そう
あわせて読みたい Kotlin/JSでWebフロント開発をはじめよう https://qiita.com/yt8492/items/250e4f7ac19fa8a66a74 Kotlin/JSでもサーバーサイドしたい! https://qiita.com/yt8492/items/1271b30ecd26f5ca0efb