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
React(Kotlin)でToDoアプリを作ってみた
Search
44
September 19, 2018
Technology
2
1.8k
React(Kotlin)でToDoアプリを作ってみた
44
September 19, 2018
Tweet
Share
More Decks by 44
See All by 44
Kotlin MultiPlatform Projectのロマンを語る
44x1carbon
0
500
たかが命名、されど命名
44x1carbon
2
1.1k
Vue.jsで考えるMVVM
44x1carbon
0
2.2k
Multiplatform Kotlin
44x1carbon
0
190
Other Decks in Technology
See All in Technology
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.2k
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
250
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
460
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
21k
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
270
ビギナーであり続ける/beginning
ikuodanaka
3
750
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
310
Connect 100+を支える技術
kanyamaguc
0
200
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
190
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Agile that works and the tools we love
rasmusluckow
329
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How GitHub (no longer) Works
holman
314
140k
Designing for Performance
lara
610
69k
Transcript
ReactでToDoアプリを 作ってみた Osaka Mix Leap Study #23 React Native勉強会
アジェンダ 1. 自己紹介 2. 作るアプリの仕様 3. ReactでToDoアプリを作る 4. Reduxを導入してみる 5.
まとめ
自己紹介 ヤマサキ ヨシヒロ 山崎 好洋 ヤフー18年度 新卒 • Vue.js •
DDD • TDD • モブプロ • Kotlin @44x1carbon
Vue.jsしか触ってこなかったから Reactを触ってみよう!!
React(Kotlin)でToDoアプリを 作ってみた
KotlinでReactとは? 最近、Androidやサーバーサイドで注目されている、JetBrains社製のJVM言語のKotlin Javaバイトコード以外にもJavaScript(Kotlin/JS)やバイナリコード(Kotlin/Native)にも変 換ができる。 ReactをKotlin/JS用にラップしたライブラリ kotlin-reactがJetBrainsから提供されている
作るアプリの仕様 【React】ToDoアプリを作ってみよう @mikan3rd • ToDo一覧表示 • ToDoの投稿 • ToDoの完了/未完了切り替え
コマンドでプロジェクトの雛形を作成 1. コマンドのインストール npm install -g create-react-kotlin-app 2. プロジェクトの作成 create-react-kotlin-app
todo-list ※実行前にJDK8をインストールしておく必要があります。
プロジェクトのディレクトリ構造
実行は npm start
設定を書き換えたい場合は npm run eject
None
Kotlinの言語仕様紹介(少しだけ)
コンストラクタ プライマリコンストラクタはクラスヘッダ部分に書きます class Person constructor(val firstName: String) { ... }
アノテーションやアクセス修飾子がない場合はconstructorキーワードを省略できます class Person(val firstName: String) { ... }
拡張メソッド 既存の型にメソッドを追加することができます。 fun 拡張したい型.拡張メソッド名 例) fun String.toNewLine() = this +
“\n” “Hoge”.toNewLine()
引数の最後にラムダを渡す時の省略記法 fun hoge(s: String, func: (String) -> Unit) 引数の最後のラムダは括弧の外側に書くことができます。 hoge(“Hoge”,
{ s -> println(s) }) hoge(“Hoge”) { s -> println(s) } 引数がラムダだけの場合、丸括弧を省略することができます。 fun fuga(func: (String) -> Unit) fuga { s -> println(s) }
kotlin-reactでどう書く? 1. Rendering 2. List Rendering 3. State 4. Props
5. Handling Event
Rendering
main(JavaScript) import './css/index.css' import React from 'react' import ReactDOM from
'react-dom' import App from './App' ReactDOM.render(<App />, document.getElementById('root'))
main(Kotlin) fun main(args: Array<String>) { // cssファイルの読み込み requireAll(require.context("src", true, js("/\\.css$/")))
render(document.getElementById("root")) { app() } }
render(JavaScript) class App extends Component { constructor() { … }
render() { return ( <div className="app"> <h1>todoアプリを作ってみた</h1> <TodoList todos={this.state.todos} /> </div> ); } }
render(Kotlin) class App : RComponent<RProps, AppState>() { override fun AppState.init()
{ ... } override fun RBuilder.render() { div( classes = "app" ) { h1 { +"todoアプリを作ってみた" } todoList(state.todoList) } } }
List Rendering
List Rendering(JavaScript) class TodoList extends Component { render() { const
todos = this.props.todos.map( todo => <Todo key={todo.id} {...todo} /> ) return( <ul> {todos} </ul> ); } }
List Rendering(Kotlin) class TodoListComponent(props: TodoListProps): RComponent<TodoListProps, TodoListState>(props) { override fun
TodoListState.init(props: TodoListProps) { todoList = props.todoList.toMutableList() } override fun RBuilder.render() { val todos = props.todoList.map { todo(it, props.setTodoStatus) } ul { todos } } }
State
State(JavaScript) class App extends Component { constructor() { super() this.state
= { todos: [ { id: 1, title: "Hello, React!", desc: "React始めました", done: false }, ... ] } } render() { ... } }
State(Kotlin) interface AppState: RState { var todoList: MutableList<Todo> var countTodo:
Int } class App : RComponent<RProps, AppState>() { override fun AppState.init() { todoList = mutableListOf( Todo(1, "Hello, React!", "React始めました"), Todo(2, "Hello, Redux!", "Reduxも始めました") ) } override fun RBuilder.render() { ... } }
Props
Props(JavaScript) class Todo extends Component { render() { const className
= 'undone' const link = this.props.done ? '元に戻す' : '完了!' return( <li className={className}> <span>{this.props.id}</span> <span>:{this.props.title} </span> <a href="">{link}</a> <p>{this.props.desc}</p> </li> ); } }
Props(Kotlin) interface TodoProps: RProps { var todo: Todo var setTodoStatus:
(Todo) -> Unit } class TodoComponent(props: TodoProps): RComponent<TodoProps, RState>(props) { override fun RBuilder.render() { val className = if(props.todo.done) "undone" else "done" val link = if(props.todo.done) "元に戻す" else "完了!" ... } } fun RBuilder.todo(todo: Todo) = child(TodoComponent::class) { attrs.todo = todo }
Handling Event
Handling Event(JavaScript) class Todo extends Component { render() { ...
return( ... <a href="" onClick={(e) => { e.preventDefault(); this.props.setTodoStatus(this.props)}}>{link}</a> ... ); } }
Handling Event(Kotlin) class TodoComponent(props: TodoProps): RComponent<TodoProps, RState>(props) { override fun
RBuilder.render() { ... a(href = "#") { +link attrs { onClickFunction = { e -> e.preventDefault()
[email protected]
(
[email protected]
) } } } ... } } }
Reduxを導入してみる
Reduxを導入してみる 状態管理フレームワークのreduxやreact-reduxのKotlinラッパーも用意されています。 npm install @jetbrains/kotlin-redux npm install @jetbrains/kotlin-react-redux 以下のコマンドを実行することでIntellJ Ideaで上のライブラリをモジュールとして認識さ
せることができる npm run gen-idea-libs
まとめ
まとめ • 無理やり感はなく、普段のReactのように書ける • Kotlinのモダンな言語仕様を利用してフロントが書ける • TypeSafeにフロントをかけるのは良い (TypeScriptでいいのでは?) • サーバーサイドもフロントもAndroidも同じ言語で書ける
• KotlinでReactが書けるってことはKotlinでReact Nativeも…!? JetBrains/kotlin-wrappers https://github.com/JetBrains/kotlin-wrappers Kotlin JS OverView https://kotlinlang.org/docs/reference/js-overview.html