1. ã¯ããã«ïŒJavaScriptã®é å
è¿å¹ŽããŠã§ãæè¡ã®é²åãšãšãã«ãJavaScriptã¯ãã®ååšæãå¢ããŠããŸããããã®ã»ã¯ã·ã§ã³ã§ã¯ãJavaScriptãã©ã®ããã«ãŠã§ãéçºã«ãããŠäžå¿çãªåœ¹å²ãæãããŠããã®ãããããŠãã®æ®åã®èæ¯ã«ã¯ã©ã®ãããªèŠå ãããã®ãã解説ããŸãã
1.1 ãŠã§ãéçºã«ãããJavaScriptã®åœ¹å²
ãŠã§ãããŒãžã¯ãHTMLã§æ§é ãå®çŸ©ããCSSã§ãã¶ã€ã³ãæœãããšãåºæ¬ã§ããããããããã ãã§ã¯éçãªããŒãžããäœããŸãããåçãªæäœãã€ã³ã¿ã©ã¯ãã£ããªèŠçŽ ãå®çŸããããã«ã¯ãJavaScriptãå¿ èŠãšãªããŸããäŸãã°ããŠãŒã¶ãŒããã¿ã³ãã¯ãªãã¯ãããšãã®ã¢ã¯ã·ã§ã³ããã¹ã¯ããŒã«ã«å¿ããŠå 容ãå€ãããããªãšãã§ã¯ããªã©ããŠã§ãããŒãžã«åããæãããããã®äž»èŠãªããŒã«ãšããŠJavaScriptã䜿çšãããŸãã
1.2 JavaScriptã®æ®åãšãã®èæ¯
JavaScriptããããŸã§æ®åããèæ¯ã«ã¯ãããã€ãã®èŠå ãèããããŸãããŸãããã©ãŠã¶ã®é²åã«ãããJavaScriptã®å®è¡é床ãé£èºçã«åäžããããšãæããããŸããããã«ãããããè€éãªã¢ããªã±ãŒã·ã§ã³ãã¹ã ãŒãºã«åäœããããã«ãªããŸããããŸããã©ã€ãã©ãªããã¬ãŒã ã¯ãŒã¯ã®ç»å Žã«ãããéçºè ã¯ããç°¡åã«é«æ©èœãªãŠã§ãã¢ããªã±ãŒã·ã§ã³ãäœæããããšãã§ããããã«ãªããŸããããããã®èŠå ã«ãããJavaScriptã¯çŸä»£ã®ãŠã§ãéçºã«ãããŠæ¬ ãããªãæè¡ãšãªã£ãŠããŸãã
ãã®ããã«ãJavaScriptã¯ãŠã§ãéçºã®çŸå Žã§å€ãã®å¯èœæ§ãç§ããŠããŸãã次ã®ã»ã¯ã·ã§ã³ã§ã¯ãJavaScriptã®åºæ¬çãªæŠå¿µã«ã€ããŠè©³ãã解説ããŠãããŸãã
2. JavaScriptã®åºæ¬æŠå¿µ
ãŠã§ãéçºã®äžçã§ãJavaScriptã¯ãã®åçãªç¹æ§ãšå€æ§æ§ã§ç¥ãããŠããŸãããããããã®èåŸã«ã¯ãåºæ¬çãªæŠå¿µãæ§é ãååšããŸãããã®ã»ã¯ã·ã§ã³ã§ã¯ãJavaScriptã®åºç€ãšãªãæŠå¿µã«ã€ããŠè©³ãã解説ããŸãã
2.1 å€æ°ãšããŒã¿å
ããã°ã©ãã³ã°ã«ãããŠãæ å ±ãä¿åããŠåŸã§äœ¿çšããããã«ã¯ãå€æ°ãå¿ èŠã§ããJavaScriptã«ãããå€æ°ã¯ãããŒã¿ãæ ŒçŽããããã®ç®±ã®ãããªãã®ãšèããããšãã§ããŸãããŸããJavaScriptã«ã¯æ§ã ãªããŒã¿åãååšããŸããäŸãã°ãæ°åã¯ãNumberããæååã¯ãStringããšããŠæ±ãããŸããããã«ãããå€æ°ã«æ ŒçŽãããããŒã¿ã®çš®é¡ãæ確ã«ããããšãã§ããŸãã
2.2 å¶åŸ¡æ§æãšã«ãŒã
ããã°ã©ã ã®æµããå¶åŸ¡ããããã«ã¯ãå¶åŸ¡æ§æãå¿ èŠã§ããäŸãã°ããifãæã䜿çšããããšã§ãç¹å®ã®æ¡ä»¶ãæºããããå Žåã®ã¿ãç¹å®ã®åŠçãå®è¡ããããšãã§ããŸãããŸããåãåŠçãç¹°ãè¿ãå®è¡ããå Žåã«ã¯ãã«ãŒãã䜿çšããŸããããã«ãããå¹ççã«ã³ãŒããå®è¡ããããšãã§ããŸãã
2.3 é¢æ°ãšãªããžã§ã¯ã
ç¹å®ã®åŠçããŸãšããŠãäœåºŠãå©çšããããã«ã¯ãé¢æ°ãå®çŸ©ããããšãæå¹ã§ããé¢æ°ã¯ãäžé£ã®åŠçãã²ãšãŸãšãã«ããååãã€ããããšãã§ããŸãããŸããJavaScriptã«ããããªããžã§ã¯ãã¯ãè€æ°ã®å€æ°ãé¢æ°ãã²ãšãŸãšãã«ããããã®ãã®ã§ããããã«ãããããŒã¿ãšãã®ããŒã¿ã«é¢é£ããåŠçãäžç·ã«ç®¡çããããšãã§ããŸãã
ãã®ããã«ãJavaScriptã®åºæ¬æŠå¿µã¯ãããé«åºŠãªããã°ã©ãã³ã°æè¡ãåŠã¶ããã®åå°ãšãªããŸãã次ã®ã»ã¯ã·ã§ã³ã§ã¯ããããã®åºæ¬æŠå¿µã掻çšããŠãJavaScriptã§ã§ããããšã«ã€ããŠè©³ãã解説ããŠãããŸãã
3. JavaScriptã§ã§ããããšïŒå®äŸã亀ããŠ
JavaScriptã¯ããŠã§ãããŒãžã«åçãªèŠçŽ ãã€ã³ã¿ã©ã¯ãã£ããªæ©èœãè¿œå ããããã®åŒ·åãªããŒã«ã§ãããã®ã»ã¯ã·ã§ã³ã§ã¯ãJavaScriptã䜿çšããŠå®çŸã§ããäž»èŠãªæ©èœã«ã€ããŠãå ·äœçãªå®äŸã亀ããŠè§£èª¬ããŸãã
3.1 ãŠã§ãããŒãžã®åçãªæäœ
ãŠã§ãããŒãžã蚪ãããŠãŒã¶ãŒã«ãšã£ãŠãããŒãžã®å 容ããã¶ã€ã³ãåçã«å€åããããšã¯ãéåžžã«é åçã§ããJavaScriptã䜿çšããããšã§ããŠãŒã¶ãŒã®ã¢ã¯ã·ã§ã³ã«å¿ããŠããŒãžã®å 容ãå€æŽããããç¹å®ã®èŠçŽ ã衚瀺/é衚瀺ã«ããããšãã§ããŸããäŸãã°ããŠãŒã¶ãŒããã¿ã³ãã¯ãªãã¯ãããšããããã¢ãããŠã£ã³ããŠã衚瀺ãããããšãã£ãåçãªæäœãå¯èœã§ãã
3.2 ãã©ãŒã ã®ããªããŒã·ã§ã³
ãŠã§ããµã€ãã§ããèŠããããåãåãããã©ãŒã ãç»é²ãã©ãŒã ããããã®ãã©ãŒã ã«ã¯ããŠãŒã¶ãŒããã®å ¥åãæ£ç¢ºã«åãåãããã®ããªããŒã·ã§ã³ãå¿ èŠã§ããJavaScriptã䜿çšããããšã§ããŠãŒã¶ãŒããã©ãŒã ã«å ¥åããããŒã¿ãæ£ãããã©ããããªã¢ã«ã¿ã€ã ã§ãã§ãã¯ãããšã©ãŒã¡ãã»ãŒãžã衚瀺ããããšãã§ããŸããããã«ããããŠãŒã¶ãŒã«æ£ç¢ºãªæ å ±ãå ¥åããŠãããããšãå¯èœãšãªããŸãã
3.3 ã¢ãã¡ãŒã·ã§ã³ãšãšãã§ã¯ã
ãŠã§ãããŒãžã«ã¢ãã¡ãŒã·ã§ã³ããšãã§ã¯ããè¿œå ããããšã§ããŠãŒã¶ãŒã®æ³šç®ãåŒãã€ããããšãã§ããŸããJavaScriptã䜿çšããããšã§ãã¹ã¯ããŒã«ã«å¿ããŠèŠçŽ ããã§ãŒãã€ã³ãããããããŒæã«ãšãã§ã¯ããé©çšããããªã©ãããŸããŸãªã¢ãã¡ãŒã·ã§ã³ãå®è£ ããããšãã§ããŸããããã«ããããŠã§ãããŒãžãããé åçã«ãªãããŠãŒã¶ãŒã®æ»åšæéã延ã°ãå¹æãæåŸ ã§ããŸãã
以äžã®ããã«ãJavaScriptã¯ãŠã§ãããŒãžãããé åçã§ã€ã³ã¿ã©ã¯ãã£ãã«ããããã®å€ãã®æ©èœãæäŸããŠããŸãã次ã®ã»ã¯ã·ã§ã³ã§ã¯ããããã®åºæ¬çãªæ©èœãããã«æ¡åŒµããããã®å¿çšçãªãã¯ããã¯ã«ã€ããŠè©³ãã解説ããŠãããŸãã
4. JavaScriptã®å¿çšïŒæ¬¡ã®ã¹ããããž
JavaScriptã®åºæ¬çãªæŠå¿µãç解ãããã次ã¯ãã®å¿çšçãªåŽé¢ã«çŠç¹ãåœãŠãããšãéèŠã§ãããã®ã»ã¯ã·ã§ã³ã§ã¯ãJavaScriptã®ãããªãå¯èœæ§ãåŒãåºãããã®ãã¯ããã¯ãããŒã«ã«ã€ããŠã詳ãã解説ããŸãã
4.1 ã©ã€ãã©ãªãšãã¬ãŒã ã¯ãŒã¯
JavaScriptã®ã³ãŒããå¹ççã«æžãããã«ã¯ãã©ã€ãã©ãªããã¬ãŒã ã¯ãŒã¯ã®äœ¿çšãæ¬ ãããŸããããããã¯ããã䜿ãããæ©èœãåŠçããŸãšãããã®ã§ãéçºã®ã¹ããŒããå€§å¹ ã«åäžãããããšãã§ããŸãã
äŸãã°ãjQueryã¯DOMæäœãç°¡åã«è¡ãããã®ã©ã€ãã©ãªã§ã以äžã®ãããªã³ãŒãã§èŠçŽ ã®ããã¹ããå€æŽããããšãã§ããŸãã
$(document).ready(function(){
$('#myButton').click(function(){
$('#myText').text('Hello, World!');
});
});
äžæ¹ãReactãVue.jsã¯ã¢ãã³ãªãŠã§ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®ãã¬ãŒã ã¯ãŒã¯ã§ãã³ã³ããŒãã³ãããŒã¹ã®éçºãå¯èœã«ããŸãã
4.2 APIãšã®é£æº
çŸä»£ã®ãŠã§ãã¢ããªã±ãŒã·ã§ã³ã¯ãå€éšã®ããŒã¿ããµãŒãã¹ãšé£æºããããšãäžè¬çã§ãããã®ãããªé£æºãå®çŸããããã«ã¯ãAPIïŒApplication Programming InterfaceïŒã®å©çšãå¿ èŠã§ãã
äŸãã°ãOpenWeatherMapã®APIã䜿çšããŠãç¹å®ã®éœåžã®å€©æ°äºå ±ãååŸãããŠã§ãããŒãžã«è¡šç€ºããããšãã§ããŸãã
fetch('https://api.openweathermap.org/data/2.5/weather?q=Tokyo&appid=YOUR_API_KEY')
.then(response => response.json())
.then(data => {
document.getElementById('weather').innerText = data.weather[0].description;
});
4.3 SPAïŒã·ã³ã°ã«ããŒãžã¢ããªã±ãŒã·ã§ã³ïŒã®æ§ç¯
è¿å¹Žã®ãŠã§ãéçºã®ãã¬ã³ããšããŠãSPAïŒã·ã³ã°ã«ããŒãžã¢ããªã±ãŒã·ã§ã³ïŒã泚ç®ãããŠããŸããSPAã¯ã1ã€ã®HTMLããŒãžã®äžã§å šãŠã®ãŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ãåŠçããã¢ããªã±ãŒã·ã§ã³ã®ããšãæããŸãã
äŸãã°ãReactã䜿çšããããšã§ãããŒãžã®åèªã¿èŸŒã¿ãªãã«ããŒã¿ãååŸãã衚瀺ãæŽæ°ããããšãã§ããŸãã以äžã¯ãReactã䜿çšããŠSPAãæ§ç¯ããéã®åºæ¬çãªã³ãŒãã¹ããããã§ãã
import React from 'react';
function App() {
return (
Welcome to My SPA
This is a single page application built with React.
);
}
export default App;
ãã®ããã«ãJavaScriptã®å¿çšçãªåŽé¢ã¯ããŠã§ãéçºã®å¯èœæ§ã倧ããåºãããã®ã§ããåºæ¬çãªæŠå¿µããã£ãããšç解ããäžã§ããããã®å¿çšçãªãã¯ããã¯ãããŒã«ãåŠã¶ããšã§ãããé«åºŠãªãŠã§ãã¢ããªã±ãŒã·ã§ã³ã®éçºãå¯èœãšãªããŸãã
5. JavaScriptã®å®çšäŸïŒæ¥åžžã®ã¿ã¹ã¯ãå¹çå
JavaScriptã¯ããŠã§ãéçºã®ã¿ãªãããæ¥åžžã®ããŸããŸãªã¿ã¹ã¯ãå¹çåããããã®ããŒã«ãšããŠã掻çšãããŠããŸãããã®ã»ã¯ã·ã§ã³ã§ã¯ãJavaScriptã䜿çšããŠã©ã®ããã«æ¥åžžã®ã¿ã¹ã¯ãå¹çåã§ããã®ããå ·äœçãªå®çšäŸãéããŠè§£èª¬ããŸãã
5.1 ãŠã§ããµã€ãã®ã«ã¹ã¿ãã€ãº
å€ãã®ãŠã§ããµã€ãã¯ã蚪åè ã®å©äŸ¿æ§ãåäžãããããã«ãJavaScriptã䜿çšããŠã«ã¹ã¿ãã€ãºãããŠããŸããäŸãã°ããŠãŒã¶ãŒã®è¡åã«å¿ããŠè¡šç€ºå 容ãåçã«å€æŽããåçãªã³ã³ãã³ãã®è¡šç€ºããç¹å®ã®æ¡ä»¶äžã§ã®ãããã¢ããéç¥ãªã©ãæããããŸããããã«ããããŠãŒã¶ãŒã¯å¿ èŠãªæ å ±ãè¿ éã«ååŸããããšãã§ãããŠã§ããµã€ãã®å©çšãããå¿«é©ã«ãªããŸãã
5.2 ã²ãŒã ãã¯ã€ãºã®äœæ
JavaScriptã¯ããŠã§ããã©ãŠã¶äžã§åäœããã²ãŒã ãã¯ã€ãºã®äœæã«ã䜿çšãããŠããŸããããã«ããããŠãŒã¶ãŒã¯è¿œå ã®ãœãããŠã§ã¢ãã€ã³ã¹ããŒã«ããããšãªãããŠã§ããã©ãŠã¶ã ãã§æ¥œããããšãã§ããŸããäŸãã°ãã¯ã€ãºã¢ããªã§ã¯ããŠãŒã¶ãŒã®åçã«å¿ããŠæ¬¡ã®è³ªåã衚瀺ããããã¹ã³ã¢ãèšç®ãããããããšãã§ããŸãã
5.3 ããŒã¿ã®å¯èŠå
ããŒã¿ã®å¯èŠåã¯ãæ å ±ãå¹æçã«äŒããããã®éèŠãªæ段ãšãªã£ãŠããŸããJavaScriptã䜿çšãããšãããŒã¿ãã°ã©ãããã£ãŒããšããŠåçã«è¡šç€ºããããšãã§ããŸããäŸãã°ãD3.jsãšããã©ã€ãã©ãªã䜿çšãããšãæ§ã ãªåœ¢åŒã®ããŒã¿ãçŸããã°ã©ãã£ãã¯ãšããŠãŠã§ãããŒãžäžã«è¡šç€ºããããšãã§ããŸãã
ãã®ããã«ãJavaScriptã¯æ¥åžžã®ããŸããŸãªã¿ã¹ã¯ãå¹çåããããã®åŒ·åãªããŒã«ãšããŠæŽ»çšãããŠããŸããåºæ¬çãªç¥èã身ã«ã€ããããšã§ãããªããJavaScriptã®æã€ç¡éã®å¯èœæ§ãæ倧éã«æŽ»çšããããšãã§ããã§ãããã
6. ãŸãšãïŒJavaScriptã®å¯èœæ§ãæ倧éã«æŽ»çšãã
ãã®èšäºãéããŠãJavaScriptã®åºæ¬ããå¿çšããããŠæ¥åžžã§ã®å®çšäŸãŸã§ãå€å²ã«ãããå 容ãåŠã³ãŸãããæåŸã«ãJavaScriptãåŠã¶äžã§ã®ãã€ã³ãããä»åŸã®å±æã«ã€ããŠèå¯ããŸãã
6.1 åŠã³ç¶ããéèŠæ§
æè¡ã®äžçã¯æ¥ã é²åããŠããŸããç¹ã«ãŠã§ãæè¡ã®åéã¯ãæ°ãããã¬ãŒã ã¯ãŒã¯ãã©ã€ãã©ãªã次ã ãšç»å ŽããŠãããåŠã³ç¶ããããšãéåžžã«éèŠã§ããJavaScriptãäŸå€ã§ã¯ãããŸãããæ°ããæ©èœãä»æ§ãè¿œå ãããããšã§ãããå¹ççã«ãããé«åºŠãªããšãå¯èœã«ãªã£ãŠããŸãããã®ãããå®æçã«æ å ±ãæŽæ°ããæ°ããæè¡ãææ³ãåãå ¥ããããšãæ±ããããŸãã
6.2 ã³ãã¥ããã£ãšã®é£æº
JavaScriptã®åŠç¿ãå®è·µã«ãããŠãã³ãã¥ããã£ãšã®é£æºã¯æ¬ ãããŸãããäžçäžã®éçºè ãæ¥ã ãæ°ããæ å ±ãç¥èãå ±æããŠããŸãããã©ãŒã©ã ãSNSãGitHubãªã©ã掻çšããŠãä»ã®éçºè ãšæ å ±äº€æãè¡ãããšã§ãæ°ããçºèŠã解決çãåŸãããšãã§ããŸãããŸããèªåã®ç¥èãå ±æããããšã§ãä»ã®äººã®å©ãã«ãªãã ãã§ãªããèªåèªèº«ã®ç解ãæ·±ãŸããŸãã
6.3 ä»åŸã®ãã¬ã³ããšå±æ
è¿å¹Žã®ãã¬ã³ããšããŠãWebAssemblyãServerless Architectureãªã©ãæ°ããæè¡ã泚ç®ãããŠããŸãããããã®æè¡ã¯ãJavaScriptãšé£æºããããšã§ãããé«åºŠãªãŠã§ãã¢ããªã±ãŒã·ã§ã³ã®éçºãå¯èœãšãªããŸãããŸããIoTïŒInternet of ThingsïŒã®æ®åã«äŒŽããJavaScriptã䜿çšããããã€ã¹å¶åŸ¡ãªã©ã®æ°ããé åãåºãã£ãŠããŸããããããããJavaScriptã®å¯èœæ§ã¯ç¡é倧ã§ããããã®å¯èœæ§ãæ倧éã«æŽ»çšããããã«ã¯ãåžžã«ææ°ã®ãã¬ã³ãããã£ããã¢ããããæè»ã«å¯Ÿå¿ãã姿å¢ãæ±ããããŸãã
æåŸã«ãJavaScriptã¯åãªãããã°ã©ãã³ã°èšèªã§ã¯ãããŸãããããã¯ãç§ãã¡ã®ç掻ãè±ãã«ããæ°ãã䟡å€ãåµåºããããã®åŒ·åãªããŒã«ã§ãããã®èšäºããããªãã®JavaScriptã®åŠã³ã®äžå©ãšãªãããšãå¿ããé¡ã£ãŠããŸãã