SlideShare a Scribd company logo
社内LTネタ ReactNative?
サイバーエージェント アドテク本部
技術戦略室 AdTech Native Unit
小栗 徹
おしごと
Bringing Modern Web Techniques to Mobile
ReactNative ?
React.jsとだいたい同じ作法で
JavaScript で書いたコードが
iOSネイティブアプリとして一応動く
React.js ?
Facebook, Instagram
AtomEditor, AirBnB, Yahoo!, Atlassian….
(自分で作りこんでないから実感ないけど)
フロントだとViewだけいい感じに作れれば
嬉しいから、使ってみる(MとかVとかそまでは...)
@masuidrive http://blog.masuidrive.jp/2015/03/03/react/
今日はMobileよりな話しなので
● Write once, Run anywhere
1回かけば、どこでも使えるさ
● Write once, Adapt everywhere
プラットフォーム固有な部分は個別にいこうぜ
● Learn once, Write everywhere
Reactできればメジャー制覇余裕
Titanium Mobile
● JSでネイティブApp
● 画面はXMLで記述
● CSSっぽいデザイン記述
● iOS/Android…..etc
● ネイティブ呼び出しはブリ
ッジを書く必要有り
● Ti.Next Hyperloop
● Write once, Adapt everywhere
ReactNative
● JSでネイティブApp
● 画面はJSX(XML)で記述
● CSSっぽいデザイン記述
● iOS/Android(soon)
● ネイティブ呼び出しはブリ
ッジを書く必要有り
● React
● Learn once, Write everywhere
これが流行ったら
またブリッジつくる仕事が増えちゃうね
てへぺろ(・ω<)
この資料作成時に勝手におせわになったので・・・
@masuidrive
元Titanium Mobileエバンジェリスト、現TORETA CTO
本文に注記なき参考サイト
http://qiita.com/koba04/items/4d13caf5ab4507974bf0
http://b.hatena.ne.jp/entry/s/speakerdeck.com/masuidrive/yuan-mou-evuanzierisutoga-jian-rureactnative
ご清聴ありがとうございました

More Related Content

What's hot

AngularJSとFluxとRiotJSと
AngularJSとFluxとRiotJSとAngularJSとFluxとRiotJSと
AngularJSとFluxとRiotJSと
Ryo Iinuma
 
React Nativeでお絵描きしてみた
React Nativeでお絵描きしてみたReact Nativeでお絵描きしてみた
React Nativeでお絵描きしてみた
kazuki matsumura
 
アプリ開発&チーム管理で 役立った拡張機能
アプリ開発&チーム管理で役立った拡張機能アプリ開発&チーム管理で役立った拡張機能
アプリ開発&チーム管理で 役立った拡張機能
Masaki Suzuki
 
Directiveで実現できたこと
Directiveで実現できたことDirectiveで実現できたこと
Directiveで実現できたこと
Kon Yuichi
 
One-time Binding & $digest
One-time Binding & $digestOne-time Binding & $digest
One-time Binding & $digest
Hayashi Yuichi
 
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
 
俺とAngular JS 2
俺とAngular JS 2俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
 
開発チーム管理で役立ったVSCode拡張機能
開発チーム管理で役立ったVSCode拡張機能開発チーム管理で役立ったVSCode拡張機能
開発チーム管理で役立ったVSCode拡張機能
Masaki Suzuki
 
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetupJava + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetup
Toshiaki Maki
 
Riotでサーバレスにした話
Riotでサーバレスにした話Riotでサーバレスにした話
Riotでサーバレスにした話
Hiroyuki Hara
 
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
kazuki matsumura
 
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
Naoki Yamada
 
React.js・ReactNative・Redux入門
React.js・ReactNative・Redux入門React.js・ReactNative・Redux入門
React.js・ReactNative・Redux入門
Kazuhiro Yoshimoto
 
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたサーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
 
Riotjsハンズオン
RiotjsハンズオンRiotjsハンズオン
Riotjsハンズオン
omi end
 
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
miso- soup3
 
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみたいい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
Hayashi Yuichi
 
Hello, React!! まで導く Reactの基礎
Hello, React!! まで導く Reactの基礎Hello, React!! まで導く Reactの基礎
Hello, React!! まで導く Reactの基礎
iPride Co., Ltd.
 
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリAngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
アシアル株式会社
 

