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
fukuoka_kt_1
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
gupuru
July 05, 2017
Technology
100
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
fukuoka_kt_1
https://cdg.connpass.com/event/60570/
gupuru
July 05, 2017
More Decks by gupuru
See All by gupuru
ng-fukuoka-meetup-1
gupuru
0
420
AngularとAzureのCustom Vision Serviceを使って 画像認識サイトを作ってみた
gupuru
0
670
紙について少し詳しくなる10分間
gupuru
0
410
make bot, fun bot
gupuru
0
340
firebase勉強会資料
gupuru
3
790
iOS and Android SVG
gupuru
0
380
Firebaseについて
gupuru
1
230
BLEを使って、すれ違い通信をやってみるよー
gupuru
0
2.3k
HiyokoDeveloperMeeting
gupuru
1
150
Other Decks in Technology
See All in Technology
AI、CDK と協働する Full TypeScript アプリケーション開発 / Full TypeScript Application with AI and CDK
geekplus_tech
2
200
SRE Lounge Hiroshimaへの招待
grimoh
0
670
美しいコードを書くためにF#を学んでみた話
yud0uhu
1
430
貴方はどのエンジニアリングを磨くのか
hatyibei
0
130
誤解だらけの開発生産性 / Myths and Misconceptions about Developer Productivity
i35_267
2
610
Claude Codeとハーネスについて考えてみる
oikon48
19
9.5k
ローカルLLMとLINE Botの組み合わせ その3 / LINE DC Generative AI Meetup #8
you
PRO
0
130
Amazon EVS で VCF 9.0 / 9.1 のサポート開始まとめ
mtoyoda
0
300
Empower GenAI with Agile - あなたのアジャイルが生成AIのバフになる仕組み
hageyahhoo
1
190
Gen3R: 3D Scene Generation Meets Feed-Forward Reconstruction
spatial_ai_network
0
130
SoccerMaster: A Vision Foundation Model for Soccer Understanding
kzykmyzw
0
110
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
15
110k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
187
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
56k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Documentation Writing (for coders)
carmenintech
77
5.4k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
190
エンジニアに許された特別な時間の終わり
watany
107
250k
Game over? The fight for quality and originality in the time of robots
wayneb77
1
220
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
67
56k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
1.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
408
67k
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
4.3k
Transcript
WebͰKotlinʂ Kotlin to JavaScript
About me ৽ݟ ߊฏ ϑϩϯτΤϯυͱػցֶशͷΤϯδχΞʹͳΖ͏ͱؤு͍ͬͯ ·͢(ʆɾωɾ´) • Twitter: @gupuru •
GitHub: gupuru
None
Kotlin 1.1ͰɺJavaScriptαϙʔτ͞Ε·ͨ͠ʂ JavaScript͕kotlinͰॻ͚·͢(ʆɾТɾ´) https://blog.jetbrains.com/jp/2017/03/01/739
ͪͳΈʹɺ͜Εࢼͨ͜͠ͱ͕͋Δਓɺ ڍखϊʢসʣ
͡ΊʹಋೖͩΑ(ʆɾТɾ´)
͜ͷ4ͭͷํ๏͕͋ΔΑ(ʆɾТɾ´) • Gradle • Maven • IntelliJ IDEA • Command
Line
IntelliJ IDEA
࠷ॳɺ͜Μͳײ͡ͷϓϩδΣΫτߏ͓ͩ(ʆɾТɾ´)
Build͢Δͱɺout͕Ͱ͖Δ͓(ʆɾТɾ´)
Buildͯ͠ɺͰ͖ͨϑΝΠϧΛHTMLଆͰݺΜͰ͋͛Δͱ͑Δ͓(ʆɾТɾ´) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ΘΜ͜</title> </head>
<body> <script type="text/javascript" src="out/production/wanko/lib/kotlin.js"></script> <script type="text/javascript" src="out/production/wanko/wanko.js"></script> </body> </html>
Γͷํ๏ɺ͜͜ݟͯ(ʆɾТɾ´) https://kotlinlang.org/docs/tutorials/javascript/kotlin-to-javascript/kotlin-to-javascript.html
࣮ࡍʹॻ͍ͯΈΔΑ(ʆɾТɾ´)
͜Μͳײ͡ʹॻ͘Α(ʆɾТɾ´) fun main(args: Array<String>) { val message = "͍͵ɺ͔Θ͍͍" println(message)
}
HTML͜Μͳײ͡(ʆɾТɾ´) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>wanko</title> </head>
<body> <script type="text/javascript" src="out/production/inukawaii/lib/kotlin.js"></script> <script type="text/javascript" src="out/production/inukawaii/inukawaii.js"></script> </body> </html>
͜Μͳײ͡ʹม͞Ε͍ͯΔΑ(ʆɾТɾ´) if (typeof kotlin === 'undefined') { throw new Error("Error
loading module 'kotlinJS'. Its dependency 'kotlin' was not found. Please, check whether 'kotlin' is loaded prior to 'kotlinJS'."); } var kotlinJS = function (_, Kotlin) { 'use strict'; var println = Kotlin.kotlin.io.println_s8jyv4$; function main(args) { var message = '\u3044\u306C\u3001\u304B\u308F\u3044\u3044'; println(message); } _.main_kand9s$ = main; Kotlin.defineModule('kotlinJS', _); main([]); return _; }(typeof kotlinJS === 'undefined' ? {} : kotlinJS, kotlin);
গ͚ͩ͠ಈ͖͚ͭͯΈΔ͓(ʆɾТɾ´)
kotlin͓ͩ(ʆɾТɾ´) fun main(args: Array<String>) { val inputText: HTMLInputElement = document.getElementById("inputText")
as HTMLInputElement val button: HTMLButtonElement = document.getElementById("button") as HTMLButtonElement button.onclick = { window.alert(inputText.value) } }
HTML͓ͩ(ʆɾТɾ´) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ΘΜΘΜ</title> </head>
<body> <input id="inputText" type="text" value="" title="ͳʹ͔͍Εͨ·͑"> <button id="button">͋Βʔͱͩ͢Α</button> <script type="text/javascript" src="out/production/kotlinJS/lib/kotlin.js"></script> <script type="text/javascript" src="out/production/kotlinJS/kotlinJS.js"></script> </body> </html>
͜Μͳײ͡ม͞Ε͍ͯΔΑ(ʆɾТɾ´) if (typeof kotlin === 'undefined') { throw new Error("Error
loading module 'kotlinJS'. Its dependency 'kotlin' was not found. Please, check whether 'kotlin' is loaded prior to 'kotlinJS'."); } var kotlinJS = function (_, Kotlin) { 'use strict'; function main$lambda(closure$inputText) { return function (it) { window.alert(closure$inputText.value); }; } function main(args) { var tmp$, tmp$_0; var inputText = Kotlin.isType(tmp$ = document.getElementById('inputText'), HTMLInputElement) ? tmp$ : Kotlin.throwCCE(); var button = Kotlin.isType(tmp$_0 = document.getElementById('button'), HTMLButtonElement) ? tmp$_0 : Kotlin.throwCCE(); button.onclick = main$lambda(inputText); } _.main_kand9s$ = main; main([]); Kotlin.defineModule('kotlinJS', _); return _; }(typeof kotlinJS === 'undefined' ? {} : kotlinJS, kotlin);
͞Βʹಈ͖͚ͭͯΈΔΑ(ʆɾТɾ´)
NodeͷαʔόΛͨͯͯΈΔ͓(ʆɾТɾ´)
package.json͓ͩ(ʆɾТɾ´) { "name": "wankoserver", "version": "1.0.0", "description": "", "main": "index.js",
"scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "gupuru", "license": "MIT", "dependencies": { "express": "^4.15.3", "kotlin": "^1.1.0" } }
gradle͓ͩ(ʆɾТɾ´) group 'wanko-express' version '1.0' buildscript { ext.kotlin_version = '1.1.1'
repositories { mavenCentral() } dependencies { classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" } } apply plugin: 'kotlin2js' repositories { mavenCentral() } dependencies { compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version" } compileKotlin2Js.kotlinOptions { moduleKind = "commonjs" outputFile = "node/index.js" }
kotlin͓ͩ(ʆɾТɾ´) external fun require(module:String):dynamic fun main(args: Array<String>) { println("wanwan start")
val express = require("express") val app = express() app.get("/", { req, res -> res.type("text/plain") res.send("wanko kawaii") }) app.listen(3000, { println("port: 3000") }) }
͜Μͳײ͡ม͞Ε͍ͯΔ͓(ʆɾТɾ´) (function (_, Kotlin) { 'use strict'; var println =
Kotlin.kotlin.io.println_s8jyv4$; function main$lambda(req, res) { res.type('text/plain'); return res.send('wanko kawaii'); } function main$lambda_0() { println('port: 3000'); } function main(args) { println('wanwan start'); var express = require('express'); var app = express(); app.get('/', main$lambda); app.listen(3000, main$lambda_0); } _.main_kand9s$ = main; Kotlin.defineModule('index', _); main([]); return _; }(module.exports, require('kotlin')));
ৄ͘͠ɺ͜͜Έͯ(ʆɾТɾ´) • https://github.com/miquelbeltran/kotlin-node.js
·ͱΊ
Kotlinָ͍͠(ʆŋТŋ´)
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