WCAN 2020 Frontend Special
ã€ãã³ãå 容
WCAN 2020 Frontend Special
åºæŒ
- ãšãããååäŒç€Ÿ / æ ªåŒäŒç€Ÿ H2O space ãã«ãã¡ ãŸããšãã
- æ ªåŒäŒç€Ÿãµã€ããŒãšãŒãžã§ã³ã æ¡ç° èäžãã
- æ ªåŒäŒç€ŸICS æµ·èæ± åªå€ªãã
- æ ªåŒäŒç€Ÿãã¯ã»ã«ã°ãªãã äžæ 享ä»ãã
æ¥æã»åœ¢åŒ
- æ¥æïŒ2020幎11æ14æ¥ïŒåïŒ13:00-17:00ïŒæèŠªäŒ 17:00~ïŒ
- 圢åŒïŒãªã³ã©ã€ã³ â»ãªã³ã¯ã¯åå è ã ãã«è¡šç€ºãããŸã
ã¿ã€ã ããŒãã«
- 12:30 ã 13:00ããªã³ã©ã€ã³ã€ãã³ããžã®ãªã³ã¯ã§ç»é¢å ±æã®éå§
- 13:00 ã 13:15ããªãŒããã³ã°
- 13:15 ã 13:55ãã¡ã€ã³ã»ãã·ã§ã³1+質çå¿ç(30å+10å)
- 13:55 ã 14:35ãã¡ã€ã³ã»ãã·ã§ã³2+質çå¿ç(30å+10å)
- 14:35 ã 14:55ãã©ã€ããã³ã°ããŒã¯ïŒLT1 ~ LT3ïŒ
- 14:55 ã 15:10ãäŒæ©(15å)
- 15:10 ã 15:50ãã¡ã€ã³ã»ãã·ã§ã³3+質çå¿ç(30å+10å)
- 15:50 ã 16:30ãã¡ã€ã³ã»ãã·ã§ã³4+質çå¿ç(30å+10å)
- 16:30 ã 17:00ããšã³ãã£ã³ã°ïŒã¢ã³ã±ãŒãåç
- 17:00 ã 18:00ãæèŠªäŒ
â»æ¥ç¶äžè¯ãªã©ã®ãããåŸãªãç¶æ³ã«ãªã£ãéãã»ãããŒæéãå»¶é·ãããå¯èœæ§ããããŸãããäºæ¿ãã ããã
ã¡ã€ã³ã»ãã·ã§ã³1ãããã³ããšã³ããšã³ãžãã¢ã®ããŒãããããšåŠç¿æ³ã
ãŠã§ãã®æè¡ã¯é²åãç¶ãããããã³ããšã³ããšã³ãžãã¢ãã«æ±ããããæè¡ãç¥èãéåžžã«å¹ åºããªããŸãããããã³ããšã³ããšã³ãžãã¢ãç®æããä»äºãç¶ããã«ã¯ã©ããªããŒãããããæãã°è¯ãã®ãããã®åŠç¿æ³ã玹ä»ããŸãã
ãšãããååäŒç€Ÿ / æ ªåŒäŒç€Ÿ H2O space ãã«ãã¡ ãŸããšãã
代衚åç· åœ¹

