SlideShare ist ein Scribd-Unternehmen logo
1 von 49
Downloaden Sie, um offline zu lesen
みんなの
コンポーネント志向
Web開発
Eyes, JAPAN Co.LTD
170615 Web Developers Meeting
Hello,
Hello,
- 伊藤 勇希/Yuki Ito
- acomagu/publmag1
- University of Aizu
- 最近ハマっているまんが:
- 中卒労働者からはじめる高校生活
- 青春のアフター
- がっこうぐらし
コンポーネント志向
コンポーネント志向
・
・
部品
コンポーネント志向
・
・
部品でがんばる
何を?
何を?
HTML?
CSS?
JS?
何を?
HTML?
CSS?
JS?
んぶ!!
CSS HTML JS
style.css script.jsindex.html
CSS HTML JS
CSS HTML JS
Header
CSS HTML JS
Body
Hooter
…
実際にコードを見てみる
HTML/CSS
いいんです!
なぜ?
なぜ?
スコープが分かれているから
このタグの外に
CSSがはみ出さ
ない!
このタグの外に
CSSがはみ出さ
ない!
最高!!!
HTML
HTML
HTMLHTML
<Header /> <Body />
HTML
HTMLHTML
<Header /> <Body />
HTML
HTMLHTML
<Header /> <Body />
<html>
<Header />
<Body />
<Footer />
</html>
index.html
Simplized!
HTML
HTMLHTML
<Header /> <Body />
<html>
<Header />
<Body />
<Footer />
</html>
index.html
Simplized!
神!
JSのはなし
JSのはなし
JavaScirptから見たコンポーネント志向のメリット
JavaScirptから見たコンポーネント志向のメリット
語り尽くせない
JavaScirptから見たコンポーネント志向のメリット
- DOM操作がいらない(jQuery必要ない)
- 片方向データフローによる複雑性の排除
- コンポーネントごとのスコープにより、ソースコードの見通しが
良くなる
- CSSの操作が直感的になる
- Web Componentsの使用によりwindow空間が分割されXSS
等予期しないソースコードの振る舞いの影響を最小限に抑え
ることができる
- イベントハンドラの見通しが良くなる
JavaScirptから見たコンポーネント志向のメリット
- DOM操作がいらない(jQuery必要ない)
- 片方向データフローによる複雑性の排除
- コンポーネントごとのスコープにより、ソースコードの見通しが
良くなる
- CSSの操作が直感的になる
- Web Componentsの使用によりwindow空間が分割されXSS
等予期しないソースコードの振る舞いの影響を最小限に抑え
ることができる
- イベントハンドラの見通しが良くなる
語り尽くせない
JavaScirptから見たコンポーネント志向のメリット
- DOM操作がいらない(jQuery必要ない)
- 片方向データフローによる複雑性の排除
- コンポーネントごとのスコープにより、ソースコードの見通しが
良くなる
- CSSの操作が直感的になる
- Web Componentsの使用によりwindow空間が分割されXSS
等予期しないソースコードの振る舞いの影響を最小限に抑え
ることができる
- イベントハンドラの見通しが良くなる調べてみて!!!
ちなみに
なぜRiot.js?
なぜRiot.js?
デザイナー(コーダー)とエンジニアの分業がしやすい
デザイナー(コーダー)にも、
エンジニアにもメリットがある
ソリューション
みんなの
コンポーネント志向
Web開発
Thanks!

Weitere ähnliche Inhalte

Was ist angesagt?

ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティーヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティーYoshiki Hayama
 
141115 making web site
141115 making web site141115 making web site
141115 making web siteHimi Sato
 
Rubyと俺達の生存戦略 #kana01
Rubyと俺達の生存戦略 #kana01Rubyと俺達の生存戦略 #kana01
Rubyと俺達の生存戦略 #kana01Yoshinori Kawasaki
 
Ms build 触ってみよう
Ms build 触ってみようMs build 触ってみよう
Ms build 触ってみようOda Shinsuke
 
Ms build 色々出来るよ
Ms build 色々出来るよMs build 色々出来るよ
Ms build 色々出来るよOda Shinsuke
 
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップSwapSkills
 

Was ist angesagt? (6)

ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティーヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
 
141115 making web site
141115 making web site141115 making web site
141115 making web site
 
Rubyと俺達の生存戦略 #kana01
Rubyと俺達の生存戦略 #kana01Rubyと俺達の生存戦略 #kana01
Rubyと俺達の生存戦略 #kana01
 
Ms build 触ってみよう
Ms build 触ってみようMs build 触ってみよう
Ms build 触ってみよう
 
Ms build 色々出来るよ
Ms build 色々出来るよMs build 色々出来るよ
Ms build 色々出来るよ
 
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
 

Ähnlich wie みんなのコンポーネント志向 Web開発

業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?Fumio SAGAWA
 
_HTML5で組んでみた_
_HTML5で組んでみた__HTML5で組んでみた_
_HTML5で組んでみた_Kelly Holonic
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶNaoki Kanazawa
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶwebcampusschoo
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶwebcampusschoo
 
IE6をやめようと思ってももう手遅れ
IE6をやめようと思ってももう手遅れIE6をやめようと思ってももう手遅れ
IE6をやめようと思ってももう手遅れMasakazu Muraoka
 
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会 第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会 Shuhei Iitsuka
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶwebcampusschoo
 
HTML5とCSS3でWebが変わる!でも導入は簡単!
HTML5とCSS3でWebが変わる!でも導入は簡単!HTML5とCSS3でWebが変わる!でも導入は簡単!
HTML5とCSS3でWebが変わる!でも導入は簡単!Toshihito Gamo
 
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」Mitsuo Kawashima
 
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.jsグリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.jsYoshinori Kobayashi
 
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎DIVE INTO CODE Corp.
 
