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.5k
React(Kotlin)でToDoアプリを作ってみた
44
September 19, 2018
Tweet
Share
More Decks by 44
See All by 44
Kotlin MultiPlatform Projectのロマンを語る
44x1carbon
0
420
たかが命名、されど命名
44x1carbon
2
1k
Vue.jsで考えるMVVM
44x1carbon
0
1.8k
Multiplatform Kotlin
44x1carbon
0
150
Other Decks in Technology
See All in Technology
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
1
120
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
220
On Your Data を超えていく!
hirotomotaguchi
2
670
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
300
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
ChatGPT for IT Service Management (IT Pro)
dahatake
7
1.6k
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
2
370
20分で完全に理解するGrafanaダッシュボード
hamadakoji
3
510
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
1.3k
Janus
bkuhlmann
1
490
Hands-on Gemini, the Google DeepMind LLM
meteatamel
1
110
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
510
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Building Your Own Lightsaber
phodgson
99
5.7k
Faster Mobile Websites
deanohume
299
30k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Six Lessons from altMBA
skipperchong
21
3k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Teambox: Starting and Learning
jrom
128
8.4k
Docker and Python
trallard
34
2.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
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