Submit Search
Upload
Reactつかってみた
•
Download as PPTX, PDF
•
6 likes
•
6,918 views
Minori Tokuda
Follow
川崎.rb で発表したReactの感想文(?)です。 あと、ReactRubyの紹介も少し入っています。
Read less
Read more
Software
Report
Share
Report
Share
1 of 16
Download now
Recommended
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
Yuki Ishikawa
Flux の紹介です
React.js + Flux
React.js + Flux
dsuke Takaoka
天下一クライアントサイドJS MV*フレームワーク武道会でのLT資料
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
http://connpass.com/event/6910/ で発表した資料です。 http://ofsilvers.hatenablog.com/entry/ten1club-1 でブログ書いてるよ。
T35 ASP.NET MVCを使ったTDD入門
T35 ASP.NET MVCを使ったTDD入門
normalian
わんくま東京勉強会#35で使用したセッション資料。ASP.NET MVCの活用法が載ってます。
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
フロントエンド勉強会01資料
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
SIROK技術勉強会 #1 「Reactってなんだ?」
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
最近はやりのjQuery Hateの謎に迫る! (というか、これであってるのか教えてほしいという発表)
Recommended
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
Yuki Ishikawa
Flux の紹介です
React.js + Flux
React.js + Flux
dsuke Takaoka
天下一クライアントサイドJS MV*フレームワーク武道会でのLT資料
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
http://connpass.com/event/6910/ で発表した資料です。 http://ofsilvers.hatenablog.com/entry/ten1club-1 でブログ書いてるよ。
T35 ASP.NET MVCを使ったTDD入門
T35 ASP.NET MVCを使ったTDD入門
normalian
わんくま東京勉強会#35で使用したセッション資料。ASP.NET MVCの活用法が載ってます。
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
フロントエンド勉強会01資料
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
SIROK技術勉強会 #1 「Reactってなんだ?」
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
最近はやりのjQuery Hateの謎に迫る! (というか、これであってるのか教えてほしいという発表)
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
D3 フロントエンド技術勉強会 2016.1.22 - 1年間まじめにSPA開発やってきた経験について - その中で、ぶつかった課題と対策 - SPA開発の全体像 - Web/JS界隈の激しい変化の波に溺れないためのTips - AngularJS と SPA の設計について - TypeScript と ES6 - Gulp タスク
iOSでMVVM入門
iOSでMVVM入門
ishikawa akira
第二十七回岡山モバイルアプリ開発もくもく会
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
フレームワークを利用したシングルページアプリケーションの制御 GMOインターネット次世代システム研究室の勉強会発表資料。 2015年12月作成。 案件対応期間は2015年4月-8月。
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
春のJavaScript祭りで発表した資料です http://javascript-fes.doorkeeper.jp/events/14171
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
Kondo Hitoshi
第3のビール的なジャンルの圧縮難読化ツール作りに挑戦してみました
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
慎一 古賀
第11回 Plus Programming .net 勉強会で登壇したセッションの資料です。書籍「はじめてのASP.NET SPA開発入門」(日経BP社)発売を記念して、これからVisual StudioでWeb開発を始める方、あるいは既にWeb開発の経験がありこれからSPA(シングルページアプリケーション)の開発を始める方を対象に、SPA開発の始め方と今後のステップアップについてイメージ出来る勉強会を開催しました。 最初のセッションとして、SPA開発に必要な技術の全体像やVisual StudioとASP.NETの動向と共に、書籍「はじめてのASP.NET SPA開発入門」でカバーする範囲と、本書ではカバーできない、よりステップアップするために必要な範囲を紹介しました。
Visual Studio 2017 事はじめ
Visual Studio 2017 事はじめ
Hideaki Aoyagi
2017/07/28 「Fukuoka.NET(ふくてん) #7」 で発表した資料です
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
AWS Startup Tech Meetup #008 発表資料
120512 metro styleapp_javascript
120512 metro styleapp_javascript
Takayoshi Tanaka
React.js + Reduxで作るSPA
React.js + Reduxで作るSPA
Shohei Saeki
React.js + Reduxで作るSPA
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
Google製JavaScriptフレームワークAngularJS(http://angularjs.org/)の良さを10分くらいで紹介するための資料です.身内向けの勉強会でしゃべるときに使いました. スライド中のサンプルコードはこちらに https://github.com/daisy1754/angular-simple-demo-flickr-cat
TypeScript による今風の web アプリ開発
TypeScript による今風の web アプリ開発
靖 陣内
Modern development of web application with TypeScript
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
Kondo Hitoshi
本来JavaScriptにコンパイルなどのビルドは必須ではありませんが、 いまどきのJavaScriptアプリではビルドが重要です。 代謝の激しいフロントエンドを反映し、JSビルドの世界も盛り上がっています。 このチャートはビルドの現状を追うことでJSの現状をとらえることを目的にしています。
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Kohei Asai
2015-02-17に行われた社内勉強会の内容です。
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
jQueryを中心としてJavaScriptについて書いてます。
無償版Visual StudioでいろいろWeb開発
無償版Visual StudioでいろいろWeb開発
Narami Kiyokura
プログラミング生放送勉強会 第29回@サイボウズ株式会社 松山オフィスで行われた同名のタイトルのセッション資料です。
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
2013年6月8日に大阪で開催された「第7回HTML5など勉強会」で使ったプレゼン資料です。
Groovyコンファレンス
Groovyコンファレンス
Shinichiro Takezaki
Non blocking and asynchronous
Non blocking and asynchronous
Norio Kobota
for WebSocket Study
オブジェクト指向な人がRx swiftを試してみた
オブジェクト指向な人がRx swiftを試してみた
小林 弘明
iOS Creators' Meetup vol.2 LT枠スライド http://oi-study.connpass.com/event/40049/
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Kazuhiro Hara
OmやOm-next、Reagent、Rumなどの現状についてお話します。
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
Kazuhiro Hara
SPAとSSR、現実解について考えてみる Okachi.jsでの発表資料です
More Related Content
What's hot
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
D3 フロントエンド技術勉強会 2016.1.22 - 1年間まじめにSPA開発やってきた経験について - その中で、ぶつかった課題と対策 - SPA開発の全体像 - Web/JS界隈の激しい変化の波に溺れないためのTips - AngularJS と SPA の設計について - TypeScript と ES6 - Gulp タスク
iOSでMVVM入門
iOSでMVVM入門
ishikawa akira
第二十七回岡山モバイルアプリ開発もくもく会
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
フレームワークを利用したシングルページアプリケーションの制御 GMOインターネット次世代システム研究室の勉強会発表資料。 2015年12月作成。 案件対応期間は2015年4月-8月。
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
春のJavaScript祭りで発表した資料です http://javascript-fes.doorkeeper.jp/events/14171
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
Kondo Hitoshi
第3のビール的なジャンルの圧縮難読化ツール作りに挑戦してみました
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
慎一 古賀
第11回 Plus Programming .net 勉強会で登壇したセッションの資料です。書籍「はじめてのASP.NET SPA開発入門」(日経BP社)発売を記念して、これからVisual StudioでWeb開発を始める方、あるいは既にWeb開発の経験がありこれからSPA(シングルページアプリケーション)の開発を始める方を対象に、SPA開発の始め方と今後のステップアップについてイメージ出来る勉強会を開催しました。 最初のセッションとして、SPA開発に必要な技術の全体像やVisual StudioとASP.NETの動向と共に、書籍「はじめてのASP.NET SPA開発入門」でカバーする範囲と、本書ではカバーできない、よりステップアップするために必要な範囲を紹介しました。
Visual Studio 2017 事はじめ
Visual Studio 2017 事はじめ
Hideaki Aoyagi
2017/07/28 「Fukuoka.NET(ふくてん) #7」 で発表した資料です
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
AWS Startup Tech Meetup #008 発表資料
120512 metro styleapp_javascript
120512 metro styleapp_javascript
Takayoshi Tanaka
React.js + Reduxで作るSPA
React.js + Reduxで作るSPA
Shohei Saeki
React.js + Reduxで作るSPA
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
Google製JavaScriptフレームワークAngularJS(http://angularjs.org/)の良さを10分くらいで紹介するための資料です.身内向けの勉強会でしゃべるときに使いました. スライド中のサンプルコードはこちらに https://github.com/daisy1754/angular-simple-demo-flickr-cat
TypeScript による今風の web アプリ開発
TypeScript による今風の web アプリ開発
靖 陣内
Modern development of web application with TypeScript
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
Kondo Hitoshi
本来JavaScriptにコンパイルなどのビルドは必須ではありませんが、 いまどきのJavaScriptアプリではビルドが重要です。 代謝の激しいフロントエンドを反映し、JSビルドの世界も盛り上がっています。 このチャートはビルドの現状を追うことでJSの現状をとらえることを目的にしています。
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Kohei Asai
2015-02-17に行われた社内勉強会の内容です。
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
jQueryを中心としてJavaScriptについて書いてます。
無償版Visual StudioでいろいろWeb開発
無償版Visual StudioでいろいろWeb開発
Narami Kiyokura
プログラミング生放送勉強会 第29回@サイボウズ株式会社 松山オフィスで行われた同名のタイトルのセッション資料です。
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
2013年6月8日に大阪で開催された「第7回HTML5など勉強会」で使ったプレゼン資料です。
What's hot
(17)
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
iOSでMVVM入門
iOSでMVVM入門
React を導入したフロントエンド開発
React を導入したフロントエンド開発
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
Visual Studio 2017 事はじめ
Visual Studio 2017 事はじめ
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
120512 metro styleapp_javascript
120512 metro styleapp_javascript
React.js + Reduxで作るSPA
React.js + Reduxで作るSPA
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
TypeScript による今風の web アプリ開発
TypeScript による今風の web アプリ開発
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
無償版Visual StudioでいろいろWeb開発
無償版Visual StudioでいろいろWeb開発
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Similar to Reactつかってみた
Groovyコンファレンス
Groovyコンファレンス
Shinichiro Takezaki
Non blocking and asynchronous
Non blocking and asynchronous
Norio Kobota
for WebSocket Study
オブジェクト指向な人がRx swiftを試してみた
オブジェクト指向な人がRx swiftを試してみた
小林 弘明
iOS Creators' Meetup vol.2 LT枠スライド http://oi-study.connpass.com/event/40049/
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Kazuhiro Hara
OmやOm-next、Reagent、Rumなどの現状についてお話します。
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
Kazuhiro Hara
SPAとSSR、現実解について考えてみる Okachi.jsでの発表資料です
Reactive Extensions v2.0
Reactive Extensions v2.0
Yoshifumi Kawai
#slintky
RxSwift
RxSwift
Kosuke Usami
http://kanmoba.connpass.com/event/25185/
JavaScript Tips 2015(PDF 版)
JavaScript Tips 2015(PDF 版)
taskie
HTML 版: http://alprosys.com/es6/js_tips_2015.html 主に ECMAScript 6 と altJS の話
Reactive Systems と Back Pressure
Reactive Systems と Back Pressure
Akihiro Ikezoe
最先端情報吸収研究所(AIAL)勉強会
Railsのフロントエンド開発を考える
Railsのフロントエンド開発を考える
Hirata Tomoko
Ruby/ Ruby on Railsビギナーズ勉強会 第9回資料です
javascript を Xcode でテスト
javascript を Xcode でテスト
Yoichiro Sakurai
javascript を Xcode でテストするお話
Angular js or_backbonejs
Angular js or_backbonejs
Omasa Yusaku
jsCafe vol.8 LT
SpringOne Platform 2016 報告会「A Lite Rx API for the JVM」/ 井口 貝 @ SmartNews, Inc.
SpringOne Platform 2016 報告会「A Lite Rx API for the JVM」/ 井口 貝 @ SmartNews, Inc.
SmartNews, Inc.
「A Lite Rx API for the JVM」/ 井口 貝 @ SmartNews, Inc. @SpringOne Platform 2016 報告会 Speaker by Kai Inokuchi
Getting start with knockout.js
Getting start with knockout.js
Akio Ishida
ROS JAPAN Users Group Meetup 03
ROS JAPAN Users Group Meetup 03
Daiki Maekawa
The History of Reactive Extensions
The History of Reactive Extensions
Yoshifumi Kawai
RxJava Night 2014/10/28
laravel websocket(use redis pubsub) [Laravel meetup tokyo]
laravel websocket(use redis pubsub) [Laravel meetup tokyo]
Yuuki Takezawa
laravel meetup tokyo Vol.3 発表のスライドです。 laravelを使ったwebsocket実装でredisのpubsubを用いた内容です sample code https://github.com/ytake/laravel-websocket
Reactive programming with Apache Wicket
Reactive programming with Apache Wicket
Ryuhei Ishibashi
Apache Wicketを利用したWebシステムで Reactiveプログラミングを取り入れた事例の紹介
RxSwiftのデータバインディングだけ
RxSwiftのデータバインディングだけ
Hironytic
第3回RxSwift勉強会@Sansanの発表スライドです。
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
エンジニア勉強会 エスキュービズム
React/Redux/Redux-Saga+サーバサイドレンダリング
Similar to Reactつかってみた
(20)
Groovyコンファレンス
Groovyコンファレンス
Non blocking and asynchronous
Non blocking and asynchronous
オブジェクト指向な人がRx swiftを試してみた
オブジェクト指向な人がRx swiftを試してみた
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
Reactive Extensions v2.0
Reactive Extensions v2.0
RxSwift
RxSwift
JavaScript Tips 2015(PDF 版)
JavaScript Tips 2015(PDF 版)
Reactive Systems と Back Pressure
Reactive Systems と Back Pressure
Railsのフロントエンド開発を考える
Railsのフロントエンド開発を考える
javascript を Xcode でテスト
javascript を Xcode でテスト
Angular js or_backbonejs
Angular js or_backbonejs
SpringOne Platform 2016 報告会「A Lite Rx API for the JVM」/ 井口 貝 @ SmartNews, Inc.
SpringOne Platform 2016 報告会「A Lite Rx API for the JVM」/ 井口 貝 @ SmartNews, Inc.
Getting start with knockout.js
Getting start with knockout.js
ROS JAPAN Users Group Meetup 03
ROS JAPAN Users Group Meetup 03
The History of Reactive Extensions
The History of Reactive Extensions
laravel websocket(use redis pubsub) [Laravel meetup tokyo]
laravel websocket(use redis pubsub) [Laravel meetup tokyo]
Reactive programming with Apache Wicket
Reactive programming with Apache Wicket
RxSwiftのデータバインディングだけ
RxSwiftのデータバインディングだけ
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
Reactつかってみた
1.
Reactつかってみた MINORI TOKUDA
@SNOWCRUSH
2.
ReactRubyリリースしました。 https://github.com/minoritea/react_ruby
ReactとRubyのブリッジ gem install react_ruby
3.
Reactとはなんぞや こっからずっとjavascriptのターン・・・
4.
React is ....
A javascript library for building user interfaces (facebook says...) コンポーネント指向のビュー・ライブラ リ(MVCのV) Fluxアーキテクチャにマッチしている
5.
Fluxアーキテクチャ Facebookが提唱するクライアント サイド向けアーキテクチャ
単方向のデータフローが特色 ぶっちゃけObserverパターン
6.
Observerパターン なにかあったら 教えて
こっちから聞きに は行かないよ おまえら、 新情報来てるぞ 購読して更新を待つ 変化があったら通知
7.
Observerじゃないパターン まだ読書中なんだ よ、まっとけ!
外に遊びに行こうぜ!! 状態確認のために 毎回問い合わせしないといけな い
8.
Fluxの構成 http://facebook. github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html
特徴 • 単方向のデータフロー • データの受け渡しは Observerパターンで購 読 • Storeはデータの配信場 所(Modelとはちょっ と違う)
9.
React is a
view library ReactはFluxのビューのみ担う 部品単位で個別に作れる(ボタン、ブログ記 事、etc ) Storeの状態変化を検知して自動的にビューを 更新する Storeにコールバックを登録する Reactiveプログラミング 仮想DOMを持つ
10.
コード例 var Component
= React.createClass({ render: function(){ return <div> <div> Hello, World</div> <AnotherComponent /> </div>; } }); var el = document.queryFilter('#main'); React.render(<Component />, el); • XMLを埋め込める(独自記法) • コンポーネントはXMLタグで表記 • 入れ子に出来る • DOMエレメントに出力する
11.
仮想DOM Reactは直接DOMにレンダリングするのではなく、
内部で持っている仮想のDOMツリーに更新を書き込む 仮想DOMは一定のタイミングで差分を実際のDOMに反映する 差分だけ適用すればよいのでDOM生成のコストが抑えられ、高速らしい レンダリング差分反映 Virtual DOM React DOM
12.
仮想DOMの隠れたメリット 内部のDOMツリーからブラウザいら ずでHTMLを生成できる
サーバサイドレンダリング
13.
ReactRuby作った理由 Blogエンジン用にサーバサイドレンダリング
したかったから! ぶっちゃけ、他に理由はない CMSだとクローラに食わせたり、SNSで共有 するときのメタデータ出したりしたいので静 的にコンテンツ表示するの大事
14.
ReactRubyのコード例 require '
react_ ruby' require 'sinatra' get '/' do src = File.read( ' component.jsx') ReactRuby.compile( jsx: s r c) erb <<-ERB <html><head></head> <body> <%= ReactRuby.render('<Component />')%> </body> </html> ERB end • まずgemを読み込みます。 • javascriptソースをコンパイルする (ExecJS) • その後render メソッドにXMLタグを 指定してHTMLを出力する • そんだけ!
15.
React感想 Fluxは良い(データフローが単方向だとわかりやすい、デバッグしやす
い) Reactiveプログラミングは意外と分かりやすい Formみたいなのはつらい 単方向なのでデータバインディングしこしこ書かないとダメ Angularのありがたみがよく分かった 部品化しやすい、再利用しやすい ライブラリがそろってくると上のフォームとかも楽になるかも 入れ子可能なのでコンテンツを構造化して配置したいときとかは楽 サーバサイドでレンダリングしたい向きにはよい
16.
おわり ぶっちゃけ クライアントサイドJS
全般 つらい!!!!
Download now