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フロント開発
2. 自己紹介 HN: マヤミト 本名: 富山雄太 会津大学26期 (学部3年) Zli 現代表 GitHub: https://github.com/yt8492 好きな技術: Kotlin Facebookのすがた Twitterのすがた ID:yt8492
3. Kotlinとは？ - 静的型付けのマルチパラダイムなオブジェクト指向言語 - JVMで動作し、Javaと互換性がある(相互に呼び出し可能) - Androidアプリ開発の開発言語として公式採用 - 最近ではサーバーサイドでの採用事例も増えている
4. Kotlin/JSとは - KotlinをJavaScriptにトランスパイルする - Webフロントエンドの開発もNode.jsでサーバーサイドの開発もできる - KotlinとJavaScriptで相互に呼び出し可能 - npmでもgradleでも開発できる transpile
5. 簡単なDOM操作の例
6. Q. 時代は仮想DOMでしょ？
7. Q. 時代は仮想DOMでしょ？ A. Kotlinでもできます。
8. kotlin-react - JetBrains(Kotlinの開発元)が公式で出しているReactラッパー - kotlin-wrappersというリポジトリでOSSとして公開されている - https://github.com/JetBrains/kotlin-wrappers
9. Kotlin/JSでReactのチュートリアルやってみた Reactチュートリアル: https://ja.reactjs.org/tutorial/tutorial.html 三目並べを作りながらReactの基礎を学べる これをKotlin/JSでできるかやってみた やってみたリポジトリhttps://github.com/yt8492/ReactTutorialKt
10. Class Component
11. Functional Component
12. できた https://yt8492.github.io/ReactTutorialKt
13. おまけ: hooks kotlin-reactではhooksも使える useState, useEffect, useReducerなど
14. まとめ - Kotlin/JS、結構実用的 - JavaScriptやTypeScriptの学習コストがほぼ0でReactでの開発ができる - JetpackComposeの前に宣言的UIを勉強するのにいいかも
15. Kotlinはいいぞ。
16. ありがとうございました！