What's hot (20)

Riot.jsに触れてみた話
Riot.jsに触れてみた話Riot.jsに触れてみた話
Riot.jsに触れてみた話
 
AngularJSとFluxとRiotJSと
AngularJSとFluxとRiotJSとAngularJSとFluxとRiotJSと
AngularJSとFluxとRiotJSと
 
React Nativeでお絵描きしてみた
React Nativeでお絵描きしてみたReact Nativeでお絵描きしてみた
React Nativeでお絵描きしてみた
 
アプリ開発&チーム管理で 役立った拡張機能
アプリ開発&チーム管理で役立った拡張機能アプリ開発&チーム管理で役立った拡張機能
アプリ開発&チーム管理で 役立った拡張機能
 
Directiveで実現できたこと
Directiveで実現できたことDirectiveで実現できたこと
Directiveで実現できたこと
 
One-time Binding & $digest
One-time Binding & $digestOne-time Binding & $digest
One-time Binding & $digest
 
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
 
俺とAngular JS 2
俺とAngular JS 2俺とAngular JS 2
俺とAngular JS 2
 
開発チーム管理で役立ったVSCode拡張機能
開発チーム管理で役立ったVSCode拡張機能開発チーム管理で役立ったVSCode拡張機能
開発チーム管理で役立ったVSCode拡張機能
 
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetupJava + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetup
 
Riotでサーバレスにした話
Riotでサーバレスにした話Riotでサーバレスにした話
Riotでサーバレスにした話
 
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
 
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
 
React.js・ReactNative・Redux入門
React.js・ReactNative・Redux入門React.js・ReactNative・Redux入門
React.js・ReactNative・Redux入門
 
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたサーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
 
Riotjsハンズオン
RiotjsハンズオンRiotjsハンズオン
Riotjsハンズオン
 
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
 
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみたいい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
 
Hello, React!! まで導く Reactの基礎
Hello, React!! まで導く Reactの基礎Hello, React!! まで導く Reactの基礎
Hello, React!! まで導く Reactの基礎
 
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリAngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
 

Viewers also liked

AngularでAmebaコミュニティサービス開発
AngularでAmebaコミュニティサービス開発AngularでAmebaコミュニティサービス開発
AngularでAmebaコミュニティサービス開発
Yusuke Goto
 
Componentization with Gilgamesh
Componentization with GilgameshComponentization with Gilgamesh
Componentization with Gilgamesh
Yusuke Goto
 
Web ブラウザで DRM
Web ブラウザで DRMWeb ブラウザで DRM
Web ブラウザで DRM
Yusuke Goto
 
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンドリニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
Yusuke Goto
 
AbemaTV Developer Conference 2016
AbemaTV Developer Conference 2016AbemaTV Developer Conference 2016
AbemaTV Developer Conference 2016
康洋 板敷
 
FINAL FANTASY
 Record Keeper 演出データについて
FINAL FANTASY
 Record Keeper 演出データについてFINAL FANTASY
 Record Keeper 演出データについて
FINAL FANTASY
 Record Keeper 演出データについて
dena_study
 
JavaとOSSとAndroid - JavaAPI訴訟問題を考える
JavaとOSSとAndroid - JavaAPI訴訟問題を考えるJavaとOSSとAndroid - JavaAPI訴訟問題を考える
JavaとOSSとAndroid - JavaAPI訴訟問題を考える
Yusuke Suzuki
 
Atomic Design powered by React @ AbemaTV
Atomic Design powered by React @ AbemaTVAtomic Design powered by React @ AbemaTV
Atomic Design powered by React @ AbemaTV
Yusuke Goto
 
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのかなぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
 
TypeScriptはいいぞ
TypeScriptはいいぞTypeScriptはいいぞ
TypeScriptはいいぞ
Jun Suzuki
 
Android lint-srp-practice
Android lint-srp-practiceAndroid lint-srp-practice
Android lint-srp-practice
cch-robo
 
AbemaTVの動画配信を支えるサーバーサイドシステム
AbemaTVの動画配信を支えるサーバーサイドシステムAbemaTVの動画配信を支えるサーバーサイドシステム
AbemaTVの動画配信を支えるサーバーサイドシステム
yuichiro nakazawa
 
