rejectcon_frontend_journey.pdf

Rejectcon 2018で発表した資料です。

Transcript

1. ϑϩϯτΤϯυΤϯδχΞ͕ ߟ͑Δ͜ͱ͸ͨ͘͞Μ͋Δ 3FKFDUDPO
   
   
   4IP
   :BNBEB
   !SVLJBEJB
2. ͜͏͍͏ਓ͕ؒ࿩͠·͢ • AndroidΞϓϦ։ൃ • PHPͰۀ຿γεςϜ։ൃ • ੍࡞ձࣾͰϑϩϯτΤϯυ։ൃ • ࣄۀձࣾͰϑϩϯτΤϯυ։ൃ τʔλϧͰ೥͘Β͍
3. ͯ͞ɺօ͞Μʹ࣭໰Ͱ͢ɻ
4. WebαΠτͷࡾେ඼࣭ͱ͸ʁ
5. WebαΠτͷࡾେ඼࣭ • ύϑΥʔϚϯε • ΞΫηγϏϦςΟ • ηΩϡϦςΟ
6. ͦ͜ʹର͢Δ๻ୡͷ࢖໋ͱ͸
7. ࢖໋ • ϖʔδύϑΥʔϚϯεͷվળΛ͢Δɻ • ࠷దͳUIσβΠϯΛ໛ࡧ͢Δɻ • άϥϑΟΧϧͳදݱྗΛߴΊΔɻ • ϖʔδͷSEOΛڧ͘͢Δɻ • ΞΫηγϏϦςΟʹͲ͏޲͖߹͏ʁ • ϑϩϯτΤϯυΞʔΩςΫνϟʹ޲͖߹͏ɻ ๻͕ೝ͍ࣝͯ͠ͳ͍͚ͩ Ͱɺ࣮͸΋ͬͱ͋Δ͔΋
8. ΍Δ͜ͱ͸৭ʑ͋Δ͚Ͳɺ ໨త͸શͯಉ͡
9. શͯ͸ Ϣʔβମݧͷ޲্ͷͨΊ
10. ࠓճ͸ҎԼͷ࢖໋ʹϑΥʔΧε • ϖʔδύϑΥʔϚϯεͷվળΛ͢Δɻ • ϑϩϯτΤϯυΞʔΩςΫνϟʹ޲͖߹͏ɻ • WebΞΫηγϏϦςΟʹͲ͏޲͖߹͏ͷ͔ɻ
11. ϖʔδͷύϑΥʔϚϯεվળ
12. Α͘ग़ͯ͘Δ࿩ • αΠτͷදࣔʹ3ඵҎ্͔͔Δͱɺ
 40ˋҎ্ͷϢʔβ͕཭୤͢Δɻ • ද͕ࣔ1ඵ஗ΕΔ͝ͱʹ
 ίϯόʔδϣϯ཰͸7ˋݮগɻ • ಡΈࠐΈ͕1ඵ͔Β3ඵʹͳΔͱɺ
 ௚ؼ཰͸32ˋ΋্͕Δɻ
13. Webͷදࣔ଎౓͕ Ϣʔβମݧʹେ͖ͳӨڹΛ ٴ΅͢ͷ͸໌Β͔
14. ͦͯ͠ɺΑ͋͘Δޡղ • ύϑΥʔϚϯεΛվળ͢Δ͜ͱͰ
 ച্্͕͕Δɻ ຊ౰ʹͦ͏Ͱ͠ΐ͏͔ʁ
15. ػձଛࣦΛ཈͑Δ →ϚΠφεཁҼΛ཈͑Δ
16. ύϑΥʔϚϯεվળͷجຊ • 24࣌ؒ365೔ͷܭଌ • ϖʔδͷߴ଎Խ = ܭࢉྔΛݮΒ͢
17. ೔ʑͷܭଌ • ܭଌσʔλ͕ແ͍ͱ෼͔Βͳ͍͜ͱ͸ଟ͍ɻ • Webϖʔδ͸೔ʑ஗͘ͳΓ͕͕ͪͩɺʮ͍ͭɺͲͷ ͘Β͍஗͘ͳͬͨͷ͔ʯ͕෼͔Βͳ͘ͳΔɻ • αʔυύʔςΟͷJS΍CDNͷӨڹͰ஗͘ͳΔ͜ͱ΋ ߟ͑ΒΕΔɻ͔͠͠ɺ೔ʑͷܭଌ͕ແ͚Ε͹ݪҼʹḷ Γண͚ͳ͍ɻ • ͦͷ݁Ռɺਓ͸צͱงғؾͰಈ͖ग़ͯ͠͠·͏ɻ
18. “ਪଌ͢ΔͳܭଌͤΑ”
19. ܭࢉྔΛݮΒ͢ • ࡟আ → ෆཁͳ෺Λ࡟ͬͯɺܭࢉྔΛݮΒ͢ɻ • ަ׵ → ࣮૷ͷݟ௚͠ɺݴޠͷόʔδϣϯΞο ϓ • ௥Ճ → αʔόΛ૿΍͢ɻϝϞϦͷ૿ڧɻ
 ʢ͍ΘΏΔࡳଋͰԥΔͬͯ΍ͭͰ͢ʣ
