Webフロント開発？それ、Kotlinでもできるよ。

Webフロント開発をKotlin/JSとReactでやった話

2020/05/04 Zli x OthloTech LT会 にて発表
https://othlotech.connpass.com/event/174247/

Transcript

1. Webフロント開発？それ、
   Kotlinでもできるよ。
   Kotlin/JSで始めるWebフロント開発
   

   View Slide

2. 自己紹介
   HN: マヤミト
   本名: 富山雄太
   会津大学26期 (学部3年)
   Zli 現代表
   GitHub: https://github.com/yt8492
   好きな技術: Kotlin
   Facebookのすがた
   Twitterのすがた
   ID:yt8492
   

   View Slide

3. Kotlinとは？
   - 静的型付けのマルチパラダイムなオブジェクト指向言語
   - JVMで動作し、Javaと互換性がある(相互に呼び出し可能)
   - Androidアプリ開発の開発言語として公式採用
   - 最近ではサーバーサイドでの採用事例も増えている
   

   View Slide

4. Kotlin/JSとは
   - KotlinをJavaScriptにトランスパイルする
   - Webフロントエンドの開発もNode.jsでサーバーサイドの開発もできる
   - KotlinとJavaScriptで相互に呼び出し可能
   - npmでもgradleでも開発できる
   transpile
   

   View Slide

5. 簡単なDOM操作の例
   

   View Slide

6. Q. 時代は仮想DOMでしょ？
   

   View Slide

7. Q. 時代は仮想DOMでしょ？
   A. Kotlinでもできます。
   

   View Slide

8. kotlin-react
   - JetBrains(Kotlinの開発元)が公式で出しているReactラッパー
   - kotlin-wrappersというリポジトリでOSSとして公開されている
   - https://github.com/JetBrains/kotlin-wrappers
   

   View Slide

9. Kotlin/JSでReactのチュートリアルやってみた
   Reactチュートリアル: https://ja.reactjs.org/tutorial/tutorial.html
   三目並べを作りながらReactの基礎を学べる
   これをKotlin/JSでできるかやってみた
   やってみたリポジトリhttps://github.com/yt8492/ReactTutorialKt
   

   View Slide

10. Class Component
    

    View Slide

11. Functional Component
    

    View Slide

12. できた
    https://yt8492.github.io/ReactTutorialKt
    

    View Slide

13. おまけ: hooks
    kotlin-reactではhooksも使える
    useState, useEffect, useReducerなど
    

    View Slide

14. まとめ
    - Kotlin/JS、結構実用的
    - JavaScriptやTypeScriptの学習コストがほぼ0でReactでの開発ができる
    - JetpackComposeの前に宣言的UIを勉強するのにいいかも
    

    View Slide

15. Kotlinはいいぞ。
    

    View Slide

16. ありがとうございました！
    

    View Slide