Save 37% off PRO during our Black Friday Sale! »

Kotlin/JSでもSSGしたい!

 Kotlin/JSでもSSGしたい!

Zli・LOCAL学生部 合同LT会2021 にて発表
ポートフォリオ: https://yt8492.com

3c7020b33ae8880dd9514b6469a28ae0?s=128

Yuta Tomiyama

February 27, 2021
Tweet

Transcript

  1. Kotlin/JSでもSSGしたい! Zli・LOCAL学生部 合同LT会2021

  2. 自己紹介 HN: マヤミト 会津大学26期 (学部3年) 所属サークル: Zli GitHub: https://github.com/yt8492 好きな言語:

    Kotlin, Java, Scala 趣味: Kotlin, 同人音声, VTuber Twitter: yt8492
  3. 突然ですが 僕のポートフォリオを見てください

  4. 使用技術 - Kotlin/JS - 1.4.30 - React - styled-components -

    kotlin-wrappers - kotlin-react - kotlin-styled - kotlin-css
  5. 皆さんはこう思いませんでしたか?

  6. 皆さんはこう思いませんでしたか? HTMLとCSSだけでいいじゃん

  7. それはそう

  8. イケてない点 - 吐き出されたJSがデカい - 291kB - そもそもJS(React)を使う意味とは - このページに動的な要素ないじゃん -

    HTMLとCSSだけで表現可能 - レンダリングされた状態で返してほしい
  9. 💡Kotlin/JSからHTMLを生成しよう

  10. Reactの要素をHTMLにレンダリングする - ReactDOMServer.renderToString でReactの要素をHTMLのStringに変換する - kotlin-reactにはない😇 - なので自分でラッパーを書きます

  11. Reactの要素をHTMLにレンダリングする

  12. スタイルが死んでる🤔

  13. styled-componentsのスタイルもレンダリングが必要 - ServerStyleSheetを用いてReactの要素をラップする必要がある - kotlin-styledにはない() - なので自分でラッパーを書きます

  14. 今度こそレンダリングする

  15. できた🎉

  16. デバッグが大変だな🤔 1. コードを書く 2. GradleのタスクでKotlin/JSをJavaScriptにトランスパイルする ./gradlew browserWebpack 3. Nodeで吐き出されたJSを実行しHTMLを生成する node

    main.js 4. 画像などのリソースが配置されたディレクトリにコピーする 5. ブラウザから開く
  17. SSGにする前はデバッグが簡単だった 1. Gradleのタスクでホットリロードが有効な状態でブラウザで動かす ./gradlew browserRun -t 2. コードを書く 3. 変更が反映される

  18. 開発中は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
  19. shared csr ssg - Reactの要素 - 画像などのリソース - ブラウザで開くための HTML

    - SSGのためのラッパー関数
  20. 開発が楽になった🎉

  21. KotlinでSSGするまとめ - Reactやstyled-componentsのSSGに必要な関数は自分でラッパーを書く必要が ある - 逆にラッパーさえ用意してしまえばすんなりできてしまった - デバッグ用にCSRのモジュールも用意すると楽そう

  22. あわせて読みたい Kotlin/JSでWebフロント開発をはじめよう https://qiita.com/yt8492/items/250e4f7ac19fa8a66a74 Kotlin/JSでもサーバーサイドしたい! https://qiita.com/yt8492/items/1271b30ecd26f5ca0efb