SlideShare a Scribd company logo

20160421 react勉強会

2016/04/21 開催のReact.js & AngularJSの勉強会資料です

1 of 19
Download to read offline
React.jsコンポーネント設
計のツボ
•
•
オンライン
顧問 税理士・社労士・弁理士・行政書士・司法書士
本⽇の内容
1. 組織のスキルセット
2. 学ぶステップ
3. props, state, fluxアーキテクチャ
1. 組織のスキルセット
• HTMLとCSSの専⾨家 JavaScript: △ の⼈
よくあるスキルセット
デザイナー、HTML/CSSコーダー
• JavaScript: ○ HTML: △ CSS: × の⼈
サーバーサイドエンジニア
だけ だと…
• デザイン上のエレメント構成
• 再利⽤や責務、テストのしやすさ
を考慮したコンポーネント分割
ほぼ無理
両立させる必要がある

Recommended

Ciじゃない方のJenkins
Ciじゃない方のJenkinsCiじゃない方のJenkins
Ciじゃない方のJenkinsKatsuhiro Miura
 
Net なプロジェクトでも jenkins を使ってみた
Net なプロジェクトでも jenkins を使ってみたNet なプロジェクトでも jenkins を使ってみた
Net なプロジェクトでも jenkins を使ってみたOda Shinsuke
 
Jenkins User Conference 東京 2015
Jenkins User Conference 東京 2015Jenkins User Conference 東京 2015
Jenkins User Conference 東京 2015Kohsuke Kawaguchi
 
Jenkinsユーザカンファレンス2015 前座資料
Jenkinsユーザカンファレンス2015 前座資料Jenkinsユーザカンファレンス2015 前座資料
Jenkinsユーザカンファレンス2015 前座資料ikikko
 

More Related Content

What's hot

Infrastrucure as a CodeにおけるJenkinsの役割
Infrastrucure as a CodeにおけるJenkinsの役割Infrastrucure as a CodeにおけるJenkinsの役割
Infrastrucure as a CodeにおけるJenkinsの役割Takashi Honda
 
Jenkinsで始める継続的デリバリーと実践の道程
Jenkinsで始める継続的デリバリーと実践の道程Jenkinsで始める継続的デリバリーと実践の道程
Jenkinsで始める継続的デリバリーと実践の道程Masanori Satoh
 
Jenkins使ってみた~Windows編~
Jenkins使ってみた~Windows編~Jenkins使ってみた~Windows編~
Jenkins使ってみた~Windows編~Yuta Matsumura
 
継続的インテグレーションとテストの話
継続的インテグレーションとテストの話継続的インテグレーションとテストの話
継続的インテグレーションとテストの話Preferred Networks
 
[DO02] Jenkins PipelineとBlue Oceanによる、フルスクラッチからの継続的デリバリ
[DO02] Jenkins PipelineとBlue Oceanによる、フルスクラッチからの継続的デリバリ[DO02] Jenkins PipelineとBlue Oceanによる、フルスクラッチからの継続的デリバリ
[DO02] Jenkins PipelineとBlue Oceanによる、フルスクラッチからの継続的デリバリde:code 2017
 
Javaユーザに贈るJenkins 25のTips
Javaユーザに贈るJenkins 25のTipsJavaユーザに贈るJenkins 25のTips
Javaユーザに贈るJenkins 25のTipsMasanori Satoh
 
Multibranch Pipeline with Docker 入門編
Multibranch Pipeline with Docker 入門編Multibranch Pipeline with Docker 入門編
Multibranch Pipeline with Docker 入門編kimulla
 
改訂第3版 Jenkins 実践入門 what's newから見るJenkinsのUpdate
改訂第3版 Jenkins 実践入門 what's newから見るJenkinsのUpdate改訂第3版 Jenkins 実践入門 what's newから見るJenkinsのUpdate
改訂第3版 Jenkins 実践入門 what's newから見るJenkinsのUpdateYuki Iwanari
 
