Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Stimulus × Jest × Direct Upload × Image Fluxで カ...
Search
Masayoshi Tokumoto
June 29, 2019
Technology
1
360
Stimulus × Jest × Direct Upload × Image Fluxで カオスなJS環境と画像アップロード機能を改善しつつユーザーの投稿率を上げた話
沖縄で開催されたハッカーズチャンプルー2019でLTをした時の資料です
Masayoshi Tokumoto
June 29, 2019
Tweet
Share
More Decks by Masayoshi Tokumoto
See All by Masayoshi Tokumoto
プロダクト・人・チームをいい感じにするためのシステム思考
sasumasa
0
60
RxJS と Netflix から学ぶリアクティブプログラミング
sasumasa
0
44
GraphQL を完全に理解する
sasumasa
0
39
キャパを超えた大型プロジェクトから学んだこと
sasumasa
0
1.4k
RailsエンジニアがStimulus + 生JSだけで約半年のプロジェクトを終えた今思うこと
sasumasa
0
340
IKUSEI on Rails
sasumasa
2
1.9k
文系から半年でRuby(Sinatra, Rails)を学んだら人生変わった@沖縄Ruby会議02
sasumasa
9
19k
Other Decks in Technology
See All in Technology
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
210
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
720
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
200
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.2k
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
130
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
380
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
190
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
140
AWS IoT 超入門 2025
hattori
0
310
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
210
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
160
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
470
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Done Done
chrislema
185
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Six Lessons from altMBA
skipperchong
28
4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Transcript
Stimulus × Jest × Direct Upload × Image FluxͰ ΧΦεͳJSڥͱը૾ΞοϓϩʔυػೳΛ
վળͭͭ͠ϢʔβʔͷߘΛ্͛ͨ ·͞ʢ@Masah201707ʣ
ࣗݾհ • ·͞ʢ@Masah201707ʣ • גࣜձࣾΈΜͳͷΣσΟϯάʢ18ଔʣ • ͪΐͬͱॻ͚Δ • Ruby/Rails/JavaScript/Stimulus •
͜Ε͔Βͪΐͬͱॻ͚Δ • React/Go • ͓ञͱ͓ण࢘ͱֶͼʹͳΔٕज़ͷ͕͋Ε͍͍ͩͨͤ
ΈΜͳͷΣσΟϯάͱ • ʮ݁ࠗࣜͷຊΛ͑ΔʯͨΊͷαʔϏε • ϝΠϯίϯςϯπʹ݁ࠗࣜʹؔ͢Δޱίϛɾ࣮ࡍͷඅ༻໌ࡉͳͲ͕͋Δ
ͬͨ͜ͱ Ϣʔβʔߘը૾ͷ ΞοϓϩʔυͷΈΛม͑Δ
Γ͍ͨ͜ͱ • jQueryΛ٫͍ͨ͠ʢͻͲ͍ίʔυͷւ͕͕͓ͬͯ Γɺςετͮ͠Β͍ʣ • ϢʔβʔΛ͍ؒͨͤΔ͜ͱͳ͘࠷େ10ຕͷը૾ ΞοϓϩʔυΛ࣮ݱ͍ͤͨ͞ • Ϣʔβʔ͕Ξοϓϩʔυͨ͠ը૾Λ৭ʑͳίϯςϯπ Ͱ͏ͨΊʹ৭ʑͳαΠζʹม͍ͨ͠
Γ͍ͨ͜ͱ • jQueryΛ٫͍ͨ͠ʢͻͲ͍ίʔυͷւ͕͕͓ͬͯ Γɺςετͮ͠Β͍ʣ • ϢʔβʔΛ͍ؒͨͤΔ͜ͱͳ͘࠷େ10ຕͷը૾ ΞοϓϩʔυΛ࣮ݱ͍ͤͨ͞ • Ϣʔβʔ͕Ξοϓϩʔυͨ͠ը૾Λ৭ʑͳίϯςϯπ Ͱ͏ͨΊʹ৭ʑͳαΠζʹม͍ͨ͠
ղܾࡦ Stimulus + Jest
Stimulus • Basecamp͕ࣾग़͍ͯ͠Δʮ߇͑Ίͳ৺ʯΛ࣋ͬͨϑ ϨʔϜϫʔΫ • HTMLͱJavaScriptΛdataଐੑͰܨ͙ • HTMLΛݟΔ͚ͩͰͲͷΑ͏ͳৼΔ͍Λ͢Δͷ͔͕Θ͔Δ • ಉ͡తͷίʔυΛάϧʔϓԽͤ͞ΔͷͰɺࣗͷίʔυ͕
ʮJavaScriptͷւʯʹຒΕΔͷΛ͙ • DOMͷϥΠϑαΠΫϧΛཧ͢Δ
Jest • FacebookJavaScriptςετπʔϧ • Reactͱͷੑߴͦ͏ • ಋೖָ͕ͦ͏ʢZero Configurationʣ • RSpecΈ͍ͨͰॻ͖ํʹ͠Έ͕͋Δ
const sum = require('./sum'); test('adds 1 + 2 to equal 3', () => { expect(sum(1, 2)).toBe(3); });
Γ͍ͨ͜ͱ • jQueryΛ٫͍ͨ͠ʢͻͲ͍ίʔυͷւ͕͕͓ͬͯ Γɺςετͮ͠Β͍ʣ • ϢʔβʔΛ͍ؒͨͤΔ͜ͱͳ͘࠷େ10ຕͷը૾ ΞοϓϩʔυΛ࣮ݱ͍ͤͨ͞ • Ϣʔβʔ͕Ξοϓϩʔυͨ͠ը૾Λ৭ʑͳίϯςϯπ Ͱ͏ͨΊʹ৭ʑͳαΠζʹม͍ͨ͠
͜Ε·Ͱͷը૾Ξοϓϩʔυ ΦϦδφϧը૾ͱ αϜωΠϧΛΞοϓϩʔυ • αϜωΠϧը૾ͷ࡞ • EXIFใͷमਖ਼ 1ຕͣͭը૾ΛΞοϓϩʔυ Amazon EC2
Amazon S3
S3ͷDirect Upload ॺ໊͖ͭURLΛ dataଐੑͱͯ͠ηοτ ෳͷը૾Λ ඇಉظͰΞοϓϩʔυ access_key_idͱ secret_access_keyΛऔಘ ̍ ̎
̏ Amazon EC2 Amazon S3 IAM
Γ͍ͨ͜ͱ • jQueryΛ٫͍ͨ͠ʢͻͲ͍ίʔυͷւ͕͕͓ͬͯ Γɺςετͮ͠Β͍ʣ • ϢʔβʔΛ͍ؒͨͤΔ͜ͱͳ͘࠷େ10ຕͷը૾ ΞοϓϩʔυΛ࣮ݱ͍ͤͨ͞ • Ϣʔβʔ͕Ξοϓϩʔυͨ͠ը૾Λ৭ʑͳίϯςϯπ Ͱ͏ͨΊʹ৭ʑͳαΠζʹม͍ͨ͠
ैདྷͷߏ • ը૾มͷ͘͠Έ • ϦαΠζɾΫϩοϓɾը࣭ͷௐΩϟογϡػೳΛඋ͑Δ
ैདྷͷߏ • ɿӡ༻͕ൃੜ • ϛυϧΣΞͷߋ৽ΞϥʔτରԠ
S3ͷDirect Upload ॺ໊͖ͭURLΛ dataଐੑͱͯ͠ηοτ ෳͷը૾Λ ඇಉظͰΞοϓϩʔυ access_key_idͱ secret_access_keyΛऔಘ ̍ ̎
̏ Amazon EC2 Amazon S3 IAM &9*'ใΛ मਖ਼͍ͯ͠ͳ͍
ImageFluxͱ ̍ຕͷը૾Λͱʹը૾ͷ֦େॖখɺΓൈ͖ɺ߹ͳͲͰσ όΠεʹ࠷దԽ͞Εͨը૾Λ؆୯ʹੜ͠ɺߴ͔ͭߴ࣭Ͱ ৴͢ΔαʔϏε
ImageFluxར༻ޙͷߏ ը૾ॲཧΛ·ΔͬͱImageFluxʹ͓ͤ͢Δ͜ͱ Ͱը૾पΓͷӡ༻͔Βղ์͞ΕΔ
݁Ռ • ը૾ͷߘ 1.7ഒ • 30595ຕˠ52622ຕ ϦϦʔεޙ4ϲ݄ͷ૯ը૾ߘΛલಉ݄ͱൺֱ • मਖ਼֦ுʹڧ͍ઃܭʹͳͬͨ
ࣦഊஊ
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) }
_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
ϦΞϧDOMͰԾʢతʣDOM 1. ςϯϓϨʔτΛViewϑΝΠϧʹஔ͍͓ͯ͘ 2. MutationObserverͰಛఆͷHTMLཁૉΛࢹ 3. ը૾ΞοϓϩʔυޙʹඞཁͳใΛͦͷHTMLཁૉͷ attributesͱͯ͠ηοτ 4. MutationObserver͕Ԡ͠ɺςϯϓϨʔτͷCloneʹͦ
ΕͧΕͷΛೖΕͨͷΛAppend
ՆͷΠϯλʔϯγοϓ ։࠵͠·͢ʂ
ΈΜͳͷΣσΟϯά ՆͷΠϯλʔϯ in ԭೄ ࣌ɿ8݄22ɾ23ʢ༧ఆʣ ձɿླྀٿେֶֶ෦ ࣮ࡍͷαʔϏεʹػೳΛՃͯ͠ RubyͱRailsͷجຊΛֶ΅͏ʂ ৄ͘͠connpass (https://mwed.connpass.com/)
Ͱ 21ଔ͚
͋Γ͕ͱ͏͍͟͝·ͨ͠