Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Kotlin/JSでもSSGしたい!

 Kotlin/JSでもSSGしたい!

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

Yuta Tomiyama

February 27, 2021
Tweet

More Decks by Yuta Tomiyama

Other Decks in Programming

Transcript

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

    View Slide

  2. 自己紹介
    HN: マヤミト
    会津大学26期 (学部3年)
    所属サークル: Zli
    GitHub: https://github.com/yt8492
    好きな言語: Kotlin, Java, Scala
    趣味: Kotlin, 同人音声, VTuber
    Twitter: yt8492

    View Slide

  3. 突然ですが
    僕のポートフォリオを見てください

    View Slide

  4. 使用技術
    - Kotlin/JS
    - 1.4.30
    - React
    - styled-components
    - kotlin-wrappers
    - kotlin-react
    - kotlin-styled
    - kotlin-css

    View Slide

  5. 皆さんはこう思いませんでしたか?

    View Slide

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

    View Slide

  7. それはそう

    View Slide

  8. イケてない点
    - 吐き出されたJSがデカい
    - 291kB
    - そもそもJS(React)を使う意味とは
    - このページに動的な要素ないじゃん
    - HTMLとCSSだけで表現可能
    - レンダリングされた状態で返してほしい

    View Slide

  9. 💡Kotlin/JSからHTMLを生成しよう

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. できた🎉

    View Slide

  16. デバッグが大変だな🤔
    1. コードを書く
    2. GradleのタスクでKotlin/JSをJavaScriptにトランスパイルする
    ./gradlew browserWebpack
    3. Nodeで吐き出されたJSを実行しHTMLを生成する
    node main.js
    4. 画像などのリソースが配置されたディレクトリにコピーする
    5. ブラウザから開く

    View Slide

  17. SSGにする前はデバッグが簡単だった
    1. Gradleのタスクでホットリロードが有効な状態でブラウザで動かす
    ./gradlew browserRun -t
    2. コードを書く
    3. 変更が反映される

    View Slide

  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

    View Slide

  19. shared
    csr ssg
    - Reactの要素
    - 画像などのリソース
    - ブラウザで開くための HTML - SSGのためのラッパー関数

    View Slide

  20. 開発が楽になった🎉

    View Slide

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

    View Slide

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

    View Slide