20. ϑϩϯτΤϯυ͚ͩͰ΍ΕΔ ͜ͱʹ͸ݶք͕͋Δɻ
21. पΓͷྗ΋आΓΑ͏ • ϑϩϯτΤϯυଆ͚ͩͰղܾͰ͖Δࣄ͸ݶఆ తɻ • ϖʔδͷϨϯμϦϯά͕࢝·ΔΑΓ΋લͷ࣌ ఺Ͱ՝୊͕͋Δͱ͢Ε͹ɺࣗ෼ͷྗ͚ͩͰ͸ ղܾͰ͖ͳ͍͔΋ɻ • ࣗ෼ͷઐ໳෼໺Ҏ֎΋ֶͿͷ͕େࣄͳ͜ͱͰ ͢ɻʢαʔόʔαΠυɺωοτϫʔΫͳͲʣ
22. ϑϩϯτΤϯυΞʔΩςΫνϟ ʹ޲͖߹͏
23. ޲͖߹͏ • jQuery͍ͭ·Ͱ࢖͍ͬͯ͘ͷ͔ • ReactʁVueʁ ͋Γ͕ͪͳ࿩Ͱ͢ΑͶ
24. jQuery͕࢖ΘΕΔΑ͏ʹͳͬ ͨཧ༝
25. jQuery͕࢖ΘΕ͖ͯͨ༁ • ϒϥ΢βؒͷ࢓༷ࠩҟΛٵऩͯ͘͠Ε͍ͯͨɻ ʢIE8ΛࣺͯڈΔ·Ͱͷ๻ୡΛॿ͚ͯ͘Εͨʣ • ௚ײతͳϝιουͱೖ໳͠қ͞ɻ • ϥΠϒϥϦͷ֦ு͠΍͢͞ɻ
26. ೖ໳͠΍͕͢͞
 ཪ໨ʹग़Δ͜ͱ΋
27. jQueryͷͭΒ͍ϙΠϯτ • σʔλૢ࡞ͱDOMૢ࡞͕ೖΓࠞͬͨ͡ίʔυ ʹͳΓ͕ͪɻ • ίʔυ͕େن໛ʹͳΔͱɺઃܭ͕೉͘͠ͳΔɻ 
 ˞vanilla.jsͰॻ͍ͯ΋ಉ͡໰୊ʹͿ͔ͭΔɻ ظؒݶఆͰ࢖͏ϓϩϞʔγϣϯϖʔδ Ͱ͋Ε͹·ͩྑ͍͕ɺӡ༻Λ͍͔ͯ͠ ͳ͚Ε͹͍͚ͳ͍৔໘Ͱ͜ΕΛ΍ΒΕ Δͱਏ͍ɻ
