Slide 1
Slide 1 text
Frontend Conference Okinawa 2023, 2023/11/18
Ivanova Marina, גࣜձࣾΏΊΈ
ϢʔβʔొͱϩάΠϯϑΥʔϜʹ
autocompleteଐੑΛ͍·͠ΐ͏
Slide 2
Slide 2 text
ྲྀΕ
• autocompleteଐੑͷհ
• autocompleteͷ༻ͷྫ
• ϢʔβʔొϑΥʔϜͷautocompleteͷ
• ϩάΠϯϑΥʔϜͷautocompleteͷ
• ·ͱΊ
Slide 3
Slide 3 text
autocompleteଐੑͷհ
• ϑΥʔϜϑΟʔϧυͷͷࣗಈิʹؔͯ͠ϢʔβʔΤʔδΣϯτʹͲͷΑ͏
ͳݖݶ͕͋Δ͔Λࢦఆ
• ϑΟʔϧυʹظ͞ΕΔใͷλΠϓʹؔ͢ΔϒϥβͷΨΠμϯεΛఏ
• ɺɺɺʹରͯ͠ར༻Մೳ
autocompleteͷɺhttps://developer.mozilla.org/ja/docs/Web/HTML/Attributes/
autocomplete Ͱ֬ೝͰ͖Δ
Slide 4
Slide 4 text
autocompleteͷ༻ͷྫ
• ৽͍͠ΞΧϯτΛ࡞͢Δࡍɺొ͢ΔϢʔβʔωʔϜͱύεϫʔυΛύε
ϫʔυϚωδϟʔ (Keychainɺ1PasswordͳͲ) ʹఏڙ͢Δ
• ϩάΠϯ͢Δ࣌ʹɺϢʔβʔωʔϜͱύεϫʔυΛࣗಈͰೖྗ͞ΕΔ
• ΫϨδοτΧʔυͷใ͕อଘ͞Ε͍ͯΔ߹ɺࢧ͍ϑΥʔϜͳͲʹΧʔυ
ͷใΛࣗಈͰೖྗ͞ΕΔ
Slide 5
Slide 5 text
ϢʔβʔొϑΥʔϜͷautocompleteͷ
Sign up
Email New password Register Account Ϧϙͪ͜Β: https://github.com/ivanova-marina/autocomplete-sampleSlide 6
Slide 6 text
ϩάΠϯϑΥʔϜͷautocompleteͷ
Sign in
Email Password Sign in Ϧϙͪ͜Β: https://github.com/ivanova-marina/autocomplete-sampleSlide 7
Slide 7 text
·ͱΊ
w BVUPDPNQMFUFͷհͯ͠ɺొϑΥʔϜΫϨδοτΧʔυೖྗϑΥʔϜʹ͑Δ
w ొ͢ΔϢʔβʔωʔϜͱύεϫʔυΛอଘ͞ΕɺϩάΠϯ͢Δ࣌ʹɺϢʔβʔωʔϜͱύεϫʔυ
ΛࣗಈͰೖྗ͞ΕΔ
w ొϑΥʔϜʹɺϢʔβʔωʔϜʹBVUPDPNQMFUFlVTFSOBNFz ϝʔϧΛొͯ͠
ɺύεϫʔυ
ʹBVUPDPNQMFUFlOFXQBTTXPSEzΛࢦఆ
w ϩάΠϯϑΥʔϜʹϢʔβʔωʔϜʹBVUPDPNQMFUFlVTFSOBNFzɺύεϫʔυʹ
BVUPDPNQMFUFlDVSSFOUQBTTXPSEΛࢦఆͨ͠ΒɺϓεϫʔυϚωʔδϟʔ͔Βਖ਼͘͠औಘࣗ͠ಈ
Ͱೖྗ͞ΕΔ
Slide 8
Slide 8 text
ࣗݾհ
• ϚϦφɾΠϫϊϫ
• גࣜձࣾΏΊΈͰϑϩϯτΤϯυΤϯδχΞ
ͱͯ͠ॴଐ
• ϞεΫϫग़ɺژࡏॅ
• ࠷ۙ՛ࢠ࡞ΓʹϋϚ͍ͬͯ·͢ @qcapy_frontend
@[email protected]