Visual studioonlineとwebサイトで始めるci/cdの第一歩
Visual studioonlineとwebサイトで始めるci/cdの第一歩Visual studioonlineとwebサイトで始めるci/cdの第一歩
Visual studioonlineとwebサイトで始めるci/cdの第一歩Kazunori Hamamoto
 
Startup jenkins!
Startup jenkins!Startup jenkins!
Startup jenkins!Kanu orz
 
Jenkins 2.0 Pipeline & Blue Ocean
Jenkins 2.0 Pipeline & Blue OceanJenkins 2.0 Pipeline & Blue Ocean
Jenkins 2.0 Pipeline & Blue OceanAkihiko Horiuchi
 
Jenkinsを利用したCI、弊社導入事例
Jenkinsを利用したCI、弊社導入事例Jenkinsを利用したCI、弊社導入事例
Jenkinsを利用したCI、弊社導入事例Ryoichi Obara
 
jenkinsのすゝめ - 継続的インテグレーションと継続的デリバリー
jenkinsのすゝめ - 継続的インテグレーションと継続的デリバリーjenkinsのすゝめ - 継続的インテグレーションと継続的デリバリー
jenkinsのすゝめ - 継続的インテグレーションと継続的デリバリーJunya Suzuki
 
How to create your own Azure Pipeline's image
How to create your own Azure Pipeline's imageHow to create your own Azure Pipeline's image
How to create your own Azure Pipeline's imageKazushi Kamegawa
 
Jenkins user conference 東京
Jenkins user conference 東京Jenkins user conference 東京
Jenkins user conference 東京Kohsuke Kawaguchi
 
Jenkins実践入門目次チラ見せしちゃいます
Jenkins実践入門目次チラ見せしちゃいますJenkins実践入門目次チラ見せしちゃいます
Jenkins実践入門目次チラ見せしちゃいますMasanori Satoh
 
Rancherでwindows server上のコンテナを管理できるか
Rancherでwindows server上のコンテナを管理できるかRancherでwindows server上のコンテナを管理できるか
Rancherでwindows server上のコンテナを管理できるかTakashi Kanai
 
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話JustSystems Corporation
 
Jenkins実践入門 第二版 What's New
Jenkins実践入門 第二版 What's NewJenkins実践入門 第二版 What's New
Jenkins実践入門 第二版 What's NewMasanori Satoh
 

What's hot (20)

Infrastrucure as a CodeにおけるJenkinsの役割
Infrastrucure as a CodeにおけるJenkinsの役割Infrastrucure as a CodeにおけるJenkinsの役割
Infrastrucure as a CodeにおけるJenkinsの役割
 
Jenkinsで始める継続的デリバリーと実践の道程
Jenkinsで始める継続的デリバリーと実践の道程Jenkinsで始める継続的デリバリーと実践の道程
Jenkinsで始める継続的デリバリーと実践の道程
 
Jenkins使ってみた~Windows編~
Jenkins使ってみた~Windows編~Jenkins使ってみた~Windows編~
Jenkins使ってみた~Windows編~
 
継続的インテグレーションとテストの話
継続的インテグレーションとテストの話継続的インテグレーションとテストの話
継続的インテグレーションとテストの話
 
[DO02] Jenkins PipelineとBlue Oceanによる、フルスクラッチからの継続的デリバリ
[DO02] Jenkins PipelineとBlue Oceanによる、フルスクラッチからの継続的デリバリ[DO02] Jenkins PipelineとBlue Oceanによる、フルスクラッチからの継続的デリバリ
[DO02] Jenkins PipelineとBlue Oceanによる、フルスクラッチからの継続的デリバリ
 
Javaユーザに贈るJenkins 25のTips
Javaユーザに贈るJenkins 25のTipsJavaユーザに贈るJenkins 25のTips
Javaユーザに贈るJenkins 25のTips
 
Multibranch Pipeline with Docker 入門編
Multibranch Pipeline with Docker 入門編Multibranch Pipeline with Docker 入門編
Multibranch Pipeline with Docker 入門編
 
改訂第3版 Jenkins 実践入門 what's newから見るJenkinsのUpdate
改訂第3版 Jenkins 実践入門 what's newから見るJenkinsのUpdate改訂第3版 Jenkins 実践入門 what's newから見るJenkinsのUpdate
改訂第3版 Jenkins 実践入門 what's newから見るJenkinsのUpdate
 
