Soumettre la recherche
Mettre en ligne
React+fluxを導入した話
•
1 j'aime
•
4,507 vues
Yuki Ishikawa
Suivre
2015.12.16 JS オジサン #6 二日目
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 31
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
gulp芸
gulp芸
Yuki Ishikawa
サーバを運用する時代は終わった
サーバを運用する時代は終わった
Yuki Ishikawa
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
React.js + Reduxで作るSPA
React.js + Reduxで作るSPA
Shohei Saeki
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
Recommandé
gulp芸
gulp芸
Yuki Ishikawa
サーバを運用する時代は終わった
サーバを運用する時代は終わった
Yuki Ishikawa
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
React.js + Reduxで作るSPA
React.js + Reduxで作るSPA
Shohei Saeki
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
goog.require()を手書きしていいのは小学生まで
goog.require()を手書きしていいのは小学生まで
Teppei Sato
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
Browser oh browser browser
Browser oh browser browser
Teppei Sato
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
Shuichi Takaya
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
Yusuke Wada
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
React.js + Flux
React.js + Flux
dsuke Takaoka
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
Yuki Ishikawa
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
エンジニア勉強会 エスキュービズム
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
ReactでCMSを作ったときにハマったこと
ReactでCMSを作ったときにハマったこと
kazuki matsumura
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
Blazor WebAssembly と Windows Forms でのロジック共有例
Blazor WebAssembly と Windows Forms でのロジック共有例
Koichi Ota
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
PHP フィールドインジェクションに挑戦する PHP勉強会2014
PHP フィールドインジェクションに挑戦する PHP勉強会2014
Yuuki Takezawa
JavaScript 研修
JavaScript 研修
Yuki Ishikawa
【デブサミ福岡B5】コードレビューの進め方~全員で行う品質の維持~
【デブサミ福岡B5】コードレビューの進め方~全員で行う品質の維持~
Developers Summit
Contenu connexe
Tendances
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
goog.require()を手書きしていいのは小学生まで
goog.require()を手書きしていいのは小学生まで
Teppei Sato
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
Browser oh browser browser
Browser oh browser browser
Teppei Sato
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
Shuichi Takaya
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
Yusuke Wada
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
React.js + Flux
React.js + Flux
dsuke Takaoka
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
Yuki Ishikawa
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
エンジニア勉強会 エスキュービズム
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
ReactでCMSを作ったときにハマったこと
ReactでCMSを作ったときにハマったこと
kazuki matsumura
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
Blazor WebAssembly と Windows Forms でのロジック共有例
Blazor WebAssembly と Windows Forms でのロジック共有例
Koichi Ota
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
Tendances
(19)
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
goog.require()を手書きしていいのは小学生まで
goog.require()を手書きしていいのは小学生まで
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
Browser oh browser browser
Browser oh browser browser
React を導入したフロントエンド開発
React を導入したフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
React.js + Flux
React.js + Flux
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
ReactでCMSを作ったときにハマったこと
ReactでCMSを作ったときにハマったこと
今からでも遅くない! React事始め
今からでも遅くない! React事始め
Blazor WebAssembly と Windows Forms でのロジック共有例
Blazor WebAssembly と Windows Forms でのロジック共有例
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Similaire à React+fluxを導入した話
PHP フィールドインジェクションに挑戦する PHP勉強会2014
PHP フィールドインジェクションに挑戦する PHP勉強会2014
Yuuki Takezawa
JavaScript 研修
JavaScript 研修
Yuki Ishikawa
【デブサミ福岡B5】コードレビューの進め方~全員で行う品質の維持~
【デブサミ福岡B5】コードレビューの進め方~全員で行う品質の維持~
Developers Summit
とある Perl Monger の働き方
とある Perl Monger の働き方
Yusuke Wada
DevLOVE iPhoneアプリ勉強会
DevLOVE iPhoneアプリ勉強会
Toshimitsu Takahashi
アジャイル開発やってみた
アジャイル開発やってみた
Arata Fujimura
RESTful API (JAX-RS) 書くだけで仕様書も自動で作られていく話 with MicroProfile Open API
RESTful API (JAX-RS) 書くだけで仕様書も自動で作られていく話 with MicroProfile Open API
Kohei Saito
オブジェクト指向プログラマが今関数型言語を学ばないといけない理由
オブジェクト指向プログラマが今関数型言語を学ばないといけない理由
Kohei Taniguchi
Yapc2012ltthon
Yapc2012ltthon
Junya Murabe
Glass fishで作ったアプリをweblogicに移植してみた
Glass fishで作ったアプリをweblogicに移植してみた
Satoshi Kubo
20120702勉強会 webアプリ作ってみた
20120702勉強会 webアプリ作ってみた
Shugo Numano
jOOQの紹介
jOOQの紹介
Takuya Kitamura
Devとopsをつなぐchat ops
Devとopsをつなぐchat ops
ikikko
Hatena blogdevelopmentflow
Hatena blogdevelopmentflow
Yasuhiro Onishi
HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なこと
Masakazu Muraoka
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
Nishida Kansuke
サブドメイン前提のチーム機能開発で踏んだ OAuthの罠の話 in express
サブドメイン前提のチーム機能開発で踏んだ OAuthの罠の話 in express
Takahiro YAMAGUCHI
LightSwitchでマルチデータソース
LightSwitchでマルチデータソース
Yoshitaka Seo
My cordovaprojectstory
My cordovaprojectstory
Yuichiro Ebihara
MF GeeksNight pplogの話
MF GeeksNight pplogの話
Naoto Koshikawa
Similaire à React+fluxを導入した話
(20)
PHP フィールドインジェクションに挑戦する PHP勉強会2014
PHP フィールドインジェクションに挑戦する PHP勉強会2014
JavaScript 研修
JavaScript 研修
【デブサミ福岡B5】コードレビューの進め方~全員で行う品質の維持~
【デブサミ福岡B5】コードレビューの進め方~全員で行う品質の維持~
とある Perl Monger の働き方
とある Perl Monger の働き方
DevLOVE iPhoneアプリ勉強会
DevLOVE iPhoneアプリ勉強会
アジャイル開発やってみた
アジャイル開発やってみた
RESTful API (JAX-RS) 書くだけで仕様書も自動で作られていく話 with MicroProfile Open API
RESTful API (JAX-RS) 書くだけで仕様書も自動で作られていく話 with MicroProfile Open API
オブジェクト指向プログラマが今関数型言語を学ばないといけない理由
オブジェクト指向プログラマが今関数型言語を学ばないといけない理由
Yapc2012ltthon
Yapc2012ltthon
Glass fishで作ったアプリをweblogicに移植してみた
Glass fishで作ったアプリをweblogicに移植してみた
20120702勉強会 webアプリ作ってみた
20120702勉強会 webアプリ作ってみた
jOOQの紹介
jOOQの紹介
Devとopsをつなぐchat ops
Devとopsをつなぐchat ops
Hatena blogdevelopmentflow
Hatena blogdevelopmentflow
HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なこと
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
サブドメイン前提のチーム機能開発で踏んだ OAuthの罠の話 in express
サブドメイン前提のチーム機能開発で踏んだ OAuthの罠の話 in express
LightSwitchでマルチデータソース
LightSwitchでマルチデータソース
My cordovaprojectstory
My cordovaprojectstory
MF GeeksNight pplogの話
MF GeeksNight pplogの話
Plus de Yuki Ishikawa
Introduction to GPU Programming in Python
Introduction to GPU Programming in Python
Yuki Ishikawa
新婚旅行を支える技術
新婚旅行を支える技術
Yuki Ishikawa
ラマダーン入門
ラマダーン入門
Yuki Ishikawa
ステージング環境のつくりかた
ステージング環境のつくりかた
Yuki Ishikawa
マッカレル de おうちハック
マッカレル de おうちハック
Yuki Ishikawa
スタートアップのくせになまいきだ
スタートアップのくせになまいきだ
Yuki Ishikawa
JavaScript over HTTP/2
JavaScript over HTTP/2
Yuki Ishikawa
コンポーネント時代の CSS 設計
コンポーネント時代の CSS 設計
Yuki Ishikawa
闇の魔術に対する防衛術
闇の魔術に対する防衛術
Yuki Ishikawa
Apple に依存する僕の生存戦略
Apple に依存する僕の生存戦略
Yuki Ishikawa
アニメーションしたい
アニメーションしたい
Yuki Ishikawa
趣きのある Bot
趣きのある Bot
Yuki Ishikawa
Bot に家計を任せる
Bot に家計を任せる
Yuki Ishikawa
時をかけるほと
時をかけるほと
Yuki Ishikawa
peco活用術
peco活用術
Yuki Ishikawa
Botと対話する
Botと対話する
Yuki Ishikawa
端末ビジュアライゼーションのすゝめ
端末ビジュアライゼーションのすゝめ
Yuki Ishikawa
いまさら訊けないWebフォント入門
いまさら訊けないWebフォント入門
Yuki Ishikawa
究極にして至高のWAF
究極にして至高のWAF
Yuki Ishikawa
運用で爆発四散しないためのメタプログラミングとの付き合い方
運用で爆発四散しないためのメタプログラミングとの付き合い方
Yuki Ishikawa
Plus de Yuki Ishikawa
(20)
Introduction to GPU Programming in Python
Introduction to GPU Programming in Python
新婚旅行を支える技術
新婚旅行を支える技術
ラマダーン入門
ラマダーン入門
ステージング環境のつくりかた
ステージング環境のつくりかた
マッカレル de おうちハック
マッカレル de おうちハック
スタートアップのくせになまいきだ
スタートアップのくせになまいきだ
JavaScript over HTTP/2
JavaScript over HTTP/2
コンポーネント時代の CSS 設計
コンポーネント時代の CSS 設計
闇の魔術に対する防衛術
闇の魔術に対する防衛術
Apple に依存する僕の生存戦略
Apple に依存する僕の生存戦略
アニメーションしたい
アニメーションしたい
趣きのある Bot
趣きのある Bot
Bot に家計を任せる
Bot に家計を任せる
時をかけるほと
時をかけるほと
peco活用術
peco活用術
Botと対話する
Botと対話する
端末ビジュアライゼーションのすゝめ
端末ビジュアライゼーションのすゝめ
いまさら訊けないWebフォント入門
いまさら訊けないWebフォント入門
究極にして至高のWAF
究極にして至高のWAF
運用で爆発四散しないためのメタプログラミングとの付き合い方
運用で爆発四散しないためのメタプログラミングとの付き合い方
Dernier
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
Dernier
(8)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
React+fluxを導入した話
1.
React + Flux
を導入した話 2015.12.16 JS オジサン #6 二日目 @hoto17296
2.
2015年 エンジニア流行語(?)大賞
3.
4.
きっかけ
5.
試しに作ってみた http://hotolab.net/TopicTimer
6.
これは楽しい (・ ・)
7.
良さ • 魔法っぽくない • 何をやっているのかだいたいわかる •
少ない API の割に表現の幅が異常に広い • 覚えることが少ない • できることが多い
8.
良くなさ • コード量が増える • 可読性・保守性のために必要なものだ と割り切る •
既存 UI ライブラリとの相性悪い • 使わずに頑張る方針で
9.
ちょうどその頃
10.
業務で開発していたプロダクト • 社内向け SNS
事業 • 一部機能のみスマホビュー対応 • 独自 JS フレームワーク • history.pushState で SPA をやりたかった形跡 • 状態の在り処が複雑怪奇 • データフローが複雑怪奇 • Underscore Template の山
11.
端的に言って ヤバい
12.
React + Flux
で 書き直した
13.
React + Flux
から得られたもの • 可読性・保守性の向上 • 状態を一元管理できるようになった • データフローが整った
14.
React + Flux
すごい
15.
ここからが本題
16.
導入する際に 気をつけたこと
17.
動けばいいってもんじゃない • 僕(設計者)がいなくなったとしても大丈夫? • 機能追加したくなったらできる? •
バグが見つかったらすぐ直せる? • 設計思想を壊さずにメンテできる?
18.
もし自分が 「いまこの瞬間にこのチームに JOIN した駆け出しエンジニア」 だったとしたら、を常に意識
19.
学習コストを下げるために • npm start
で全部済むようにする • コードレビューしやすくする • 使わなくていいものは使わない • jQuery のノリで Ajax できるようにする
20.
npm start で全部済むようにする 「Gulp
の使い方とか知らなくていいから! npm start ってコマンドだけ覚えてたら JS も CSS も全部ビルドできるから!!」
21.
npm start で全部済むようにする Assets
のビルド: みんなできる必要がある Gulp のメンテ: 一人できれば十分 → 多くの人が触る部分を簡単にできるようにする
22.
コードレビューしやすくする • React や
Flux のパラダイムを説明する会を開く • なぜこういうディレクトリ構成になっているか くらいは理解してもらう • 細かい API には触れない • レビュー時のポイントを伝える • 「React コンポーネントは render から読めば なんとなくわかるから!」
23.
使わなくていいものは使わない • react-router • harmony
option (ES2015) • react-bootstrap • Flux フレームワーク
24.
react-router
25.
自作 router
26.
jQuery のノリで Ajax
できるようにする • React も Flux も Ajax の面倒は見てくれない • SuperAgent とか使うのが普通(?) • チームメンバーは jQuery に慣れている • Ajax だけ jQuery 使いたい • でも誤って生 DOM 操作してほしくない
27.
jQuery のノリで Ajax
できるようにする Ajax 機能のみ カスタムビルドした jQuery
28.
jQuery のノリで Ajax
できるようにする
29.
言いたかったこと
30.
大事なこと × 綺麗にかけること ○ どうやって動いているのか 誰が見ても分かること
31.
大事なこと 「いろいろやりたくなる」けど堪える 「本当にやりたいこと」と 「ついでにやりたいこと」を混同しない React + Flux
のパラダイムを導入したいのであって その他もろもろのツールを導入したいわけではない
Télécharger maintenant