Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Make good (better) form
Search
Kusamao Abe
October 16, 2018
Technology
0
260
Make good (better) form
Kusamao Abe
October 16, 2018
Tweet
Share
More Decks by Kusamao Abe
See All by Kusamao Abe
Vue builds
kusamao
1
520
Javascript in the past and now
kusamao
1
170
The Essence of UI Design
kusamao
1
1.9k
Making mock-up in web application
kusamao
0
96
Keep a distance from jQuery
kusamao
0
130
Using Heroku on entrusted development
kusamao
0
1.1k
Other Decks in Technology
See All in Technology
文字列の並び順 / Unicode Collation
tmtms
1
260
非CUDAの悲哀 〜Claude Code と挑んだ image to 3D “Hunyuan3D”を EVO-X2(Ryzen AI Max+395)で動作させるチャレンジ〜
hawkymisc
1
160
品質のための共通認識
kakehashi
PRO
3
220
AWS Trainium3 をちょっと身近に感じたい
bigmuramura
1
130
エンジニアリングマネージャー はじめての目標設定と評価
halkt
0
260
AI 駆動開発勉強会 フロントエンド支部 #1 w/あずもば
1ftseabass
PRO
0
240
[JAWS-UG 横浜支部 #91]DevOps Agent vs CloudWatch Investigations -比較と実践-
sh_fk2
1
240
Overture Maps Foundationの3年を振り返る
moritoru
0
160
学習データって増やせばいいんですか?
ftakahashi
2
280
エンジニアリングをやめたくないので問い続ける
estie
2
370
世界最速級 memcached 互換サーバー作った
yasukata
0
330
SSO方式とJumpアカウント方式の比較と設計方針
yuobayashi
7
530
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Scaling GitHub
holman
464
140k
How to Ace a Technical Interview
jacobian
280
24k
Embracing the Ebb and Flow
colly
88
4.9k
What's in a price? How to price your products and services
michaelherold
246
12k
Documentation Writing (for coders)
carmenintech
76
5.2k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Visualization
eitanlees
150
16k
How STYLIGHT went responsive
nonsquared
100
6k
We Have a Design System, Now What?
morganepeng
54
7.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.7k
The Invisible Side of Design
smashingmag
302
51k
Transcript
2018/10/16 JAM plus #03 at tambourine commune ͍͍ϑΥʔϜΛͭ͘Ζ͏
҆෦ຑੜ Kusamao Abe גࣜձࣾλϯόϦϯ ʢtambourine.incʣ ɾςΫχΧϧσΟϨΫλʔ ɾWebΤϯδχΞ
JAM plusͷ͓͞Β͍ w JAMελοΫˠJavaScript API MarkUpΒ͍͠ w MEANελοΫͱ͔LAMPͱ͔ͦ͏͍͏ͭ ϑϩϯτΤϯυΛࢦ͢Β͍͠ w
plusͬͯԿˠ͜ͷϏϧͷ໊લ͕ϓϥεϏϧ w ݄։࠵͍͔͠͠Εͳ͍ʜʜ
ͦ͏ɺͦΖͦΖͷ
౦ژΦϦϯϐοΫ ͍͖ۙͮͯ·ͨ͠
IUUQTOFXTZBIPPDPKQCZMJOFLBOEBUPTIJBLJ
͡Ό͋ྑ͍ϑΥʔϜͬͯʁ
IUUQTVTJUFKQBMFSUCPYXFCGPSNEFTJHO
Kathryn Whitenton͍Θ͘ ͘͠Α͏ɻ ؔ࿈ͷ͋ΔϥϕϧͱೖྗཝάϧʔϓͰ͋ΔͱݟͯΘ͔ΔΑ͏ʹ͠Α͏ɻ ೖྗཝͷϨΠΞτΧϥϜʹ͠Α͏ɻ ཧతͳॱ൪ͰฒΑ͏ɻ
ϓϨʔεϗϧμςΩετར༻͠ͳ͍Α͏ʹ͠Α͏ɻ ೖྗཝೖྗ༰ͷछྨ͞ʹ߹͏ͷʹ͠Α͏ɻ ೖྗ͕ҙͷཝͱඞਢͷཝΛݟ͚ΒΕΔΑ͏ʹ͠Α͏ɻ ೖྗϑΥʔϚοτͷཁ݅ͯ͢આ໌͠Α͏ɻ ʮϦηοτʯϘλϯͱʮΫϦΞʯϘλϯΘͳ͍Α͏ʹ͠Α͏ɻ ʹ͖͘͢ɺ۩ମతͳΤϥʔϝοηʔδΛఏڙ͠Α͏ɻ
͜ΕΛकͬͯΕ͍͍ϑΥʔϜʁ
୭ʹͱͬͯʮ͍͍ʯʁ w ։ൃऀ w ࡞Γ͍͢ w ϝϯς͍͢͠ w ར༻ऀ w
ҟͳΔڥɾ݅ԼͰ͍͍͢ w తΛୡ͢Δͷ͕༰қ w ڙڅଆ w ਖ਼͍͠ใ͕ೖྗ͞ΕΔ w ͕ྃߴ͍
ଟ͘ͷ߹ɺ ʮࡾํྑ͠ʯΉ͔͍ͣ͠ʜ
ϚδͰ͍͍ϑΥʔϜͷڀۃ
ೖྗ͠ͳ͍͍ͯ͘͜ͱͰʁʁʁ
ͦͦೖྗΊΜͲ͍ w Զୡ͋ͱԿճϝʔϧΞυϨεΛೖྗ͠ͳ͍ͱ͍͚ͳ͍ͷ͔ w ࣗಈೖྗ͕ޮ͔ͳ͍ϑΥʔϜͨ͘͞Μ͋Δ w ͳΜ͔͏ͥΜͿɺϐοͱͬͯͰ͖ͳ͍͔ͬ͢ʁʁʁʁʁ
ͨͱ͑Amazon Pay
IUUQTQBZBNB[PODPNKQTIPQQFS
Amazon Pay w AmazonͷΞΧϯτʹొ͞ΕܾͨࡁใͰܾࡁͯ͘͠ΕΔ w ࣄۀऀܾࡁใΛอ͓࣋ͯ͘͠ϦεΫΛऔΒͣʹࡁΉ w ॅॴใ͍ͭͷAmazonͷͭͰ w खྉίϯςϯπͷ4%ʙ4.5%
Apple Payͱ͔ Google Payͦ͏
·͋ͦΕ͔ͬΓ͡Όͳ͍ΑͶ w ࣗͷͱ͜ΖͰΞΧϯτ࡞Βͤͯ*%౷߹ͯ͠."Γ͍ͨΑͶʙ w खྉߴ͍ʂͩʂ w ͨͩͷ͝ҙݟϑΥʔϜ͔ͩΒ͍ͦͦΒΜͷ͕ͩʙ
͍͔͠͠େࣄͳ͜ͱͳΜͰ͢
ਓɺؒҧ͑Δʜʜ
ͷ͕૿͑ΔͱͲ͏ͳΔ͔ w ࡞Δͷ͕ଟ͍ ˠΤϯόάͷՄೳੑ͕૿͑Δ w ೖྗ͢Δͷ͕ଟ͍ ˠೖྗΛؒҧ͑ΔՄೳੑ͕૿͑Δ w ཧ͢Δͷ͕ଟ͍ ˠηΩϡϦςΟࣄނͷՄೳੑ͕૿͑Δ
ͰɺͲ͏ͯ͠ඞཁͳ߲͋Δ w ࡂɾݮࡂ͠Α͏ w ηΩϡϦςΟ্ͷࣄނΛݮΒ͢ w όάΛݮΒ͢ w ೖྗϛεΛݮΒ͢
ϑϩϯτΤϯυΤϯδχΞ ͕Δ͜ͱ
όάΛݮΒ͢ w ͍·͋ͨΓલͳΜ͚͢Ͳ w όϦσʔγϣϯͰ௨͖͢ύλʔϯΛ͍͍ͯͨͱ͔ w ಛఆͷύλʔϯΛ౿ΉͱΛు͍ͯશ෦ೖྗ༰͕ফ͑Δͱ͔ w ૹ৴࣌ʹใ͕ܽམͯͨ͠ͱ͔
ೖྗϛεΛݮΒ͢ w όοΫΤϯυόϦσʔγϣϯϑϩϯτΤϯυόϦσʔγϣϯ ʮ͋ͬͯͨΓલʯʹͳ͖ͬͯͨʢͬͯͳ͍ͳΒΖ͏ͳʣ w ͦͦೖྗΛਖ਼͘͠Ͱ͖ΔΑ͏ʹ͢Δ
ྫɿ༣ศ൪߸ w ܻͷࣈ͔ΒͳΔຊͷ༣ศ൪߸ w ʮܻܻͷೖྗཝʹ͚Α͏ʯ w ʮ֯ࣈ͚ͩڐ༰ͯ͠΄͔Τϥʔʹ͠Α͏ʯ w ʮͦͷ༣ศ൪߸ͰϥΠϒϥϦ͔ΒॅॴҾ͍ͯ ॅॴ͕ଘࡏ͠ͳ͚ΕΤϥʔʹ͠Α͏ʯ
Τϥʔʹ͠ͳ͍ͱ͍͏ख๏ w ςΫϊϩδʔͰղܾͰ͖Δ͜ͱͯ͋͛͠Α͏ w ֯ࣈ͚ͩ͡Όͳ͘ɺશ֯ࣈΛมͯ͋͛͠Α͏ w ඞཁͳ͍จࣈྻ͕ೖͬͯউखʹऔΓআ͘ w ແବʹׂͯ͠ೖྗͤ͞ͳ͍ɺܻͰόϥ͢ͷϓϩάϥϜͰͰ͖Δ w
ˠσʔλܗࣜΛؒҧ͑Α͏͕ͳ͍
None
w jQueryͰόϦσʔγϣϯͶɺͭΒ͍ w ͪΐͬͱͨ͠ϑΥʔϜͰVue.js͏ͱΊͬͬͪΌͪ͘Όָ w σβΠϯͦ͜·Ͱؾʹ͠ͳ͍ͳΒElementUIΛ͏ͱͪΐʙʙʙʙָ
ςΫϊϩδʔͰղܾͰ͖ͳ͍͜ͱ͋Δ͕ w ͨͱ͑ಛघͳ༣ศ൪߸ͱ͍͏ͷ͕ଘࡏ͢Δ w ࠃཱେͷֶੜྈͱ͔ͩͱ൪ʹඥͮ͘ͷͰͳ͘ಛघͳ൪߸͕ඥ͍ͯ ͍ͯɺ༣ศ൪߸͚ͩͰࢪઃ͕ಛఆͰ͖ΔΑ͏ʹͳ͍ͬͯͨΓ͢Δ ʢͦ͏͍͏ͷϥΠϒϥϦͰҾ͚ͳ͍߹͕͋Δʣ w ˠҰ֓ʹϥΠϒϥϦͰҾ͔͔ͬΒͳ͍ͳΒଘࡏ͠ͳ͍༣ศ൪߸ͱݴ͑Δ ͔Θ͔Βͳ͍
IUUQTKBXJLJQFEJBPSHXJLJ&#&#&#'&""&'#
ͰॅॴؒҧͬͯͨΒࠔΔ w Θ͔Δʂʂʂʂʂʂʂʂ w ΫϩωίϠϚτձһαʔϏεొ࣌ʹ࣮ࡍʹొ͞Εͨॅॴʹ๚ͯ͠ ձһΧʔυΛ͢͜ͱͰ͋ΔఔͷޡΓνΣοΫΛ͍ͯͨ͠ w ༣ศ൪߸͕ͳͯ͘ՙखࢴಧ͘ ʢୡॴଆ͕θϯϦϯͷਤཤྺ͔Β֬ೝͨ͠Γ͍ͯ͠Δͷ͕΄ͱΜͲʣ
ؒҧͬͯͨΒ͍ͷΛݟۃΊΖ w ڧݻͳόϦσʔγϣϯʢόοΫɾϑϩϯτʣ w ೖྗϑΥʔϚοτΛ໌ࣔ͠ɺ ؒҧ͍ͬͯΔ߹Ͳ͏ͬͨΒղܾͰ͖Δ͔Λదʹࣔ͢ w ϝʔϧΞυϨε ˠ࣮ࡍʹૹ৴ͯ͠ෆୡνΣοΫ w
ܞଳి൪߸ ˠ4.4ʹΑΔຊਓνΣοΫ w ॅॴ ˠձһূɾొূૹʹΑΔνΣοΫ
Θ͔Γ͍͍͢͞ʁ w ใϦςϥγʔͷ͍ঢ়ଶʢటਲͯ͠Δͱ͔ᐒᐓͱ͍ͯ͠Δͱ͔ʣͷͱ͖ʹ ͑Δ͜ͱ͕ఏڙଆͷෆརӹʹͳΔͷࠔΔ w టਲͰAmazonͰؾ͕େ͖͘ͳͬͪΌͬͯߴֹͳͷΛങ͏ͱ͔ʁ w ωοτόϯΩϯάΛటਲঢ়ଶͰ͑Δ͖ͳͷ͔ʜʁʁʁʁʁʁʁʁ w ϑΥʔϚοτ͕໌ࣔ͞ΕͯΔͱ૯ͨΓ߈ܸͷώϯτΛ૿ͯ͠͠·͏Α͏
ͳؾ͢Δ w ʮ͜ͷϝʔϧΞυϨεొ͞Ε͍ͯ·͢ʯͬͯग़ͪ͠Ό͏ͷ·͍ͣ
ॱ൪͕͋Δ w ηΩϡϦςΟ্ͷݒ೦·ͣઌʹ௵͓ͯ͜͠͏ w ҰͰใ࿙͍͑Έ͍ͨͳΠϯγσϯτ͕͋ͬͨͱ͜ΖΛ͍͍͔ͨͲ͏͔Έͨ ͍ͳʹͳͬͯ͘Δ w ͦͷ্ͰɺఏڙͰ͖Δใఏڙ͠Α͏ʢϑΥʔϚοτखॱͳͲʣ w గਖ਼ՄೳͳͷϓϩάϥϜͰٵऩɺΦϖϨʔγϣϯͰָʹղܾͰ͖Δͷͦͷ·
·ɺͲ͏ͯ͠μϝͳͷʮͲ͏͢ΕͤΔ͔ʯΛ໌ࣔͯ͠ϑΟʔυόοΫ͢Δ w ΫϦςΟΧϧͳ࡞ۀ߲֬ೝμΠΞϩάͳͲͰϫϯΫογϣϯஔ͍ͨΓɺྃޙ ʹྃϝʔϧඈ͢ͱ͔ͰϩάΛ͓ͯ͘͠ʢਓటਲऀͷരങ͍ʹແྗʣ
༨ஊ
ϑΥʔϜ͋Δ͋Δ w ʮσβΠϯͱίʔσΟϯά·Ͱͬͯ͋ͱγεςϜͷਓʹʙʯ w %#ʹอଘ͢ΔʁϝʔϧૹΔʁηΩϡϦςΟͲ͏͢Δʁ w ͍Ζ͍Ζߟ͑Δ͜ͱଟ͍ʢݸਓใѻ͏߹ಛʹʣ
Pardot Form Handler w SalesforceͷʮPardotʯͷForm HandlerΛ͏ͱͦͷ͋ͨΓͪΐͬͱ ָ͔ w طଘͷίʔσΟϯάࡁΈϑΥʔϜͷૹ৴ઌΛPardotʹ͢ΔΠϝʔδ w
Ϧʔυͷ࿈ܞϑϩʔͱͷ࿈ܞ w IUUQTIFMQTBMFTGPSDFDPNBSUJDMF7JFX JEQBSEPU@GPSN@IBOEMFSTIUNUZQF
IUUQTXXXUBNUBNDPKQUJQTOPUFIUNM@DTTQPTUIUNM
Έ͍ͨͳSaaSͱ͔ΊͬͪΌ͋ΔͷͰ ʮ࡞Βͳ͍ʯબࢶ͋ΔΑ
େࣄͳ͜ͱ w ඞཁ͕ͳ͍ͷΛ࡞Βͳ͍ w ࣗͨͪͰ࡞Βͳ͍͍ͯ͘ͳΒ࡞Βͳ͍ʢ͋ΔͷΛ͏ʣ w ࡞Δͱ͖༏ઌॱংΛཱͯͯߟ͑Δʢ୭ͷɾͳΜͷͨΊͷϑΥʔϜʁʣ w jQueryͷόϦσʔγϣϯɺͭΒ͍ w
ϓϩάϥϜ͚ͩͰղܾͤͣ᎕खΛͬͯͭΒΈճආ͍ͯ͘͠ w ೖྗΤϥʔ͕ى͖ͳ͍Α͏ʹɺى͖͙ͯ͢෮ؼͰ͖ΔΑ͏ʹ
͕ࣗϘϥϯςΟΞԠืϑΥʔϜ࡞Δͱ͖ɺ Ͳ͏͢ΔͩΖ͏ͳͱ͓͍·ͨ͠
Thank you!