Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2021年のKotlin入門
Search
Yuta Tomiyama
August 22, 2021
Programming
0
210
2021年のKotlin入門
2021/08/22 Zli x SGG 学生合同LT大会 にて発表
Yuta Tomiyama
August 22, 2021
Tweet
Share
More Decks by Yuta Tomiyama
See All by Yuta Tomiyama
なんでもやってみる勇気
yt8492
0
40
Android Autoが思ったよりしんどい話
yt8492
0
150
apollo-kotlinにcontributeした話
yt8492
0
74
DMM TVのSDカードダウンロード機能を実装した話
yt8492
1
710
今だからこそ知りたいKotlin Multiplatform
yt8492
0
240
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
1.2k
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
170
Compose for Webを始めよう
yt8492
0
360
Compose Multiplatform 1.0.0
yt8492
0
140
Other Decks in Programming
See All in Programming
Macとオーディオ再生 2024/11/02
yusukeito
0
370
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
230
EMになってからチームの成果を最大化するために取り組んだこと/ Maximize team performance as EM
nashiusagi
0
100
Contemporary Test Cases
maaretp
0
140
イベント駆動で成長して委員会
happymana
1
340
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
初めてDefinitelyTypedにPRを出した話
syumai
0
420
ヤプリ新卒SREの オンボーディング
masaki12
0
130
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
990
Jakarta EE meets AI
ivargrimstad
0
620
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
260
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Six Lessons from altMBA
skipperchong
27
3.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
The Invisible Side of Design
smashingmag
298
50k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
The Pragmatic Product Professional
lauravandoore
31
6.3k
GraphQLとの向き合い方2022年版
quramy
43
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
A Philosophy of Restraint
colly
203
16k
Transcript
2021年のKotlin入門 Zli x SGG 学生合同LT大会
自己紹介 HN: マヤミト ID: yt8492 会津大学 学部4年 去年までZliの代表やってました GitHub: https://github.com/yt8492
趣味: Kotlin, Twitter, ウマ娘 今月既にウマ娘に8万を溶かしています Twitter: yt8492
今回はKotlin布教回です
Kotlinを知ってる人 何ができる言語か知っていますか?
今回のLT(セッション?)では2021年現在Kotlin でどんなことができるか紹介したいと 思います
思いついたやつとりあえず列挙してみた - Androidアプリ - iOSアプリ - デスクトップアプリ - サーバーサイド -
Webフロント - CLIツール - ゲーム
Androidアプリ開発 - おそらくKotlinと聞いて大多数の人が思い浮かべるのがこれ - 2019年、GoogleがKotlinをAndroidアプリ開発の推奨言語にすると発表 - 今新規アプリをJavaで書いてる企業はヤバい - 従来のJavaで書かれたAndroid SDKやライブラリをKotlinからそのまま使えるだ
けでなく、KotlinのコードもJava側から簡単に呼び出せる - Jetpack Composeでモダンな宣言的UIの手法で開発ができるように(後述)
サーバーサイド開発 - Spring BootやSparkなどのJavaのフレームワークがほぼそのまま使える - KtorというKotlin製のフレームワークもある - 最近だとサーバーサイドにKotlinを採用している企業も増えてきている
なぜKotlinはJavaと相互運用が可能なのか? - KotlinのコードがコンパイルされるとJavaのバイトコードになる - IntelliJ IDEA / Android Studio の機能でJavaにデコンパイルすることも可能
- 最終的なランタイムはJVM - サーバーもJARファイルにしてしまえば Kotlinの環境がなくてもJavaのランタイムさえあれば動かせ る - Androidも最終的にはapkになる
Kotlinの特殊なランタイムがない →Javaのバイトコード以外も吐き出せるようにすれ ば任意のものが作れるのでは?
正解
Kotlin/JS - KotlinのコードをJavaScriptにトランスパイルする技術 - targetにbrowserとnodejsがある - Gradle経由でWebpackを使い、JavaScriptのファイルを生成する - Gradle経由でnpmを使うことができ、JavaScriptのライブラリなどをKotlin側から 使うことも可能
- kotlin-react というKotlin/JS向けのReactラッパーライブラリがJetBrainsの GitHubのリポジトリでOSSとして開発されている
Kotlin/Native - Kotlin/Nativeにはいくつか種類(target)がある - iOS - Windows - MacOS -
Linux - wasm - targetによっても何を生成するかが変わる - iOSはObjective-Cとxcodeproj - Windows, MacOS, Linuxでは実行可能なバイナリ - wasmはwasm
Kotlin Multiplatform - Kotlin/JVM, Kotlin/JS, Kotlin/Nativeから必要なtargetを指定し、共通のKotlin のコードから各プラットフォーム向けにコンパイル(トランスパイル)する - expect /
actual という仕組みがあり、型定義だけを共通のcommon srcに置きプ ラットフォーム依存のコードはプラットフォームごとのsrcに書くことで、プラットフォー ム依存のコードも共通の処理に組み込むことができる - 特定のプラットフォームに依存しない共通のビジネスロジックなどを書くのに commonモジュールをKotlin Multiplatformで作ると便利
ここからは実例を紹介します
自作ブログ JSファイルがクソデカ(約3MB)なのでWi-Fi環境でのアクセスをオススメします😇 https://blog.yt8492.com
プロジェクトの構成 - 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
プロジェクトの構成 server Kotlin/MPP common - モデルの型定義 - JSONの型定義 webfront cli
POSIX
common build.gradle.ktsのkotlinセクション
common 各プラットフォームから呼び出す共通の型定義
webfront - kotlin-wrappersというリポジトリにある各種ラッパーライブラリを使用 - kotlin-react - kotlin-react-dom - kotlin-react-router-dom -
kotlin-styled - kotlin-css - ラッパーが提供されていないライブラリも使いたい - 自分で書く😇 - react-markdown - remark-gfm - react-syntax-highlighter
JSライブラリのラッパーの作り方 1. ライブラリをimplementationする react-markdownの場合 implementation(npm("react-markdown", "5.0.3"))
JSライブラリのラッパーの作り方 2. ライブラリのコードを読む(TSの型定義があると楽)
JSライブラリのラッパーの作り方 3. 読んだコードをもとにラッパーを書く 関数名などはJS側の定義に合わせる必要がある(変える場合は@JsNameで元の名前 を渡す)
ReactをKotlinで書く - JSXではなくKotlinのDSLで書く
server - 普通のKotlin/JVMとKtorでサーバーを書いてる - build.gradle.ktsでビルド時に生成したjsファイルを成果物に含めるスクリプトを書 いてる
OGP対応 - ページのHTMLのヘッダーにOGPの情報を含める必要がある - SPAで記事ごとにOGP出すのしんどい😇 - NginxなどでHTMLファイルを配信するやり方ではしんどそう 🤔 - Ktorでkotlinx.htmlを使い、HTMLだけサーバー側で動的に生成することに
- OGPの生成はJavaのAWTで動的に頑張ってます😇 - もっといい方法あったら教えて下さい……
OGP対応
cli - macosX64をtargetにしたKotlin/Nativeのプロジェクト - 管理ユーザーログイン、記事の投稿・編集・削除の機能を実装 - ビルドすると実行可能なバイナリになる
各種コマンドの実装 - kotlinx-cliを使用 - コマンドライン引数などを簡単に扱うことができる - これのSubcommandを継承したクラスを実装し、 main関数から読み込んで使う
ファイル操作など - platform librariesを使う(実質C言語😇) - file pointerなどをゴリゴリに使うので便利関数で隠蔽するのがおすすめです
マルチプラットフォームはいいけど、 クロスプラットフォームはできないの?
(がんばれば)できます💪
Jetpack Compose - Android のネイティブ UI を構築するための最新のツールキット(公式より) https://developer.android.com/jetpack/compose - Kotlinと宣言的UIでAndroidのネイティブ開発ができる
- stableリリースされた - 最近Android界隈で流行っているので調べると記事が結構出てくると思います
Compose for 〇〇 の登場 - 去年11月、Compose for Desktopが登場 - Kotlin/JVMで動く
- Swing上でSkiaを動かしている - 今年5月、Compose for Webの登場 - Kotlin/JSで動く - DOMベース - Android, Desktop, WebでUIのコード共有が可能に(ココ重要)
UIコード共有の例
UIコード共有の例 common android desktop web
問題点 - ルーティングをどうするか - Androidにはnavigation-composeがある - AndroidのNavigationの仕組みに依存している - DesktopとWebどうする🤔 -
ルーターがないとキツイ - 既存のライブラリのラッパーを書く? - 自分で実装するのはしんどい
Decompose - Kotlin/MPP向けの、プラットフォームに依存しないlifecycle-awareなビジネスロ ジックコンポーネント+ルーターを提供するライブラリ - https://github.com/arkivanov/Decompose - 豊富な対応target - Android
- JVM - iosX64, iosArm64 - macosX64 - tvosX64, tvosArm64 - watchosArm32, watchosArm64, watchosX86, watchosX64 - JavaScript
Decomposeでルーティングを実装する - ルーティングを表す型を定義する - 直和型を使うと便利 - ルーティングに引数をもたせたい場合はここで定義する - ルーティングごとのビジネスロジックコンポーネントを定義する -
ViewModelみたいな役割にするとよさそう? - ルートのコンポーネントでルーティングの型からコンポーネントへのマッピングをす る - ルートのComposable関数でコンポーネントからページごとのComposable関数 へのマッピングをする
TODOアプリを実装してみよう
ルーティングを表す型を定義する
ルーティングごとのコンポーネントを定義する
ルーティングの型からコンポーネントへマッピングをする
コンポーネントからComposable関数へのマッピング
各プラットフォームから参照する
サンプルリポジトリ - https://github.com/yt8492/todoCompose - 公式のサンプルよりシンプルに作っています - もろもろ雑だけどゆるして……
まとめ - KotlinはAndroidアプリ開発のためだけの言語じゃない - サーバーもWebフロントもCLIもできる - 超頑張ればクロスプラットフォームなアプリ開発もできる
みなさんもKotlinを始めたくなりましたよね?^^