Zli・LOCAL学生部 合同LT会2021 にて発表 ポートフォリオ: https://yt8492.com
Kotlin/JSでもSSGしたい!Zli・LOCAL学生部 合同LT会2021
View Slide
自己紹介HN: マヤミト会津大学26期 (学部3年)所属サークル: ZliGitHub: https://github.com/yt8492好きな言語: Kotlin, Java, Scala趣味: Kotlin, 同人音声, VTuberTwitter: 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 browserWebpack3. Nodeで吐き出されたJSを実行しHTMLを生成するnode main.js4. 画像などのリソースが配置されたディレクトリにコピーする5. ブラウザから開く
SSGにする前はデバッグが簡単だった1. Gradleのタスクでホットリロードが有効な状態でブラウザで動かす./gradlew browserRun -t2. コードを書く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
sharedcsr ssg- Reactの要素- 画像などのリソース- ブラウザで開くための HTML - SSGのためのラッパー関数
開発が楽になった🎉
KotlinでSSGするまとめ- Reactやstyled-componentsのSSGに必要な関数は自分でラッパーを書く必要がある- 逆にラッパーさえ用意してしまえばすんなりできてしまった- デバッグ用にCSRのモジュールも用意すると楽そう
あわせて読みたいKotlin/JSでWebフロント開発をはじめようhttps://qiita.com/yt8492/items/250e4f7ac19fa8a66a74Kotlin/JSでもサーバーサイドしたい!https://qiita.com/yt8492/items/1271b30ecd26f5ca0efb