Suche senden
Hochladen
みんなのコンポーネント志向 Web開発
•
0 gefällt mir
•
156 views
Y
Yuki Ito
Folgen
170615 Eyes, JAPAN Web Developers Meeting
Weniger lesen
Mehr lesen
Ingenieurwesen
Melden
Teilen
Melden
Teilen
1 von 49
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法
Yoshiko Sarakai
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
Web制作者がandriodのcddを読んでみた
Web制作者がandriodのcddを読んでみた
Masakazu Muraoka
Html5インタラクティブデザイン
Html5インタラクティブデザイン
Maho Inada
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
Empfohlen
10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法
Yoshiko Sarakai
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
Web制作者がandriodのcddを読んでみた
Web制作者がandriodのcddを読んでみた
Masakazu Muraoka
Html5インタラクティブデザイン
Html5インタラクティブデザイン
Maho Inada
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
141115 making web site
141115 making web site
Himi Sato
Rubyと俺達の生存戦略 #kana01
Rubyと俺達の生存戦略 #kana01
Yoshinori Kawasaki
Ms build 触ってみよう
Ms build 触ってみよう
Oda Shinsuke
Ms build 色々出来るよ
Ms build 色々出来るよ
Oda Shinsuke
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
_HTML5で組んでみた_
_HTML5で組んでみた_
Kelly Holonic
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
Naoki Kanazawa
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
IE6をやめようと思ってももう手遅れ
IE6をやめようと思ってももう手遅れ
Masakazu Muraoka
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
Shuhei Iitsuka
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
HTML5とCSS3でWebが変わる!でも導入は簡単!
HTML5とCSS3でWebが変わる!でも導入は簡単!
Toshihito Gamo
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
Mitsuo Kawashima
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
Yoshinori Kobayashi
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
DIVE INTO CODE Corp.
Web Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみた
minoru nakanou
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Masakazu Muraoka
Html5で変わるいろんなこと
Html5で変わるいろんなこと
Masakazu Muraoka
Weitere ähnliche Inhalte
Was ist angesagt?
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
141115 making web site
141115 making web site
Himi Sato
Rubyと俺達の生存戦略 #kana01
Rubyと俺達の生存戦略 #kana01
Yoshinori Kawasaki
Ms build 触ってみよう
Ms build 触ってみよう
Oda Shinsuke
Ms build 色々出来るよ
Ms build 色々出来るよ
Oda Shinsuke
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
Was ist angesagt?
(6)
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
141115 making web site
141115 making web site
Rubyと俺達の生存戦略 #kana01
Rubyと俺達の生存戦略 #kana01
Ms build 触ってみよう
Ms build 触ってみよう
Ms build 色々出来るよ
Ms build 色々出来るよ
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
Ähnlich wie みんなのコンポーネント志向 Web開発
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
_HTML5で組んでみた_
_HTML5で組んでみた_
Kelly Holonic
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
Naoki Kanazawa
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
IE6をやめようと思ってももう手遅れ
IE6をやめようと思ってももう手遅れ
Masakazu Muraoka
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
Shuhei Iitsuka
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
HTML5とCSS3でWebが変わる!でも導入は簡単!
HTML5とCSS3でWebが変わる!でも導入は簡単!
Toshihito Gamo
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
Mitsuo Kawashima
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
Yoshinori Kobayashi
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
DIVE INTO CODE Corp.
Web Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみた
minoru nakanou
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Masakazu Muraoka
Html5で変わるいろんなこと
Html5で変わるいろんなこと
Masakazu Muraoka
いまさら聞けないjQuery入門for デザイナー
いまさら聞けないjQuery入門for デザイナー
Asuka Kobayashi
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
Masakazu Muraoka
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
FLOW web planning & design
テスト駆動開発始めました!
テスト駆動開発始めました!
Kiichi Kajiura
Ähnlich wie みんなのコンポーネント志向 Web開発
(20)
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
_HTML5で組んでみた_
_HTML5で組んでみた_
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
IE6をやめようと思ってももう手遅れ
IE6をやめようと思ってももう手遅れ
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
HTML5とCSS3でWebが変わる!でも導入は簡単!
HTML5とCSS3でWebが変わる!でも導入は簡単!
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
Web Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみた
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Html5で変わるいろんなこと
Html5で変わるいろんなこと
いまさら聞けないjQuery入門for デザイナー
いまさら聞けないjQuery入門for デザイナー
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
テスト駆動開発始めました!
テスト駆動開発始めました!
Mehr von Yuki Ito
僕が構文解析にこんなにも時間をかけてしまった理由 〜Yacc/Bisonにおけるノウハウ〜
僕が構文解析にこんなにも時間をかけてしまった理由 〜Yacc/Bisonにおけるノウハウ〜
Yuki Ito
fisher-lazyつくったはなし
fisher-lazyつくったはなし
Yuki Ito
Waylandでも動くキーリマッパーを作りたかった話
Waylandでも動くキーリマッパーを作りたかった話
Yuki Ito
Simplest API Server "miq"
Simplest API Server "miq"
Yuki Ito
Mutexを実装する implementation of mutex
Mutexを実装する implementation of mutex
Yuki Ito
フロントエンド温泉にサーバーレスでダイブする(Public)
フロントエンド温泉にサーバーレスでダイブする(Public)
Yuki Ito
NNTPについて簡単すぎる説明
NNTPについて簡単すぎる説明
Yuki Ito
Mehr von Yuki Ito
(7)
僕が構文解析にこんなにも時間をかけてしまった理由 〜Yacc/Bisonにおけるノウハウ〜
僕が構文解析にこんなにも時間をかけてしまった理由 〜Yacc/Bisonにおけるノウハウ〜
fisher-lazyつくったはなし
fisher-lazyつくったはなし
Waylandでも動くキーリマッパーを作りたかった話
Waylandでも動くキーリマッパーを作りたかった話
Simplest API Server "miq"
Simplest API Server "miq"
Mutexを実装する implementation of mutex
Mutexを実装する implementation of mutex
フロントエンド温泉にサーバーレスでダイブする(Public)
フロントエンド温泉にサーバーレスでダイブする(Public)
NNTPについて簡単すぎる説明
NNTPについて簡単すぎる説明
みんなのコンポーネント志向 Web開発
1.
みんなの コンポーネント志向 Web開発 Eyes, JAPAN Co.LTD 170615
Web Developers Meeting
2.
Hello,
3.
Hello, - 伊藤 勇希/Yuki
Ito - acomagu/publmag1 - University of Aizu - 最近ハマっているまんが: - 中卒労働者からはじめる高校生活 - 青春のアフター - がっこうぐらし
4.
コンポーネント志向
5.
コンポーネント志向 ・ ・ 部品
6.
コンポーネント志向 ・ ・ 部品でがんばる
7.
何を?
8.
何を? HTML? CSS? JS?
9.
何を? HTML? CSS? JS? んぶ!!
10.
CSS HTML JS
11.
style.css script.jsindex.html CSS HTML
JS
12.
CSS HTML JS
13.
Header CSS HTML JS Body Hooter …
14.
実際にコードを見てみる
15.
HTML/CSS
16.
17.
18.
19.
20.
21.
22.
23.
いいんです!
24.
なぜ?
25.
なぜ? スコープが分かれているから
26.
このタグの外に CSSがはみ出さ ない!
27.
このタグの外に CSSがはみ出さ ない! 最高!!!
28.
29.
HTML
30.
HTML HTMLHTML <Header /> <Body
/>
31.
HTML HTMLHTML <Header /> <Body
/>
32.
HTML HTMLHTML <Header /> <Body
/> <html> <Header /> <Body /> <Footer /> </html> index.html Simplized!
33.
HTML HTMLHTML <Header /> <Body
/> <html> <Header /> <Body /> <Footer /> </html> index.html Simplized! 神!
34.
JSのはなし
35.
JSのはなし
36.
JavaScirptから見たコンポーネント志向のメリット
37.
JavaScirptから見たコンポーネント志向のメリット 語り尽くせない
38.
JavaScirptから見たコンポーネント志向のメリット - DOM操作がいらない(jQuery必要ない) - 片方向データフローによる複雑性の排除 -
コンポーネントごとのスコープにより、ソースコードの見通しが 良くなる - CSSの操作が直感的になる - Web Componentsの使用によりwindow空間が分割されXSS 等予期しないソースコードの振る舞いの影響を最小限に抑え ることができる - イベントハンドラの見通しが良くなる
39.
JavaScirptから見たコンポーネント志向のメリット - DOM操作がいらない(jQuery必要ない) - 片方向データフローによる複雑性の排除 -
コンポーネントごとのスコープにより、ソースコードの見通しが 良くなる - CSSの操作が直感的になる - Web Componentsの使用によりwindow空間が分割されXSS 等予期しないソースコードの振る舞いの影響を最小限に抑え ることができる - イベントハンドラの見通しが良くなる 語り尽くせない
40.
JavaScirptから見たコンポーネント志向のメリット - DOM操作がいらない(jQuery必要ない) - 片方向データフローによる複雑性の排除 -
コンポーネントごとのスコープにより、ソースコードの見通しが 良くなる - CSSの操作が直感的になる - Web Componentsの使用によりwindow空間が分割されXSS 等予期しないソースコードの振る舞いの影響を最小限に抑え ることができる - イベントハンドラの見通しが良くなる調べてみて!!!
41.
ちなみに
42.
43.
44.
なぜRiot.js?
45.
なぜRiot.js? デザイナー(コーダー)とエンジニアの分業がしやすい
46.
47.
デザイナー(コーダー)にも、 エンジニアにもメリットがある ソリューション
48.
みんなの コンポーネント志向 Web開発
49.
Thanks!
Jetzt herunterladen