Upgrade to Pro — share decks privately, control downloads, hide ads and more …

rejectcon_frontend_journey.pdf

 rejectcon_frontend_journey.pdf

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

438799c739f93d00abc30fa2da33c543?s=128

TwitterID:@rukiadia

September 29, 2018
Tweet

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