Web Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみたWeb Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみたminoru nakanou
 
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)Noriaki UCHIYAMA
 
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことMasakazu Muraoka
 
Html5で変わるいろんなこと
Html5で変わるいろんなことHtml5で変わるいろんなこと
Html5で変わるいろんなことMasakazu Muraoka
 
いまさら聞けないjQuery入門for デザイナー
いまさら聞けないjQuery入門for デザイナーいまさら聞けないjQuery入門for デザイナー
いまさら聞けないjQuery入門for デザイナーAsuka Kobayashi
 
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考えるボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考えるMasakazu Muraoka
 
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!FLOW web planning & design
 
テスト駆動開発始めました!
テスト駆動開発始めました!テスト駆動開発始めました!
テスト駆動開発始めました!Kiichi Kajiura
 

Ähnlich wie みんなのコンポーネント志向 Web開発 (20)

業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
 
_HTML5で組んでみた_
_HTML5で組んでみた__HTML5で組んでみた_
_HTML5で組んでみた_
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
IE6をやめようと思ってももう手遅れ
IE6をやめようと思ってももう手遅れIE6をやめようと思ってももう手遅れ
IE6をやめようと思ってももう手遅れ
 
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会 第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
HTML5とCSS3でWebが変わる!でも導入は簡単!
HTML5とCSS3でWebが変わる!でも導入は簡単!HTML5とCSS3でWebが変わる!でも導入は簡単!
HTML5とCSS3でWebが変わる!でも導入は簡単!
 
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
 
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.jsグリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
 
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
 
Web Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみたWeb Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみた
 
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
 
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
 
Html5で変わるいろんなこと
Html5で変わるいろんなことHtml5で変わるいろんなこと
Html5で変わるいろんなこと
 
いまさら聞けないjQuery入門for デザイナー
いまさら聞けないjQuery入門for デザイナーいまさら聞けないjQuery入門for デザイナー
いまさら聞けないjQuery入門for デザイナー
 
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考えるボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
 
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
 
テスト駆動開発始めました!
テスト駆動開発始めました!テスト駆動開発始めました!
テスト駆動開発始めました!
 

Mehr von Yuki Ito

僕が構文解析にこんなにも時間をかけてしまった理由 〜Yacc/Bisonにおけるノウハウ〜
僕が構文解析にこんなにも時間をかけてしまった理由 〜Yacc/Bisonにおけるノウハウ〜僕が構文解析にこんなにも時間をかけてしまった理由 〜Yacc/Bisonにおけるノウハウ〜
僕が構文解析にこんなにも時間をかけてしまった理由 〜Yacc/Bisonにおけるノウハウ〜Yuki Ito
 
fisher-lazyつくったはなし
fisher-lazyつくったはなしfisher-lazyつくったはなし
fisher-lazyつくったはなしYuki Ito
 
Waylandでも動くキーリマッパーを作りたかった話
Waylandでも動くキーリマッパーを作りたかった話Waylandでも動くキーリマッパーを作りたかった話
Waylandでも動くキーリマッパーを作りたかった話Yuki Ito
 
Simplest API Server "miq"
Simplest API Server "miq"Simplest API Server "miq"
Simplest API Server "miq"Yuki Ito
 
Mutexを実装する implementation of mutex
Mutexを実装する implementation of mutexMutexを実装する implementation of mutex
Mutexを実装する implementation of mutexYuki Ito
 
フロントエンド温泉にサーバーレスでダイブする(Public)
フロントエンド温泉にサーバーレスでダイブする(Public)フロントエンド温泉にサーバーレスでダイブする(Public)
フロントエンド温泉にサーバーレスでダイブする(Public)Yuki Ito
 
NNTPについて簡単すぎる説明
NNTPについて簡単すぎる説明NNTPについて簡単すぎる説明
NNTPについて簡単すぎる説明Yuki Ito
 

Mehr von Yuki Ito (7)

僕が構文解析にこんなにも時間をかけてしまった理由 〜Yacc/Bisonにおけるノウハウ〜
僕が構文解析にこんなにも時間をかけてしまった理由 〜Yacc/Bisonにおけるノウハウ〜僕が構文解析にこんなにも時間をかけてしまった理由 〜Yacc/Bisonにおけるノウハウ〜
僕が構文解析にこんなにも時間をかけてしまった理由 〜Yacc/Bisonにおけるノウハウ〜
 
fisher-lazyつくったはなし
fisher-lazyつくったはなしfisher-lazyつくったはなし
fisher-lazyつくったはなし
 
Waylandでも動くキーリマッパーを作りたかった話
Waylandでも動くキーリマッパーを作りたかった話Waylandでも動くキーリマッパーを作りたかった話
Waylandでも動くキーリマッパーを作りたかった話
 
Simplest API Server "miq"
Simplest API Server "miq"Simplest API Server "miq"
Simplest API Server "miq"
 
Mutexを実装する implementation of mutex
Mutexを実装する implementation of mutexMutexを実装する implementation of mutex
Mutexを実装する implementation of mutex
 
フロントエンド温泉にサーバーレスでダイブする(Public)
フロントエンド温泉にサーバーレスでダイブする(Public)フロントエンド温泉にサーバーレスでダイブする(Public)
フロントエンド温泉にサーバーレスでダイブする(Public)
 
NNTPについて簡単すぎる説明
NNTPについて簡単すぎる説明NNTPについて簡単すぎる説明
NNTPについて簡単すぎる説明
 

みんなのコンポーネント志向 Web開発