RiotJS + CSS #meguroes

RiotJSͱCSS 2016/04/19 Meguro.es #3 @mizuki_r

PROFILE @mizuki_r 5XJUUFS!NJ[VLJ@S (JUIVCSZ@NJ[VLJ OQNNJ[VLJ@S "OHVMBS 3JPU+4·ΘΓͷ࢖͍ख (PUBOEB+4͔Β΍͖ͬͯ·ͨ͠ 2

AGENDA ▸ RiotJSͱ͸ ▸ RiotJS + CSS ▸ RiotJS +
CSS + Webpack ▸ Conclusion

RIOTJSͱ͸ INTRODUCTION

RIOTJSͱ͸ A React-like user interface micro-library ▸ ReactͬΆ͍খ͞ͳUIϥΠϒϥϦ ▸ React͕38.56KBͰRiot͕8.61KBʢhttp://riotjs.com/ja/
▸ API͕গͳ͘ɺֶशίετ͕௿͍ ▸ ඞཁ࠷௿ݶͷػೳͷΈͰߏ੒͞ΕͨɺϛχϚϜελʔτΞο ϓͳײ͡ͷϥΠϒϥϦ

<todo>  <h3>{ opts.title }</h3> <ul> <li each={
item, i in items }>{ item }</li> </ul> <form onsubmit={ add }> <input> <button>Add #{ items.length + 1 }</button> </form>  <script> this.items = [] add(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } </script> <todo>

item, i in items }>{ item }</li> </ul> <form onsubmit={ add }> <input> <button>Add #{ items.length + 1 }</button> </form>  <script> this.items = [] add(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } </script> <todo> ίϯϙʔωϯτΛఆٛ

item, i in items }>{ item }</li> </ul> <form onsubmit={ add }> <input> <button>Add #{ items.length + 1 }</button> </form>  <script> this.items = [] add(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } </script> <todo> DOMͷఆٛ

item, i in items }>{ item }</li> </ul> <form onsubmit={ add }> <input> <button>Add #{ items.length + 1 }</button> </form>  <script> this.items = [] add(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } </script> <todo> ৼΔ෣͍ͷఆٛ

RIOTJSͱ͸ ؆୯ʹ࢖͑Δখ͞ͳϥΠϒϥϦ ▸ JavaScript in HTML ▸ ਺গͳ͍API ▸ lifecycle
(mount, update, updated, unmount) ▸ update ▸ yield ▸ dom events

RIOTJSͱ͸ ·ͱΊ ▸ খͯ͘͞खૣ࢝͘ΊΒΕΔϛχϚϜͳUIϥΠϒϥϦ

RIOTJS+CSS RIOTJSʹ͓͚ΔCSSͷར༻ํ๏

RIOTJS + CSS CSSͷهड़ ▸ λάͷதʹ `<style>` Λهड़͢Δ ▸ `<style>`
ͷதʹCSSΛهड़͢Δ

RIOTJS + CSS CSSͷهड़ <todo>  <h3>{ opts.title
}</h3> <style> todo { display: block } todo h3 { font-size: 120% } </style> <todo>

RIOTJS + CSS Scoped CSSͷهड़ ▸ λάͷதʹ `<style scoped>` Λهड़͢Δ
▸ `<style>` ͷதʹCSSΛهड़͢Δ ▸ `:scope` ͷٖࣅཁૉʹελΠϧΛ౰ͯΔ

RIOTJS + CSS Scoped CSSͷهड़ <todo>  <h3>{
opts.title }</h3> <style scoped> scope: { display: block } h3 { font-size: 120% } </style> <todo>

RIOTJS + CSS λάΛϕʔεͱͨ͠ελΠϦϯά ▸ ͜ͷ̎ͭͷॻ͖ํ͸ಉ݁͡ՌʹͳΔ <todo> 
<h3>{ opts.title }</h3> <style> todo { display: block } todo h3 { font-size: 120% } </style> <todo> <todo>  <h3>{ opts.title }</h3> <style scoped> scope: { display: block } h3 { font-size: 120% } </style> <todo>

RIOTJS + CSS headλά΁ͷૠೖ ▸ λάͷ಺෦ʹهࡌ͞Εͨ `<style>` ͸ `<head>` ͷ຤ඌʹૠ
ೖ͞ΕΔ ▸ Ұ౓ૠೖ͞ΕͨΒɺ࠶౓͸ૠೖ͞Εͳ͍ ▸ shadow-domͰ͸ͳ͍͕ɺ͍ۙΞϓϩʔνΛऔΔ

RIOTJS + CSS ·ͱΊ ▸ λάͷதʹ `<style>` Λهड़͠ɺͦ͜ʹCSSΛॻ͘ ▸ `<style>`
͸ `<head>` ͷ຤ඌʹૠೖ͞ΕΔ ▸ `<style scoped>` Λ࢖͏͜ͱͰɺλά໊ͷهࡌΛলུͰ͖Δ

RIOTJS+CSS+WEBPACK CSSϥΠϒϥϦͱͷ࿈ܞ

RIOTJS + CSS + WEBPACK CSS͸༷ʑͳϥΠϒϥϦʹࢧ͑ΒΕ͍ͯΔ ▸ autopreﬁxer ▸ meta
css ▸ postcss ▸ etc… ͜ΕΒͷԸܙΛ͋·ͣ͞ड͚͍ͨ!!!

RIOTJS + CSS + WEBPACK webpackͷར༻ ▸ ঺հ͸লུ ▸ riotjs-loader
+ style-loader + css-loader + anywhere

RIOTJS + CSS + WEBPACK webpackͷར༻ module: { preLoaders: [
{ test: /\.tag$/, exclude: /node_modules/, loader: 'riotjs- loader' }, ], loaders: [ { test: /\.css$/, exclude: /node_modules/, loader: 'style-loader! css-loader!postcss-loader' } ] }, postcss: () -> return [ require('postcss-calc') require('postcss-nested') require('autoprefixer') ]

RIOTJS + CSS + WEBPACK webpackͷར༻ var style = require(‘./style’)
<todo>  <h3>{ opts.title }</h3> <style>{ style }</style> <todo>

RIOTJS + CSS + WEBPACK webpackΛ࢖͏ϝϦοτ ▸ λάͷఆٛͱɺελΠϧͷఆٛΛҰॹʹ؅ཧͰ͖Δ ▸ σΟϨΫτϦʹࠝแͰ͖Δ
▸ ίϯϙʔωϯτͱͯ͠ɺ৘ใઃܭɾৼΔ෣͍ɾσβΠϯ͕ಠ ཱ͠ɺΞϓϦέʔγϣϯ͔Βૄ݁߹ʹͳΔ

RIOTJS + CSS + WEBPACK ·ͱΊ ▸ webpack࢖͏ͱ͍͍Αʂ ▸ webpackΛ࢖͏ͱίϯϙʔωϯτʹσβΠϯ·Ͱ಺แͰ͖
Δ ▸ ΞϓϦέʔγϣϯͱίϯϙʔωϯτΛૄʹͰ͖Δ

CONCLUSION ·ͱΊͱɺ͜Ε͔ΒͷCSSઃܭ

CONCLUSION RiotJSͱCSSΛ͍͍ײ͡ʹ࿈ܞͤ͞Δํ๏ͷ঺հ ▸ RiotJSͰCSSΛ࢖͏ʹ͸ɺλάʹ `<style>` Λॻ͘ ▸ `<style>` ʹهࡌ͞ΕͨCSS͸ `<head>`
ͷ຤ඌʹૠೖ ▸ webpackΛ࢖ͬͯίϯϙʔωϯτʹσβΠϯΛ࣋ͨͤΔ

CONCLUSION ίϯϙʔωϯτࢦ޲࣌୅ͷCSSઃܭ ▸ ίϯϙʔωϯτʹελΠϧΛӅṭ͢Δ࣌୅ ▸ λάʹରͯ͠ελΠϧΛ౰ͯΔ ▸ ਌ˠࢠʹରͯ͠͸ɺmodiﬁer౳Ͱίϯϙʔωϯτ֎͔Β͸ ಺෦ߏ଄Λҙࣝ͠ͳ͍ૄ݁߹ͳελΠϧ੍ޚ ▸
ίϯϙʔωϯτͱͯ͠৘ใઃܭɾৼΔ෣͍ɾσβΠϯΛந৅ Խ͢Δ͜ͱͰɺͦΕ୯ମͷࠩ͠ସ͑ΛΑΓ؆୯ʹ

CONCLUSION ࠓޙͷ՝୊ ▸ ίϯϙʔωϯτ͸Ͳ͜·ͰͷσβΠϯΛ࣋ͭ΂͖͔ʁ ▸ ৭ʁϨΠΞ΢τʁ༨നʁܗʁ ▸ ͜ͷลΓ͸DDDͷʮڥքΛҾ͘ʯ͋ͨΓͷφϨοδ͕ඞ ཁͦ͏ ▸
ࠓ·ͰҎ্ʹσβΠφͱΤϯδχΞ͕ڠྗͯ͠ઃܭΛ٧Ίͯ ͍͘ඞཁ͕͋Γͦ͏

CONCLUSION ࠷ޙʹ ▸ RiotJS͸؆୯ʹखૣ͘ϓϩτλΠϐϯάͰ͖ΔͷͰ͓͢͢Ί Ͱ͢ʂʂʂ

ۓٸࠂ஌ ͨ͐͝͡ʔ͔Βͷ͓஌Βͤ

6/3ʹGontanda.js #4 ͷ։ ࠵Λ༧ఆͯ͠·͢ʂ @pine613 ͨ͐͝͡ʔ͔Βͷ͓஌Βͤ

ڵຯ͋Δํ͸ͥͻ gotanda.js.org ΁ʂ @pine613 ͨ͐͝͡ʔ͔Βͷ͓஌Βͤ

THANKS!

RiotJS + CSS #meguroes

RiotJS + CSS #meguroes

More Decks by mizuki_r

Other Decks in Technology

Featured

Transcript