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
190
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
93
apollo-kotlinにcontributeした話
yt8492
0
38
DMM TVのSDカードダウンロード機能を実装した話
yt8492
1
580
今だからこそ知りたいKotlin Multiplatform
yt8492
0
180
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
1.1k
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
150
Compose for Webを始めよう
yt8492
0
310
Compose Multiplatform 1.0.0
yt8492
0
130
Kotlin/NativeからCの標準ライブラリを呼び出そう
yt8492
0
240
Other Decks in Programming
See All in Programming
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
190
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
380
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
370
Ruby Pattern Matching
bkuhlmann
0
930
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
"config" ってなんだ? / What is "config"?
okashoi
0
240
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
140
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
320
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
210
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
319
37k
What the flash - Photography Introduction
edds
64
11k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
Statistics for Hackers
jakevdp
789
220k
Testing 201, or: Great Expectations
jmmastey
28
6.4k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
[RailsConf 2023] Rails as a piece of cake
palkan
23
4k
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