æ¬è¬çŸ©ã¯ããã«ã¹ã¿ãã¯è¬çŸ©ã·ãªãŒãºPart2ãšããŠãPythonããã¯ãšã³ãïŒPart1ïŒã«ç¶ãããã«ã¹ã¿ãã¯ã«å¿
èŠãªç¢ºããªããã³ããšã³ãã®åºç€ã身ã«ã€ããè¬çŸ©ã§ããåçšåãå¯èœãªãŠã§ããµãŒãã¹éçºã®ããã®HTML5ãCSSãJavascriptïŒVanillaJSãããã©JavaScriptïŒïŒES6ã詳ããæŽçããç¿åŸããŸãã
äžè¬çãªITè¬çŸ©ããããåè¬è
ã®ç«å Žãæå€§éã«èããŠäœãããç¹å¥ãªè¬çŸ©ã§ããããŸããŸãªè³æãäŸãéããŠãé¢é£æè¡ãç¥ããªãç¶æ
ããå§ããé¢é£æè¡ãèªåã®å±¥æŽæžã«èšèŒã§ããã»ã©æ žå¿çãªæè¡ã確å®ã«èº«ã«ã€ããè¬çŸ©ã§ã.
æ¬è¬çŸ©ã¯ããããŸã§å€ãã®æ¹ã
ã«åŠãã§ããã ããè¯ããæèŠãããã ããŠããå®çžŸã®ããè¬çŸ©ã§ãã
äžãäžåé¡ããã£ãå Žåã¯ãä»åŸããããŸã§ãšåæ§ã«éæã¢ããããŒããããå¯èœæ§ããããŸãã
ããã³ããšã³ãã®åºç€ããã£ãã身ã«ã€ããããªãïŒ
íë¡ ížìë Ʞ볞 êž°ì ì ííí ì 늬íŽìŒ í©ëë€. íë¡ ížìë Ʞ볞ì
HTML, CSS, Javascript ì
ëë€. React 륌 ìµíëëŒë, íë¡ ížìë êž°ë³žìŽ íìí©ëë€. ííí íë¡ ížìë êž°ë³žêž°ê° íµì¬ì
ëë€. ꌌꌌíê² ì ìì Ʞ볞Ʞ ìì, React ë Flutter ë ìµí멎 íë¡ ížìë륌 ìíëëë¡ ë§ë€ ì ììµëë€. ì¬êž°ì ìµì ì¹íìŽì§ë ë°ìí, ížíì±ë± ì 늬íŽìŒí 배겜ì§ì곌 êŽë š ì§ììŽ ìê³ , ì€ëì êž°ì ìž Jquery 륌 ê¹ëí Javascript ë¡ ë첎íŽìŒ í©ëë€.
ãªããšãªãç¥ã£ãŠã¯ãããã®ã®ãæŽçã§ããŠããªãæ°ãããŸã
HTMLãCSSãJavascriptã¯äžéã䜿ãããã«æããŠããå®éã«äœ¿ã£ãŠã¿ããšãæãã©ããã«æ±ãã®ã¯é£ãããã®ã§ããã¬ã¹ãã³ã·ã察å¿ãäºææ§ãES6ãªã©ãæ£åšããæ°å€ãã®æ§æãæè¡ãç¹ã«ããã³ããšã³ãã¯ãäžåºŠãã¡ããšæŽçããŠåŠã°ãªããã°ãæã£ãŠãã以äžã«é£ããåéã§ãã
ãã«ã¹ã¿ãã¯ã«ãªãã°ãWebãµãŒãã¹ãäžäººã§ãäœããããã§ããâŠâŠ means you can build web services on your own...
Webã§ãã¢ããªã§ããæè¿ã®ãµãŒãã¹ãå®è£
ããã«ã¯ããã¯ãšã³ããããã³ããšã³ãããããã€æè¡ãå¿
èŠã§ããããããã«ã¹ã¿ãã¯ãšåŒã³ãŸãããã«ã¹ã¿ãã¯ã«ãªãã°ã1人ã§ãææ°ã®WebãµãŒãã¹ãäœãããšãã§ããç«¶äºåã®ããéçºè
ã«ããªããŸãã
ãããæã广çãã€å®è·µçã«é²ããã«ã¯ããã«ã¹ã¿ãã¯è¬åº§Part1ã§Pythonãšããã¯ãšã³ãæè¡ã身ã«ã€ããPart2ã§ããã³ããšã³ãã®åºç€åã磚ãå¿
èŠããããŸãã åºç€åããã£ãã身ã«ã€ããŠããïŒåã«è¬çŸ©ã«åºãŠããWebãµãŒãã¹ããã®ãŸãŸç䌌ããŠäœãã®ã§ã¯ãªããæ¬åœã®æå³ã§ãã«ã¹ã¿ãã¯ã«ãªãããšãã§ããŸããæ¬è¬çŸ©ã§ã¯ãããã³ããšã³ãã®åºç€åããã£ãã身ã«ã€ãããããããHTML5ãCSSãJavascriptïŒããã©JavaScriptãVanillaJSïŒïŒES6ã詳ããæ±ããŸãã
å
šäœã§æãéãææ°ã®ãã«ã¹ã¿ãã¯ããŒãããããYouTubeåç»ã«ãŸãšããŸããããã®åç»ãåèã«ããŠããã ããã°ãæ¬æè¡ã«ãšã©ãŸãããç¬åŠã§ãçæéã§WebïŒã¢ããªéçºãã§ããããã«ãªãããã®ããŒããããããçè§£ããã ããŸãã
å
åºã§å®è·µçãªããã³ããšã³ãã®åºç€åã®ããã«äœããŸããã.
æ°ãåããªãã»ã©å€ãã®ææ³ãæ©èœããããããããã³ããšã³ãã¯ãæŽçããšããããŒã¯ãŒãããå§ããå¿
èŠããããŸãã
æ°å€ãã®å€æ§ãªææ³ãšç¥èãã以äžã®æ¡ä»¶ã®ããšã§æŽçããŸããã
- ææ°ãŠã§ããµã€ãéçºã®ããã®åºç€ç¥èããã¹ãŠæŽçã
- èŠæ ãã®ãããŠã§ãããŒãžã«æ¬ ãããªãCSSãäžå¯§ã«æŽçã
- ææ°ã®WebããŒãžã§ã¯äœ¿ãããŠããªãJQueryã¯æ±ãã
- ãã¹ãŠæšæºã®Vanilla JavaScript + ES6ã«çœ®ãæããŠæ±ã
- ã¬ã¹ãã³ã·ãã«å¯Ÿå¿ã
- äºææ§ãŸã§èæ
®ããŸã
HTMLã¿ã°ã¯è»œãåŠã³ãã»ãã³ãã£ãã¯ã¿ã°ãŸã§ãæ¬åœã«å¿
èŠãªã¿ã°ãäžå¿ã«æŽçããŸãã
èŠæ ãã®ããWebããŒãžã®å®è£
ã«æ¬ ãããªãã¬ã¹ãã³ã·ã察å¿ãäºææ§ãŸã§èæ
®ããCSSã®è©³çŽ°ãªæ©èœãæ±ããŸãã
VanillaJSïŒããã©JavaScriptïŒãšåŒã°ããŠããããã«ãæè¿ã®ãã¬ã³ãã§ã¯jQueryã䜿çšããªããããäºææ§ãŸã§èæ
®ããJavaScript + ES6ã®æ§æã ãã§WebããŒãžãå®è£
ããŸãã
åæ©èœã«ã€ããŠãäºææ§ã®åé¡ã§äœ¿ããªãæ¥µç«¯ã«æ°ããæ§æãã代æ¿å¯èœãªæè¡ã¯é€å€ããã³ã¢ãšãªãæè¡ã«éäžããŸãã
æéãç¡é§ã«ããªãã§ãã ããïŒ
ç§ãã¡ã¯æ
å ±ããªãããã§ããªãã®ã§ã¯ãããŸããïŒ
å®çžŸã®ããè¬çŸ©ã§åŠã¹ã°ãããã«æŽçã§ããŸãïŒ
JavaScriptã ãåŠã¹ã°ããã®ã§ã¯ãããŸãããïŒ?
ãã«ã¹ã¿ãã¯éçºã«ãããæå€§ã®ããã«ããã¯ã¯CSSã§ããHTMLãCSSã¯äžåŠçã§ãç¥ã£ãŠãããšèšãããŸãã
ãããããã»ã©ã®ããã³ããšã³ãéçºè
ã§ãªããã°ãã¬ã¹ãã³ã·ã察å¿ãäºææ§ã確ä¿ããèŠæ ãã®ããææ°ã®WebããŒãžãäœãããšã¯ã§ããŸããã
æ°ãåããªãã»ã©å€ãã®çްããªCSSæ©èœãæŽçããå¿
èŠããããŸããHTMLãæšæºã«åãããŠäžåºŠã¯æŽçããªããã°ãªããŸããã
ãŸããåœå
ã«ã¯ãããªãã·ã£ãŒãšããè·æ¥ããããŸãããæµ·å€ã§ã¯ããã³ããšã³ããŸãã¯ãã«ã¹ã¿ãã¯éçºè
ãCSSãŸã§ãã¹ãŠæ
åœããŸãã
ç«¶äºåã®ããããã³ããšã³ãïŒãã«ã¹ã¿ãã¯éçºè
ã«ãªãããã«ã¯ãCSSã®æ©èœã詳ããæŽçããããšãäžå¯æ¬ ã§ãã
ReactãVueãç¿åŸããªããšWebãµãŒãã¹ã¯äœããªãã®ã§ã¯ãããŸãããïŒ to build web services?
ãã®ãã¬ãŒã ã¯ãŒã¯ã¯Javascriptã®ç©è¶³ããªãç¹ãæ¹åããJavascriptã§æžããããã¬ãŒã ã¯ãŒã¯ã§ãããããã®ãã¬ãŒã ã¯ãŒã¯ã䜿ãå ŽåãJavascriptã䜿çšãããããã©ã®ãããªãã¬ãŒã ã¯ãŒã¯ã§ãã£ãŠããJavascriptã®åºæ¬ææ³ããã£ããæŽçããŠèº«ã«ã€ããŠããå¿
èŠããããŸããæ¬è¬çŸ©ã§æ±ãHTMLãCSSãJavascriptã®åºç€ããã£ãã身ã«ã€ããŠããããããåºç€ãšããŠReactãVueãªã©ã®ãã¬ãŒã ã¯ãŒã¯ãåŠã¶ããšãã§ããŸãã
ãã®ãããæ¬è¬çŸ©ã¯ããã³ããšã³ãã®åºç€åã«éç¹ã眮ããè¬çŸ©ã§ããæ¬è¬çŸ©ã§ã¯ã確ããªåºç€åãç¯ãããã«ãé¢é£æè¡ã®äžã§å¿
é ãšãªãæè¡ããã¹ãŠæŽçããç·Žç¿ããŸãã
åå¿è
ã§ãã§ããŸããïŒdo it?
åå¿è
ã®æ¹ã«ãåè¬ããŠããã ããããã詳ãããäžã€ã²ãšã€äžå¯§ã«èª¬æããè¬çŸ©ã§ãã
ITè¬çŸ©ã®äžã§æãé£ããã®ã¯ãããã°ã©ãã³ã°ããŸã£ããç¥ããªãæ¹ã«ããã°ã©ãã³ã°ãæããããšã§ãããã®ãããªæ¹ã
ããç§ãéè¬ããPythonå
¥éãšã¯ããŒãªã³ã°åºç€ããŒããã£ã³ãè¬çŸ©ãéããŠãããã°ã©ãã³ã°ã ãã§ãªãã¯ããŒãªã³ã°æè¡ã身ã«ã€ããããŸãããåççã«èãããäºãã«é
æ
®ã§ããæ¹ã§ããã°ãååã«å¯èœã§ãã
ããã³ããšã³ãæè¡ã ããæ©ãæŽçãããã®ã§ããã°ãæ¬è¬çŸ©ã ããåè¬ããŠããã ããŠãæ§ããŸããããã ããããã°ã©ãã³ã°ã«äžåºŠãè§Šããããšã®ãªãå®å
šãªåå¿è
ã®æ¹ã§ããã°ãPythonå
¥éãšã¯ããŒãªã³ã°ããŒããã£ã³ãè¬çŸ©ãšããããŠãããŒããããã«æ²¿ã£ãŠãã«ã¹ã¿ãã¯è¬çŸ©ãäžã€ã²ãšã€åŠãã§ããããšãããããããŸããå¿
èŠãªã¹ãã«ããããçå®ã«èº«ã«ã€ããŠããã ããŸãã
å
¥éè
ã«ãçè§£ã§ããããã«
ç°¡æœã§ãããªãããäžå¯§ã«äœæãããè³æãåºã«ã
è¬çŸ©äžã«åèªã§ãã¹ããè¡ãããã
æ©èœå¥ã®ãµã³ãã«ã³ãŒãã䜿ã£ãŠããã«ãã¹ãããŠããã ããŸã

