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

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

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

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

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

3c7020b33ae8880dd9514b6469a28ae0?s=128

Yuta Tomiyama

May 04, 2020
Tweet

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. ありがとうございました!