リポジトリのURLはこちらです https://github.com/sawa-zen/style-guide
React Sketch.appͰσβΠϯΨΠυϥΠϯΛ࡞ͬͯΈͨגࣜձࣾϝϧϖΠ ϑϩϯτΤϯυΤϯδχΞ@sawa-zen@sawa-zen (2018/4/22) Roppongi.js
View Slide
@sawa-zenॴଐɿגࣜձࣾϝϧϖΠ৬छɿϑϩϯτΤϯυΤϯδχΞ/ΠϯλϥΫγϣϯσβΠφʔThree.jsReactSketchAppBlenderYouTuberେ͖@sawa-zen (2018/4/22) Roppongi.js
React Sketch.appͬͯͬͯΔʁ@sawa-zen (2018/4/22) Roppongi.js
React Sketch.appͱ• ReactͰSketchσβΠϯΛѻ͑Δπʔϧ• airbnbࣾͷOSS• SketchϓϥάΠϯΛॻ͖ग़ͤΔ• ه๏΄΅ReactNa0veͱಉ͡@sawa-zen (2018/4/22) Roppongi.js
import React from 'react';import { View, Text, render } from 'react-sketchapp';export default function(context) {render(Sample Text,context.document.currentPage());}@sawa-zen (2018/4/22) Roppongi.js
React Sketch.app͍͍ࣄͩΒ͚!!• ίʔυͳͷͰόʔδϣϯཧͰ͖ͯ࠷ߴ• σβΠϯमਖ਼ίʔυϨϏϡʔͰ͖ͯ࠷ߴ• ΤϯδχΞͰσβΠϯमਖ਼Ͱ͖ͯ࠷ߴ@sawa-zen (2018/4/22) Roppongi.js
React Sketch.app͍͍ࣄͩΒ͚!!• ίʔυͳͷͰόʔδϣϯཧͰ͖ͯ࠷ߴ• σβΠϯमਖ਼ίʔυϨϏϡʔͰ͖ͯ࠷ߴ• ΤϯδχΞͰσβΠϯमਖ਼Ͱ͖ͯ࠷ߴશ෦͜ΕͰॻ͚͍͍ͷʹ@sawa-zen (2018/4/22) Roppongi.js
΄Μͱʹʁ@sawa-zen (2018/4/22) Roppongi.js
React Sketch.appͦΜͳ͘ͳ͍!!• σβΠφʔJSΛ֮͑Δඞཁ͕͋Δ• σβΠϯͱΫϥΠΞϯτͷೋख࣮ؒ• ײతʹσβΠϯͰ͖ͳ͍@sawa-zen (2018/4/22) Roppongi.js
શͯReact͠ΜͲ͍...! !@sawa-zen (2018/4/22) Roppongi.js
σβΠϯΨΠυϥΠϯ͚ͩͳΒ...ʁ@sawa-zen (2018/4/22) Roppongi.js
@sawa-zen (2018/4/22) Roppongi.js
ReactͰॻ͍ͯΈ·ͨ͠@sawa-zen (2018/4/22) Roppongi.js
ReactͰΨΠυϥΠϯΛ࡞ͬͯΈͯྑ͔ͬͨ͜ͱ@sawa-zen (2018/4/22) Roppongi.js
① ελΠϧ͕ίʔυͱͯ͠ڞ༗Ͱ͖ΔnodeϞδϡʔϧͱͯ͠ڞ༗͢ΕελΠϧΛίʔυͯ͠ѻ͑Δ• color• font-size, font-weight• margin, padding• etc...@sawa-zen (2018/4/22) Roppongi.js
② ϓϥάΠϯͱͯ͠ڞ༗Ͱ͖ΔϓϥάΠϯΛ࣮ߦ͢Δ͚ͩͰҎԼ͕̎ͭηοτͰੜͰ͖ΔͨΊɺϓϩδΣΫτΛލ͍ͩσβΠϯͷ౷ҰԽΛਤΓ͍͢ɻ• ελΠϧΨΠυϥΠϯ• γϯϘϧ@sawa-zen (2018/4/22) Roppongi.js
③ ࡞Γ͍͢܁Γฦ͠ViewΛฒΔ࡞ۀ͕ଟ͍ͷͰίʔυͰදݱ͢Δํ͕͍@sawa-zen (2018/4/22) Roppongi.js
④ ແବͳγϯϘϧ͕Βͳ͍ޮԽͷҝʹ࡞͍ͯͨ͠γϯϘϧ͕ίʔυʹஔͰ͖Δ@sawa-zen (2018/4/22) Roppongi.js
՝• ίϯϙʔωϯτͷࡉ͔ͳσβΠϯ͔ΒΤϯδχΞͰ͍͠• σβΠφʔ͞Μͱີͳίϛϡχέʔγϣϯ͕ඞਢ• ݁ہJSΛσβΠφʔ͞Μ৮ΔՄೳੑ͕͋Δ• ͦͦ࡞ͬͯΔ༨༟͕ແ͍ࣄ͕ଟ͍@sawa-zen (2018/4/22) Roppongi.js
ͰखԠ͑͋ͬͨ@sawa-zen (2018/4/22) Roppongi.js
ͬͱϓϩμΫτͷUIΛྑ͍͖͍ͯͨ͘͠ʂ@sawa-zen (2018/4/22) Roppongi.js
࣮ۀʹಋೖ͢ΔͨΊʹʁ@sawa-zen (2018/4/22) Roppongi.js
UIͷ৴པੑ্Λ୲͏৽෦ॺͷര͔͠ͳ͍ʂ@sawa-zen (2018/4/22) Roppongi.js
Site Reliability EngineeringʢSREʣ↓UI Reliability EngineeringʢUREʣ@sawa-zen (2018/4/22) Roppongi.js
ฐࣾʹ৽෦ॺઃཱݕ౼͓ئ͍͠·͢ʂ!@sawa-zen (2018/4/22) Roppongi.js
ϝϧϖΠͰ #z-youtuber ʹೖΓ͍ͨํืूͯ͠·͢@sawa-zen (2018/4/22) Roppongi.js
GithubϦϙδτϦh"ps://github.com/sawa-zen/style-guide@sawa-zen (2018/4/22) Roppongi.js