å°åŠçããããã°ã©ãã³ã°ã«èŠªãã¿ãWebå¶äœäŒç€Ÿ H2O spaceãèµ·æ¥ã䞻㫠Webæ¥çã®ã¯ãªãšã€ã¿ãŒåãã«ãåçš®ã®è¬æŒãå·çãéããåŠç¿ã³ã³ãã³ããå±éã
ããã³ã¬ã§ãã¹ã¿ãŒ ããã°ã©ãã³ã°æå®€ïŒããã©ç€Ÿåã»ç£ä¿®ïŒãããããããããPHPã®æç§æžïŒãã€ããåºçåïŒããªã©å·ç倿°ã
è¿å¹Žã¯ãè¬åº§åç»é
ä¿¡ãã©ãããã©ãŒã Udemyãéããæ åè¬çŸ©é
ä¿¡ãªã©ãæãããã
ã¡ã€ã³ã»ãã·ã§ã³2ãããŒã¯ã¢ãããé²åãããWAI-ARIAã®åºæ¬ã
ãŠã§ãäžã®ãªãããªUIã«ã»ãã³ãã£ã¯ã¹ãä»äžããããã«ç£ãŸããWAI-ARIAããªããšãªãç¥ã£ãŠãæ¹ãããªããšãªã䜿ã£ãŠãæ¹ãå€ãã®ã§ã¯ãªãã§ããããããã®ã»ãã·ã§ã³ã§ã¯WAI-ARIAã®ç®çãäœ¿ãæ¹ãæ³šæç¹ãªã©åºæ¬ã«ç«ã¡è¿ã£ãŠè§£èª¬ããŸãã
æ ªåŒäŒç€Ÿãµã€ããŒãšãŒãžã§ã³ã æ¡ç° èäžãã
ã¡ãã£ã¢äºæ¥æ¬éš æè¡æšªæå®€ / Developer Experts - Accessibility

è£œé æ¥åãèšèšãœãããŠã§ã¢ã®ã»ãŒã«ã¹ãããŠã§ãæ¥çã«è»¢èº«ããããžãæ ªåŒäŒç€ŸãçµãŠã2017幎1æãµã€ããŒãšãŒãžã§ã³ãå ¥ç€ŸãçæŸéãã©ãããã©ãŒã ãFRESH LIVEããå ¬å¶ç«¶æãããæç¥šãµãŒãã¹ãWINTICKETãã®ãŠã§ãããã³ããšã³ãéçºã®åŸã瀟å å€ã§ã®ã¢ã¯ã»ã·ããªãã£ã®åèã»æšé²ã«åŸäºããŠãããWAICïŒãŠã§ãã¢ã¯ã»ã·ããªãã£åºç€å§å¡äŒïŒäœæ¥éšäŒ2ïŒå®è£ ïŒå§å¡
ã¡ã€ã³ã»ãã·ã§ã³3ãã¢ãã³ãªCSSèšèš - Vue.js/Reactæä»£ã®CSSã®æžãæ¹ãšãããã -ã
Vue.jsãReactãªã©ã®ãã¬ãŒã ã¯ãŒã¯ã®æ®åã«äŒŽããCSSã®æžãæ¹ãå€åããŠããŸãããã®ã»ãã·ã§ã³ã§ã¯ãCSSã®æžãæ¹ã«ã©ã®ãããªå€åãèµ·ããŠããã®ãããã®å€åã«ã©ã察å¿ããŠããã¹ããããã®èãæ¹ã解説ããŸãã
æ ªåŒäŒç€ŸICS æµ·èæ± åªå€ªãã
ã€ã³ã¿ã©ã¯ã·ã§ã³ãã¶ã€ããŒ

Webãã¶ã€ããŒãšããŠãã£ãªã¢ãã¹ã¿ãŒããåŸã«ãšã³ãžãã¢ãªã³ã°ã®äžçã«é
åãæãããã³ããšã³ããšã³ãžãã¢ãžãšè»¢èº«ãCSSãåŸæãšããæè¿ã§ã¯WebãµãŒãã¹ãªã©ã®äžãå€§èŠæš¡æ¡ä»¶ã®CSSèšèšãæ
åœããŠããã
ãŸããã¶ã€ã³ããŒã«ã«ãèå³ãããããAdobeXDæ°æ©èœç޹ä»åç»ããã»ãŒæ¯æã®ã¢ããããŒãã«åãããŠäœæããŠããã
ã¡ã€ã³ã»ãã·ã§ã³4ãVueãReactã䜿ããªãJamstackå ¥éã
Jamstackã¯ç¹å®ã®æè¡ãã©ã€ãã©ãªã«ãããªãã¢ãŒããã¯ãã£ã§ããããã¬ãŒã ã¯ãŒã¯ã®æ©èœãReactãå¿ èŠãªã©ãšééã£ãŠèªèããŠããŸã£ãŠãã人ãããããã§ãããã®ã»ãã·ã§ã³ã§ã¯ãã®èª€è§£ãè§£ããšãšãã«ãJamstackã®åºæ¬ãšãç¹åŸŽã§ããäºåã®HTMLçæã«ã€ããŠéçãµã€ããžã§ãã¬ãŒã¿ãŒãeleventyããäŸã«ç޹ä»ããŸãã
æ ªåŒäŒç€Ÿãã¯ã»ã«ã°ãªãã äžæ 享ä»ãã
代衚åç· åœ¹ïŒJamstackãšã³ãžãã¢

