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
Unson OS|48時間で「売れるか」を判定する AI 市場検証プラットフォーム
unson
0
170
家族の思い出を形にする 〜 1秒動画の生成を支えるインフラアーキテクチャ
ojima_h
1
480
リリース2ヶ月で収益化した話
kent_code3
1
190
Kiroでインフラ要件定義~テスト を実施してみた
nagisa53
3
310
Serverless Meetup #21
yoshidashingo
1
110
データ基盤の管理者からGoogle Cloud全体の管理者になっていた話
zozotech
PRO
0
350
Jamf Connect ZTNAとMDMで実現! 金融ベンチャーにおける「デバイストラスト」実例と軌跡 / Kyash Device Trust
rela1470
0
150
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
430
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
arthur1
0
350
Findy Freelance 利用シーン別AI活用例
ness
0
310
ホリスティックテスティングの右側も大切にする 〜2つの[はか]る〜 / Holistic Testing: Right Side Matters
nihonbuson
PRO
0
590
Strands Agents & Bedrock AgentCoreを1分でおさらい
minorun365
PRO
6
240
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
301
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
RailsConf 2023
tenderlove
30
1.2k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Raft: Consensus for Rubyists
vanstee
140
7k
Building Applications with DynamoDB
mza
95
6.5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Designing for Performance
lara
610
69k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
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