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
890
rejectcon_frontend_journey.pdf
Rejectcon 2018で発表した資料です。
TwitterID:@rukiadia
September 29, 2018
Tweet
Share
More Decks by TwitterID:@rukiadia
See All by TwitterID:@rukiadia
セッションの有効期限をどう決めるか
rukiadia
0
63
ふんわり理解するcontext
rukiadia
1
340
今こそ深堀りする、PHPのDockerイメージ / understand_php_docker
rukiadia
3
2.7k
Dependency Injectionとデザインパターン / understand_di_and_design_patterns
rukiadia
1
370
今こそ理解するDI(Dependency Injection) / Understand Dependency Injection of PHP
rukiadia
4
4.7k
今こそ理解する PHPの日時計算 / Understand date manipulation of PHP
rukiadia
0
3k
ページネーションから考えるSQLパフォーマンス
rukiadia
0
1.5k
遅延読み込みとの正しい付き合い方 + α
rukiadia
7
1.3k
遅延読み込みとの正しい付き合い方
rukiadia
0
380
Other Decks in Programming
See All in Programming
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.2k
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
200
Netty Chicago Java User Group 2024-04-17
sullis
0
170
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
920
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
120
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
740
SIMD Parallel Programming with the Vector API
josepaumard
0
150
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
820
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
410
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
使ってみよう Azure AI Document Intelligence
kosmosebi
2
300
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
180
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
Code Reviewing Like a Champion
maltzj
514
39k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Infographics Made Easy
chrislema
238
18k
Facilitating Awesome Meetings
lara
42
5.6k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
How GitHub (no longer) Works
holman
304
140k
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 • Ϧϒηϯεͱ͍͏ձࣾͰ ϑϩϯτΤϯυͷࣄΛ͍ͯ͠·͢ɻ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