ããã«ã¡ã¯ãããã«ïŒé·ãéããªãã®èšäºãèªãã§ããŸãããããŸã èªåã®ãã®ãæžããŸã§ã«ã¯è³ã£ãŠããŸããããã€ãã®ããã«ã家åºãä»äºãå人çãªäºæããã¡ãã¡ã§ããããŠä»ãããªãã¯åã³èšäºãæžãã®ãããè¯ãææãŸã§å»¶æããŸãããæè¿ãäœããå€ãããŸãããéçºè
ã«ãªããŸã§ã®ç§ã®äººçã®äžéšãäŸãæããŠèª¬æãããã£ããã«ãªã£ããã®ã説æããŸããããã¯ãåå¿è
ãçãæ·±ã人ãççŽã«èšã£ãŠèªåã«èªä¿¡ããªã人ã«ãšã£ãŠåœ¹ç«ã€ãããããŸãããè¡ãïŒ
åäŸã®é ã䞡芪ã¯ããããæ©äŒã«åããŠãèšå€§ãªæ°ã®çŸç§äºå
žãæ¬ãç§ã«äžããŠãããŸããããã¬ãŒã³ããèŽãçç±ã¯äœã§ãæ¬ã§ãããã¡ãããç§ã¯åœŒãã«æè¬ããããšã¯ãªãããããåœç¶ã®ããšã ãšæã£ãŠããŸãããããããæéãçµã€ã«ã€ããŠãä»ã®äººã
ãšè©±ããã¡ã«ãç§ã¯å¥åŠãªçµè«ã«éããŸãããå€ãã®äººã¯ç§ãç¥ã£ãŠããããšãç¥ãããååãæŠå¿µãæŠå¿µãèããŠããããèè
ãèªãã§ããããæ ç»ãèŠãŠããŸããã§ããããŸãã«ãã®ç¬éãæŽå¯ãçãŸããŸãããããããç¥èãã§ããé·ãéãç§ã¯ããããã¹ãŠãã©ãã«å¿çšã§ããã®ãããããŸããã§ããããªããªãã人ã
ãšã³ãã¥ãã±ãŒã·ã§ã³ããšãã ãã§ã¯ãŸã£ãããéã«ãªããªãããèå³æ·±ã話ãäŒãããšããè·æ¥ã¯åœæååšããŠããŸããã§ããïŒä»ã§ã¯äœäººãã®ããã¬ãŒãããŸãïŒ ãYouTubeãTED-ED ãªã©ïŒãç§ã¯é·ãéãèŠåŽããŠè±èªãå匷ããŸããããªããªã... ãå°æ¥ææã ãå°æ¥åœ¹ã«ç«ã€ã ãããââåœæã¯ãã¡ããå°æ¥ã®è·æ¥ã«èªä¿¡ããªãã£ãã®ã§ãããããããªãããšããçç±ã§äœåºŠãã¬ãã¹ã³ã«è¿œã蟌ãŸããŸããããã¡ããããã®ç¬éã«é£ã³ã€ããããªããšãè¯ãåºç€ãç¯ãããšãã§ããããšã«ãç§ã¯éåžžã«æè¬ããŠããŸãããã¡ãããããã¯ç§ã®å°æ¥ã®è·æ¥ãéžæããäžã§éèŠãªåœ¹å²ãæãããŸããã
ç§ã¯åçŽãªãã¥ãŒããã¹ãã§ã¯ãªããããã€ããªãããã§ããé«åºŠãªãœãã ã¹ãã«ãæã¡ã人ã ã®æŽ»åãçµç¹ããã®ã奜ãã§ãããåæã«ç©çåŠãååŠãçµæžçŸè±¡ãã³ã³ãã¥ãŒã¿ãŒ ãµã€ãšã³ã¹ãããã¥ã©ãŒ ãµã€ãšã³ã¹ã®è³æã«ãèå³ããããŸããåŠæ ¡ã§ã¯ç©çã®è©Šéšã«ãåæ Œããäºç®å ã§å·¥æ¥å€§åŠã«å ¥åŠããŸãããããã€ãã®å€§åŠã§æ£å察ã®åŠéšã«äœµé¡ããŠããã®ã§ãæåŸãŸã§ã©ããéžæããã°ããã®ãããããŸããã§ãããäºç®ã«ç³è«ãããã¹ãŠã®æžé¡ã«çœ²åããåŠéšé·ãšè©±ãããåŸãç¶ãšç§ã¯å®¶ã«åž°ããéææãæã£ãŠä»äºã«åãçµã¿ãŸããã
ããããæèµ·ãããšããããïŒæè²ïŒã«è¡ããªããã°ãããªãããšããåä»ã§ãã¯ãã¯ããèããé ã®äžã«å®çããŠããããšã«æ°ã¥ããé©ããŸãããããã¯ã©ã®ããã«ããŠããã«åœ¢æãããã®ã§ããããïŒç¬ç«ããŠããŸãã¯ã¡ã³ãã¬ãŒãšãã®ããã«å€¢ã®äžã§ããŒã¿ãäœç³»åããåšæå çŽ è¡šã®ç¥èãç²åŸãããšãã®ãããªã·ã£ããŠããã»ã¹ã®çµæãšããŠïŒç§ã«ã¯æ±ºããŠããããŸããããç§ã¯äž¡èŠªã®ãšããã«è¡ããåé¡ã説æããç§ã®çŸåšã®æèããã»ã¹ã䞡芪ã®æ¹åæ§ãå šäœçãªæé·ã«ã€ããŠããªãæçãªè©äŸ¡ãåããŸããããåŸéããŸããã§ããã
çµå±ãç§ãã¡ã¯å€§åŠã«å°çããæžé¡ãæã£ãŠïŒå ¥åŠæç¶ãã¯éããŠããã®ã§ããããéæ³ã§ãããïŒãå¥ã®å€§åŠã«ç³è«ãã«è¡ããŸãããåœæã®ç¶ã¯é«ªãéåžžã«çãããç®ã®æè¡ãåããŠçŒé¡ãå€ããã°ããã§ã90 ã€ã®é«çæè²ãåããæè·ã«å°±ããã«ãé¢ããããæŠããŠå žåçãªã2 幎代ã®å åŒãã®ããã«èŠããŸããããã¡ããã圌ãã¯ãã®ãããªã«ã©ãã«ãªãã£ã©ã¯ã¿ãŒãæåŠããããšã¯ã§ããŸããã§ããããã以æ¥ãå€åœèªåŠéšã«å ¥åŠããããšãäžåºŠãåŸæããŠããŸããã
åã©ããã¡ãšæ¥ããŠã¿ãŠã次㮠2 ã€ã®ããšã«æ°ã¥ããŸããã
- ç§ã¯ãã®ããšããšãŠã奜ãã§ããèå³æ·±ã話ãããããšãã§ããæ¬ãçŸç§äºå žããéããæ å ±ãã¹ããŒãªãŒã«ç¹ã蟌ãããšãã§ãããããŠæãéèŠãªããšã«ãè±èªæè²ã®åéã§ææãäžããããšãã§ããŸãã
- ã¢ã«ãã€ããããŠãå£æ» çã«ãéã足ããªãïŒãã©ã€ããŒãã¬ãã¹ã³ïŒåäŸåããªãŒã«ã·ãŒãºã³èªåŠãã£ã³ãïŒ
ãã®çµæãæ°å¹Žéæåž«ãšã㊠(è±èªããã€ãèªãã¹ãã€ã³èªãå°ã) åããåŸãç§ã¯ãã®è·æ¥ãèŸããããšã«ããŸãããåã«çãå°œããã ãã§ãããããããçããã®å€ãã¯ãã®æèŠããããåãã§ããããä»äºã¯åããåã人ãä»äºãæšæ¥ãšèªåã«åã£ãŠããããšãã¹ãŠãåãããã«æããã®ã§ãããéã¯æ¯æ¥åããã³ã«æµæããåäŸã®ééãã¯å¿ã®äžã§ã€ã©ã€ã©ããããã«ãªããå¹³åã§ããããã¯ãã€ãäœã®ã©ããã«ãããŸããããæ¶ãå§ããã©ããã«éããããšãããããã¯çãªèããçŸããŸããã
ãããŸã§ã®ãã£ãªã¢ãéããŠãç§ã¯èªåã®è·æ¥ã人ãšé¢ããä»äºãšã¯é¢ä¿ã®ãªããããé¢é£æ§ã®é«ããã®ã«å€ããå¯èœæ§ãæ€èšããããã°ã©ãã³ã°èšèªãç¬åŠã§å匷ããããšçŽ 10 åè©Šã¿ãŸããã C++ãC#ãDelphiãPythonãPascalãJava - ãããã¯ãã¹ãŠè€éã§ãç解ã§ãããåšå§çã§ãæéãããããéçç£çã§ãããå®éãç§ã«ã¯åçŽã«ååãªã¢ãããŒã·ã§ã³ããããŸããã§ããã2008 幎ãã 2009 幎ã®å±æ©ãã2014 幎ãã 2015 幎ã®åé¡ããä»äºã«å¯Ÿããç§ã®æ 床ãå€ããããšã¯ãããŸããã§ããããããŠææ ã®çãå°œãçå矀ãå§ãŸã£ããšããåäŸãã¡ãå·ã€ããããªãã£ãã®ã§ããã®ãŸãŸä»äºãç¶ããããšã¯ã§ããªãããšãæããã«ãªããŸããã
2018幎ãç§ã¯åœŒå¥³ãšäžç·ã«ã¯ã©ã¹ãã€ã«ã¹ã¯ããã¢ã¹ã¯ã¯ã«ç§»äœãã圌女ã¯å°å ã®å€§åŠã«è»¢æ ¡ããç§ã¯ç§ç«ã®å€åœèªåŠæ ¡ã«å°±è·ããŸãããæ°ããå Žæããããªãã®çµŠæãæ°ãã人ã ãæ°ããææ ãããããã¹ãŠã®ãããã§ç§ã¯çŽXNUMXãæéèªåã«åœãå¹ã蟌ãããšãã§ããŸãããããã®åŸãå€ãåé¡ãåçºããŸããã
ç§ã®äžã§è»¢è·ã®æçµæ±ºæãçããèšç»ã®æŠèŠã瀺ãããæ±äººåžå Žãšå¿åè ã®èŠä»¶ã調æ»ãããå°ãªããšãäœããã®åœ¢ã§ IT ã«é¢é£ããå人ãç¥äººã®é£çµ¡å ãæãèµ·ããããç§ã®ç¶¿å¯ãªè³ªåã§åœŒãã®è³ã培åºçã«éªšæãã«ããŸããã ãäžè¬çã«ãèšç»ã¯æ¬¡ã®ããã«ãªããŸããã
- æãã·ã³ãã«ã§ãçµæã®ç¹ã§æãæ©ããæåãã以åã®è·å Žãšæ¯ã¹ãŠãéè²ãªãå ±é ¬ãåŸãããäžé£ã®ä»äºãéžæããŠãã ãããããã³ããšã³ãéçºã«ãªããŸãããèªåã§å€æããŠãã ãããC2 ã¬ãã«ã®è±èªãç¥ã£ãŠããç§ã«ãšã£ãŠãã³ãŒãã®ã»ãšãã©ã¯ãããèŠããæ§æãšæ··åããè±èªã®ã³ãã³ãã§ãã (ããããããŸã£ããæ©èœããªãããšããã¹ã¿ã€ã«ã®æèã«ãã£ãŠåããããŸãã)ãããã³ããšã³ãã®çµæã¯ããã«è¡šç€ºãããŸããããã¯å®æããããŒãžã§ããæ¯æãã40äžã«ãŒãã«ãããšæªããããŸããïŒhh.ruã«ãããšïŒãåœæã®ç§ã®çµŠæã¯60ïœ65æ³ïŒå人ã®ã¢ã«ãã€ãã§çŽ20äžåã§ãããããã§ã¯ååã§ã¯ãããŸããã§ããããä»äºã«è¡ãããã ãã«èªåãšæŠããªããã°ãªããªãå Žåãããããéããã£ãŠã幞ãã§ã¯ãããŸããã
- æ¯æããšè¡åèšç»: 60 ã«ãŒãã«ä»¥äžãç®æããŠããã®ã§ãHTMLãCSSãJavaScript (ES5-6)ãReact ãªã©ãé¢é£ããããã³ããšã³ã ãã¯ãããžã®ãªã¹ããå匷ãå§ããŸããããããã¯ãããŸããŸãªæ®µéã§ã®ã³ãŒãã®èª¿æŽãšäœæ¥ã容æã«ããããŒã« (jQueryãGitãSASSãwebpackãVS Code) ã«ãã£ãŠè£å®ãããŠããŸããããã«ãããããããã¹ãŠãåŸã ã«åŠç¿ããåæã« Web ãµã€ãã®äœæãã³ãŒãã§ã®ã¬ã€ã¢ãŠãã®éã¢ã»ã³ãã«ãšå®è£ ãããã³å人ãšã®çžè«ã«ç¥èãé©çšããããã®èšç»ã®æŠèŠãç«ãŠãããšãå¯èœã«ãªããŸããã
- ç¬åŠ: 2019 幎 2019 æãã XNUMX 幎 XNUMX æãŸã§ãç§ã¯ããã¥ã¡ã³ããç±å¿ã«èª¿ã¹ãStackOverFlow ãèªã¿ãèµ·ããåŸãæãæããªè³ªåã«å¯Ÿããçããæ¢ããªãããããããã¹ãŠãå匷ããŸãããããã¯ç§ã«ãšã£ãŠå€§å€ã§ãããæã ãã³ãŒããç§ãæ³åãããšããã«åäœããªãããšããããŸãããããããç§ã¯çµ¶æããŸããã§ãããã³ãŒãäŸãšããã¥ã¡ã³ãã®åæã«ãããã©ãã§ééããç¯ããã®ããäœãå ¥åããäœãå®äºããªãã£ãã®ããããããŸããããã®ãšããç§ã¯åäŸã®é ã«è±èªãå匷ããããèŠæ±ããŠãã䞡芪ãæ¯æ¥è€ããŠããŸãããçµå±ã®ãšãããé¢é£ããæžé¡ã¯ãã¹ãŠè±èªã§ããã
ç§ã«ãšã£ãŠã¯ HTML ãš CSS ãæãç°¡åã§ãçŽ 2 é±éããããŸããããã®éãç§ã¯çŽç²ãª HTML ãš CSS ã䜿çšããŠãã¶ã€ããŒã® Web ãµã€ãã®ã¬ã€ã¢ãŠããçµã¿ç«ãŠãèãããããã¹ãŠã®æ段ãåéããå€ãã®ã¢ãããŒããç 究ããŸããããããŠãããããã¹ãŠã®è¡ãæåã§èšè¿°ããã®ã¯ä¿¡ããããªãã»ã©æéããããããšã«æ°ã¥ããŸãããå°ãã°ãŒã°ã«ã§èª¿ã¹ãåŸãããã« Bootstrap 4 ãèŠã€ããæ©èœãç解ããåŸãããã¥ã¡ã³ããèªã¿å§ããŸããã YouTube ã§ããŸããŸãªãã¬ãŒãã³ã° ãããªãèŠãªããæ°æ¥éãææ ®æ·±ãå«ç ããã¥ã¢ã«ãäœæããåŸãç§ã¯åçãã«ãŒããã¢ãã¡ãŒã·ã§ã³ãåããå®å šã«ã¬ã¹ãã³ã·ããªç¬èªã® Web ãµã€ãã®äœæã«çæããŸãããããã«ã¯çŽ 2 é±éãããããã®éã« DOM æäœããŒã«ãšã㊠jQuery ãçºèŠããŸããã
ãã¡ããããããæè¯ã®éžæã§ã¯ãããŸããã§ãããããã¹ãŠãã·ã³ãã«ã§ç解ãããããçµæã¯ç§ã«ãšã£ãŠéèŠã§ãããã¡ãªã¿ã«ããã®æ®µéã§ã¯ãæé©åãæ¹åãææ¡ããåªç§ãªããã°ã©ããŒã®æèŠã«è³ãåŸããã®ã§ã¯ãªããã³ãŒãã®æãäžè¬çãªäœ¿çšäŸãèŠã€ããäŸãèŠãŠãåã«ã¹ã¿ã€ã«ãã³ããŒããããšããå§ãããŸããåæ段éã®ã¿ã¹ã¯ã¯ 1 ã€ã ãã§ãããããæ©èœããéãã§ããããããŠåããŠãä»ã®ãã¹ãŠã®ããšãèããããšãã§ããäŒç€Ÿã§åããšãã«ãåŸãå¿ èŠãããçŸå°ã®åºæºã«ã€ããŠèª¬æãã瀺ãããšãã§ããŸãã
æãé£ããããšã¯ãçŽç²ãª JavaScript ãåŠç¿ãã段éããå§ãŸããŸãããç§ã®é ã®äžã«éåžžã«æ·±å»ãªçåãçããŸããããjQuery ã®æ¹ãç°¡åãªãããªããããåŠã¶ã®ã§ãã?ãç§ã¯çããæ±ã㊠Google ã«è¡ããŸãããjQuery ã¯éããªããã¬ã¬ã·ãŒ ã³ãŒããé€ããŠå¥ã®äžçã«ç§»è¡ããçã®ããã°ã©ããŒã¯ãã¹ãŠ JS ã䜿çšããããšãããããŸããããã¬ãŒã ã¯ãŒã¯ã¯çãŸããŠã¯æ¶ããŠãããŸãããçŽç²ãª JS ã¯äŸç¶ãšããŠéèŠã§ããå°±è·ããŠé·ãåãããã§ãããïŒããã§ç§ã¯ãããªãèŠããããã¥ãŒããªã¢ã« ãµã€ãã§ã³ãŒããé¢æ°ãæžããŠã¿ããã以åã®ãããžã§ã¯ããæžãçŽããããå§ããŸãããåœç¶ã®ããšãªãããæåã¯äœããªããããå°ããã·ã ã£ãã®ã§ãããæ°æ¥åŸã«ã¯ãdocument.getElementById ã»ã¬ã¯ã¿ãŒãæäœããŠãããããçš®é¡ã®ã¢ããŒé¢æ° (éåžžã®ãã®ããåçŽã§ããããšãå€æããŸãã) ãäœæããããšã¯èããªããªããŸããã ã.mapã.filterã.reduce ã䜿çšããŠé åããœãŒããããªããžã§ã¯ãèŠçŽ ãæœåºããAPI ã AJAX ãªã©ã§åäœããŸããã
ãããŠç§ã¯ééã£ãŠããŸããã§ãããReact ãåŠç¿ããŠãããšãã«ã解æããŠç解ããå¿ èŠããã倧éã® JS ã³ãŒãã«ééããŸãããããããªããšäœãæ©èœããŸãããæ·±åŒåžãããŠãèªåèªèº«ãå°ãæ®å¿µã«æããªãããç§ã¯åã®åã§ããã»ã¹ã®æ¬è³ªãæãäžãå§ããŸããã React ã¯ãããã«å€æŽããã HTML (JSX) ãšãããŒãžã®æŽæ°ã SPA (ã·ã³ã°ã« ããŒãž ã¢ããªã±ãŒã·ã§ã³) ã®äœæã容æã«ããããŸããŸãªããŒã«ã®ãããã§ããããšãããã«ããããŸããã JS ãå°ãè¿œå ãããšãã¢ãã¡ãŒã·ã§ã³ãèªã¿èŸŒã¿ããã©ã³ãžã·ã§ã³ãè¿œå ãããŸããæ§æã«æ £ããŠããã®ã§ãæåã«èŠã€ãããªã³ã©ã€ã³ ã¹ãã¢ã®ã¬ã€ã¢ãŠãã䜿çšããŠãã«ããŽãªãéžæãããµã€ãå ã移åããã«ãŒãå ã®ååã«ãŠã³ã¿ãŒãå€æŽã§ããç°¡å㪠SPA ãäœæããŸããã
äžè¬ã«ããããŸã§ã®äººçã§ããã°ã©ãã³ã°ãããããšããªããšããäºå®ã¯äœãæªãããšã§ã¯ãããŸãããããããåŸã ã«èªåèªèº«ã«åãçµãã°ããã¹ãŠãå¯èœã«ãªããŸããè±èªã®ç¥èããªããŠãããã·ã¢èªã®ãµã€ããããããããã®ã§ãæåã®æ®µéã§ã¯ååã§ãããã幞éãïŒ
åºæïŒ habr.com