28. ࣮ࡍͷͱ͜Ζɺ࢖͏΂͖ͳͷ͔ • ʮjQuery = ѱʯͳ༁Ͱ͸ͳ͍ɻ • React΍Vueʹ੾Γସ͑Δίετ΋ܰ͘ͳ͍৔ ߹͕ଟ͍ͷͰɺͦͷ··࢖͏ͷ͸ΞϦ͔ͱɻ • ʮjQueryΛണ͕͢ʯ͕໨తʹͳͬͯ͸͍͚ͳ ͍ɻ
29. jQueryΛࢭΊͨޙ͸ Ͳ͜ʹ޲͔͏ͷ͔
30. React or Vue • લఏ৚݅ͱͯ͠ɺʮ࢖͏͜ͱʢ޷ح৺Λຬͨ ͢ࣄʣʯ͕໨తʹͳͬͯ͸͍͚ͳ͍ɻ • ※Angular͸্هͷ2ͭͱໟ৭͕ҧ͏ͷͰɺҙ ਤతʹল͍͍ͯ·͢
31. ڞ௨͢ΔڧΈ • υΩϡϝϯτ͕ͪΌΜͱͯ͠Δɻ • boilerplate͕๛෋ɻ • ίϛϡχςΟ͕େ͖͍ɻ • DOMΛ௚઀͍͡ΔΑΓ΋ύϑΥʔϚϯε͕ྑ ͍ɻ
32. Reactʹରͯ͠ࢥ͏͜ͱ • JavaScriptΛશ໘ʹԡ͠ग़͠ɺES2015Ҏ߱ͷ classߏจࢤ޲ɻ • ঢ়ଶ؅ཧͷ࢓૊ΈɺϧʔςΟϯάͷ࢓૊Έ͸ αʔυύʔςΟґଘɻ • ೔ຊͰ͸Reactͷ࢓ࣄͷํ͕ଟͦ͏ɻ
33. Vueʹରͯ͠ࢥ͏͜ͱ • JavaScriptͬΆ͞͸ͳΔ΂͘Ӆṭ͠ɺॻ͖΍͢ ͞Λલ໘ʹΞϐʔϧ͍ͯ͠Δҹ৅ɻ • ঢ়ଶ؅ཧͷϥΠϒϥϦɺϧʔςΟϯάͷ࢓૊ ΈɺSSRͷ࢓૊Έ͕ίΞϥΠϒϥϦʹ͋Δɻ
 ʢ͜͜͸ޙൃΏ͑ͷڧΈΛײ͡ΔϙΠϯτʣ
34. ͰɺͲͬͪͰ͔͢ʁ
35. ݁ہͷͱ͜ΖɺνʔϜ࣍ୈ • ಋೖ͍ͨ͠ຊਓ͕࢖͏΂͖ཧ༝Λઆ໌Ͱ͖ͯɺ ͋ͱ͸पΓΛͲΕ͚ͩר͖ࠐΊΔ͔ɻ
 ʢޙΖ͔Βࢗ͞Εͳ͍Α͏ʹʣ • ʮಋೖ͢Δ͜ͱʯ͕໨తʹͳΒͳ͍Α͏ʹɻ
 ʢΤϯδχΞͷ։ൃମݧΛॏࢹ͗͢͠ͳ͍ʣ
36. ΞΫηγϏϦςΟʹ޲͖߹͏
37. ΞΫηγϏϦςΟͱ͸ʁ
38. ΞΫηγϏϦςΟͱ͸ • “accessible” = “access” + “able” • ଟ͘ͷਓ͕ར༻͠΍͍͢ঢ়ଶͷ࣮ݱΛ͢Δ͜ ͱ͕ΞΫηγϏϦςΟͷ޲্ʹܨ͕Δɻ • ݐங෺Ͱ͋Ε͹ɺʮϢχόʔαϧσβΠϯʯ ͱ͍͏ݴ͍ํ΋͠·͢Ͷɻ • JISن֨΋͋Δ͠ɺW3Cקࠂͷج४΋͋Δɻ
39. ࠓ೔͔Β࢝ΊΔ ΞΫηγϏϦςΟ
40. ʮݟ΍͢͞ʯ
41. ʮݟ΍͢͞ʯͱ͸ʁ • ʮݟͮΒ͍ʯͱײ͡ΔཁૉΛഉআͨ݁͠Ռɻ • ʮݟͮΒ͘ͳ͍ʯɺ͕ʮݟ΍͍͢ʯʹܨ͕Δɻ
42. Ͱ͸ɺਓ͸Ͳ͏͍͏࣌ʹ ʮݟͮΒ͞ʯΛײ͡Δͷ͔
43. Լʹॻ͍ͯ͋Δจࣈɺݟ͑·͢ʁ • ͜ͷจষݟ͑·͔͢ʁ • ͜ͷจষݟ͑·͔͢ʁ
44. ʮݟͮΒ͞ʯΛײ͡Δ໨҆Λ ਓͦΕͧΕ
45. ͦΕͧΕͷ౓߹͍ • ϢʔβͷࢹྗɺϞχλʔͷً౓΍ઃఆʹΑͬ ͯಡΈʹ͘͘ͳΔ͜ͱ͸ى͜ΓಘΔɻ • ·ͨɺશͯͷਓ͕৭Λਖ਼֬ʹೝࣝͰ͖Δ༁Ͱ ͸ͳ͍ɻ • உੑͰ͸12ਓʹ1ਓɺঁੑͰ͸200ਓʹ1ਓͷ ׂ߹ͰɺͳΜΒ͔ͷ৭֮ҟৗΛ๊͍͑ͯΔɻ
46. ͲΜͳਓ͕ԿͷσόΠεͰ ΍ͬͯདྷΔ͔͸༧ଌෆೳ
47. جຊͱͳΔ2ͭͷݪҼ • จࣈͷେ͖͞ • ৭ͷίϯτϥετ
48. ৭ͷίϯτϥετൺΛ ମײͯ͠ΈΑ͏
49. Լͷจࣈ͕ಡΊ·͔͢ʁ • ͜Μʹͪ͸ • ͜Μʹͪ͸ • ͜Μʹͪ͸ • ͜Μʹͪ͸ • ͜Μʹͪ͸ • ͜Μʹͪ͸ ͔͜͜ΒԼͷจࣈ͸
    ൺֱతಡΈ΍͍͢ͱײ͡Δ͸ͣ
