Upgrade to Pro — share decks privately, control downloads, hide ads and more …

レガシーなフロントエンドをリプレイスする

jiko21
November 02, 2019

 レガシーなフロントエンドをリプレイスする

Frontend Conference 2019 #kfug2019
の登壇資料です

jiko21

November 02, 2019
Tweet

More Decks by jiko21

Other Decks in Technology

Transcript

  1. NO!

  2. Class-style api Class-style api @Component export default class Count extends

    Vue { @Prop() msg!: string; private count: number = 0; private add(): void { this.count += 1; } private minus(): void { this.count -= 1; } get isEven(): boolean { return this.count % 2 === 0; } } export default Vue.extend({ name: "Count", props: { msg: { type: String, required: true, }, }, data() { return { count: 0, }; }, computed: { isEven(): boolean { return this.count % 2 === 0; }, }, methods: { add(): void { this.count += 1; }, minus(): void { this.count -= 1; }, }, }); Class-style api Ұൠతͳॻ͖ํ
  3. UI·ΘΓ 1BHFT 1BHFT 1BHFT /home /about /help DPOUBJOFS DPOUBJOFS DPNQPOFOU

    DPNQPOFOU DPNQPOFOU ΃ʔ͡͝ͱʹ
 1BHFͷ3PPU$PNQPOFOU 7VFY΍4UPSFΛ࣋ͯΔ
 DPOUBJOFSDPNQPOFOU جຊతʹ TUBUFMFTTͳ
 $PNQPOFOU 7VFY
  4. ͦΕͧΕͷҧ͍… • Jest vs Mocha: Which Should You Choose?[1]ʹΑΔͱ… •

    Jest: ؆୯ʹ͔͚ͯฒߦ࣮ߦɻεφοϓγϣοτ΋ɹ • Mocha: ΧελϜ͕Ͱ͖Δ… [1] https://blog.usejournal.com/jest-vs-mocha-whats-the-difference-235df75ffdf3 ॻ͖΍͢͞΍͸΍͞Ͱ+FTU
  5. Snapshotςετͱ͸? ඳը <template> <div class="count"> <h1>{{ count }}</h1> <div class="buttons">

    <button class="add" @click="increment">+</button> <button class="minus" @click="decrement">-</button> </div> </div> </template> ίϯϙʔωϯτ exports[`Count.vue correctly renders html 1`] = ` <div class="count"> <h1>0</h1> <div class="buttons"><button class="add">+</button> <button class="minus">-</button></div> εφοϓγϣοτ ϑΝΠϧʹ
 ॻ͖ࠐΉ ॳճ
  6. Snapshotςετͱ͸? ඳը <template> <div class="count"> <h1>{{ count }}</h1> <div class="buttons">

    <button class="add" @click="increment">+</button> <button class="minus" @click="decrement">-</button> </div> </div> </template> ίϯϙʔωϯτ EJ⒎Λͱͬͯ
 ֬ೝ ͦΕҎ߱ is equal to ඳը͞ΕͨComponent ? SnapshotϑΝΠϧ
  7. ϓϩδΣΫτͷਐΊํ ๻ҰਓͰ
 ։ൃΛਐΊΔ ࣍ୈʹଞͷਓ΋
 ։ൃʹࢀՃ νʔϜશମͰ
 ϦϓϨΠεΛ
 ऴ͍ྃͤͯ͘͞ 5݄ 9݄

    7݄ ϦϓϨΠε ׬ྃ ϦϓϨΠε 4UBSU Ұ൪Ή͍ͣ΍ͭ Angular.jsϦϓϨΠε։࢝ طଘͷVue͔Β
  8. NO

  9. ରॲ๏ • ςετΛॻ͘͜ͱ͕໨తͰ͸ͳ͍ͷͰҰ୴Skip • ۩ମతʹ…
 
 
 • ςετίʔυΛ࢒͠ͳ͕Β࣮ߦΛඈ͹ͤΔ it.skip('correctly

    renders html', () => { const wrapper = shallowMount(Count); expect(wrapper.html()).toMatchSnapshot(); });
  10. ͜ΕΛ౿·͑ͯɹ • ৽نͰ։ൃ͢ΔComponentʹؔͯ͠ • class style apiΛར༻ͤͣʹ࣮૷ • ͢Ͱʹ։ൃͨ͠Componentʹ͍ͭͯ •

    Ұ୴อཹ (͙͢͞·αϙʔτ͞Εͳ͘ͳΒͳ͍ͨΊ) • ͨͩ͠issueͱͯ͠ഉআܭըΛ࢒͓ͯ͘͠ (ϦϑΝΫλϦϯά)
  11. ϦϓϨΠεΛऴ͑ͯ • VueࣗମͰͷϦϓϨΠε͸ϦϦʔε׬ྃ • ྑ͔ͬͨ͜ͱ • ࠓ·Ͱٕ͋ͬͨज़తෛ࠴͸Ұ૟Ͱ͖ͨɻ • ϞμϯͳϑϩϯτΤϯυͷ஌ݟ •

    ѱ͔ͬͨ͜ͱ • ٕज़બ୒ͷϛεʹΑΔ৽ͨͳ՝୊ • ଞʹ΋ࠓ͔ΒݟΔͱGoodͰ͸ͳ͍ίʔυ΋ ࠓޙϦϑΝΫλϦϯάͰ
 ղফ