Kotlinではじめる Webアプリケーション入門

Copyright (C) 2018 Toranoana Inc. All Rights Reserved.
Kotlinではじめる
Webアプリケーション入門
虎の⽳開発室
唐崎蓉⼦
1

タイムテーブル
2
時刻内容
19:30 開会案内・会場説明等
19:35 Kotlin について
20:00 開発環境セットアップ & 休憩
20:30 フレームワークとライブラリについて＋ハンズオン
20:50 演習
21:30 終了

自己紹介
‣ 唐崎蓉⼦ ( Yoko Karasaki )
‣ 株式会社虎の⽳開発室
‣ PHP / Ionic (Angular) / Kotlin / (Ruby)
‣ 今期のアニメ
‣ ダリフラ / ゆるキャン△ / 宇宙よりも遠い場所
4

対象
‣ Kotlinで何かWebサービスを作ってみたい
‣ Java⾔語開発経験者で、Kotlin⾔語も興味がある
‣ アニメ・漫画などオタク向けのWebサービスを 
作ってみたい
5

勉強会のゴール
‣ Kotlin の特徴を理解する
‣ Kotlin で簡単な Web アプリケーションが作れる
6

進め方
7
‣ Kotlin の簡単な説明とハンズオン（＋演習）
‣ 分からない部分は随時質問を受け付けます！
‣ 周りのスタッフに聞いてもOK！ 
（社員証をつけています）

Kotlin とは？
‣ Java VM ⾔語
‣ 100% interoperable with Java 
(Javaと完全互換性があり、相互運⽤が可能)
‣ 型推論付き静的型付け
‣ セミコロンレス
9

文法
10
class MyClass : BaseClass {
fun main(args: Array<String>) : Int {
var len = 0
for (arg in args) {
len = arg.length
}
return len
}
}
public class MyClass extends BaseClass {
public int main(ArrayList<String> args) {
int len = 0;
for (String arg : args) {
len = arg.length();
}
return len;
}
}
‣ Kotlin
‣ Java

変数の定義（val / var）
11
fun main() {
val readOnly: String = "Read Only"
var writable: String = "Writable"
readOnly = "Can't change" // NG
writable = "Changed!" // OK
}
val 読み込み専⽤・変更不可
var 読み込み・書き換え可能

Nullable/Null許容 (Optional)
12
fun getLength(str: String?): Int? {
return str?.length
}
‣ 型に ? をつけると Nullable（Null許容）になる
‣ ?. は safe call operator
‣ str が nullでない場合のみ実⾏される
※ Java も標準ライブラリには Optional がある

型
13
‣ Double
‣ Float
‣ Long
‣ Int
‣ Short
‣ Byte
‣ Char
‣ Boolean
‣ String
‣ Array

特殊な型 Any
14
‣ 全ての型を代⼊可能
‣ null と Optional 型（Null許容）は⼊れられない
fun main() {
val optional: String? = "optional"
var value: Any
value = 1 // OK
value = "hoge" // OK
value = optional // NG
value = null // NG
}

特殊な型 Unit
15
‣ Java で⾔うところの void
‣ 関数返り値の型を省略した場合は Unit になる
fun main(value: String?) {
println(value)
}
// ↑↓ 同じ
fun main(value: String?): Unit {
println(value)
}

特殊な型 Nothing
16
‣ 値が存在しないことを表す
‣ 他の全ての型に代⼊可能な型
‣ 関数の返り値に指定すると、⼊ったら抜けない 
関数になる
fun fail(message: String): Nothing {
logger.error("Error message : $message")
throw IllegalStateException(message)
}

17
fun getName(user: User) {
val name = user.name
?: throw Exception("User is required")
}
‣ エルビス演算⼦
‣ ?: 前が null でない時は 
?: の前を評価
‣ null の時は ?: の後 
を評価

18
?: throw Exception("User is required")
}
fun fail(message: String): Nothing {
logger.error("Error message : $message")
throw IllegalStateException(message)
}
?: fail("User is required")
}

Data Class
// Java
public class User {
private String name;
private int age;
}
// Kotlin
data class User(
val name: String,
val age: Int
)
19
‣ データを保持するためのクラス