2009幎ã«JavaScriptã®äŒç€ŸãšããŠæ ªåŒäŒç€Ÿãã¯ã»ã«ã°ãªãããèšç«ã 倿°ã®Webãªãã¥ãŒã¢ã«ãæ°èŠç«ã¡äžããåãä»åã£ãçµéšãæã¡ãæ å ±èšèšãããã³ããšã³ããã¯ã©ãŠã掻çšãéçºãããŒã®å¹çåãåŸæãšããã Webãããçºå±ããããããæ°ãããã©ãŠã¶ã«å®è£ ãããæ©èœã®æŽ»çšäºäŸãæ°å€ãçã¿åºãã€ã€ãæ¥ã ãã¯ã©ãŠããµãŒãã¹ãå©çšããå¹çã®ããå¶äœã»éçºææ³ã®è©Šè¡é¯èª€ãç¶ããŠããã çŸåšã®èå³ã¯Jamstackã
ã©ã€ããã³ã°ããŒã¯
ã©ã€ããã³ã°ããŒã¯ã§ã¯ã1人5åéã®çããã¬ãŒã³ãè¡ãªã£ãŠããã ããŸãã ä»åã¯äžèšã®æ¹ã«ãç»å£ããã ããŸãã
- LT1ãAdobe XD for Visual Studio Code詊çšã¬ããŒããæŠè€ æ¡åãã
- LT2ãCSS in JSã§å€ããããšå€ãããªãããšãIncrementsæ ªåŒäŒç€Ÿ 綿貫 䜳ç¥ãã
- LT3ãjQueryã³ãŒãã°ããã ã£ãç§ã Vue.js ã§åäžãã¡ã€ã«ã³ã³ããŒãã³ãã«ãã£ã¬ã³ãžããè©±ãæ ªåŒäŒç€ŸHAMWORKS é·è°·å· åºæŠãã
æèŠªäŒã«ã€ããŠ
åœæ¥ã®æèŠªäŒã¯ Ovice ãšããWebãµãŒãã¹ãå©çšããŸãã
Oviceã§ã¯ãè¿ãã«ãã人ã®å£°ã倧ããèããã話ããããšãã«è©±ããã人ã«è¿ã¥ããŠäŒè©±ããããšãã§ããŸãã
æšå¥šç°å¢ã¯PCã®Chromeã§ããOvice ã䜿ãã®ãåããŠã®æ¹ã¯ãäºåã«äžèšã®ç»åãã¯ãªãã¯ããŠå ¥å®€ããŠè©Šãããšãã§ããŸããããã㯠Ovice Official ã¬ã€ããã㯠ãã芧ãã ããã
泚æäºé åã³ãé¡ã
æ¬ã€ãã³ãã®åå è ã®çæ§ãå¿å°ããã»ãããŒãåè¬ããæ¬ã€ãã³ããç¶ç¶ããŠéå¶ããŠããããã®æ³šæäºé ãšãé¡ãã«ãªããŸãã
æ¬ã€ãã³ãã«åå ããããã«ã¯ã以äžã®æ³šæäºé ã«åæããŠããã ãå¿ èŠããããŸããæ³šæäºé ãããèªãã§ãåæã®ãããç³èŸŒã¿ã»ãåå ãã ããããç³èŸŒã¿ã»ãåå é ããå Žåãæ³šæäºé ã«åæãããã®ãšã¿ãªãããŸãã
- ãç³ã蟌ã¿ã®éã«ãæäŸããã ãåå è ã®æ å ±ã¯ãæ¬ã€ãã³ãã«é¢ãããé£çµ¡ãã®ä»æ¬ã€ãã³ãã宿œããç®çã§å©çšããä»ããã©ã€ãã·ãŒããªã·ãŒã«åŸã£ãŠé©åã«åãæ±ãããŸãã
- æ¬ã€ãã³ãã¯ãç³ã蟌ã¿å¶ãšãªããŸããæ¬ã€ãã³ãã«åå ããæš©å©ãã第äžè ã«è²æž¡ããããšã¯ã§ããŸããã
- æ¬ã€ãã³ãã¯Zoomã䜿çšããŠé ä¿¡ãããŸããã¢ããªããèŠèŽããå Žåãææ°ããŒãžã§ã³ã«ã¢ããããŒãã®äžãåå ãã ããã
- Zoomããå©çšããã ãã«ããã£ãŠã¯ãå¥éZoomã®ãµãŒãã¹èŠçŽãé©çšãããŸããæ¬ã€ãã³ãåå äžã¯ãZoom å ¥å®€æã«ç»é²ããååãå ¬éãããç¶æ ãšãªãã³ã³ãã³ããããããŸãããèªèº«ã§è²¬ä»»ããã£ãŠç¢ºèªã®ããããå©çšãã ãããZoomã®ãå©çšã«ããããçºçããæå®³ã«ã€ããŸããŠåŒç€Ÿã¯äžåã®è²¬ä»»ãè² ããããŸãã
- æ¬ã€ãã³ãã«åå ããã ãã«ããããéä¿¡è²»çšã¯åå è ãèªèº«ã®è² æ ãšãªããŸãããŸããåå å Žæã«ã€ããŸããŠãããèªèº«ã§çšæããã ãå¿ èŠãããããŸãã
- äžé©åãªè¡åã«å¯Ÿããæ¹éã«è©²åœããè¡åã確èªãããå Žåã¯ã匷å¶éåºã次å以éã®ã€ãã³ãåå ããæããããªã©ã®å¯Ÿå¿ããããŠããã ããŸãã
- ãããåŸãªããšå€æããå Žåãæ¬ã€ãã³ãã¯å 容ã®äžéšå€æŽãŸãã¯äžæ¢ãããŠããã ãå ŽåãããããŸãã
- æ¬ã€ãã³ãã®é²ç»ã»é²é³ã¯ãé æ ®ãã ãããå¯èœãªã»ãã·ã§ã³ã«ã€ããŸããŠã¯ãåŸæ¥ãã©ããŒã¢ããåç»ãçšæããäºå®ã§ãã
äžé©åãªè¡åã«å¯Ÿããæ¹é
æ¬ã€ãã³ããžã®åå ã«ããããäžèšã®è¡çºã倿ããå Žåã匷å¶éåºã次å以éã®ã€ãã³ãåå ããæããããªã©ã®å¯Ÿå¿ããããŠããã ãå ŽåããããŸãã
- æ¬ã€ãã³ãã®éå¶ã劚ãããããªè¡çº
- è¬åž«ãä»ã®åå è ã®èäœæš©ãèåæš©ããã®ä»ç¥çè²¡ç£æš©ã䟵害ããè¡çº
- è¬åž«ãä»ã®åå è ãå·®å¥ã誹è¬äžå·ãè è¿«ããããã¯ãã©ã€ãã·ãŒã人暩çã䟵害ããè¡çº
- å ¬åºè¯ä¿ã«åããè¡çºãç¯çœªè¡çºãåå è æ§ã®å¿èº«ã«æªåœ±é¿ãåãŒãè¡çºããŸãã¯ãã®ãããã®ããè¡çº
- Zoomã®ãµãŒãã¹èŠçŽã«éåããè¡çº
- ãã®ä»æ³åŸãæ³ä»€ã«åããè¡çºããŸãã¯ãã®ãããã®ããè¡çº
- ãã®ä»åŒç€Ÿãäžé©åœã»äžé©åãšå€æããè¡çº
ã€ãã³ãã¹ã¿ããã¯ãæ¬ã€ãã³ãã«é¢ããæ¹ã ãããããè¯ãæéãéãããŠããã ããããã«èããŠããŸããåå è ã®çæ§ãä»ã®æ¹ãäžå¿«ã«ããããããªçºèšãè¡åã¯è¬¹ãã§ããã ããŸããšå¹žãã§ãã
ãåãåãã
- ã¡ãŒã«ïŒinfo@wcan.jp
- TwitterïŒ@twcan
- facebookïŒ@wcan.jp
â»ã»ãããŒçŽåãéå§åŸã®ååãã¯ã察å¿ãé£ããå ŽåãããããŸããäºããäºæ¿ãã ããã
åè³
2020幎åè³äŒæ¥
ã¹ãã«ã¢ãããµããŒãäŒæ¥
瀟å¡ã®WCANãžã®åå è²»çšãäŒç€Ÿã§è² æ ããåå ã奚å±ããŠããäŒæ¥ã§ãã
泚æäºé
â» ãã¡ãã®ã€ãã³ãæ å ±ã¯ãå€éšãµã€ãããååŸããæ å ±ãæ²èŒããŠããŸãã
â» æ²èŒã¿ã€ãã³ã°ãæŽæ°é »åºŠã«ãã£ãŠã¯ãæ å ±æäŸå ããŒãžã®å 容ãšå·®ç°ãçºçããŸãã®ã§äºããäºæ¿ãã ããã
â» ææ°æ å ±ã®ç¢ºèªãåå ç³èŸŒæç¶ããã€ãã³ãã«é¢ãããåãåããçã¯æ å ±æäŸå ããŒãžã«ãŠãé¡ãããŸãã

