Slide 1
Slide 1 text
<ϋ-υϧΊΧελϜΤϨϝϯτͷ࢝Ίํ />
2017-03-03 ౡϑϩϯτΤϯυษڧձ Vol.7
Slide 2
Slide 2 text
ͻΉΒ ͱͻ͜
• フロントエンドは人手不足のときだけ
• iOSも最近仕事でやってない
• プログラミング チョットデキル
Slide 3
Slide 3 text
̍ߦͰΘ͔ΔΧελϜΤϨϝϯτ
Slide 4
Slide 4 text
独自タグが作れる
Slide 5
Slide 5 text
Hello, World
Slide 6
Slide 6 text
簡単
Slide 7
Slide 7 text
2ߦͰͭ͘ΔΧελϜΤϨϝϯτ
Slide 8
Slide 8 text
class MyTag extends HTMLElement {}
customElements.define('my-tag', MyTag);
Slide 9
Slide 9 text
簡単
Slide 10
Slide 10 text
書かなくても動く
Slide 11
Slide 11 text
書かなくても動く
むしろ、書くと一部のブラウザで動かない
Slide 12
Slide 12 text
ؒҧͬͯͳ͘ͳ͍ೖҊ
Slide 13
Slide 13 text
ウェブアプリケーションなら
カスタム要素でマークアップ
していいのでは?
Slide 15
Slide 15 text
my-app {
display: block;
background-color: #eee;
width: 300px;
}
my-contact {
display: block;
margin: 10px 10px 0 10px;
background-color: white;
}
my-contact > my-user {
padding: 4px;
font-size: 10px;
}
my-contact > my-header {
font-size: 10px;
}
Slide 16
Slide 16 text
/* ͳ͍͍ͯ͘ɻͱ͍͏͔IEͩͱΤϥʔʹͳΔ
class MyApp extends HTMLElement {}
customElements.define('my-app', MyApp);
*/
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
https://playcode.io/6719
Slide 19
Slide 19 text
無意味なdivの代わりに
Slide 20
Slide 20 text
無意味なdivの代わりに
要するにBEMのBlockの代わりな感じ
Slide 21
Slide 21 text
͓͖͍ͬͯͨ
ΧελϜΤϨϝϯτͷ̏ͭ͜ͱ
Slide 22
Slide 22 text
独自タグの名前には
ハイフンを含む必要がある
Slide 23
Slide 23 text
Slide 24
Slide 24 text
IUUQTBGSBNFJP
Slide 25
Slide 25 text
<
Slide 26
Slide 26 text
b-frameとかz-frame
とったもの勝ちなのでは
Slide 27
Slide 27 text
カスタムエレメントを
定義する前に利用できる
Slide 28
Slide 28 text
/* ͳ͍͍ͯ͘ɻͱ͍͏͔IEͩͱΤϥʔʹͳΔ
class MyApp extends HTMLElement {}
customElements.define('my-app', MyApp);
*/ /* ఆٛલʹͳΔͷͰΤϥʔʹͳΒͳ͍ */
Slide 29
Slide 29 text
まだ標準化されてない
Slide 30
Slide 30 text
APIが変わるかもなので注意
Slide 31
Slide 31 text
v1 apiの対応ブラウザ
• Safari 10.1 以降 (未リリース?)
• Google Chrome 54 以降
• Google for Android 55 以降
• Opera 41 以降
IUUQTIUNMTQFDXIBUXHPSHNVMUJQBHFTDSJQUJOHIUNMDVTUPNFMFNFOUT
Slide 32
Slide 32 text
·ͱΊ
Slide 33
Slide 33 text
カスタムエレメント
• 独自タグをつくれます
• 必ず名前にハイフンを含みます
• 定義してない独自タグをつかうと
• 後で定義されるはずの要素
• CSS当てるだけなら使える
• 場所によっては使えなくはない
Slide 34
Slide 34 text
NEXT STEP
Slide 35
Slide 35 text
Shadow DOM
Web Component