Visual studioonlineとwebサイトで始めるci/cdの第一歩
Visual studioonlineとwebサイトで始めるci/cdの第一歩Visual studioonlineとwebサイトで始めるci/cdの第一歩
Visual studioonlineとwebサイトで始めるci/cdの第一歩
 
Startup jenkins!
Startup jenkins!Startup jenkins!
Startup jenkins!
 
Jenkins 2.0 Pipeline & Blue Ocean
Jenkins 2.0 Pipeline & Blue OceanJenkins 2.0 Pipeline & Blue Ocean
Jenkins 2.0 Pipeline & Blue Ocean
 
Jenkinsstudy#4kokawa
Jenkinsstudy#4kokawaJenkinsstudy#4kokawa
Jenkinsstudy#4kokawa
 
Jenkinsを利用したCI、弊社導入事例
Jenkinsを利用したCI、弊社導入事例Jenkinsを利用したCI、弊社導入事例
Jenkinsを利用したCI、弊社導入事例
 
jenkinsのすゝめ - 継続的インテグレーションと継続的デリバリー
jenkinsのすゝめ - 継続的インテグレーションと継続的デリバリーjenkinsのすゝめ - 継続的インテグレーションと継続的デリバリー
jenkinsのすゝめ - 継続的インテグレーションと継続的デリバリー
 
How to create your own Azure Pipeline's image
How to create your own Azure Pipeline's imageHow to create your own Azure Pipeline's image
How to create your own Azure Pipeline's image
 
Jenkins user conference 東京
Jenkins user conference 東京Jenkins user conference 東京
Jenkins user conference 東京
 
Jenkins実践入門目次チラ見せしちゃいます
Jenkins実践入門目次チラ見せしちゃいますJenkins実践入門目次チラ見せしちゃいます
Jenkins実践入門目次チラ見せしちゃいます
 
Rancherでwindows server上のコンテナを管理できるか
Rancherでwindows server上のコンテナを管理できるかRancherでwindows server上のコンテナを管理できるか
Rancherでwindows server上のコンテナを管理できるか
 
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
 
Jenkins実践入門 第二版 What's New
Jenkins実践入門 第二版 What's NewJenkins実践入門 第二版 What's New
Jenkins実践入門 第二版 What's New
 

Viewers also liked

Re: 運用に自動化を求めるのは間違っているだろうか
Re: 運用に自動化を求めるのは間違っているだろうかRe: 運用に自動化を求めるのは間違っているだろうか
Re: 運用に自動化を求めるのは間違っているだろうかMasahito Zembutsu
 
Intoroduction to React.js
Intoroduction to React.jsIntoroduction to React.js
Intoroduction to React.jsYuto Matsukubo
 
とりあえず始めるAngular2
とりあえず始めるAngular2とりあえず始めるAngular2
とりあえず始めるAngular2Hayashi Yuichi
 
Management 3.0 - How to Energize People
Management 3.0 - How to Energize PeopleManagement 3.0 - How to Energize People
Management 3.0 - How to Energize PeopleStefan Nüsperling
 
React JS and why it's awesome
React JS and why it's awesomeReact JS and why it's awesome
React JS and why it's awesomeAndrew Hull
 
HoloLens x Graphics 入門
HoloLens x Graphics 入門HoloLens x Graphics 入門
HoloLens x Graphics 入門hecomi
 

Viewers also liked (6)

Re: 運用に自動化を求めるのは間違っているだろうか
Re: 運用に自動化を求めるのは間違っているだろうかRe: 運用に自動化を求めるのは間違っているだろうか
Re: 運用に自動化を求めるのは間違っているだろうか
 
Intoroduction to React.js
Intoroduction to React.jsIntoroduction to React.js
Intoroduction to React.js
 
とりあえず始めるAngular2
とりあえず始めるAngular2とりあえず始めるAngular2
とりあえず始めるAngular2
 
