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

Stimulus × Jest × Direct Upload × Image Fluxで カオスなJS環境と画像アップロード機能を改善しつつユーザーの投稿率を上げた話

Stimulus × Jest × Direct Upload × Image Fluxで カオスなJS環境と画像アップロード機能を改善しつつユーザーの投稿率を上げた話

沖縄で開催されたハッカーズチャンプルー2019でLTをした時の資料です

Ae66fee98da28827d5404ae085f75223?s=128

Masayoshi Tokumoto

June 29, 2019
Tweet

Transcript

  1. Stimulus × Jest × Direct Upload × Image FluxͰ ΧΦεͳJS؀ڥͱը૾ΞοϓϩʔυػೳΛ

    վળͭͭ͠Ϣʔβʔͷ౤ߘ཰Λ্͛ͨ࿩ ·͞ʢ@Masah201707ʣ
  2. ࣗݾ঺հ • ·͞ʢ@Masah201707ʣ • גࣜձࣾΈΜͳͷ΢ΣσΟϯάʢ18ଔʣ • ͪΐͬͱॻ͚Δ • Ruby/Rails/JavaScript/Stimulus •

    ͜Ε͔Βͪΐͬͱॻ͚Δ • React/Go • ͓ञͱ͓ण࢘ͱֶͼʹͳΔٕज़ͷ࿩͕͋Ε͹͍͍ͩͨ޾ͤ
  3. ΈΜͳͷ΢ΣσΟϯάͱ͸ • ʮ݁ࠗࣜͷຊ౰Λ఻͑ΔʯͨΊͷαʔϏε • ϝΠϯίϯςϯπʹ݁ࠗࣜ৔ʹؔ͢Δޱίϛɾ࣮ࡍͷඅ༻໌ࡉͳͲ͕͋Δ

  4. ΍ͬͨ͜ͱ Ϣʔβʔ౤ߘը૾ͷ Ξοϓϩʔυͷ࢓૊ΈΛม͑Δ

  5. ΍Γ͍ͨ͜ͱ • jQueryΛ୤٫͍ͨ͠ʢͻͲ͍ίʔυͷւ͕޿͕͓ͬͯ Γɺςετͮ͠Β͍ʣ • ϢʔβʔΛ௕͍ؒ଴ͨͤΔ͜ͱͳ͘࠷େ10ຕͷը૾ ΞοϓϩʔυΛ࣮ݱ͍ͤͨ͞ • Ϣʔβʔ͕Ξοϓϩʔυͨ͠ը૾Λ৭ʑͳίϯςϯπ Ͱ࢖͏ͨΊʹ৭ʑͳαΠζʹม׵͍ͨ͠

  6. ΍Γ͍ͨ͜ͱ • jQueryΛ୤٫͍ͨ͠ʢͻͲ͍ίʔυͷւ͕޿͕͓ͬͯ Γɺςετͮ͠Β͍ʣ • ϢʔβʔΛ௕͍ؒ଴ͨͤΔ͜ͱͳ͘࠷େ10ຕͷը૾ ΞοϓϩʔυΛ࣮ݱ͍ͤͨ͞ • Ϣʔβʔ͕Ξοϓϩʔυͨ͠ը૾Λ৭ʑͳίϯςϯπ Ͱ࢖͏ͨΊʹ৭ʑͳαΠζʹม׵͍ͨ͠

  7. ղܾࡦ Stimulus + Jest

  8. Stimulus • Basecamp͕ࣾग़͍ͯ͠Δʮ߇͑Ίͳ໺৺ʯΛ࣋ͬͨϑ ϨʔϜϫʔΫ • HTMLͱJavaScriptΛdataଐੑͰܨ͙ • HTMLΛݟΔ͚ͩͰͲͷΑ͏ͳৼΔ෣͍Λ͢Δͷ͔͕Θ͔Δ • ಉ͡໨తͷίʔυΛάϧʔϓԽͤ͞ΔͷͰɺࣗ෼ͷίʔυ͕

    ʮJavaScriptͷւʯʹຒ΋ΕΔͷΛ๷͙ • DOMͷϥΠϑαΠΫϧΛ؅ཧ͢Δ
  9. Jest • Facebook੡JavaScriptςετπʔϧ • Reactͱͷ਌࿨ੑߴͦ͏ • ಋೖָ͕ͦ͏ʢZero Configurationʣ • RSpecΈ͍ͨͰॻ͖ํʹ਌͠Έ͕͋Δ

    const sum = require('./sum'); test('adds 1 + 2 to equal 3', () => { expect(sum(1, 2)).toBe(3); });
  10. ΍Γ͍ͨ͜ͱ • jQueryΛ୤٫͍ͨ͠ʢͻͲ͍ίʔυͷւ͕޿͕͓ͬͯ Γɺςετͮ͠Β͍ʣ • ϢʔβʔΛ௕͍ؒ଴ͨͤΔ͜ͱͳ͘࠷େ10ຕͷը૾ ΞοϓϩʔυΛ࣮ݱ͍ͤͨ͞ • Ϣʔβʔ͕Ξοϓϩʔυͨ͠ը૾Λ৭ʑͳίϯςϯπ Ͱ࢖͏ͨΊʹ৭ʑͳαΠζʹม׵͍ͨ͠

  11. ͜Ε·Ͱͷը૾Ξοϓϩʔυ ΦϦδφϧը૾ͱ
 αϜωΠϧΛΞοϓϩʔυ • αϜωΠϧը૾ͷ࡞੒ • EXIF৘ใͷमਖ਼ 1ຕͣͭը૾ΛΞοϓϩʔυ Amazon EC2

    Amazon
 S3
  12. S3΁ͷDirect Upload ॺ໊͖ͭURLΛ dataଐੑͱͯ͠ηοτ ෳ਺ͷը૾Λ
 ඇಉظͰΞοϓϩʔυ access_key_idͱ
 secret_access_keyΛऔಘ ̍ ̎

    ̏ Amazon EC2 Amazon
 S3 IAM
  13. ΍Γ͍ͨ͜ͱ • jQueryΛ୤٫͍ͨ͠ʢͻͲ͍ίʔυͷւ͕޿͕͓ͬͯ Γɺςετͮ͠Β͍ʣ • ϢʔβʔΛ௕͍ؒ଴ͨͤΔ͜ͱͳ͘࠷େ10ຕͷը૾ ΞοϓϩʔυΛ࣮ݱ͍ͤͨ͞ • Ϣʔβʔ͕Ξοϓϩʔυͨ͠ը૾Λ৭ʑͳίϯςϯπ Ͱ࢖͏ͨΊʹ৭ʑͳαΠζʹม׵͍ͨ͠

  14. ैདྷͷߏ੒ • ը૾ม׵ͷ͘͠Έ • ϦαΠζɾΫϩοϓɾը࣭ͷௐ੔΍ΩϟογϡػೳΛඋ͑Δ

  15. ैདྷͷߏ੒ • ໰୊఺ɿӡ༻޻਺͕ൃੜ • ϛυϧ΢ΣΞͷߋ৽΍ΞϥʔτରԠ

  16. S3΁ͷDirect Upload ॺ໊͖ͭURLΛ dataଐੑͱͯ͠ηοτ ෳ਺ͷը૾Λ
 ඇಉظͰΞοϓϩʔυ access_key_idͱ
 secret_access_keyΛऔಘ ̍ ̎

    ̏ Amazon EC2 Amazon
 S3 IAM &9*'৘ใΛ
 मਖ਼͍ͯ͠ͳ͍
  17. ImageFluxͱ͸ ̍ຕͷը૾Λ΋ͱʹը૾ͷ֦େॖখɺ੾Γൈ͖ɺ߹੒ͳͲͰσ όΠεʹ࠷దԽ͞Εͨը૾Λ؆୯ʹੜ੒͠ɺߴ଎͔ͭߴ඼࣭Ͱ ഑৴͢ΔαʔϏε

  18. ImageFluxར༻ޙͷߏ੒ ը૾ॲཧΛ·ΔͬͱImageFluxʹ͓೚ͤ͢Δ͜ͱ Ͱը૾पΓͷӡ༻͔Βղ์͞ΕΔ

  19. ݁Ռ • ը૾ͷ౤ߘ཰ 1.7ഒ • 30595ຕˠ52622ຕ΁
 ϦϦʔεޙ4ϲ݄ͷ૯ը૾౤ߘ਺Λલ೥ಉ݄ͱൺֱ • मਖ਼΍֦ுʹڧ͍ઃܭʹͳͬͨ

  20. ࣦഊஊ

  21. Vanilla JSͷDOMੜ੒ _createThumbnailField(data) { const thumbnailFieldList = document.querySelector(`.js_${this.category}-thumbnail-field-list`) const thumbnailFieldWrapper

    = document.createElement('div') thumbnailFieldWrapper.dataset.controller = 'string-counter' thumbnailFieldWrapper.dataset.target = 'thumbnail-field.item' thumbnailFieldWrapper.dataset.stringCounterMax = 20 thumbnailFieldWrapper.className = 'post-pictures-attachments' const thumbnailFieldBackground = document.createElement('div') thumbnailFieldBackground.className = 'os1-container-background' thumbnailFieldBackground.classList.add('-background-color-gold') thumbnailFieldBackground.classList.add('-margin-bottom-M') const hiddenObjectKey = this.createHiddenObjectKey(data.objectKey) const hiddenCategory = this.createHiddenCategory() const hiddenContentType = this.createHiddenContentType('review') this._createReviewThumbnailField({ data, thumbnailFieldBackground, hiddenObjectKey, hiddenContentType, hiddenCategory, }) thumbnailFieldWrapper.appendChild(thumbnailFieldBackground) thumbnailFieldList.appendChild(thumbnailFieldWrapper) }
  22. _createThumbnailField(data) { const thumbnailFieldList = document.querySelector(`.js_${this.category}-thumbnail-field-list`) const thumbnailFieldWrapper = document.createElement('div')

    thumbnailFieldWrapper.dataset.controller = 'string-counter' thumbnailFieldWrapper.dataset.target = 'thumbnail-field.item' thumbnailFieldWrapper.dataset.stringCounterMax = 20 thumbnailFieldWrapper.className = 'post-pictures-attachments' const thumbnailFieldBackground = document.createElement('div') thumbnailFieldBackground.className = 'os1-container-background' thumbnailFieldBackground.classList.add('-background-color-gold') thumbnailFieldBackground.classList.add('-margin-bottom-M') const hiddenObjectKey = this.createHiddenObjectKey(data.objectKey) const hiddenCategory = this.createHiddenCategory() const hiddenContentType = this.createHiddenContentType('review') this._createReviewThumbnailField({ data, thumbnailFieldBackground, hiddenObjectKey, hiddenContentType, hiddenCategory, }) thumbnailFieldWrapper.appendChild(thumbnailFieldBackground) thumbnailFieldList.appendChild(thumbnailFieldWrapper) } Vanilla JSͷDOMੜ੒ THIS IS ZIGOKU
  23. ϦΞϧDOMͰԾ૝ʢతʣDOM 1. ςϯϓϨʔτΛViewϑΝΠϧʹஔ͍͓ͯ͘ 2. MutationObserverͰಛఆͷHTMLཁૉΛ؂ࢹ 3. ը૾Ξοϓϩʔυޙʹඞཁͳ৘ใΛͦͷHTMLཁૉͷ attributesͱͯ͠ηοτ 4. MutationObserver͕൓Ԡ͠ɺςϯϓϨʔτͷCloneʹͦ

    ΕͧΕͷ஋ΛೖΕͨ΋ͷΛAppend
  24. ՆͷΠϯλʔϯγοϓ ։࠵͠·͢ʂ

  25. ΈΜͳͷ΢ΣσΟϯά ՆͷΠϯλʔϯ in ԭೄ ೔࣌ɿ8݄22೔ɾ23೔ʢ༧ఆʣ ձ৔ɿླྀٿେֶ޻ֶ෦ ࣮ࡍͷαʔϏεʹػೳΛ௥Ճͯ͠ RubyͱRailsͷجຊΛֶ΅͏ʂ ৄ͘͠͸connpass (https://mwed.connpass.com/)

    Ͱ 21ଔ޲͚
  26. ͋Γ͕ͱ͏͍͟͝·ͨ͠