## Role - LINE Corp. Senior Frontend Enginner - ElevenBack LLC. CEO ## OSS Activity - @nuxtjs/dayjs creator and maintainer - Vue.js Japanese Official Document Co-maintainer ## Coding Style - User Interface First - Nuxt.js with TSX and Provider/Injection Takuma HANATANI @potato4d
Έ Pros / Cons ͕྆ํ͋Δཁૉ w .tsxͷ߹CSSΛॻ͘༨͕ͳ͘ͳΔ w CSSͷϧʔϧ͕ͳ͍߹୯७ʹίʔυ࣭ͷԼΛট͘ w ҰํͰTailwindͳͲΛར༻͍ͯ͠Δ߹ͳͲͰɺscopedͷཞ༻Λආ͚ΒΕΔ w named export ͕Ͱ͖Δ w default export named export ͱൺֱͯ͠ྼΔ෦͕ଟ͍ • ৄࡉ https://engineering.linecorp.com/ja/blog/you-dont-need-default-export/
w Vue 3 Ͱ3FOEFS'VODUJPOͷத͕มΘͬͯ3FBDUͱ΄΅͍ۙ"1*ʹͳͬͨ w ҰํͰશʹ$PNQBUJCMFͰͳ͘ɺDIJMESFOͷऔΓѻ͍ʹҧ͍͕͋Δ w Өڹ͕ग़Δͷ childNode ͕ෳ͋Δ߹ͷղऍ͕ҧ͏͜ͱ w ݁Ռͱͯ͠ childNode ͕ෳͷ߹ʹ͏·͘ಈ࡞͠ͳ͍ w ͦͷͨΊ… 7VFKTͰ+49Λ͏߹ॾʑͷ߹ΛٵऩͰ͖Δ#BCFMϓϥάΠϯ͕ඞਢͱͳΔ
w emits string[] Λड͚औΔ͕ as const ͨ͠ͱͯͦ͠Εจࣈྻͱͯ͠ॲཧ͞ΕΔ w ίϯϙʔωϯτʹthis[`on${this.emits[0]}`] ͱͯͦ͠ͷղऍϥϯλΠϜ w ϏϧυλΠϜͰ Literal Ͱ͋ͬͯҰҙʹܾఆͰ͖ͳ͍ w ͦͷͨΊ… FNJUTPO999ٕज़తʹͦ͠͏
Vue TSX ࣗମͷҙ w Vue 2.xݱࡏͰɺΦϑΟγϟϧαϙʔτ͕ͳ͍͜ͱ͋Γ0QUJPOBMͳखஈ w https://jp.vuejs.org/v2/guide/render-function.html w TemplateΛجຊͱ͠ɺΑΓγϏΞͳૢ࡞Λඞཁͱ͢Δͱ͖ͷAlternative w ࠷దԽͷ෦ʹ͓͍ͯશͰͳ͍
2.x to 3 ͷҙ w Vue 3Ͱͷ७ਮͳTSXղऍͷࢿྉʹ͍͠ w ͳΤίγεςϜॆ࣮ͯ͠Ώ͕͘ɺόϯυϧؔ࿈ͷελϯυΞϩʔϯͳιϦϡʔγϣϯ ͷݴٴ͕ͳ͍ w https://v3.vuejs.orgʹJSXͷৄࡉͳઆ໌͋Δ͕ɺTSXͳ͍ w Vue 3Ͱemits͕ೖΔ͕ɺҎલonXXXͱରԠͳͲͳ͍ w ͦͦLiteralͰ͋ͬͯจࣈྻͷ߹TSతʹͦ͠͏ w vue-tsx-support͕Vue 3ରԠ͠ͳ͍தɺpropsͰޡຐԽ͢ͳͲΛݕ౼͢Δඞཁ͋Γ
Βͳ͍ͱϋϚΔ Vue 2.x Ͱͷҙ w TSX ϑΝΠϧͰͷΈimportΛؚΊશମతʹΤϥʔ͕ࢭ·Βͳ͍ w TS Server͕૬ੑͷ߹ࢭ·Δ͜ͱ͕͋ΔͷͰ544FSWFSΛ࠶ىಈ͢Δ w ύοέʔδΠϯετʔϧͳͲͰnode_modules͕มΘΔͱ͖ҰԠҙ w ଞʹࡉ͔ͳ͜ͱ৭ʑͱ w ͍ٙͬͯͯͷࠔΓ͕͋ͬͨΒ࠙ձͰTwitterͰͲ͏ͧʂ w @potato4d