1. ããŒã¯ã¢ããèšèªãšã¯ïŒ
ãããããããŒã¯ã¢ããèšèªãšããã°ã©ãã³ã°èšèªã®éãã培åºè§£èª¬ããŠããããããŸãã¯ããŒã¯ã¢ããèšèªã«ã€ããŠã話ãããŸãããã
1.1 ããŒã¯ã¢ããèšèªã®å®çŸ©
ããŒã¯ã¢ããèšèªãšã¯ãææžãããŒã¿ã®æ§é ãæå³ãè¡šçŸããããã®èšèªã§ããã¿ã°ã«ãã£ãŠããŒã¯ã¢ããïŒåè©æ å ±ãèŠåºãããªã³ã¯ãªã©ã®æ å ±ãä»äžïŒãããææžãããã©ãŠã¶ããšãã£ã¿ã§é©åã«è¡šç€ºãååŸãããããã«ãªããŸããäž»ãªäœ¿ããæ¹ã¯ãWebããŒãžã®ãã¶ã€ã³ãææžã®ãã¬ãŒã³ããŒã·ã§ã³ã§äœ¿çšãããŸãã
1.2 äž»ãªããŒã¯ã¢ããèšèªã®äŸ
代衚çãªããŒã¯ã¢ããèšèªã«ã¯ä»¥äžã®ãã®ããããŸãã
ããŒã¯ã¢ããèšèª | çšé |
---|---|
HTMLïŒHypertext Markup LanguageïŒ | WebããŒãžã®æ§é ããªã³ã¯ãèšè¿°ããããã®èšèª |
XMLïŒExtensible Markup LanguageïŒ | ããŒã¿ã®æ§é ãèšè¿°ããæ§ã ãªç°å¢ãã¢ããªã±ãŒã·ã§ã³ã§ããŒã¿ã®äº€æã»å ±æã»æŽçãããããã®èšèª |
CSSïŒCascading Style SheetsïŒ | HTMLãXMLææžã«èŠãç®ããã¶ã€ã³ãé©çšããããã®èšèª |
SVGïŒScalable Vector GraphicsïŒ | ãã¯ã¿ãŒç»åãèšè¿°ããããã®èšèª |
Markdown | ããã¹ãææžãæ§é åããŠãç°¡åãªæžåŒãä»ããããã®èšèª |
1.3 ããŒã¯ã¢ããèšèªã®ç¹åŸŽ
ããŒã¯ã¢ããèšèªã¯ã以äžã®ãããªç¹åŸŽããããŸãã
- ã¿ã°ãå±æ§ã䜿çšããŠææžã®æ§é ãæå³ãè¡šçŸãã
- ææžã®è¡šç€ºãæ§é ãå¶åŸ¡ã§ãããããããŒã¿ã®æŽçããããã
- ããã°ã©ãã³ã°èšèªãšéããå¶åŸ¡æ§é ãã«ãŒãåŠçãå€æ°ãªã©ãæããªã
- ç¹å®ã®ãã©ãããã©ãŒã ããã©ãŠã¶ã«äŸåããªã
- ããŒã¿äº€æã»å ±æã容æã§ãããæ§ã ãªç°å¢ãã¢ããªã±ãŒã·ã§ã³ã§å©çšã§ãã
2. ããã°ã©ãã³ã°èšèªãšã¯ïŒ
ã³ã³ãã¥ãŒã¿ã«åœä»€ãäžããããã«ã人éãç解ããããæåãèšå·ã§è¡šçŸãããèšèªãããã°ã©ãã³ã°èšèªãšãããŸããããã°ã©ãã³ã°èšèªã¯ãã³ã³ãã¥ãŒã¿ãåŠçã§ãã圢åŒã«å€æãããããŸããŸãªåŠçãæ©èœãå®è¡ããããã®éå ·ã§ãããã®èšäºã§ã¯ãããã°ã©ãã³ã°èšèªã®å®çŸ©ãç¹åŸŽããããŠããŒã¯ã¢ããèšèªãšã®éãã«ã€ããŠè§£èª¬ããŠãããŸãã
2.1 ããã°ã©ãã³ã°èšèªã®å®çŸ©
ããã°ã©ãã³ã°èšèªã¯ãã³ã³ãã¥ãŒã¿ã®ããã°ã©ã ãèšè¿°ããããã®èšèªã§ããããã°ã©ãã¯ããã®èšèªã䜿çšããŠã³ã³ãã¥ãŒã¿ã«å¯ŸããŠæ瀺ãåºããç¹å®ã®äœæ¥ãå®è¡ãããããšãã§ããŸããããã°ã©ãã³ã°èšèªã¯ãã³ã³ãã¥ãŒã¿ãç解ã§ãã圢åŒã«å€æãããããšã§ãå®éã«åäœãéå§ããŸãã
ããã°ã©ãã³ã°èšèªã«ã¯ãæ§æïŒææ³ïŒãšç°å¢ïŒå®è¡ç°å¢ïŒãšããããŸããæ§æã¯ãããã°ã©ã ã®èšè¿°æ¹æ³ãèŠå®ããç°å¢ã¯ããã°ã©ã ã®å®è¡æ¹æ³ãèŠå®ããŠããŸãã
2.2 äž»ãªããã°ã©ãã³ã°èšèªã®äŸ
äžã®äžã«ã¯æ°ãåããªãã»ã©ã®ããã°ã©ãã³ã°èšèªãååšããŸãããäž»ãªãã®ãšããŠä»¥äžã®ãããªèšèªããããŸãã
ããã°ã©ãã³ã°èšèª | çšé |
---|---|
Python | WebéçºãããŒã¿åæãæ©æ¢°åŠç¿ãªã© |
Java | Webã¢ããªã±ãŒã·ã§ã³ãã¢ãã€ã«ã¢ããªéçºããã¹ã¯ãããã¢ããªéçºãªã© |
Cèšèª | ãªãã¬ãŒãã£ã³ã°ã·ã¹ãã ãããã€ã¹ãã©ã€ããªã© |
JavaScript | WebããŒãžã®åçãªè¡šç€ºããµãŒãåŽã®éçºãªã© |
Ruby | Webã¢ããªã±ãŒã·ã§ã³éçº |
2.3 ããã°ã©ãã³ã°èšèªã®ç¹åŸŽ
ããã°ã©ãã³ã°èšèªã«ã¯ã以äžã®ãããªç¹åŸŽããããŸãã
ïŒïŒæœè±¡åºŠãé«ã
ããã°ã©ãã³ã°èšèªã¯ã人éãç解ããããæåãèšå·ã§è¡šçŸãããŠãããæ©æ¢°èªã«æ¯ã¹ãŠæœè±¡åºŠãé«ããããã«ãããããã°ã©ã ã®äœæãã¡ã³ããã³ã¹ã容æã«ãªããŸãã
ïŒïŒå€æ§æ§ããã
ããŸããŸãªããã°ã©ãã³ã°èšèªãååšããããããç°ãªãç®çãçšéã«åãããŠäœ¿ãåããããšãã§ããŸãã
ïŒïŒå ±éç¹ããã
å€ãã®ããã°ã©ãã³ã°èšèªã¯ãå¶åŸ¡æ§é ïŒifãforãwhileçïŒãããŒã¿åïŒæŽæ°åãæµ®åå°æ°ç¹åãªã©ïŒãªã©ã®åºæ¬çãªèŠçŽ ã«å ±éç¹ããããŸãããã®ãããäžåºŠããã°ã©ãã³ã°ãåŠç¿ãããšãä»ã®èšèªãæ¯èŒçç°¡åã«ç¿åŸããããšãã§ããŸãã
ïŒïŒã³ã³ãã€ã«èšèªãšã€ã³ã¿ããªã¿èšèªããã
ããã°ã©ãã³ã°èšèªã¯ã倧ããåããŠã³ã³ãã€ã«èšèªãšã€ã³ã¿ããªã¿èšèªã«åé¡ãããŸããã³ã³ãã€ã«èšèªã¯ãããã°ã©ã å šäœãäžåºŠã«æ©æ¢°ãç解ã§ãã圢åŒã«å€æããã®ã«å¯Ÿããã€ã³ã¿ããªã¿èšèªã¯ãããã°ã©ã ãè¡ããšã«å®è¡ããŠããæ¹åŒãåããŸããããããã«é·æãšçæããããçšéãç¶æ³ã«å¿ããŠéžæãããŸãã
以äžã®ç¹åŸŽã«ãããããã°ã©ãã³ã°èšèªã¯ãã³ã³ãã¥ãŒã¿ã«å¯ŸããŠåœä»€ãåºããè€éãªåŠçãæ©èœã®å®è¡ãå¯èœã«ããéèŠãªèŠçŽ ãšãªã£ãŠããŸãã
3. ããŒã¯ã¢ããèšèªãšããã°ã©ãã³ã°èšèªã®éã
ãã®èšäºã§ã¯ãããŒã¯ã¢ããèšèªãšããã°ã©ãã³ã°èšèªã®éãã«ã€ããŠåŸ¹åºè§£èª¬ããŸãããããã®èšèªã¯ãçšéãæ§æãæ©èœãããã³åŠç¿æ¹æ³ã®é¢ã§ç°ãªããŸããç解ãæ·±ããããã«ãããããã®ç¹åŸŽãšçžéç¹ã詳ããèŠãŠãããŸãããã
3.1 çšéã®éã
ããŒã¯ã¢ããèšèªãšããã°ã©ãã³ã°èšèªã®æã倧ããªéãã¯ãããããã®äž»ãªçšéã§ããããŒã¯ã¢ããèšèªã¯ãææžã®æ§é ãèŠãç®ãå®çŸ©ããããã«äž»ã«äœ¿çšãããŸããäžæ¹ãããã°ã©ãã³ã°èšèªã¯ãã³ã³ãã¥ãŒã¿ã«å¯ŸããŠåœä»€ãäžããŠãç¹å®ã®ã¢ã«ãŽãªãºã ãæ©èœãå®è¡ããããã«éçºãããŸããã
äŸãã°ãHTMLïŒãã€ããŒããã¹ãããŒã¯ã¢ããèšèªïŒã¯ããŠã§ãããŒãžã®æ§é ãšãã¶ã€ã³ãæå®ããããã«äœ¿ãããããŒã¯ã¢ããèšèªã®äžçš®ã§ããããããJavaScriptãPythonã®ãããªããã°ã©ãã³ã°èšèªã¯ããŠã§ãã¢ããªã±ãŒã·ã§ã³ãããŒã¿è§£æãªã©ãããŸããŸãªç®çã§äœ¿çšãããŸãã
3.2 æ§æãšæ©èœã®éã
æ§æãšæ©èœããããŒã¯ã¢ããèšèªãšããã°ã©ãã³ã°èšèªã®éãã瀺ãéèŠãªèŠçŽ ã§ããããŒã¯ã¢ããèšèªã¯ãã¿ã°ãšåŒã°ããç¹å®ã®èšå·ã䜿çšããŠãææžã®èŠçŽ ãèå¥ããŸãããããã®ã¿ã°ã¯ããã©ãŠã¶ã«ãã£ãŠè§£éããã察å¿ããã¹ã¿ã€ã«ãæ§é ãé©çšããŸãã
以äžã¯ãHTMLã®äžéšã®äŸã§ãã
<h1>ã¿ã€ãã«</h1> <p>ããã¯æ®µèœã§ãã</p>
ããã«å¯ŸããŠãããã°ã©ãã³ã°èšèªã¯ãããè€éãªæ§æãšå€æ©èœæ§ãæã£ãŠããŸããäŸãã°ã以äžã®Pythonã³ãŒãã¯ã1ãã10ãŸã§ã®æŽæ°ã®ãªã¹ããçæãããã®åèšãèšç®ããŠããŸãã
numbers = list(range(1, 11)) sum_numbers = sum(numbers) print(sum_numbers)
ããã°ã©ãã³ã°èšèªã¯ãå€æ°ãã«ãŒããæ¡ä»¶åå²ãé¢æ°ãªã©ãå€ãã®æ§æèŠçŽ ãšæ©èœãæäŸããè€éãªããã°ã©ã ãã¢ããªã±ãŒã·ã§ã³ãéçºããããšãã§ããŸãã
3.3 åŠç¿æ¹æ³ã®éã
ããŒã¯ã¢ããèšèªãšããã°ã©ãã³ã°èšèªã®åŠç¿æ¹æ³ãç°ãªããŸããããŒã¯ã¢ããèšèªã¯ãã¿ã°ã®æ©èœãšäœ¿ãæ¹ãèŠããããšãäž»ãªç®æšã§ããææ³ãæ§æã¯æ¯èŒçã·ã³ãã«ã§ãçæéã§ç¿åŸããããšãã§ããŸãã
äžæ¹ãããã°ã©ãã³ã°èšèªã®åŠç¿ã¯ãææ³ãæ§æã«å ããŠãããŒã¿æ§é ãã¢ã«ãŽãªãºã ãããã°ã©ã èšèšãªã©ãããåºç¯å²ãªæŠå¿µãç解ããå¿ èŠããããŸãããŸããããã°ã©ãã³ã°èšèªã«ã¯ãé¢æ°åããªããžã§ã¯ãæåãæç¶ãåãªã©ãããŸããŸãªãã©ãã€ã ãååšããŸãããã®ãããããã°ã©ãã³ã°èšèªãç¿åŸããã«ã¯ãããé·ãæéãšå®è·µçãªçµéšãæ±ããããŸãã
ãã®èšäºã§ã¯ãããŒã¯ã¢ããèšèªãšããã°ã©ãã³ã°èšèªã®éãã«ã€ããŠæŠèª¬ããŸãããããããã®èšèªã¯ãç¬èªã®ç®çãæ§æãæ©èœãããã³åŠç¿æ¹æ³ãæã£ãŠãããé©åãªåéã§åãçºæ®ããŸãããããã®éããç解ããããšã§ãå¹æçã«åŠç¿ãéçºãé²ããããšãã§ããŸãã
4. ã©ã¡ããåŠã¶ã¹ããïŒ
ããŒã¯ã¢ããèšèªãšããã°ã©ãã³ã°èšèªã®éããç解ããäžã§ãã©ã¡ããåŠã¶ã¹ãããšããçåãçããããšãããã§ãããããã®ç« ã§ã¯ãããŒã¯ã¢ããèšèªãšããã°ã©ãã³ã°èšèªã®ã©ã¡ããåŠã¶ã¹ããããç®çãå¿ èŠãªæè¡ã¹ã¿ãã¯ã«åºã¥ããŠéžæããæ¹æ³ã玹ä»ããŸãã
4.1 ç®çã«å¿ããéžæ
æåã«ãç®çã«å¿ããŠã©ã¡ãã®èšèªãåŠã¶ã¹ããå€æããå¿ èŠããããŸãã
äž»ã«ãŠã§ãããŒãžã®ãã¶ã€ã³ãæ§é ãäœæã»ç·šéããããšãç®çã§ããã°ãããŒã¯ã¢ããèšèªã§ãã HTML ãš CSS ãåŠã¶ã¹ãã§ãããããã¯ããŠã§ãããŒãžã®èŠãç®ãæ§é ã«é¢é£ããæ å ±ãèšè¿°ããã®ã«æé©ãªèšèªã§ãã
äžæ¹ã§ããŠã§ãã¢ããªã±ãŒã·ã§ã³ããœãããŠã§ã¢ã®éçºãèªååãããŒã¿åæãªã©ãç®çã§ããã°ãããã°ã©ãã³ã°èšèªã®åŠç¿ãæ€èšããã¹ãã§ããããã°ã©ãã³ã°èšèªã¯ããžãã¯ãçµãã ããããŒã¿ãæ±ã£ããããããšãå¯èœã§ãJavaScript ã Python ãªã©ãæåã§ãã
ãã ããäžè¬çã«ãŠã§ãéçºãè¡ãå Žåã¯ãããŒã¯ã¢ããèšèªãšããã°ã©ãã³ã°èšèªã®äž¡æ¹ãç¿åŸããããšãæãŸããã§ããããã«ããããã¶ã€ã³ãæ§é ã ãã§ãªããinteractivity ãè¡åã«å¯Ÿå¿ã§ãããŠã§ãããŒãžã ã¢ããªã±ãŒã·ã§ã³ãäœæããããšãã§ããŸãã
4.2 å¿ èŠãªæè¡ã¹ã¿ãã¯ã®ç解
次ã«ãèªåãåãçµãäºå®ã®ãããžã§ã¯ããè·æ¥ã§æ±ããããæè¡ã¹ã¿ãã¯ïŒäœ¿çšãããäžé£ã®æè¡ïŒãç解ããå¿ èŠããããŸããäŸãã°ãããã³ããšã³ãéçºãç®æãå ŽåãHTMLãCSSãJavaScript ã®åºæ¬çãªç¥èãæ±ããããããšãäžè¬çã§ãããŸããããã¯ãšã³ãéçºãç®æãå Žåã¯ãPythonãRubyãJava ãªã©ã®ããã°ã©ãã³ã°èšèªãå¿ èŠãšãããããšãå€ãã§ãã
æè¡ã¹ã¿ãã¯ã®ç解ã«å©ããšãªãæ å ±æºãšããŠãæ±äººæ å ±ããªã³ã©ã€ã³ã³ãã¥ããã£ãGitHub ã®ãã¬ã³ããªã©ã調ã¹ãããšãã§ããŸããããããåèã«ãèªåã®ç®æšã«åãããæè¡ãç¿åŸããŠããããšãéèŠã§ãã
ç®ç | åŠã¶ã¹ãèšèª |
---|---|
ãŠã§ãããŒãžã®ãã¶ã€ã³ã»æ§é ã®äœæã»ç·šé | HTML, CSSïŒããŒã¯ã¢ããèšèªïŒ |
ãŠã§ãã¢ããªã±ãŒã·ã§ã³ã»ãœãããŠã§ã¢ã®éçºã»èªååã»ããŒã¿åæ | JavaScript, Python ãªã©ïŒããã°ã©ãã³ã°èšèªïŒ |
ãŠã§ãéçº | HTML, CSS, JavaScriptãªã©ïŒããŒã¯ã¢ããèšèªãšããã°ã©ãã³ã°èšèªã®çµã¿åããïŒ |
æçµçã«ã¯ãããŒã¯ã¢ããèšèªãšããã°ã©ãã³ã°èšèªã®éããç解ããèªåã®ç®çããããžã§ã¯ãã«å¿ããŠåŠã¶ã¹ãèšèªãéžæããããšãèèŠã§ãããŸããããå¹ åºãã¹ãã«ã»ãããæã€ããšã§ãå€æ§ãªåé¡è§£æ±ºãããŒã ã§ã®ååãåæ»ã«ãªãã§ãããã
5. ãŸãšã
5.1 ããŒã¯ã¢ããèšèªãšããã°ã©ãã³ã°èšèªã®ç解
ãã®èšäºã§ã¯ãããŒã¯ã¢ããèšèªãšããã°ã©ãã³ã°èšèªã®éãã«ã€ããŠåŸ¹åºçã«è§£èª¬ããŸãããããŒã¯ã¢ããèšèªã¯ãäž»ã«ææžã®æ§é ããã¶ã€ã³ãèšè¿°ããããã«äœ¿çšãããHTMLãCSSãªã©ããã®ä»£è¡šçãªäŸã§ããäžæ¹ãããã°ã©ãã³ã°èšèªã¯ãèšç®ãããŒã¿åŠçãã¢ã«ãŽãªãºã ã®èšè¿°ãªã©ãè¡ãããã«çšããããJavaãPythonãJavaScriptãªã©ãæåã§ãã
ããŒã¯ã¢ããèšèªã¯ãã¿ã°ãå±æ§ãçšããŠææžæ§é ãå®çŸ©ããŸãããããã°ã©ãã³ã°èšèªã¯ãå€æ°ãé¢æ°ãå¶åŸ¡æ§é ãªã©ãçšããŠã³ãŒããèšè¿°ããå®è¡ããããšã³ã³ãã¥ãŒã¿ã«åœä»€ãå®è¡ãããããšãå¯èœã§ãããããã£ãŠãããŒã¯ã¢ããèšèªã¯äž»ã«ããŒã¿ã®è¡šçŸããã¶ã€ã³ã«é¢äžããã®ã«å¯Ÿããããã°ã©ãã³ã°èšèªã¯ã³ã³ãã¥ãŒã¿ã«å¯ŸããŠå ·äœçãªåŠçãå®è¡ããã圹å²ãæãããŠããŸãã
ãŸããããŒã¯ã¢ããèšèªãšããã°ã©ãã³ã°èšèªã¯ãæ©èœãç®çãç°ãªãããšãããWebéçºã®çŸå Žã§ã¯ãããããã®èšèªãååããŠåãããšã§ããŠãŒã¶ãŒã«ãšã£ãŠäŸ¿å©ã§çŸããWebãµã€ããã¢ããªã±ãŒã·ã§ã³ãå®çŸããŠããŸããå ·äœçã«ã¯ãããŒã¯ã¢ããèšèªãWebããŒãžã®èŠãç®ãæ§é ãæ åœããããã°ã©ãã³ã°èšèªãããŒã¿ã®ååŸãæäœãåçãªèŠçŽ ãå¶åŸ¡ãã圹å²ãæ ããŸãã
5.2 ä»åŸã®åŠç¿ã«åããŠ
ããŒã¯ã¢ããèšèªãšããã°ã©ãã³ã°èšèªã®éããç解ããäžã§ãããããã®èšèªãå¹æçã«åŠç¿ããããšãéèŠã§ãããŸãã¯åºæ¬çãªææ³ãæŠå¿µããã£ãããšç解ããå®è·µçãªã³ãŒãã£ã³ã°ãç¹°ãè¿ãããšã§ãã¹ãã«ã磚ããŠããããšãæ±ããããŸãã
ããã«ããããžã§ã¯ãã«åãçµãéã«ã¯ãããŒã¯ã¢ããèšèªãšããã°ã©ãã³ã°èšèªãã©ã®ããã«é£æºããŠåäœããŠããã®ããç解ããé©åãªåœ¹å²åæ ãå¹ççãªéçºææ³ã身ã«ä»ããããšã倧åã§ãããŸããææ°ã®æè¡ååããã¬ã³ãã«ãç®ãå ãããåŠç¿ãç¶ããããšããããè¯ããããã¯ããäœæããããã®éµãšãªããŸãã
ãã®èšäºããããŒã¯ã¢ããèšèªãšããã°ã©ãã³ã°èšèªã®éããææ¡ããä»åŸã®åŠç¿ãéçºã«åœ¹ç«ã€æ å ±ãšãªãããšãé¡ã£ãŠããŸããããããã®èšèªã«é¢é£ããè³æããã¥ãŒããªã¢ã«ã掻çšããªãããçå®ã«ã¹ãã«ã¢ããããŠãããŸãããã