FINAL FANTASY Record Keeper の作り方
FINAL FANTASY Record Keeper の作り方FINAL FANTASY Record Keeper の作り方
FINAL FANTASY Record Keeper の作り方
dena_study
 
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigiReact Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
Yukiya Nakagawa
 

Viewers also liked (14)

AngularでAmebaコミュニティサービス開発
AngularでAmebaコミュニティサービス開発AngularでAmebaコミュニティサービス開発
AngularでAmebaコミュニティサービス開発
 
Componentization with Gilgamesh
Componentization with GilgameshComponentization with Gilgamesh
Componentization with Gilgamesh
 
Web ブラウザで DRM
Web ブラウザで DRMWeb ブラウザで DRM
Web ブラウザで DRM
 
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンドリニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
 
AbemaTV Developer Conference 2016
AbemaTV Developer Conference 2016AbemaTV Developer Conference 2016
AbemaTV Developer Conference 2016
 
FINAL FANTASY
 Record Keeper 演出データについて
FINAL FANTASY
 Record Keeper 演出データについてFINAL FANTASY
 Record Keeper 演出データについて
FINAL FANTASY
 Record Keeper 演出データについて
 
JavaとOSSとAndroid - JavaAPI訴訟問題を考える
JavaとOSSとAndroid - JavaAPI訴訟問題を考えるJavaとOSSとAndroid - JavaAPI訴訟問題を考える
JavaとOSSとAndroid - JavaAPI訴訟問題を考える
 
Atomic Design powered by React @ AbemaTV
Atomic Design powered by React @ AbemaTVAtomic Design powered by React @ AbemaTV
Atomic Design powered by React @ AbemaTV
 
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのかなぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
 
TypeScriptはいいぞ
TypeScriptはいいぞTypeScriptはいいぞ
TypeScriptはいいぞ
 
Android lint-srp-practice
Android lint-srp-practiceAndroid lint-srp-practice
Android lint-srp-practice
 
AbemaTVの動画配信を支えるサーバーサイドシステム
AbemaTVの動画配信を支えるサーバーサイドシステムAbemaTVの動画配信を支えるサーバーサイドシステム
AbemaTVの動画配信を支えるサーバーサイドシステム
 
FINAL FANTASY Record Keeper の作り方
FINAL FANTASY Record Keeper の作り方FINAL FANTASY Record Keeper の作り方
FINAL FANTASY Record Keeper の作り方
 
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigiReact Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
 

Similar to 社内LTネタ ReactNative

Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~Atsushi Harada
 
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
アシアル株式会社
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
 
Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版
Yoshito Tabuchi
 
React componentのコンストラクタを追いかけて
React componentのコンストラクタを追いかけてReact componentのコンストラクタを追いかけて
React componentのコンストラクタを追いかけて
Hoso michi
 
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
JavaScript(AngularJS・React.js)で作る iOS・AndroidアプリハンズオンJavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
Kazuhiro Yoshimoto
 
Yidev201406.pub
Yidev201406.pubYidev201406.pub
Yidev201406.pub
itoz itoz
 
PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料
Monaca
 
これからのNotesモバイルアプリはこう作れ
これからのNotesモバイルアプリはこう作れこれからのNotesモバイルアプリはこう作れ
これからのNotesモバイルアプリはこう作れ
Mitsuru Katoh
 
Meteorというフレームワーク
MeteorというフレームワークMeteorというフレームワーク
Meteorというフレームワーク
rukiadia
 
Createjsについて@jsCafe20
Createjsについて@jsCafe20Createjsについて@jsCafe20
Createjsについて@jsCafe20佐藤 俊太郎
 
バグのことは嫌いになってもXcodeのことは嫌いにならないでください。
バグのことは嫌いになってもXcodeのことは嫌いにならないでください。バグのことは嫌いになってもXcodeのことは嫌いにならないでください。
バグのことは嫌いになってもXcodeのことは嫌いにならないでください。
Daisuke Yamashita
 
WebエンジニアのReactNativeでの戦い方
WebエンジニアのReactNativeでの戦い方WebエンジニアのReactNativeでの戦い方
WebエンジニアのReactNativeでの戦い方
PIXTA Inc.
 
