Slide 1

Slide 1 text

WebͰKotlinʂ Kotlin to JavaScript

Slide 2

Slide 2 text

About me ৽ݟ ߊฏ ϑϩϯτΤϯυͱػցֶशͷΤϯδχΞʹͳΖ͏ͱؤு͍ͬͯ ·͢(ʆɾωɾ´) • Twitter: @gupuru • GitHub: gupuru

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Kotlin 1.1ͰɺJavaScriptαϙʔτ͞Ε·ͨ͠ʂ JavaScript͕kotlinͰॻ͚·͢(ʆɾТɾ´) https://blog.jetbrains.com/jp/2017/03/01/739

Slide 5

Slide 5 text

ͪͳΈʹɺ͜Εࢼͨ͜͠ͱ͕͋Δਓɺ ڍखϊʢসʣ

Slide 6

Slide 6 text

͸͡ΊʹಋೖͩΑ(ʆɾТɾ´)

Slide 7

Slide 7 text

͜ͷ4ͭͷํ๏͕͋ΔΑ(ʆɾТɾ´) • Gradle • Maven • IntelliJ IDEA • Command Line

Slide 8

Slide 8 text

IntelliJ IDEA

Slide 9

Slide 9 text

࠷ॳ͸ɺ͜Μͳײ͡ͷϓϩδΣΫτߏ੒͓ͩ(ʆɾТɾ´)

Slide 10

Slide 10 text

Build͢Δͱɺout͕Ͱ͖Δ͓(ʆɾТɾ´)

Slide 11

Slide 11 text

Buildͯ͠ɺͰ͖ͨϑΝΠϧΛHTMLଆͰݺΜͰ͋͛Δͱ࢖͑Δ͓(ʆɾТɾ´) ΘΜ͜

Slide 12

Slide 12 text

࢒Γͷํ๏͸ɺ͜͜ݟͯ(ʆɾТɾ´) https://kotlinlang.org/docs/tutorials/javascript/kotlin-to-javascript/kotlin-to-javascript.html

Slide 13

Slide 13 text

࣮ࡍʹॻ͍ͯΈΔΑ(ʆɾТɾ´)

Slide 14

Slide 14 text

͜Μͳײ͡ʹॻ͘Α(ʆɾТɾ´) fun main(args: Array) { val message = "͍͵ɺ͔Θ͍͍" println(message) }

Slide 15

Slide 15 text

HTML͸͜Μͳײ͡(ʆɾТɾ´) wanko

Slide 16

Slide 16 text

͜Μͳײ͡ʹม׵͞Ε͍ͯΔΑ(ʆɾТɾ´) 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);

Slide 17

Slide 17 text

গ͚ͩ͠ಈ͖͚ͭͯΈΔ͓(ʆɾТɾ´)

Slide 18

Slide 18 text

kotlin͓ͩ(ʆɾТɾ´) fun main(args: Array) { val inputText: HTMLInputElement = document.getElementById("inputText") as HTMLInputElement val button: HTMLButtonElement = document.getElementById("button") as HTMLButtonElement button.onclick = { window.alert(inputText.value) } }

Slide 19

Slide 19 text

HTML͓ͩ(ʆɾТɾ´) ΘΜΘΜ ͋Βʔͱͩ͢Α

Slide 20

Slide 20 text

͜Μͳײ͡ม׵͞Ε͍ͯΔΑ(ʆɾТɾ´) 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);

Slide 21

Slide 21 text

͞Βʹಈ͖͚ͭͯΈΔΑ(ʆɾТɾ´)

Slide 22

Slide 22 text

NodeͷαʔόΛͨͯͯΈΔ͓(ʆɾТɾ´)

Slide 23

Slide 23 text

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" } }

Slide 24

Slide 24 text

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" }

Slide 25

Slide 25 text

kotlin͓ͩ(ʆɾТɾ´) external fun require(module:String):dynamic fun main(args: Array) { 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") }) }

Slide 26

Slide 26 text

͜Μͳײ͡ม׵͞Ε͍ͯΔ͓(ʆɾТɾ´) (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')));

Slide 27

Slide 27 text

ৄ͘͠͸ɺ͜͜Έͯ(ʆɾТɾ´) • https://github.com/miquelbeltran/kotlin-node.js

Slide 28

Slide 28 text

·ͱΊ

Slide 29

Slide 29 text

Kotlinָ͍͠(ʆŋТŋ´)

Slide 30

Slide 30 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