Management 3.0 - How to Energize People
Management 3.0 - How to Energize PeopleManagement 3.0 - How to Energize People
Management 3.0 - How to Energize People
 
React JS and why it's awesome
React JS and why it's awesomeReact JS and why it's awesome
React JS and why it's awesome
 
HoloLens x Graphics 入門
HoloLens x Graphics 入門HoloLens x Graphics 入門
HoloLens x Graphics 入門
 

Similar to 20160421 react勉強会

React es2015
React es2015React es2015
React es2015t-onizawa
 
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSTakeharu Igari
 
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道Hideki Akiba
 
Om Next ~React.jsを超えて
Om Next ~React.jsを超えてOm Next ~React.jsを超えて
Om Next ~React.jsを超えてKazuki Tsutsumi
 
WebComponentsとPolymer
WebComponentsとPolymerWebComponentsとPolymer
WebComponentsとPolymerTakahiro Maki
 
大規模なJavaScript開発の話
大規模なJavaScript開発の話大規模なJavaScript開発の話
大規模なJavaScript開発の話terurou
 
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたサーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたItaru Kitagawa
 
アセットビルドパイプラインについて考えてみる
アセットビルドパイプラインについて考えてみるアセットビルドパイプラインについて考えてみる
アセットビルドパイプラインについて考えてみるRYUTARO OSAFUNE
 
SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介Tadahiro Higuchi
 
多分モダンなWebアプリ開発
多分モダンなWebアプリ開発多分モダンなWebアプリ開発
多分モダンなWebアプリ開発tak-nakamura
 
ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説Akira Inoue
 
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Akira Inoue
 
フロント作業の効率化
フロント作業の効率化フロント作業の効率化
フロント作業の効率化Yuto Yoshinari
 
JavaScript And Keywords
JavaScript And KeywordsJavaScript And Keywords
JavaScript And Keywordsuupaa
 
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...Building asp.net core blazor and elasticsearch elasticsearch using visual stu...
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...Shotaro Suzuki
 
Information20120312
Information20120312Information20120312
Information20120312b-slash
 
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方Masakazu Muraoka
 
DynamoDBの初心者に伝えたい初めて触るときの勘所
DynamoDBの初心者に伝えたい初めて触るときの勘所DynamoDBの初心者に伝えたい初めて触るときの勘所
DynamoDBの初心者に伝えたい初めて触るときの勘所Ryo Sasaki
 

Similar to 20160421 react勉強会 (20)

React es2015
React es2015React es2015
React es2015
 
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
 
BPStudy20121221
BPStudy20121221BPStudy20121221
BPStudy20121221
 
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
 
Om Next ~React.jsを超えて
Om Next ~React.jsを超えてOm Next ~React.jsを超えて
Om Next ~React.jsを超えて
 
WebComponentsとPolymer
WebComponentsとPolymerWebComponentsとPolymer
WebComponentsとPolymer
 
大規模なJavaScript開発の話
大規模なJavaScript開発の話大規模なJavaScript開発の話
大規模なJavaScript開発の話
 
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたサーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
 
アセットビルドパイプラインについて考えてみる
アセットビルドパイプラインについて考えてみるアセットビルドパイプラインについて考えてみる
アセットビルドパイプラインについて考えてみる
 
SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介
 
多分モダンなWebアプリ開発
多分モダンなWebアプリ開発多分モダンなWebアプリ開発
多分モダンなWebアプリ開発
 
Web
WebWeb
Web
 
ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説
 
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
 
フロント作業の効率化
フロント作業の効率化フロント作業の効率化
フロント作業の効率化
 
JavaScript And Keywords
JavaScript And KeywordsJavaScript And Keywords
JavaScript And Keywords
 
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...Building asp.net core blazor and elasticsearch elasticsearch using visual stu...
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...
 
Information20120312
Information20120312Information20120312
Information20120312
 
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
 
DynamoDBの初心者に伝えたい初めて触るときの勘所
DynamoDBの初心者に伝えたい初めて触るときの勘所DynamoDBの初心者に伝えたい初めて触るときの勘所
DynamoDBの初心者に伝えたい初めて触るときの勘所
 

20160421 react勉強会