Createjs jp study #4 20130726
Createjs jp study #4 20130726Createjs jp study #4 20130726
Createjs jp study #4 20130726Seigo Tanaka
 
Swiftのプロパティオブザーバを使い倒す
Swiftのプロパティオブザーバを使い倒すSwiftのプロパティオブザーバを使い倒す
Swiftのプロパティオブザーバを使い倒す
Tomoki Hasegawa
 
Roo
RooRoo
React Nativeの話のその前に… サービスの作り方の話
React Nativeの話のその前に… サービスの作り方の話React Nativeの話のその前に… サービスの作り方の話
React Nativeの話のその前に… サービスの作り方の話
Kanako Kobayashi
 
Riot.jsを用いたweb開発 takusuta tech conf #1
Riot.jsを用いたweb開発   takusuta tech conf #1Riot.jsを用いたweb開発   takusuta tech conf #1
Riot.jsを用いたweb開発 takusuta tech conf #1
Keisuke Imai
 
何を自動化するのか
何を自動化するのか何を自動化するのか
何を自動化するのか
暁 三宅
 
第1回 Japan Xamarin User Group Conference - Xamarin 概要
第1回 Japan Xamarin User Group Conference - Xamarin 概要第1回 Japan Xamarin User Group Conference - Xamarin 概要
第1回 Japan Xamarin User Group Conference - Xamarin 概要
Yoshito Tabuchi
 

Similar to 社内LTネタ ReactNative (20)

Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
 
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
 
Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版
 
React componentのコンストラクタを追いかけて
React componentのコンストラクタを追いかけてReact componentのコンストラクタを追いかけて
React componentのコンストラクタを追いかけて
 
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
JavaScript(AngularJS・React.js)で作る iOS・AndroidアプリハンズオンJavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
 
Yidev201406.pub
Yidev201406.pubYidev201406.pub
Yidev201406.pub
 
PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料
 
これからのNotesモバイルアプリはこう作れ
これからのNotesモバイルアプリはこう作れこれからのNotesモバイルアプリはこう作れ
これからのNotesモバイルアプリはこう作れ
 
Meteorというフレームワーク
MeteorというフレームワークMeteorというフレームワーク
Meteorというフレームワーク
 
Createjsについて@jsCafe20
Createjsについて@jsCafe20Createjsについて@jsCafe20
Createjsについて@jsCafe20
 
バグのことは嫌いになってもXcodeのことは嫌いにならないでください。
バグのことは嫌いになってもXcodeのことは嫌いにならないでください。バグのことは嫌いになってもXcodeのことは嫌いにならないでください。
バグのことは嫌いになってもXcodeのことは嫌いにならないでください。
 
WebエンジニアのReactNativeでの戦い方
WebエンジニアのReactNativeでの戦い方WebエンジニアのReactNativeでの戦い方
WebエンジニアのReactNativeでの戦い方
 
Createjs jp study #4 20130726
Createjs jp study #4 20130726Createjs jp study #4 20130726
Createjs jp study #4 20130726
 
Swiftのプロパティオブザーバを使い倒す
Swiftのプロパティオブザーバを使い倒すSwiftのプロパティオブザーバを使い倒す
Swiftのプロパティオブザーバを使い倒す
 
Roo
RooRoo
Roo
 
React Nativeの話のその前に… サービスの作り方の話
React Nativeの話のその前に… サービスの作り方の話React Nativeの話のその前に… サービスの作り方の話
React Nativeの話のその前に… サービスの作り方の話
 
Riot.jsを用いたweb開発 takusuta tech conf #1
Riot.jsを用いたweb開発   takusuta tech conf #1Riot.jsを用いたweb開発   takusuta tech conf #1
Riot.jsを用いたweb開発 takusuta tech conf #1
 
何を自動化するのか
何を自動化するのか何を自動化するのか
何を自動化するのか
 
第1回 Japan Xamarin User Group Conference - Xamarin 概要
第1回 Japan Xamarin User Group Conference - Xamarin 概要第1回 Japan Xamarin User Group Conference - Xamarin 概要
第1回 Japan Xamarin User Group Conference - Xamarin 概要
 

社内LTネタ ReactNative