50. ৭ͷίϯτϥετൺ • ओ؍Ͱ൑அͤͣʹɺ͖ͪΜͱܭࢉ͢Δͷ͕େࣄɻ ܭଌπʔϧ͸͋Γ·͢ɻ • https://contrast-ratio.com/ ͕
 ݸਓతʹ޷͖Ͱ͢ɻ • WCAG2.0ͷίϯτϥετج४͕͋ΔͷͰɺࡉ ͔͍਺஋৘ใͳͲ͸ͦͪΒΛ֬ೝ͢Δͷ͕࣮֬ɻ
51. ͜͜͸ೖΓޱʹ͗͢ͳ͍
52. ΞΫηγϏϦςΟಓ͸௕͍ • ৭ͷ࿩୊͸͋͘·ͰණࢁͷҰ֯Ͱ͔͠ͳ͍ɻ ίϯςϯπͷઃܭɺΠϯλϥΫγϣϯͷઃܭɺ ηϚϯςΟοΫͳHTMLͳͲɺҙࣝ͢΂͖఺͸ ଟ͍ɻ • ͜Ε·ͨϑϩϯτΤϯυΤϯδχΞ1ਓͰͲ͏ ʹ͔ग़དྷΔ՝୊Ͱ͸ͳ͘ɺҰேҰ༦ʹղܾग़ དྷΔ՝୊Ͱ΋ͳ͍ɻ
53. ·ͱΊ
54. ΍ΕΔ͜ͱ͸ͨ͘͞Μ͋Δ
55. ΍ΕΔ͜ͱ͸ͨ͘͞Μ͋Δ • αΠτͷՁ஋ΛߴΊɺϢʔβମݧΛྑ͘͢Δ ͨΊʹग़དྷΔ͜ͱ͸ͨ͘͞Μ͋Δɻ • શ෦΍Δͷ͸೉͍͔͠΋͠Εͳ͍͕ɺࣗ෼͕ ஫ྗ͢ΔྖҬΛ޿͛Δ͜ͱͰ࢓ࣄͷ෯΋޿͕ Δ͔΋͠Εͳ͍ɻ
56. ؤு͍͖ͬͯ·͠ΐ͏ʂ
57. ࢀߟʹͨ͠ࢿྉ
58. ࢀߟࢿྉURL • WebαΠτͷදࣔ଎౓ߴ଎Խͷߟ͑ํ
 http://spelldata.co.jp/blog/blog-2017-03-07.html • ReactͱVueͷͲͪΒΛબͿ͔ 
 https://qiita.com/yoichiwo7/items/ 236b6535695ea67b4fbe • ΢ΣϒΞΫηγϏϦςΟج൫ҕһձ
 https://waic.jp/
59. ࢀߟॻ੶ • ʰݱ৔ͷϓϩ͔ΒֶͿSEOٕज़όΠϒϧʱ
 https://book.mynavi.jp/pcbook/blog/detail/ id=92740 • ʰσβΠχϯάWebΞΫηγϏϦςΟʱ
 https://tatsu-zine.com/books/designing-web- accessibility
 
 ※྆ํPDFͰങ͑·͢ɻ
60. ࢀߟʹͨ͠τʔΫ • ʰςΫχοΫͰ͸ͳ͘ɺࠓɺຊؾͰऔΓ૊Ή ΂͖WebύϑΥʔϚϯε HTML5 Conference 2017ʱ
 https://www.youtube.com/ watch?v=ulfiFNJ6Tzs
61. ͍ͭͰʹࣗݾ঺հ
62. ࣗݾ঺հ • ࢁాɹ঵ʢ΍·ͩɹ͠ΐ͏ʣͱਃ͠·͢ɻ • Twitter : @rukiaida • Ϧϒηϯεͱ͍͏ձࣾͰ
 ϑϩϯτΤϯυͷ࢓ࣄΛ͍ͯ͠·͢ɻ
63. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