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
310
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
モバイルアプリ開発を始めよう!
yt8492
0
55
Git勉強会
yt8492
0
120
なんでもやってみる勇気
yt8492
0
91
Android Autoが思ったよりしんどい話
yt8492
0
210
apollo-kotlinにcontributeした話
yt8492
0
140
DMM TVのSDカードダウンロード機能を実装した話
yt8492
1
850
今だからこそ知りたいKotlin Multiplatform
yt8492
0
300
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
1.3k
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
200
Other Decks in Programming
See All in Programming
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
370
AIでLINEスタンプを作ってみた
eycjur
1
230
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
250
Kiroで始めるAI-DLC
kaonash
2
580
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.1k
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
140
🔨 小さなビルドシステムを作る
momeemt
3
670
Testing Trophyは叫ばない
toms74209200
0
830
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
350
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
110
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
120
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
820
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Site-Speed That Sticks
csswizardry
10
810
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Become a Pro
speakerdeck
PRO
29
5.5k
KATA
mclloyd
32
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
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