2018-11-03にVueFesJapan2018にてお話しました
noteΛNuxt.jsͰ࠶ߏஙͨ͠VueFesJapan2018Ҫ (@fukuiretu)
View Slide
Ҫ (@fukuiretu)• piece of cake, inc.• since 2015.3~• Engineer◦ Rails occasionally AWS◦ Vue.js history 7 months◦ Nuxt.js history 7 months• Live in Aomori◦ RemoteWorker
͍͔ͭ੨ͰVue.jsͷΠϕϯτΓ͍ͨ
ΫϦΤΠλʔɺϝσΟΞͷͨΊͷ$$ϓϥοτϑΥʔϜ
ΫϦΤΠλʔɺϝσΟΞͷͨΊͷ$$ϓϥοτϑΥʔϜ• จষɺࣸਅɺΠϥετͳͲͷ࡞Λߘ͢Δ͜ͱ͕Ͱ͖Δ• ߘͨ͠࡞Λ؆୯ʹൢച͢Δ͜ͱ͕ Ͱ͖ΔͩΕ͕࡞Λ͡Ίɺ ଓ͚ΒΕΔΑ͏ʹ͢Δɻ
ࠓ͓͢Δ͜ͱ1. Nuxt.jsҠߦͷϞνϕʔγϣϯ 2. Nuxt.jsͷҠߦܭը 3. ઃܭɾ࣮ͷτϐοΫ 4. ·ͱΊ
։ൃ࣌ͷϑϩϯτΤϯυ2013. 7 2013. 10 2013. 12React.jsv0.3Angular.jsv1.2.3rcVue.jsv0.62014. 4note։ൃ ~ ϦϦʔεnoteAngular.jsΛબ(࣌ຊͰBackbone.js͕ओྲྀ)
Angular.jsΛબͨ͠ཧ༝• UI͕ͦΕͳΓʹෳࡶ• 2-way bindingັྗత• αʔόαΠυAPIʹઐ೦• ωΠςΟϒΞϓϦͷߟྀ• ΤϯδχΞ࠾༻త• ࣌ίϯγϡʔϚ͚Ͱ͔ͬͨ͠
ݱࡏͷٕज़ελοΫ• Frontend• Angular.js 1ܥ• CoffeeScript• HAML• Backend• Ruby on Rails• Infrastructure• AWS
ݱࡏͷٕज़ελοΫ• Frontend• Angular.js 1.4ܥ• CoffeeScript• HAML• Backend• Ruby on Rails 4.2ܥ• Capistrano• Infrastructure• AWSClient Side Renderingonly Single Page Application
Կ͕՝͔
՝• ॳظදࣔͷ͞• εϖοΫͷ͍Ͱݦஶʹ• ٕज़త੍• Angular.js1ܥSSRΛαϙʔτ͍ͯ͠ͳ͍• Railsͷ্ʹͬͨϑϩϯτΤϯυ• ٕज़తෛ࠴• ίʔσΟϯάن• ίϯϙʔωϯτઃܭ
ෛ࠴ͱͳ͍ͬͯΔίʔυͷҰྫ
طଘͷٕज़ͷԆͰղܾ͕ࠔͳঢ়گ
දࣔਖ਼ٛ
ܦӦࢹͰͷϑϧϦχϡʔΞϧελʔτΞοϓͷنͰͳ͔ͳ͔౿ΈΕͳ͍ͷ͕Ұൠత
ܦӦࢹͰͷϑϧϦχϡʔΞϧֶੜ࣌ʹLinuxΧʔωϧ͍ͬͯ͡༡ΜͩΓɺࠓػցֶशͰPythonॻ͍ͨΓͱ͍͏CEOදࣔਖ਼ٛΛᨳͬͯΔ͝ຊਓ͕2017/10ʹCXOʹब
ܦӦࢹͰͷϑϧϦχϡʔΞϧֶੜ࣌ʹLinuxΧʔωϧ͍ͬͯ͡༡ΜͩΓɺࠓػցֶशͰPythonॻ͍ͨΓͱ͍͏CEOදࣔਖ਼ٛΛᨳͬͯΔ͝ຊਓ͕2017/10ʹCXOʹबҙ֎ͱ͋ͬ͞ΓͱGoαΠϯ
͜͏ͯ͠ϑϩϯτΤϯυΛશ໘తʹ৽͢ΔํͰݕ౼(2018/03)
ٕज़બఆཁ݅ͷચ͍ग़͠• Server Side Rendering (Ҏ߱SSR)• ֶश/ӡ༻ίετ• σβΠφʔͷྀ• ΨνͳϑϩϯτΤϯυΤϯδχΞͰͳͯ͘ϝϯςφϒϧʹ• ։ൃ/ίϛϡχςΟͷ׆ൃ͞
ީิͱ͕ͯ͋ͬͨ͠બࢶ1.Express + VanillaJS 2.React.js 3.Angular 4.Vue.js
ީิͱ͕ͯ͋ͬͨ͠બࢶ1. Express + VanillaJS 2. React.js 3. Angular 4. Vue.jsܦ͞ΜͷࣄྫΛࢀߟʹ
͕͔ͩ͠͠…• ϑϩϯτΤϯυͷॲཧ͕ଟ͍• ΠϯλϥΫςΟϒͳUIͦͦ͋͜͜Δ• ։ൃޮ্͕͕Βͣʹஅ೦
ީิͱ͕ͯ͋ͬͨ͠બࢶ1.Express + VanillaJS 2.React.js 3.Angular 4.Vue.jsCTOͷਓʹVue.jsʹਫ਼௨͍ͯ͠Δํ͕ଟ͘ɺનΊΒΕͨͷ͕͖͔͚ͬ
࠾༻
Vue.jsΛ࠾༻ͨ͠ཧ༝ᶃ• Vue Server RendererʹΑΔSSRͷαϙʔτ• Virtual DOMʹΑΔޮతͳࠩߋ৽• ίϯϙʔωϯτࢦ• Single File Components• Scoped CSS࣮ߦͱ։ൃޮͷཱ྆
Vue.jsΛ࠾༻ͨ͠ཧ༝ᶄ• template͕HTMLͰॻ͚Δ• σβΠφʔʹ༏͍͠• HAML < HTMLͩͱฉ͍͍ͯͨ• ߏจ(v-xxx)͕Angular.js(ng-xxx)ͱֶ͍ۙ͠शίετͷ͞ͱ͠Έ͢͞
Vue.jsΛ࠾༻ͨ͠ཧ༝ᶅ• ࠔͬͨΒެࣜͷυΩϡϝϯτΛݟΕ େ֓ղܾ͢Δ• ຊޠϩʔΧϥΠζ൛͕༻ҙ͞Ε͍ͯΔυΩϡϝϯτͷॆ࣮
Vue.jsΛ࠾༻ͨ͠ཧ༝ᶆ• ษڧձΠϕϯτͷଟ͞ = ใྔ͕ଟ͍• ௐΕใ͕ग़ͯ͘Δɺฉ͘͜ͱ͕Ͱ͖Δ҆৺ײࠃίϛϡχςΟͷ׆ൃ
Vue.jsΛ࠾༻ͨ͠ཧ༝ᶇ• ͱ͋Δ@kitak͞Μͱ͍͏ํ• ࣮ͷQ & A• ઃܭͷαϙʔτ• ϋϯζΦϯ։࠵ʹΑΔجૅ্ࣝVue.jsͷΤΩεύʔτ͕ίϯαϧʹ
Nuxt.js??
Nuxt.jsΛ৮Δ͖͔͚ͬ• Vue.jsͰSSR͢Δ߹Ͳ͏͢Εʁ• Nuxt.jsΛ͏ͱ؆୯ʹͰ͖ΔΒ͍͠...• ݕূͯ͠ΈͨΒͬ͘͞ͱSSR͕Ͱ͖ͨ…• kitak͞ΜSSR͢ΔͳΒNuxt.js͍͍ͧͱݴ͍ͬͯͨ͠...
Nuxt.jsΛ࠾༻ͨ͠ཧ༝ᶃ• SSR͕؆୯ʹ• pagesԼʹίϯϙʔωϯτΛஔ͘• asyncData() / fetch() ͰඞཁͳσʔλΛఆٛɾऔಘ͢Δ• DIRߏ, ϧʔςΟϯάͷࣗಈੜ, ϓϥάΠϯػߏ etc..ن͕खʹೖΔ
Nuxt.jsΛ࠾༻ͨ͠ཧ༝ᶄ• Vue.jsͷΤίγεςϜΛϏϧτΠϯ• Vue Router, Vuex, Vue Server Renderer, vue-meta• Ϗϧυ(webpack)Α͠ͳʹ• minify, jsϑΝΠϧׂ, cssͷΠϯϥΠϯԽ, τϥϯεύΠϧ, preload etc…Ϟμϯͳڥ͕खʹೖΔ
͍͖ͬͯએݴNuxt.jsҠߦϓϩδΣΫτ͕ελʔτ (2018/4)
৽ͷํ• طଘͷRailsαʔόAPI༻్Ͱ͜Ε·Ͱ௨Γར༻• ViewΛNuxt.js(ϨϯμϦϯάαʔό)Ҡߦ
Ҡߦखॱ• طଘUIΛ࣮֬ʹҠߦͤ͞Δ• େ෯ͳUI/UXͷվमؚΊͳ͍• ϖʔδຖʹύε(URL)ϕʔεͰLBͰৼΓ͚Δ• ͚ࣾϦϦʔε ⇢ Dog Fooding ⇢ Ұൠެ։
։ൃମ੍• ΤϯδχΞ: 3໊• σβΠφʔ: 2໊(ଞϓϩδΣΫτͱ݉)• ि1ͰMTG• ใڞ༗Crowi(ࣾWiki)Ͱ
ۤ࿑ϙΠϯτ• ฒߦͯ͠ݱߦ൛(Angular.js)ͷվमผνʔϜͰʑଓ͍͍ͯΔ• Ҡߦ͕શʹྃ͢Δ·Ͱೋॏϝϯς
201811݄3ஈ֊Ͱͷਐḿ͓͢͢ΊҰཡ ݕࡧhttps://note.mu/recommend_nuxt https://note.mu/search_nuxtຊ൪Քಇத (υοάϑʔσΟϯά༻ͷΤΠϦΞε)
201811݄3ஈ֊Ͱͷਐḿهࣄৄࡉhttps://note.mu/notedemo/n/n81f8264b9b9eຊ൪Քಇத (σϞ༻ΞΧϯτͷΈ)
201811݄3ஈ֊Ͱͷਐḿ• શମͷنײ• ίϯϙʔωϯτ: 216• LOC: 43672• *.vue: 36153• *.js: 6823• *.scss: 696more...(2018/4 ~)
ݱ࣌ͰͷύϑΥʔϚϯεൺֱ
LighthouseͷൺֱAngular.js൛Nuxt.js൛
WebPageTestͷൺֱAngular.js൛Nuxt.js൛݅ From: Tokyo, Japan - EC2 - Chrome - Emulated iPhone X - 3GFast - MobileStart Render = ϨϯμϦϯά͕։࢝͞ΕΔ·Ͱʹ͔͔Δ࣌ؒSpeed Index = ίϯςϯπ͕ʹݟ͑Δঢ়ଶʹͳΔ·Ͱͷ࣌ؒ
·ͩ·ͩຬͰ͖ΔϨϕϧͰͳ͍͕࣮֬ʹΧΠθϯ͍ͯ͠Δ
͓ॻ͖• ։ൃڥ• ίϯϙʔωϯτઃܭ• ϢχόʔαϧJavaScript• ϑΝΠϧαΠζͷѹॖ• Polyfill• Infrastructure
։ൃڥ
։ൃڥ• Nuxt.js v2.2.0• Jest• ESLint (vue/recommended)• Prettier• CircleCI• Sentry
ίϯϙʔωϯτઃܭ
Angular.js൛ͷίϯϙʔωϯτ• directiveΛར༻͠ɺίϯϙʔωϯτϕʔεͰ։ൃ• ཻʹϧʔϧ͕ͳ͍• ཻ࣮ऀͷԘക• ނʹॏෳίʔυ͕ࢄࡒ• props(scope)ͷόέπϦϨʔ͕ਏ͍Կ͔͠ΒͷΈͱϧʔϧ͕ཉ͍͠
Vuex & AtomicDesign
Vuexͷओͳϧʔϧ• ϞδϡʔϧϞʔυΛ࠾༻• mutaions/actions/getttersͷλΠϓʹఆΛ༻• grepability• ΤσΟλͷิ• ετΞʹঢ়ଶΛ࣋ͨͤΔ͔Ͳ͏͔ͷஅج४A. ίϯϙʔωϯτΛ͑ͯڞ༗͍ͨ͠ͷ͕͋Δ (͍ΘΏΔόέπϦϨʔରࡦ)B. Serviceత(ॲཧΛ·ͱΊΔ)ͳ͍ํC. APIݺͼग़͠
ঢ়ଶཧʹடং͕
VuexϞδϡʔϧͷංେԽ845ߦ....
Nuxt.js v2.0.0
VuexϞδϡʔϧͷϦϑΝΫλ• ͓खܰʹݟ௨͠ྑ͘͢Δ͜ͱ͕Ͱ͖Δ• ංେԽ͢Δͷॲཧ͕ूத͢Δactions• ߃ٱతʹػೳ୯ҐͰϞδϡʔϧׂ Ͱ͖ͳ͍͔ݕ౼461ߦ
Atomic DesignͱίϯϙʔωϯτΛ̑ͭͷϨΠϠʔʹྨ͠ίϯϙʔωϯτͷΈ߹ΘͤͰϖʔδΛߏ͍ͯ͘͠ઃܭख๏•Atomic Designhttp://atomicdesign.bradfrost.com/
σΟϨΫτϦߏ
࠷ॳͱʹ͔͘ख୳ΓશһͰίϯϙʔωϯτ͚ͯ͠ೝࣝΛͦΖ͑Δ
Atomsͷϧʔϧ• ෦ʹଞͷίϯϙʔωϯτΛؚ·ͳ͍• ࠶ར༻ੑΛՃຯ• Stateless• VuexϞδϡʔϧͷࢀরېࢭ• σʔλͷemit
Moleculesͷϧʔϧ• ෦ʹAtomsҎ֎ͷίϯϙʔωϯτΛؚ·ͳ͍• ࠶ར༻ੑΛՃຯ• Statelessਪ▪ ঢ়گʹΑͬͯlocal state(data)Մ• VuexϞδϡʔϧͷࢀরېࢭ• σʔλͷemit
Organismsͷϧʔϧ• ෦ʹOrganismsҎ্ͷίϯϙʔωϯτΛؚ·ͳ͍ʢਪʣ• ࠶ར༻ੑՃຯ͠ͳͯ͘ྑ͍• StatefulͰΑ͍• VuexϞδϡʔϧΛࢀরͰ͖Δ
ྨͨ͠ίϯϙʔωϯτͷҰྫAtomsMoleculesOrganisms
ΠϯεύΠΞAtomic Design ʙݎ࿚Ͱ͍͍͢UIΛޮྑ͘ઃܭ͢Δhttps://www.amazon.co.jp/dp/B07CJ5TLK2/Vue.js ͔ΒΈͨ AtomicDesignhttps://medium.com/@t_sugawara/vue-js-%E3%81%8B%E3%82%89%E3%81%BF%E3%81%9F-atomicdesign-e90517842801
Atomic DesignͷಋೖޮՌ• ֤ϨΠϠʔͷ͕͋Δఔ໌֬ʹ• ֤ϨΠϠʔʹ໊শ͕͋Δ͜ͱͰίϛϡχέʔγϣϯ͕ԁʹ͜Εͬͯ.PMFDVMFTͰ͋Δ͖͡Όͳ͍ʁ͏ʔΜɺOrganismsͰΑͦ͞͏͚ͩͲ
ίϯϙʔωϯτͷࢹೝੑ୭ѲͰ͖͓ͯΒͣ
Storybookhttps://storybook.js.org/
ίϯϙʔωϯτͷՄࢹԽ• Ұ࠳ંͨ͠աڈ• Nuxt.jsͱͷઃఆपΓͷޓੑ• ֤ίϯϙʔωϯτͷमਖ਼ʹ߹ΘͤͯετʔϦʔΛϝϯςφϯε͢Δͷ͕େม• VuexϞδϡʔϧ௨৴पΓͷελϒԽ
ίϯϙʔωϯτͷՄࢹԽ• Ұ࠳ંͨ͠աڈ• Nuxt.jsͱͷઃఆपΓͷޓੑ• ֤ίϯϙʔωϯτͷमਖ਼ʹ߹ΘͤͯετʔϦʔΛϝϯςφϯε͢Δͷ͕໘• VuexϞδϡʔϧ௨৴पΓͷελϒԽNuxt.jsͱͷઃఆपΓͷޓੑStorybook v4.0.0Nuxt.js v2Ͱ͍͚Δ• ετʔϦʔΛϝϯςφϯε͢Δͷ͕େม• VuexϞδϡʔϧ௨৴पΓͷελϒԽରΛAtomsͱMoleculesʹߜΔ
ग़དྷ্͕ͬͨStorybookڧ͍ؾ࣋ͪΛ͍ͬͯͬͯͧ͘
ϢχόʔαϧJavaScript
ϢχόʔαϧJavaScriptͱ• ΫϥΠΞϯτʢϒϥβʣͱαʔόʢNode.jsʣͷͲͪΒͰ࣮ߦͰ͖Δίʔυ• SSRʹ͓͍ͯରԠඞਢ
SSR࣌ʹwindow, document͕undefined• DBʹอଘ͞ΕͨهࣄͷHTMLΛΫϥΠΞϯτͰDOMૢ࡞▪ document.xxxͬͯΔ• ↑Λv-htmlͰల։⾠هࣄϖʔδͰ࣮ࡍʹى͖ͨίί
SSR࣌ʹwindow, document͕undefinedDOMͷAPIͱޓੑͷ͋ΔHTMLύʔαjsdom/jsdomhttps://github.com/jsdom/jsodom
SSR࣌ʹwindow, document͕undefined
ແࣄSSR͕Ͱ͖ͨ
SSRͷϥΠϑαΠΫϧαʔόɺϒϥβͲͪΒ௨ա͢Δ (ϢχόʔαϧରԠ͕ඞཁͳ)෦
ϑΝΠϧαΠζͷѹॖ
bundleϑΝΠϧͷੳOVYUCVJMEBOBMZ[F
ੳ݁ՌΛड͚ͯ• highlight.js• codeͷγϯλοΫεϋΠϥΠτʹར༻• શ෦ೖΓͩͱ700KBͱ͔ͳΓͷॏྔڃ• ରԠݴޠΛߜͬͯ57KBʹ• moment.js• λΠϜκʔϯͷߟྀෆཁͩͬͨͷͰܰྔͳdate-fns• dayjs͞ΒʹܰྔͳͷͰͦͪΒͰྑ͍͔?• lodash.js• PolyfillͰेΧόʔͰ͖ͦ͏ͳͷͰআ֎༧ఆ
Polyfill
Polyfill.io https://polyfill.io
Polyfill.ioͱ• UserAgentຖʹඞཁͳPolyfill͚ͩΛ·ͱΊͯฦͯ͘͠ΕΔ• ඞཁͳPolyfillΦϓγϣϯͰࡉ͔͘ௐՄೳ• Fastly(CDN)͔Β৴͞ΕΔͷͰඇৗʹߴ
Polyfill.ioͱ
࠾༻ͷϞνϕʔγϣϯ• ͱͱbabel-preset-envͰઃఆ͍ͯͨ͠• ϒϥβຖͷAPIରԠঢ়گΛࢹͯ͠ཧ͢Δͷखؒ
e.g. ChromeͱSafariͷPolyfillChrome/69.0.3497.1 Safari/605.1.15
Infrastructure
Nuxt on Lambda
AWS Lambda• αʔόͷϓϩϏδϣχϯάͳ͠ͰίʔυΛ࣮ߦ• Function as a Service• ରԠݴޠ: Node.js, Python, Go, Java, C#• ಛఆͷΠϕϯτΛτϦΨʔͱ࣮ͯ͠ߦՄೳ• ϦΫΤετʹԠͯ͡ΦʔτεέʔϦϯά• ैྔ՝ۚ
Serverless Framework• ߏཧσϓϩΠΛ୲͏• ΤίγεςϜ(plugin)͕๛• AWSͷଞɺAzure Functions, Google CloudFunctionʹରԠ͍ͯ͠Δ
࠾༻ͷϞνϕʔγϣϯ• ॳEC2 + Node.js + pm2Ͱӡ༻͍ͯͨ͠◦ Node.jsͷӡ༻ϊϋ0◦ Կ͔ಥવpm2͕མͪͨΓͱෆ҆Λ๊͍͑ͯͨ◦ AWS LambdaͷػӡͰʁͱ͍͏ࡶஊ͔Βελʔτ
ͬ͘͟ΓLambda্ͷಈ࡞ͷΈ• awslabs/aws-serverless-express Λར༻͠ expressΛಈ͔͢• Nuxt.jsΛexpressͷmiddlewareͱͯ͠ಈ͔͢• ref: API: nuxt.render(req, res)
ৄ͘͠mya-ake͞ΜͷϒϩάͰNuxt.js on AWS Lambda with Serverless Framework https://mya-ake.com/posts/nuxtjs-on-aws-lambda
αʔόߏhttps://note.mu/recommendhttps://note.mu/recommend_nuxt
ӡ༻ָʹͳΔ…͕͍͔ͭ͘τϨʔυΦϑ
τϨʔυΦϑ• Node.jsͷversion͕Lambdaʹґଘͯ͠͠·͏• ݱঢ়v8.10.0• Nuxt.jsͷ࠷৽versionʹैͰ͖ͳ͘ͳΔՄೳੑ• LambdaʹσϓϩΠग़དྷΔύοέʔδ༰ྔͷ ࠷େ͕50MB• ݱ࣌Ͱ32MB• cold startʹΑΔϨΠςϯγͷѱԽ
·ͱΊ• ϝϦοτ• طଘͷݴޠϑϨʔϜϫʔΫͷ੍ʹറΒΕͳ͍• υοάϑʔσΟϯά͕༰қʹͰ͖Δ• ϩʔϧόοΫ͕༰қʹͰ͖Δ• σϝϦοτ• શҠߦ͢Δ·Ͱ2ॏϝϯςʹͳΓ͏Δύε(URL)ϕʔεͰখ͘͞Ҡߦ͢Δͷ༗ޮ
·ͱΊ• SSR͕ඞཁͳΒಋೖ͠ͳ͍खͳ͍• ಋೖ؆୯ֶ͕ͩश/ӡ༻ίετ͕͋Δ• ϢχόʔαϧରԠ• Node.jsͷӡ༻• τϨʔυΦϑ͕ڐ༰Ͱ͖ΔͳΒAWS Lambda༗༻• SSR͕ຊʹඞཁ͔Ͳ͏͔ཁݕ౼• SPAϞʔυ (mode: ‘spa’)• ੩తαΠτ (nuxt generate)SSRͷಋೖຊʹ؆୯
·ͱΊ• ίετΛ͔͚ͣʹϞμϯͳ։ൃڥ͕खʹೖΔ ⇢ ͙͢ʹΓग़ͤΔ• ᙱ͍ͱ͜Ζʹख͕ಧ͘ͷͰؾ࣋ͪΑ͘ίʔυΛॻ͚Δ ⇢ ຊ࣭తͳ։ൃʹूதͰ͖Δ• VuexͷऔѻίϯϙʔωϯτͷཻͳͲNuxt.js͕ؔ༩͠ͳ͍෦ͷϧʔϧࡦఆผ్ඞཁڥج൫ͷαϙʔτɺن͕ඇৗʹڧྗ
՝• ॳظදࣔͷ͞• εϖοΫͷ͍Ͱݦஶʹ• ٕज़త੍• Angular.js1ܥSSRΛαϙʔτ͍ͯ͠ͳ͍• Railsͷ্ʹͬͨϑϩϯτΤϯυ• ٕज़తෛ࠴• ίʔσΟϯάن• ίϯϙʔωϯτઃܭॳظදࣔͷٕ͞ज़త੍ٕज़తෛ࠴Nuxt.jsʹཔΕΔ෦ͱ͍͏ҙຯͰ˓ɻΩϟογϡͱ͔ը૾ͷ࠷దԽͱ͔…ViewΛRails͔ΒΓ͠ɺNuxt.js(Vue.js)ʹΑΓϞμϯͳڥΛ࣮ݱɻNuxt.jsʹΑΓنΛɻVuexͱAtomic DesignʹΑΓઃܭϧʔϧΛɻݱ࣌ͰͷධՁ
·ͱΊ࠾༻ͯ͠Α͔ͬͨʙ note Nuxt.jsҠߦνʔϜҰಉ ʙ
ϦϦʔεϊʔτެ։தURL: https://note.mu/noteeng/m/me7637ba82821RSS: https://note.mu/noteeng/m/me7637ba82821/rss
͋Γ͕ͱ͏͍͟͝·ͨ͠ΤϯδχΞืूͯ͠·͢ٸதͷʮnoteʯͷϑϩϯτΤϯυΛ৽͢ΔΤϯδχΞΛืूʂhttps://www.wantedly.com/projects/208206