ããã³ãã¨ã³ãã¨ã³ã¸ãã¢ã«æ±ãããããã®å¤ããåé¡
èæ¯
postd.cc ã¨ããè¨äºãã¡ãã£ã¨åã«ããã¾ããã
github.com Roadmap to becoming a web developer in 2018ã£ã¦æè¿ã®Webæè¡ã®ã¾ã¨ãã¿ãããªãããããå¼ãåãã«åºããã¾ãã
ãã®ã¾ã¨ãã®ä¸ã«ããã³ãã¨ã³ãã®ãã®ããã¾ãããããã¯ããã³ãã¨ã³ãæè¡èªä½ã®ãã¼ããããã§ãã
ãããã®æè¡ãã¹ã¦ã«ç²¾éãã¦ããã°ããã®ãã¨è¨ãããã¨ãããªå¿ è¦ã¯å ¨ãç¡ãã¦ã
ã§ãç¾å ´ã«ãã£ã¦å®é ããã³ãã¨ã³ãã¨ã³ã¸ãã¢ã«æ±ãããã¦ãããã®ã¯ãã以å¤ã«ããããããããã§ãããã
ä¼ç¤¾ã«ãã£ã¦ãã¸ã§Javascriptããã°ã©ãã³ã°ãããããªã人ãããã¼ã¯ã¢ãããã人ããã¶ã¤ã³ãä½ã£ã¦ãããCSSã«è½ã¨ãäººãæ¬å½ã«ä¸å£ã«ããã³ãã¨ã³ãã¨ã³ã¸ãã¢ã¨è¨ã£ã¦ãå¹ åºããã
æ å½ç¯å²ãåºãããããã³ãã¨ã³ãã¨ã³ã¸ãã¢ã«é¢ãã¦ããããªä¼ç¤¾ãåéãã¦ãã¨æããã§ãããå ·ä½çã«ã©ãããã¹ãã«ãæ±ãããã¦ãã®ãã¨ãéã«ããããã®ããã¾ããã£ã¦ã®ã¯ã£ãããã¦ãããã¨é¸å®ããéã«åèã«ãªãããªãã¨ããã®ããã®ã¹ãã«ã®ä¸è¦§è¡¨ã¿ãããªã®ãä½ãããã¨æã£ã¦ãã®è¨äºãæ¸ãã¦ãã¾ãã
ããã¨ãç§èªèº«ã¯ããä¼ç¤¾ããã¡ãã£ã¦ãã¢ã¿ãããªæããªãã§ãããä¸å¸ãããªããã°ç®æ¨é¢è«ã¨ãããªããä»èªåãã©ãã«ãã¦ã©ãã«åãã£ã¦ããã®ãç¸è«åºæ¥ã人ãããªãã®ã§è¿·åã«ãªã£ã¦ã¾ããï¼ãã¸ã§åè·ã¯ä¿¡é ¼åºæ¥ãä¸å¸ããã¦è¯ãã£ããªãæ³£ï¼
ãã®ããã¹ãã«ã®æ£å¸ãããã¦ããããè¶³ãã¦ãªãããããæ¬¡ãããããã£ã¦ã®èãããããå°ã¨ãªããããªãã®ãä½ãããã¨èãã¦ãã¾ãã
ã¨ãããã¨ã§ã§ãããä¸ã®WEBããã³ãã¨ã³ãã¨ã³ã¸ãã¢ã¨å¼ã°ãã人ãã¡ãç¾å ´ã§æ±ãããã¦ããã¹ãã«ã ã¨æããããã®ãã¬ã¬ã¬ãã¨ä»¥ä¸ã«æ¸ãåºãã¦ã¿ã¾ãããããããããã¾ãã
ãã¡ããä¸åä¸å説æãããããã ãã§ï¼è¨äºæ¸ãã¦ãã¾ãã¾ãã®ã§ãããã§ã¯è©³ç´°ã¯æ¸ãã¦ã¾ããã
ãããã¾ã深度ãã©ãã ããã£ã¦ã®ãã¾ãç¾å ´ã«ãã£ã¦å¤ããããââã§ã¯å¤æãé£ããã®ã§ã
- ç¥ããªã
- ç¥ã£ã¦ã
- 触ã£ããã¨ãã
- ããããåããã
- ã¼ãããæ§ç¯åºæ¥ã
ã¨ãã§éä¿¡ç°¿çã«ãã¦ã¿ãããããã¨å¤æææã«ãªãã®ããªãã¨æã£ã¦ã¾ããï¼ââã§æ¸ãããããªã¬ãã«ã«è¡¨ã®æ¹ãããªã«ãã¦ã³ãã¦ãããã§ããï¼
ã¾ãããããããåã ã«å ·ä½çã«ã©ããã£ãã¹ãã«ãªã®ã説æãå¿ è¦ã ã¨ã¯æãã¾ãããããã¯ã¾ãä»åº¦ã
ã¹ãã«éä¿¡ç°¿
ãã¼ã¯ã¢ãã
- HTML5æºæ ãªæ£ããæç« æ§é æ§ç¯
- SEOãæèãããã¼ã¯ã¢ããã»ãµã¤ãæ§é
CSS
- ç®çã®ãã¶ã¤ã³ã®åç¾å
- ã¬ã¹ãã³ã·ã対å¿ãããã¤ã¹æ¯ã®å·®ç°å¸åï¼Gridã¨ãï¼
- CSSè¨è¨ã«é¢ãããã¼ã¯ã¢ããã¹ãã«
- è¨è¨å ¨è¬(BEMãªã©ã®å¤§è¦æ¨¡ãµã¤ãã§ãç ´ç¶»ããªãã«ã¼ã«ã¥ãã
- SASSãPOSTCSSãªã©ã®altCSS
Javascriptããã°ã©ãã³ã°
- ããã°ã©ãã³ã°åºç¤å
- Domæä½ã®ãããã
- AjaxããjQueryçã®ã©ã¤ãã©ãªã使ãã
- Javascriptãã®ãã®ã«å¯¾ããç¥èï¼ã¤ãã³ã伿ã¨ãECMAScript)
ãã¶ã¤ã³ã»ã¢ãã¡ã¼ã·ã§ã³ã¾ãã
- UIãã¶ã¤ã³åºæ¥ã
- ãã¶ã¤ã³ãã¼ã«æä½é使ãã(Adobeé¢é£ã¨ãSketch)
- ã¢ã¼ã·ã§ã³ãã¶ã¤ã³
- CSSã»JSã¢ãã¡ã¼ã·ã§ã³å®è£
htmlã»cssã»jsè¤åçå 容
- ã¢ã¯ã»ã·ããªãã£
- ãµã¤ãé«éåã«ã¤ãã¦ã®ãããã
Javascriptãã®ä»
- npmã¾ãã(yarn)
- ãã«ããã¼ã«ãã¿ã¹ã¯ã©ã³ãã¼(Webpack, gulp)
- altJS (Typescriptã¨ã)
- canvasã®æ±ãï¼create.jsãªã©ï¼
- webGL(three.js)
- PWAã¨ããã«ä»éãããããã
SPAãã¬ã¼ã ã¯ã¼ã¯ãããã
- ãã¬ã¼ã ã¯ã¼ã¯ã»ã©ã¤ãã©ãªç練度(React,Angular,Vue)
- ç¶æ 管ç(Redux,RxJS,Vuex)
- ãã¹ã(Jest,Mocha,Jasmine)
- ãããã¿ã¤ãã³ã°(Storybook)
- çµå±æ å½ãããã¤ãã£ãã¢ããªå®è£ ï¼ReactNativeç
ãªãã ããã ãããã¨ã«ãªãããã³ãã¨ã³ãã«ä»éãããµã¼ãã¼ãµã¤ãå¨ã
- Wordpresså ¨è¬
- SSRå®è£ (SSRã©ã¤ãã©ãªã§ã®å®è£ ãrailsãªã©ã®ãµã¼ãã¼ãµã¤ãã¨ã®é£æº)
- node.jsï¼faasã¨ããï¼
ã¾ã¨ã
ãããå ¨é¨ãæ±ãããã¦ãããããªç¾å ´ã¯å¤ååå¨ããªãã¦ãåºããã ãã©ãããã³ãã¨ã³ãã¨ã³ã¸ãã¢ãåä¹ãããã«ã¯å ¨é¨ãã£ã¦ãªããããªãã¦ãã¨ã¯å ¨ç¶ããã¾ãããç¾å ´ã«ãã£ã¦ã¯æ¦ãããããäºã ããããã¨ããããã¾ãã
èªåããé¦çªã£è¾¼ãã§ãã£ãããã³ãè²ã ãããã®ã§ãé£½ãæ§ã®äººã«ã¯ãããããªè·æ¥ã§ããï¼ï¼ã¾ããããã¯ã¨ã³ã¸ãã¢å ¨é¨ãï¼
ãç§ããããã®ããã£ã¦ã¾ãããçµæ§ãã£ã¦ãã¨ãèãã¾ãããããã¨ããã¯ä¸ç·ãªã®ã§ã¯ï¼ãã仿WebComponentsãã£ã¦ãªãã®ã¯å°å¦çã¾ã§ã ããããã£ãããã¿ãããªæè¦ã¯ãã·ãã· ç§ã®twitterå®ã«æãã¤ãã¦ããã ããã°ã¨æãã¾ãã
以ä¸ã§ããä¸ã®ã¨ã³ã¸ãã¢ã®çæ§ãæè¦ãã ããã