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
65
Git勉強会
yt8492
0
140
なんでもやってみる勇気
yt8492
0
98
Android Autoが思ったよりしんどい話
yt8492
0
210
apollo-kotlinにcontributeした話
yt8492
0
140
DMM TVのSDカードダウンロード機能を実装した話
yt8492
1
860
今だからこそ知りたい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
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
350
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.5k
Serena MCPのすすめ
wadakatu
4
900
CSC305 Lecture 01
javiergs
PRO
1
400
私はどうやって技術力を上げたのか
yusukebe
43
17k
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
520
明日から始めるリファクタリング
ryounasso
0
110
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.6k
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
930
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
230
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
670
CSC509 Lecture 02
javiergs
PRO
0
410
Featured
See All Featured
Bash Introduction
62gerente
615
210k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
Music & Morning Musume
bryan
46
6.8k
A better future with KSS
kneath
239
17k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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