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.3k
Multiplatform Kotlin
44x1carbon
0
190
Other Decks in Technology
See All in Technology
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
220
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
500
データ戦略部門 紹介資料
sansan33
PRO
1
3.7k
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
1
770
アイテムレビュー機能導入からの学びと改善
zozotech
PRO
0
110
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
230
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.5k
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
930
能登半島地震において デジタルができたこと・できなかったこと
ditccsugii
0
180
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
150
今この時代に技術とどう向き合うべきか
gree_tech
PRO
0
330
Featured
See All Featured
BBQ
matthewcrist
89
9.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
8
900
Site-Speed That Sticks
csswizardry
12
900
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
We Have a Design System, Now What?
morganepeng
53
7.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Rails Girls Zürich Keynote
gr2m
95
14k
Fireside Chat
paigeccino
40
3.7k
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