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
300
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
46
Git勉強会
yt8492
0
100
なんでもやってみる勇気
yt8492
0
79
Android Autoが思ったよりしんどい話
yt8492
0
190
apollo-kotlinにcontributeした話
yt8492
0
120
DMM TVのSDカードダウンロード機能を実装した話
yt8492
1
830
今だからこそ知りたいKotlin Multiplatform
yt8492
0
290
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
1.2k
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
190
Other Decks in Programming
See All in Programming
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
300
イベントストーミングから始めるドメイン駆動設計
jgeem
4
840
FormFlow - Build Stunning Multistep Forms
yceruto
1
170
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
m4maruyama
1
120
AIネイティブなプロダクトをGolangで挑む取り組み
nmatsumoto4
0
100
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
220
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
600
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
120
エラーって何種類あるの?
kajitack
5
150
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
780
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
660
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
51k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
It's Worth the Effort
3n
184
28k
Code Reviewing Like a Champion
maltzj
524
40k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Designing for Performance
lara
609
69k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
920
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