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

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

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