â¢ åæ©èœå¥ã®ãµã³ãã«ã³ãŒãããããžã§ã¯ããšããŠäœæããŠãæäŸããå®è·µçãªWebããŒãžã®ã³ãŒããã¡ã€ã«ããæäŸããŸãã
⢠è¬çŸ©è³æã¯ãªã³ã©ã€ã³ã§ãã€ã§ãã確èªããã ãããããæäŸããŸããïŒãã ããã³ããŒããã³ããŠã³ããŒãã¯èäœæš©äžã®åé¡ã«ããå¶éããŠããŸããïŒ
äœç³»çã«åŠã¹ãŸããïŒ?
åå¿è
ããå§ããŠãã«ã¹ã¿ãã¯ã«ãªããŸã§ã®å
šéçšããå°ããã€é£æåºŠãäžããªããã詳现ãã€äœç³»çã«åŠã¹ãããè¬çŸ©ãäœæããŠããŸãã該åœããææ³ãç¥èã®çè§£ãå©ãããããç°¡æœãªã³ãŒããšååãªèª¬æãçšããçè§£ãå¿
èŠãªéšåã«ã€ããŠã¯ãã®éœåºŠã³ã³ãã¥ãŒã¿ãµã€ãšã³ã¹ãŸã§èª¬æããåªããéçºè
ã«ãªãããã®åºç€åã身ã«ã€ããŠããã ããããã«ããŠããŸãã

æ¬è¬çŸ©ã¯ãã«ã¹ã¿ãã¯è¬çŸ©ã·ãªãŒãºå
šäœã®Part2ãšããŠãæ¬è¬çŸ©ã§ã¯ã次ã®ãµãŒãã¹éçºã«åããç¹å®ã®ãŠã§ãããŒãžãéžã³ããããªããã¬ãŒã ã¯ãŒã¯ãã©ã€ãã©ãªã䜿ããã空ã®ãã¡ã€ã«ããå§ããŠãHTMLãCSSãJavascript + ES6ã䜿ããäžã€ã²ãšã€ã³ãŒãã宿ããããšãããŸã§äžç·ã«åãçµã¿ãŸãã
'ãïŒæ¬åœã«éããã ïŒ'ãšæããŠããã ããããã«
èããŠäœã£ãè¬åº§ã§ã
ãã®ãŸãŸã€ããŠããŠããã ããã°ã倧äžå€«ã§ãïŒ