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
rejectcon_frontend_journey.pdf
Search
TwitterID:@rukiadia
September 29, 2018
Programming
0
1k
rejectcon_frontend_journey.pdf
Rejectcon 2018で発表した資料です。
TwitterID:@rukiadia
September 29, 2018
Tweet
Share
More Decks by TwitterID:@rukiadia
See All by TwitterID:@rukiadia
やらない事を決めるプロダクト設計
rukiadia
16
9.4k
セッションの有効期限をどう決めるか
rukiadia
0
170
ふんわり理解するcontext
rukiadia
1
460
今こそ深堀りする、PHPのDockerイメージ / understand_php_docker
rukiadia
3
3.1k
Dependency Injectionとデザインパターン / understand_di_and_design_patterns
rukiadia
1
510
今こそ理解するDI(Dependency Injection) / Understand Dependency Injection of PHP
rukiadia
4
5.6k
今こそ理解する PHPの日時計算 / Understand date manipulation of PHP
rukiadia
0
3.5k
ページネーションから考えるSQLパフォーマンス
rukiadia
1
1.7k
遅延読み込みとの正しい付き合い方 + α
rukiadia
7
1.4k
Other Decks in Programming
See All in Programming
XP, Testing and ninja testing ZOZ5
m_seki
2
300
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.2k
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
160
Serena MCPのすすめ
wadakatu
4
900
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
530
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
630
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
690
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
450
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1k
CSC509 Lecture 05
javiergs
PRO
0
300
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
520
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
230
Featured
See All Featured
Site-Speed That Sticks
csswizardry
11
880
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Faster Mobile Websites
deanohume
310
31k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Rails Girls Zürich Keynote
gr2m
95
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Being A Developer After 40
akosma
91
590k
Transcript
ϑϩϯτΤϯυΤϯδχΞ͕ ߟ͑Δ͜ͱͨ͘͞Μ͋Δ 3FKFDUDPO 4IP:BNBEB!SVLJBEJB
͜͏͍͏ਓ͕ؒ͠·͢ • AndroidΞϓϦ։ൃ • PHPͰۀγεςϜ։ൃ • ੍࡞ձࣾͰϑϩϯτΤϯυ։ൃ • ࣄۀձࣾͰϑϩϯτΤϯυ։ൃ τʔλϧͰ͘Β͍
ͯ͞ɺօ͞Μʹ࣭Ͱ͢ɻ
WebαΠτͷࡾେ࣭ͱʁ
WebαΠτͷࡾେ࣭ • ύϑΥʔϚϯε • ΞΫηγϏϦςΟ • ηΩϡϦςΟ
ͦ͜ʹର͢Δୡͷ໋ͱ
໋ • ϖʔδύϑΥʔϚϯεͷվળΛ͢Δɻ • ࠷దͳUIσβΠϯΛࡧ͢Δɻ • άϥϑΟΧϧͳදݱྗΛߴΊΔɻ • ϖʔδͷSEOΛڧ͘͢Δɻ •
ΞΫηγϏϦςΟʹͲ͏͖߹͏ʁ • ϑϩϯτΤϯυΞʔΩςΫνϟʹ͖߹͏ɻ ͕ೝ͍ࣝͯ͠ͳ͍͚ͩ Ͱɺ࣮ͬͱ͋Δ͔
Δ͜ͱ৭ʑ͋Δ͚Ͳɺ తશͯಉ͡
શͯ Ϣʔβମݧͷ্ͷͨΊ
ࠓճҎԼͷ໋ʹϑΥʔΧε • ϖʔδύϑΥʔϚϯεͷվળΛ͢Δɻ • ϑϩϯτΤϯυΞʔΩςΫνϟʹ͖߹͏ɻ • WebΞΫηγϏϦςΟʹͲ͏͖߹͏ͷ͔ɻ
ϖʔδͷύϑΥʔϚϯεվળ
Α͘ग़ͯ͘Δ • αΠτͷදࣔʹ3ඵҎ্͔͔Δͱɺ 40ˋҎ্ͷϢʔβ͕͢Δɻ • ද͕ࣔ1ඵΕΔ͝ͱʹ ίϯόʔδϣϯ7ˋݮগɻ • ಡΈࠐΈ͕1ඵ͔Β3ඵʹͳΔͱɺ ؼ32ˋ্͕Δɻ
Webͷද͕ࣔ Ϣʔβମݧʹେ͖ͳӨڹΛ ٴ΅͢ͷ໌Β͔
ͦͯ͠ɺΑ͋͘Δޡղ • ύϑΥʔϚϯεΛվળ͢Δ͜ͱͰ ച্্͕͕Δɻ ຊʹͦ͏Ͱ͠ΐ͏͔ʁ
ػձଛࣦΛ͑Δ →ϚΠφεཁҼΛ͑Δ
ύϑΥʔϚϯεվળͷجຊ • 24࣌ؒ365ͷܭଌ • ϖʔδͷߴԽ = ܭࢉྔΛݮΒ͢
ʑͷܭଌ • ܭଌσʔλ͕ແ͍ͱ͔Βͳ͍͜ͱଟ͍ɻ • Webϖʔδʑ͘ͳΓ͕͕ͪͩɺʮ͍ͭɺͲͷ ͘Β͍͘ͳͬͨͷ͔ʯ͕͔Βͳ͘ͳΔɻ • αʔυύʔςΟͷJSCDNͷӨڹͰ͘ͳΔ͜ͱ ߟ͑ΒΕΔɻ͔͠͠ɺʑͷܭଌ͕ແ͚ΕݪҼʹḷ Γண͚ͳ͍ɻ
• ͦͷ݁ՌɺਓצͱงғؾͰಈ͖ग़ͯ͠͠·͏ɻ
“ਪଌ͢ΔͳܭଌͤΑ”
ܭࢉྔΛݮΒ͢ • আ → ෆཁͳΛͬͯɺܭࢉྔΛݮΒ͢ɻ • ަ → ࣮ͷݟ͠ɺݴޠͷόʔδϣϯΞο ϓ
• Ճ → αʔόΛ૿͢ɻϝϞϦͷ૿ڧɻ ʢ͍ΘΏΔࡳଋͰԥΔͬͯͭͰ͢ʣ
ϑϩϯτΤϯυ͚ͩͰΕΔ ͜ͱʹݶք͕͋Δɻ
पΓͷྗआΓΑ͏ • ϑϩϯτΤϯυଆ͚ͩͰղܾͰ͖Δࣄݶఆ తɻ • ϖʔδͷϨϯμϦϯά͕࢝·ΔΑΓલͷ࣌ Ͱ՝͕͋Δͱ͢Εɺࣗͷྗ͚ͩͰ ղܾͰ͖ͳ͍͔ɻ • ࣗͷઐҎ֎ֶͿͷ͕େࣄͳ͜ͱͰ
͢ɻʢαʔόʔαΠυɺωοτϫʔΫͳͲʣ
ϑϩϯτΤϯυΞʔΩςΫνϟ ʹ͖߹͏
͖߹͏ • jQuery͍ͭ·Ͱ͍ͬͯ͘ͷ͔ • ReactʁVueʁ ͋Γ͕ͪͳͰ͢ΑͶ
jQuery͕ΘΕΔΑ͏ʹͳͬ ͨཧ༝
jQuery͕ΘΕ͖ͯͨ༁ • ϒϥβؒͷ༷ࠩҟΛٵऩͯ͘͠Ε͍ͯͨɻ ʢIE8ΛࣺͯڈΔ·ͰͷୡΛॿ͚ͯ͘Εͨʣ • ײతͳϝιουͱೖ͠қ͞ɻ • ϥΠϒϥϦͷ֦ு͢͠͞ɻ
ೖ͕͢͠͞ ཪʹग़Δ͜ͱ
jQueryͷͭΒ͍ϙΠϯτ • σʔλૢ࡞ͱDOMૢ࡞͕ೖΓࠞͬͨ͡ίʔυ ʹͳΓ͕ͪɻ • ίʔυ͕େنʹͳΔͱɺઃܭ͕͘͠ͳΔɻ ˞vanilla.jsͰॻ͍ͯಉ͡ʹͿ͔ͭΔɻ ظؒݶఆͰ͏ϓϩϞʔγϣϯϖʔδ Ͱ͋Ε·ͩྑ͍͕ɺӡ༻Λ͍͔ͯ͠
ͳ͚Ε͍͚ͳ͍໘Ͱ͜ΕΛΒΕ Δͱਏ͍ɻ
࣮ࡍͷͱ͜Ζɺ͏͖ͳͷ͔ • ʮjQuery = ѱʯͳ༁Ͱͳ͍ɻ • ReactVueʹΓସ͑Δίετܰ͘ͳ͍ ߹͕ଟ͍ͷͰɺͦͷ··͏ͷΞϦ͔ͱɻ • ʮjQueryΛണ͕͢ʯ͕తʹͳ͍͚ͬͯͳ
͍ɻ
jQueryΛࢭΊͨޙ Ͳ͜ʹ͔͏ͷ͔
React or Vue • લఏ݅ͱͯ͠ɺʮ͏͜ͱʢح৺Λຬͨ ͢ࣄʣʯ͕తʹͳ͍͚ͬͯͳ͍ɻ • ※Angular্هͷ2ͭͱໟ৭͕ҧ͏ͷͰɺҙ ਤతʹল͍͍ͯ·͢
ڞ௨͢ΔڧΈ • υΩϡϝϯτ͕ͪΌΜͱͯ͠Δɻ • boilerplate͕๛ɻ • ίϛϡχςΟ͕େ͖͍ɻ • DOMΛ͍͡ΔΑΓύϑΥʔϚϯε͕ྑ ͍ɻ
Reactʹରͯ͠ࢥ͏͜ͱ • JavaScriptΛશ໘ʹԡ͠ग़͠ɺES2015Ҏ߱ͷ classߏจࢤɻ • ঢ়ଶཧͷΈɺϧʔςΟϯάͷΈ αʔυύʔςΟґଘɻ • ຊͰReactͷࣄͷํ͕ଟͦ͏ɻ
Vueʹରͯ͠ࢥ͏͜ͱ • JavaScriptͬΆ͞ͳΔ͘Ӆṭ͠ɺॻ͖͢ ͞Λલ໘ʹΞϐʔϧ͍ͯ͠Δҹɻ • ঢ়ଶཧͷϥΠϒϥϦɺϧʔςΟϯάͷ ΈɺSSRͷΈ͕ίΞϥΠϒϥϦʹ͋Δɻ ʢ͜͜ޙൃΏ͑ͷڧΈΛײ͡ΔϙΠϯτʣ
ͰɺͲͬͪͰ͔͢ʁ
݁ہͷͱ͜ΖɺνʔϜ࣍ୈ • ಋೖ͍ͨ͠ຊਓ͕͏͖ཧ༝Λઆ໌Ͱ͖ͯɺ ͋ͱपΓΛͲΕ͚ͩר͖ࠐΊΔ͔ɻ ʢޙΖ͔Β͞Εͳ͍Α͏ʹʣ • ʮಋೖ͢Δ͜ͱʯ͕తʹͳΒͳ͍Α͏ʹɻ ʢΤϯδχΞͷ։ൃମݧΛॏࢹ͗͢͠ͳ͍ʣ
ΞΫηγϏϦςΟʹ͖߹͏
ΞΫηγϏϦςΟͱʁ
ΞΫηγϏϦςΟͱ • “accessible” = “access” + “able” • ଟ͘ͷਓ͕ར༻͍͢͠ঢ়ଶͷ࣮ݱΛ͢Δ͜ ͱ͕ΞΫηγϏϦςΟͷ্ʹܨ͕Δɻ
• ݐஙͰ͋ΕɺʮϢχόʔαϧσβΠϯʯ ͱ͍͏ݴ͍ํ͠·͢Ͷɻ • JISن֨͋Δ͠ɺW3Cקࠂͷج४͋Δɻ
ࠓ͔Β࢝ΊΔ ΞΫηγϏϦςΟ
ʮݟ͢͞ʯ
ʮݟ͢͞ʯͱʁ • ʮݟͮΒ͍ʯͱײ͡ΔཁૉΛഉআͨ݁͠Ռɻ • ʮݟͮΒ͘ͳ͍ʯɺ͕ʮݟ͍͢ʯʹܨ͕Δɻ
ͰɺਓͲ͏͍͏࣌ʹ ʮݟͮΒ͞ʯΛײ͡Δͷ͔
Լʹॻ͍ͯ͋Δจࣈɺݟ͑·͢ʁ • ͜ͷจষݟ͑·͔͢ʁ • ͜ͷจষݟ͑·͔͢ʁ
ʮݟͮΒ͞ʯΛײ͡Δ҆Λ ਓͦΕͧΕ
ͦΕͧΕͷ߹͍ • ϢʔβͷࢹྗɺϞχλʔͷًઃఆʹΑͬ ͯಡΈʹ͘͘ͳΔ͜ͱى͜ΓಘΔɻ • ·ͨɺશͯͷਓ͕৭Λਖ਼֬ʹೝࣝͰ͖Δ༁Ͱ ͳ͍ɻ • உੑͰ12ਓʹ1ਓɺঁੑͰ200ਓʹ1ਓͷ ׂ߹ͰɺͳΜΒ͔ͷ৭֮ҟৗΛ๊͍͑ͯΔɻ
ͲΜͳਓ͕ԿͷσόΠεͰ ͬͯདྷΔ͔༧ଌෆೳ
جຊͱͳΔ2ͭͷݪҼ • จࣈͷେ͖͞ • ৭ͷίϯτϥετ
৭ͷίϯτϥετൺΛ ମײͯ͠ΈΑ͏
Լͷจࣈ͕ಡΊ·͔͢ʁ • ͜Μʹͪ • ͜Μʹͪ • ͜Μʹͪ • ͜Μʹͪ •
͜Μʹͪ • ͜Μʹͪ ͔͜͜ΒԼͷจࣈ ൺֱతಡΈ͍͢ͱײ͡Δͣ
৭ͷίϯτϥετൺ • ओ؍Ͱஅͤͣʹɺ͖ͪΜͱܭࢉ͢Δͷ͕େࣄɻ ܭଌπʔϧ͋Γ·͢ɻ • https://contrast-ratio.com/ ͕ ݸਓతʹ͖Ͱ͢ɻ • WCAG2.0ͷίϯτϥετج४͕͋ΔͷͰɺࡉ
͔͍ใͳͲͦͪΒΛ֬ೝ͢Δͷ͕࣮֬ɻ
͜͜ೖΓޱʹ͗͢ͳ͍
ΞΫηγϏϦςΟಓ͍ • ৭ͷ͋͘·ͰණࢁͷҰ֯Ͱ͔͠ͳ͍ɻ ίϯςϯπͷઃܭɺΠϯλϥΫγϣϯͷઃܭɺ ηϚϯςΟοΫͳHTMLͳͲɺҙ͖ࣝ͢ ଟ͍ɻ • ͜Ε·ͨϑϩϯτΤϯυΤϯδχΞ1ਓͰͲ͏ ʹ͔ग़དྷΔ՝Ͱͳ͘ɺҰேҰ༦ʹղܾग़ དྷΔ՝Ͱͳ͍ɻ
·ͱΊ
ΕΔ͜ͱͨ͘͞Μ͋Δ
ΕΔ͜ͱͨ͘͞Μ͋Δ • αΠτͷՁΛߴΊɺϢʔβମݧΛྑ͘͢Δ ͨΊʹग़དྷΔ͜ͱͨ͘͞Μ͋Δɻ • શ෦Δͷ͍͔͠͠Εͳ͍͕ɺ͕ࣗ ྗ͢ΔྖҬΛ͛Δ͜ͱͰࣄͷ෯͕ Δ͔͠Εͳ͍ɻ
ؤு͍͖ͬͯ·͠ΐ͏ʂ
ࢀߟʹͨ͠ࢿྉ
ࢀߟࢿྉURL • WebαΠτͷදࣔߴԽͷߟ͑ํ http://spelldata.co.jp/blog/blog-2017-03-07.html • ReactͱVueͷͲͪΒΛબͿ͔ https://qiita.com/yoichiwo7/items/ 236b6535695ea67b4fbe •
ΣϒΞΫηγϏϦςΟج൫ҕһձ https://waic.jp/
ࢀߟॻ੶ • ʰݱͷϓϩ͔ΒֶͿSEOٕज़όΠϒϧʱ https://book.mynavi.jp/pcbook/blog/detail/ id=92740 • ʰσβΠχϯάWebΞΫηγϏϦςΟʱ https://tatsu-zine.com/books/designing-web- accessibility
※྆ํPDFͰങ͑·͢ɻ
ࢀߟʹͨ͠τʔΫ • ʰςΫχοΫͰͳ͘ɺࠓɺຊؾͰऔΓΉ ͖WebύϑΥʔϚϯε HTML5 Conference 2017ʱ https://www.youtube.com/ watch?v=ulfiFNJ6Tzs
͍ͭͰʹࣗݾհ
ࣗݾհ • ࢁాɹʢ·ͩɹ͠ΐ͏ʣͱਃ͠·͢ɻ • Twitter : @rukiaida • Ϧϒηϯεͱ͍͏ձࣾͰ ϑϩϯτΤϯυͷࣄΛ͍ͯ͠·͢ɻ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