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
470
今こそ深堀りする、PHPのDockerイメージ / understand_php_docker
rukiadia
3
3.1k
Dependency Injectionとデザインパターン / understand_di_and_design_patterns
rukiadia
1
520
今こそ理解するDI(Dependency Injection) / Understand Dependency Injection of PHP
rukiadia
4
5.7k
今こそ理解する PHPの日時計算 / Understand date manipulation of PHP
rukiadia
0
3.5k
ページネーションから考えるSQLパフォーマンス
rukiadia
1
1.8k
遅延読み込みとの正しい付き合い方 + α
rukiadia
7
1.4k
Other Decks in Programming
See All in Programming
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
理論と実務のギャップを超える
eycjur
0
180
CSC305 Lecture 12
javiergs
PRO
0
240
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
460
CSC509 Lecture 06
javiergs
PRO
0
270
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
670
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
340
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
980
技術的負債の正体を知って向き合う
irof
0
270
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.2k
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
110
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
354
21k
Documentation Writing (for coders)
carmenintech
75
5.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
The Pragmatic Product Professional
lauravandoore
36
7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
A designer walks into a library…
pauljervisheath
209
24k
Raft: Consensus for Rubyists
vanstee
140
7.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
BBQ
matthewcrist
89
9.9k
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 • Ϧϒηϯεͱ͍͏ձࣾͰ ϑϩϯτΤϯυͷࣄΛ͍ͯ͠·͢ɻ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