ãåãåãã
é¢é£ããã€ãã³ã

SESã»ITäŒæ¥äº€æµäŒã2026幎4æ28æ¥ãæ¡ä»¶ã»èŠå¡ã»ããŒãããŒãæ¢ããSESå¶æ¥æ åœè ããžãã¹äº€æµã€ãã³ãïŒç¥ç°ïŒ
2026/04/28(ç«) éå¬
SESã»ITäŒæ¥äº€æµäŒã2026幎5æ21æ¥ãæ¡ä»¶ã»èŠå¡ã»ããŒãããŒãæ¢ããSESå¶æ¥æ åœè ããžãã¹äº€æµã€ãã³ãïŒæ± è¢ïŒ
2026/05/21(æš) éå¬
SESã»ITäŒæ¥äº€æµäŒã2026幎5æ19æ¥ãæ¡ä»¶ã»èŠå¡ã»ããŒãããŒãæ¢ããSESå¶æ¥æ åœè ããžãã¹äº€æµã€ãã³ãïŒç¥ç°ïŒ
2026/05/19(ç«) éå¬
SESã»ITäŒæ¥äº€æµäŒã2026幎5æ22æ¥ãæ¡ä»¶ã»èŠå¡ã»ããŒãããŒãæ¢ããSESå¶æ¥æ åœè ããžãã¹äº€æµã€ãã³ãïŒæ± è¢ïŒ
2026/05/22(é) éå¬
éçºè ã®ããã®Claude Code Skillsãæ©ã¿è§£æ¶äŒ - ããã«æŽ»çšããã®ããã®Tipsãå ¬éïŒ
2026/05/13(æ°Ž) éå¬- TOP
- ã€ãã³ã
- WCAN 2020 Frontend Special











