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

2021年のKotlin入門

 2021年のKotlin入門

2021/08/22 Zli x SGG 学生合同LT大会 にて発表

Yuta Tomiyama

August 22, 2021
Tweet

More Decks by Yuta Tomiyama

Other Decks in Programming

Transcript

  1. 2021年のKotlin入門
    Zli x SGG 学生合同LT大会

    View full-size slide

  2. 自己紹介
    HN: マヤミト
    ID: yt8492
    会津大学 学部4年
    去年までZliの代表やってました
    GitHub: https://github.com/yt8492
    趣味: Kotlin, Twitter, ウマ娘
    今月既にウマ娘に8万を溶かしています
    Twitter: yt8492

    View full-size slide

  3. 今回はKotlin布教回です

    View full-size slide

  4. Kotlinを知ってる人󰢧
    何ができる言語か知っていますか?

    View full-size slide

  5. 今回のLT(セッション?)では2021年現在Kotlin
    でどんなことができるか紹介したいと
    思います

    View full-size slide

  6. 思いついたやつとりあえず列挙してみた
    - Androidアプリ
    - iOSアプリ
    - デスクトップアプリ
    - サーバーサイド
    - Webフロント
    - CLIツール
    - ゲーム

    View full-size slide

  7. Androidアプリ開発
    - おそらくKotlinと聞いて大多数の人が思い浮かべるのがこれ
    - 2019年、GoogleがKotlinをAndroidアプリ開発の推奨言語にすると発表
    - 今新規アプリをJavaで書いてる企業はヤバい
    - 従来のJavaで書かれたAndroid SDKやライブラリをKotlinからそのまま使えるだ
    けでなく、KotlinのコードもJava側から簡単に呼び出せる
    - Jetpack Composeでモダンな宣言的UIの手法で開発ができるように(後述)

    View full-size slide

  8. サーバーサイド開発
    - Spring BootやSparkなどのJavaのフレームワークがほぼそのまま使える
    - KtorというKotlin製のフレームワークもある
    - 最近だとサーバーサイドにKotlinを採用している企業も増えてきている

    View full-size slide

  9. なぜKotlinはJavaと相互運用が可能なのか?
    - KotlinのコードがコンパイルされるとJavaのバイトコードになる
    - IntelliJ IDEA / Android Studio の機能でJavaにデコンパイルすることも可能
    - 最終的なランタイムはJVM
    - サーバーもJARファイルにしてしまえば Kotlinの環境がなくてもJavaのランタイムさえあれば動かせ

    - Androidも最終的にはapkになる

    View full-size slide

  10. Kotlinの特殊なランタイムがない
    →Javaのバイトコード以外も吐き出せるようにすれ
    ば任意のものが作れるのでは?

    View full-size slide

  11. Kotlin/JS
    - KotlinのコードをJavaScriptにトランスパイルする技術
    - targetにbrowserとnodejsがある
    - Gradle経由でWebpackを使い、JavaScriptのファイルを生成する
    - Gradle経由でnpmを使うことができ、JavaScriptのライブラリなどをKotlin側から
    使うことも可能
    - kotlin-react というKotlin/JS向けのReactラッパーライブラリがJetBrainsの
    GitHubのリポジトリでOSSとして開発されている

    View full-size slide

  12. Kotlin/Native
    - Kotlin/Nativeにはいくつか種類(target)がある
    - iOS
    - Windows
    - MacOS
    - Linux
    - wasm
    - targetによっても何を生成するかが変わる
    - iOSはObjective-Cとxcodeproj
    - Windows, MacOS, Linuxでは実行可能なバイナリ
    - wasmはwasm

    View full-size slide

  13. Kotlin Multiplatform
    - Kotlin/JVM, Kotlin/JS, Kotlin/Nativeから必要なtargetを指定し、共通のKotlin
    のコードから各プラットフォーム向けにコンパイル(トランスパイル)する
    - expect / actual という仕組みがあり、型定義だけを共通のcommon srcに置きプ
    ラットフォーム依存のコードはプラットフォームごとのsrcに書くことで、プラットフォー
    ム依存のコードも共通の処理に組み込むことができる
    - 特定のプラットフォームに依存しない共通のビジネスロジックなどを書くのに
    commonモジュールをKotlin Multiplatformで作ると便利

    View full-size slide

  14. ここからは実例を紹介します

    View full-size slide

  15. 自作ブログ
    JSファイルがクソデカ(約3MB)なのでWi-Fi環境でのアクセスをオススメします😇
    https://blog.yt8492.com

    View full-size slide

  16. プロジェクトの構成
    - 4つのGradleのモジュールから構成されている
    - common
    - JVM, JS, MacOSをtargetにしたKotlin Multiplatformモジュール
    - ユーザーや記事などのモデルの型定義
    - このモジュールをserver, webfront, cliの3つのモジュールから読みこむ
    - server
    - Kotlin/JVMのモジュール
    - Ktor
    - webfront
    - targetをbrowserにしたKotlin/JSのモジュール
    - kotlin-react, Ktor Client
    - cli
    - targetをMacOSにしたKotlin Multiplatformのモジュール
    - Kotlin/Native, kotlinx-cli, platform libraries, Ktor Client

    View full-size slide

  17. プロジェクトの構成
    server
    Kotlin/MPP
    common
    - モデルの型定義
    - JSONの型定義
    webfront cli
    POSIX

    View full-size slide

  18. common
    build.gradle.ktsのkotlinセクション

    View full-size slide

  19. common
    各プラットフォームから呼び出す共通の型定義

    View full-size slide

  20. webfront
    - kotlin-wrappersというリポジトリにある各種ラッパーライブラリを使用
    - kotlin-react
    - kotlin-react-dom
    - kotlin-react-router-dom
    - kotlin-styled
    - kotlin-css
    - ラッパーが提供されていないライブラリも使いたい
    - 自分で書く😇
    - react-markdown
    - remark-gfm
    - react-syntax-highlighter

    View full-size slide

  21. JSライブラリのラッパーの作り方
    1. ライブラリをimplementationする
    react-markdownの場合
    implementation(npm("react-markdown", "5.0.3"))

    View full-size slide

  22. JSライブラリのラッパーの作り方
    2. ライブラリのコードを読む(TSの型定義があると楽)

    View full-size slide

  23. JSライブラリのラッパーの作り方
    3. 読んだコードをもとにラッパーを書く
    関数名などはJS側の定義に合わせる必要がある(変える場合は@JsNameで元の名前
    を渡す)

    View full-size slide

  24. ReactをKotlinで書く
    - JSXではなくKotlinのDSLで書く

    View full-size slide

  25. server
    - 普通のKotlin/JVMとKtorでサーバーを書いてる
    - build.gradle.ktsでビルド時に生成したjsファイルを成果物に含めるスクリプトを書
    いてる

    View full-size slide

  26. OGP対応
    - ページのHTMLのヘッダーにOGPの情報を含める必要がある
    - SPAで記事ごとにOGP出すのしんどい😇
    - NginxなどでHTMLファイルを配信するやり方ではしんどそう 🤔
    - Ktorでkotlinx.htmlを使い、HTMLだけサーバー側で動的に生成することに
    - OGPの生成はJavaのAWTで動的に頑張ってます😇
    - もっといい方法あったら教えて下さい……

    View full-size slide

  27. cli
    - macosX64をtargetにしたKotlin/Nativeのプロジェクト
    - 管理ユーザーログイン、記事の投稿・編集・削除の機能を実装
    - ビルドすると実行可能なバイナリになる

    View full-size slide

  28. 各種コマンドの実装
    - kotlinx-cliを使用
    - コマンドライン引数などを簡単に扱うことができる
    - これのSubcommandを継承したクラスを実装し、 main関数から読み込んで使う

    View full-size slide

  29. ファイル操作など
    - platform librariesを使う(実質C言語😇)
    - file pointerなどをゴリゴリに使うので便利関数で隠蔽するのがおすすめです

    View full-size slide

  30. マルチプラットフォームはいいけど、
    クロスプラットフォームはできないの?

    View full-size slide

  31. (がんばれば)できます💪

    View full-size slide

  32. Jetpack Compose
    - Android のネイティブ UI を構築するための最新のツールキット(公式より)
    https://developer.android.com/jetpack/compose
    - Kotlinと宣言的UIでAndroidのネイティブ開発ができる
    - stableリリースされた
    - 最近Android界隈で流行っているので調べると記事が結構出てくると思います

    View full-size slide

  33. Compose for 〇〇 の登場
    - 去年11月、Compose for Desktopが登場
    - Kotlin/JVMで動く
    - Swing上でSkiaを動かしている
    - 今年5月、Compose for Webの登場
    - Kotlin/JSで動く
    - DOMベース
    - Android, Desktop, WebでUIのコード共有が可能に(ココ重要)

    View full-size slide

  34. UIコード共有の例

    View full-size slide

  35. UIコード共有の例
    common
    android desktop web

    View full-size slide

  36. 問題点
    - ルーティングをどうするか
    - Androidにはnavigation-composeがある
    - AndroidのNavigationの仕組みに依存している
    - DesktopとWebどうする🤔
    - ルーターがないとキツイ
    - 既存のライブラリのラッパーを書く?
    - 自分で実装するのはしんどい

    View full-size slide

  37. Decompose
    - Kotlin/MPP向けの、プラットフォームに依存しないlifecycle-awareなビジネスロ
    ジックコンポーネント+ルーターを提供するライブラリ
    - https://github.com/arkivanov/Decompose
    - 豊富な対応target
    - Android
    - JVM
    - iosX64, iosArm64
    - macosX64
    - tvosX64, tvosArm64
    - watchosArm32, watchosArm64, watchosX86, watchosX64
    - JavaScript

    View full-size slide

  38. Decomposeでルーティングを実装する
    - ルーティングを表す型を定義する
    - 直和型を使うと便利
    - ルーティングに引数をもたせたい場合はここで定義する
    - ルーティングごとのビジネスロジックコンポーネントを定義する
    - ViewModelみたいな役割にするとよさそう?
    - ルートのコンポーネントでルーティングの型からコンポーネントへのマッピングをす

    - ルートのComposable関数でコンポーネントからページごとのComposable関数
    へのマッピングをする

    View full-size slide

  39. TODOアプリを実装してみよう

    View full-size slide

  40. ルーティングを表す型を定義する

    View full-size slide

  41. ルーティングごとのコンポーネントを定義する

    View full-size slide

  42. ルーティングの型からコンポーネントへマッピングをする

    View full-size slide

  43. コンポーネントからComposable関数へのマッピング

    View full-size slide

  44. 各プラットフォームから参照する

    View full-size slide

  45. サンプルリポジトリ
    - https://github.com/yt8492/todoCompose
    - 公式のサンプルよりシンプルに作っています
    - もろもろ雑だけどゆるして……

    View full-size slide

  46. まとめ
    - KotlinはAndroidアプリ開発のためだけの言語じゃない
    - サーバーもWebフロントもCLIもできる
    - 超頑張ればクロスプラットフォームなアプリ開発もできる

    View full-size slide

  47. みなさんもKotlinを始めたくなりましたよね?^^

    View full-size slide