Data Class
public class User {
private String name;
private int age;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
class MyClass {
public void main(args:Array<String>) {
User user = new User();
user.setName("My Name");
user.setAge(10);
System.out.println(user.getName());
}
}
20
‣ Java の場合

Data Class
data class User(
val name: String,
val age: Int
)
class MyClass {
fun main(args: Array<String>) {
val user = User("My Name", 20)
println(user.name)
}
}
21
‣ Kotlin の場合

参考リンク・ドキュメント
22
1. Kotlin 公式ドキュメント
‣ http://kotlinlang.org/docs/reference/
2. Kotlin ドキュメント⽇本語版（⾮公式）
‣ https://dogwood008.github.io/kotlin-web-site-ja/docs/reference/
3. Kotlin勉強会（第1回）の資料
‣ https://www.slideshare.net/toranoana-lab/kotlin-88458802
本⽇配った補⾜資料も是⾮ご活⽤ください！

開発環境の 
セットアップ
23
https://toranoana.github.io/kotlin-webapp/

今日作成するもの
‣ アニメ情報取得 API を使⽤して、 
今期のアニメ⼀覧・詳細を表⽰
‣ http://api.moemoe.tokyo/anime/v1/master/2018/1?ogp=1
24

手順
1. IntelliJ Idea のインストール
2. JDK のパスを確認 / gradle.properties 設定
3. プロジェクトのインポート
4. ビルド / 動作確認
25
※ 動作確認後に休憩をはさみます

ドキュメント
26
1.リポジトリ
‣ https://github.com/toranoana/kotlin-webapp.git
2. ハンズオン⽤ドキュメント
‣ https://toranoana.github.io/kotlin-webapp/

IntelliJ IDEA / JDK
‣ 以下のインストール
27
IntelliJ IDEA https://www.jetbrains.com/idea/
Java SE 
Development Kit  
（JDK）
http://www.oracle.com/technetwork/
java/javase/downloads/jdk8-
downloads-2133151.html

プロジェクトの準備
$ git clone https://github.com/toranoana/kotlin-webapp.git
28
‣ Git のリポジトリを clone
‣ または zip をダウンロードして解凍

JDK のパスを確認（Mac）
$ /usr/libexec/java_home -V
Matching Java Virtual Machines (1):
9.0.4, x86_64:"Java SE 9.0.4" /Library/
Java/JavaVirtualMachines/jdk-9.0.4.jdk/
Contents/Home
/Library/Java/JavaVirtualMachines/
jdk-9.0.4.jdk/Contents/Home
29
‣ Mac の場合

JDK のパスを確認（Win）
30
‣ 多くの場合は以下にインストールされている 
（ jdk1.8.0 はバージョンにより変わる）
‣ C:Program FilesJavajdk1.8.0binjavac
‣ C:Program Files(x_86)Javajdk1.8.0binjavac

プロジェクトの準備
31
1. IntelliJ を起動
2. [ Import Project ] から 
./kotlin-webapp/build.gradle を選択

JDKのパス設定
32
※ ⾃分の環境の JDK を選択する 
（”Use Project SDK” の⽅ではありません）

Gradle ツールウィンドウ
33
‣ Gradleのツールウィンドウを開く
‣ View -> Tool Windows -> Gradle

ビルド
34
‣ Gradleツールウィンドウ内の 
kotlin-webapp 
-> Tasks 
-> application 
-> bootRun

ビルド
‣ http://localhost:8080/
35

ビルド
1. コード変更後、変更を反映するには再度 
bootRun を実⾏
‣ kotlin-webapp 
-> Tasks 
-> application 
-> bootRun
2. http://localhost:8080/  
をリロード
36

フレームワーク / ライブラリ
について
37

フレームワーク
38
要素
フレームワーク名
ライブラリ名
説明
Web
Framework
Spring Boot 2.0
Webアプリケーションを
開発する際のフレームワーク
テンプレート 
エンジン
Thymeleaf
純粋な HTML として 
テンプレートを記述できる
HTTP通信 Fuel
Kotlin で書かれた
HTTP 通信ライブラリ
JSONパース Gson
JSONデータと
Java オブジェクトを相互に変換

アニメ情報取得 API
39
{
"title_short2": "",
"twitter_account": "milkyholmes",
"public_url": "https://sp.bushiroad.com/special_tv/",
"title_short1": "ミルキィホームズ",
"sex": 0,
"ogp": {
"og_title": "",
"og_type": "",
"og_description": "",
"og_url": "",
"og_image": "",
"og_site_name": ""
},
"twitter_hash_tag": "milkyholmes",
"id": 673,
"sequel": 5,
"created_at": "2018-01-07 20:29:38.0",
"city_name": "",
"cours_id": 17,
"title": "探偵オペラミルキィホームズアルセーヌ華麗なる欲望",
"city_code": 0,
"title_short3": "",
‣ http://api.moemoe.tokyo/anime/v1/master/2018/1?ogp=1

演習詳細ページの作成・遷移
‣ http://localhost:8080/detail/?id=673  
42
NO IMAGE

おさらい
44
‣ Kotlin の基本的な⽂法・特徴
‣ SpringBoot + Thymeleaf を使って Kotlin で 
簡単な Web アプリケーションの作成

参考リンク・ドキュメント
45
‣ Kotlin 公式ドキュメント
‣ http://kotlinlang.org/docs/reference/
‣ Try Kotlin: Simplest version
‣ https://try.kotlinlang.org

Kotlinではじめる Webアプリケーション入門

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Kotlinではじめる Webアプリケーション入門

Similar to Kotlinではじめる Webアプリケーション入門 (20)

More from 虎の穴開発室

More from 虎の穴開発室 (20)