Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
ã¯ããã« åæç¨¿ã§ãã ç¥ã£ã¦ãã便å©ã«ãªãå°æãç¡ãã£ãã®ã§ã¾ã¨ãã¾ããã ãå°æãç¥ããã...ã ãã©æ¤ç´¢ãã¦ãåºã¦ããªã...ï¼ã ããããæã«å½¹ç«ã¡ã¾ãã æ¯è¼çå¤ããã¼ã¸ã§ã³ã®JSã§ã¯ä¸é¨ã®å°æã使ããªãããããã¾ããã éæè¿½å äºå®ã§ããä»ã«å°æããåãã®æ¹ã¯ã³ã¡ã³ãæ¬ã«GOã ããã¨ãã ãã®è¨äºã¯ãããã¾ã§"ãããªããæ¹ãããã"ã¨ç´¹ä»ãã¦ããã ããªã®ã§ãä½ã§ãããã§ããããã®å°æã使ãã¨ãããã£ã¦ã³ã¼ãã®å¯èªæ§ãä¸ããå¯è½æ§ãããã¾ããã³ã¼ããµã¤ãºã¨å¯èªæ§ã天秤ã«ããã¦ã©ã¡ããè¯ãããé½åº¦ç¢ºèªãã¾ãããã è¨äºå ã®ééã£ãé¨åã®ææçã¯ãã®è¨äºã®ã³ã¡ã³ããç·¨éãªã¯ã¨ã¹ãã§ãã¦ä¸ããã 彿¹ã³ã¼ãã´ã«ãã¡ã¼ãªã®ã§ããã¤ãæ°çç¸®å°æãå ¥ãã¦ãããã¨ããäºæ¿ãã ããï¼ä¸å¿è©²å½ããç¯ã«ã¯ï¼ãã¤ãã¦ãã¾ãï¼ã é å é åã®éè¤ããå¤ãåé¤1 const meta = ["foo",
追è¨: 10/11 ãããã§ããºã£ã¦ããããã§ãè²ã ææããã£ãã®ã§è¿½è¨ getElement*ã¯åä½ãæ©ãã®ã§IDãã¯ã©ã¹åãèªæã®å ´åã¯getElement*ãä½¿ãæ¹ãããã¨è¨ãæè¦ããããã¾ãããã¼ã¸ã®è¡¨ç¤ºã§å¤§éã«å¼ã³åºãããããã§ã¯ãªãããããã«ããã¯ã«ã¯ãªããªãã¨è¨ãæè¦ãããã getElement*ã§è¿ããããªãã¸ã§ã¯ãã¯åçãªå¤åã«å¯¾å¿ãã¦ãããquerySelector*ã¯åçãªå¤åã«å¯¾å¿ãã¦ããªããããå ´åã«ãã£ã¦ã¯getElement*ã使ãã¨ããããã®ãµã¤ãã§éãã§ã¿ããã https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofã¯éæ¨å¥¨ãªã®ã§ Promise.allãç¾ä»£çãªæ¸ãæ¹ã«ãã 顧客å ã®ãã©ã¦ã¶ãå¤ãå ´åãèæ ®ãã¦ãããã¦ã¬ã¬ã·ã¼ãªæ¸ãæ¹ãããå ´åãããããããç¾
ã¯ããã« promiseã使ãã¨ãããã¤ãpromiseã¡ã½ãããã§ã¼ã³ã§è¨è¼ãã¦ãã¾ããï¼ãasync/awaitãå©ç¨ãã¦ãã¾ããï¼ ãã¡ããç¶æ³ã«ãã£ã¦ä¸¡æ¹æ¸ãã®ãæ®ã©ã ã¨ã¯æãã®ã§ãããç§ã¯async/awaitã®æ¹ãåæçãªæ¸ãæ¹ããã«èªã¿ãããããããªãã¹ããã¡ãã§è¨è¼ãã¦ãã¾ããããããªãããã¨ã©ã¼ãã³ããªã³ã°ãçè§£ã§ãã¦ããªãã£ããããã¨ã©ã¼ã®æå¨ãçªãæ¢ããã®ã«è¦å´ãã¦ãã¾ãã¾ããã ãã®ããããããæ©ã«async/awaitã«ãããã¨ã©ã¼ãã³ããªã³ã°ã«ã¤ãã¦åå¿é²çã«ã¾ã¨ãã¦ããã¾ãã ãã®è¨äºã®ã¾ã¨ã; catchãããã¨ã©ã¼ã¯rejectã®ã¿ããthrowãããã¨ã©ã¼ãå«ã¾ããã â両æ¹catchã§ãã async颿°ã«ãããå¦çã®é åºãawaitãããå ´åã¨ãªãå ´å âawaitããªãå ´åã«ã¯åæçã«å¦çãå®è¡ãããcatchã§ããªããªã ã¨ã©ã¼å¦çãå¤å´ã«ä¼æã
setTimeout ã¯ãæå®ãããæé以éã«æå®ãããã³ã¼ããå®è¡ãã JavaScript ã® API ã§ãããã©ã¦ã¶ã§ã Node.js ã§ãåºã使ããã¦ããã®ã§ãããå®è£ ã¯ã¾ã¡ã¾ã¡ã§ãè²ã ã¨ç¹æ®ãªæ¡ä»¶ãå¤ããæåãå®ç§ã«çè§£ãã¦ãã人ã¯å°ãªãã¨æãã¾ãããã®è¨äºã§ã¯ããã㪠setTimeout ãå¯è½ãªéãæ·±å ããã¦ã¿ããã¨æãã¾ãã å ã«æ¸ãã¦ããã¾ããããã®ããããããã§ç´°ãã話ã°ãã並ã³ã¾ããçªç¶ç§ãããã ç´ç²ã« setTimeout ã«ã¤ãã¦èª¿ã¹ãããªã£ãã®ã§ããã®çµæãã¾ã¨ããã ãã®ãã®ã§ããæ®éã«éçºãã¦ãã人ã«ã¯å¿ è¦ã®ãªãæ å ±ãå¤ããªãã§ãããããã®è¨äºã¯åºç¤ãã setTimeout ãå¦ã¼ããã¨ããæ¹ã«ã¯å ¨ç¶åããªãã¨æãã¾ãã ã¾ããJavaScript ã®ã¤ãã³ãã«ã¼ãã«ã¤ãã¦ããç¨åº¦çè§£ãã¦ãããã¨ãåæã¨ãã¾ãããã®è©³ããçè§£ã«ã¯ã@PADAone ãã
ãã®è¨äºã«ã¤ã㦠JavaScriptã¯ã好ãã§ããï¼ Reactãªã©ããã³ãã¨ã³ããä¸å¿ã«äººæ°ã®è¨èªãªã®ã§ã触ã£ã¦ã人ã¯ããããããã¨æãã¾ãã 奥深ãã¦èªåã好ããªè¨èªã§ãããçµæ§ãªãã¨ãªãã§è§¦ã£ã¦ããããã¾ãããï¼ ä»åã¯èªåãå¾è¼©ã«ããèãããäºããèªåãå¼ã£ããã£ãäºãããããæ¸ãã¦ããã¾ãã ã¤ã¾ãåºæ¬çã«ã¯åå¿è åããããã¦ãä¸ç´è åãã§ãã ä½ãä¸åã§ãç¥ããªãäºãããã°å¾¡ã®åã®ã¤ããã§æ¸ããã®ã§ããã²æ°è»½ã«èªãã§ãã ããï¼ JavaScriptç·¨ ç¥ç§°ã¯JSãJavaãã¡ãã£ãã ããªããããªã®ã«ç¨ã«ããã¨ããã»ã» Webéçºããå ¥ã£ã¦ããã°ã©ã ãåºãç¥ããªãå ´åã«çºçããããï¼ Javaã¯å ¨ãå¥ã«çè ãããã®ã§ãä¸ãä¸ä½¿ã£ã¦ããããããã¾ãããã ç¥ç§°ã¯ JSï¼ããã¼ããï¼ ã§ãé¡ããã¾ãã ãã¼ã¿åãObject Objectã¯ãã¼ã¨å¤ãããã¤ãæã¦ãJSã®ãã¼ã¿åã§
JavaScriptã®ãããã°ã¯ãã¦ã§ãéçºã®å¿ é ã¹ãã«ã®ã²ã¨ã¤ã§ããããã°ã©ã ã®å®è¡ããããã°ãããã¨ã§ãç¾å¨ã®å¤æ°ã®å¤ããå¦çãã©ã®ããã«é²ãã§ããã®ãã確èªã§ãã¾ãããããã°ã«ãã£ã¦ããã°ã©ã ãæå³ããåä½ã«ãªã£ã¦ãããã®åæã«å½¹ç«ã¦ããã¾ãã æ¬è¨äºã§ã¯Chromeã»Edgeãã©ã¦ã¶ã¼ã®ãDeveloper Toolsãï¼ä»¥ä¸ããããããã¼ãã¼ã«ãããDevToolsããã»ãã¼ã«ãºãã¨ããç¥ç§°ãããã¾ãï¼ã使ç¨ãã¦JavaScriptããããã°ããéã®åºæ¬çãªä½¿ãæ¹ã解説ãã¾ãããä»ã¾ã§ãããããã¼ãã¼ã«ã使ã£ããã¨ã®ãªããã¨ããæ¹ã§ããã®è¨äºãèªãã°çè§£ã§ããããããã¥ã¼ããªã¢ã«å½¢å¼ã«ãªã£ã¦ãã¾ãã20åã»ã©ã§çè§£ã§ããããã¾ã¨ãã¦ããã®ã§ãé çªã«è©¦ããªããèªã¿é²ãã¦ãã ããã ãã®è¨äºã§å¦ã¹ãã㨠ãããããã¼ãã¼ã«ã®ä½¿ãæ¹ JavaScriptã®ãã¬ã¼ã¯ãã¤ã³ãã®ä½¿ãæ¹ å®è¡
Intro 徿¥ã® History API ãæ¹åãã Navigation API ã®ä»æ§çå®ã¨å®è£ ãé²ãã§ããã ããã¯ãHistory API ã®ä½¿ãã«ããã£ãé¨åãè£ãã ãã§ã¯ãªãããJS ã§ç»é¢é·ç§»ããããã¨ããç¾ç¶ã®ããã·ã³ã°ãã¼ã¹ã«åãçµã¿ãSPA ãæ±ããå¤ãã®åé¡ã ãã§ãªã MPA ããæ¹åããå¯è½æ§ãããã ãã® API ã®ç®çã¨ä»æ§ã解説ãã¤ã¤ãå®è£ ã®ã¡ã¢ãæ®ãã ç»é¢é·ç§»ã¨ SPA ã®è»è·¡ Web 㯠HTML ã®åå¾ã¨æç»ãç¹°ãè¿ããç»é¢é·ç§»(Navigation)ãåæã¨ããã¢ã¼ããã¯ãã£(ã®ã¡ã« SPA ããã®éç®ã§ MPA ã¨å¼ã°ãã)ãåºæ¬ã§ããããã©ã¦ã¶ãªã©ã®å®è£ ãããã«æé©åããã¦ããã 䏿¹ãã¢ããªã±ã¼ã·ã§ã³ãã®è¨è¨ææ³ããã®ã¾ã¾ Web ã«æã¡è¾¼ãã SPA ã¯ããã® Navigation ã«ãã£ã¦ãããããã UX ã®ä½ä¸ãé²ãé¨åããã䏿¹ãæ¢
æ°åã®åãæ±ããããã°ã©ã ã使ãããã¨ã«ãªããææ°æã ã¨ä»¥ä¸ã®ãããªããã°ã©ã ãæ¸ããã¨ããç¶æ³ãæ³åãã¦ä¸ããã function sum(nums, acc = 0) { if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(sum(nums)); // expected: 55 ä¸è¦ããã¨ä½ãåé¡ãªãããã«è¦ããããã°ã©ã ã§ãããå®ã¯ãã°ãããã¾ã (çããåããã¾ãã?) *1ãå®éã«ä¸è¨ããã°ã©ã ãå®è¡ãã㨠55 ã§ã¯ãªã 10 ãåºåããã¾ãã ããããå ´é¢ã«ééããã¨ãèªç¶ã¨ sum
ãèªãã§æãåºããã®ã§ãç´¹ä»ã§ãã å ã®è¨äºã¨åæ§ã«ä»¥ä¸ã®é¢æ° sum ã«ã¤ãã¦ã function sum(nums, acc = 0) { console.log({ nums, acc }); if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } ãã®é¢æ°sumã®å¼æ° (nums 㨠acc) ã®å¼ã³åºããã¨ã®å¤åãè¦ããå ´åã¯ãæè¬ããªã³ããããã°ã debugger ã使ãã®ã¯ä¸è¬çãªãã¯ããã¯ã¨ãã¦ããç¥ããã¦ãã¾ããããã®ãããªé¢æ°å¼ã³åºãæã®å¼æ°ãç¥ãããå ´åã¯monitor(function)ã¨ãã颿°ã使ããã¨ã§åæ§ã®å¹æãå¾ããã¨ãåºæ¥ã¾ãã ãã®å ´å㯠monitor(sum)ã¨ããå¾ã«ãé¢
2021å¹´ã«ãªã£ã¦JavaScriptãTypeScriptãNode.jsã®åå¼·ãå§ãã¾ããã ãã®è¨äºã§ã¯ãèªãã§è¯ãã£ãæ¬ãè¨äºãå ¬å¼ããã¥ã¡ã³ããªã©ãã¾ã¨ãã¦ããã¾ãã â»2021/03æç¹ã®æ å ±ã§ãã å人çãªãªã³ã¯éã§ãããããããèªãã¨è¯ãããã¨ãããã®ãããã°ãã²æãã¦ãã ããã ECMAScript ECMAScriptã®ä»æ§ã¯ãEcmaã®TC39ã§çå®ããã¦ãã Ecma TC39 GitHub organization ep78 TC39 | mozaic.fm Node.jsã®åãã¼ã¸ã§ã³ã§ã®ECMAScriptãµãã¼ãç¶æ³ JavaScript Misreading Chat - #86: JavaScript: the first 20 years JavaScript äºåå¹´ã®æ´å²ã«ã¤ãã¦ã®å JavaScript ãã¥ã¼ããªã¢ã« | MDN JavaScri
JSer.infoã¯2011å¹´1æ16æ¥ã«å ¬éããJavaScriptã®æ å ±ãµã¤ãã§ã2021å¹´1æ16æ¥ã§å ¬éãã¦ããã¡ããã©10å¹´ã§ãã JSer.infoã§ã¯ã10å¹´éã§10201ãµã¤ãç´¹ä»ãã522ã³ã®è¨äºæ¸ãã¦ãã¾ããã JSer.infoã®ç´¹ä»ãããµã¤ãæ°(ç´¯è¨)ãã½ã¼ã¹ 10å¹´ééåãããã¨ãªãæ¯é±æ´æ°ãã¦ãã¦ãæå¥ã®è¨äºæ°ã¯æ¯å¹´åãæ¨ç§»ã§ãã JSer.infoã®æå¥ã®è¨äºæ°ãã½ã¼ã¹ ãã®è¨äºã§ã¯ã10å¹´éãã£ã¦ããJSer.infoã®ç®çãæ¯ãè¿ãã JavaScriptã®æ å ±ã®éãæ¹ãæ¸ãæ¹ãã¾ã¨ãæ¹ã«ã¤ãã¦æ¸ãã¦ããããã¨æãã¾ãã â ï¸ ãã¹ã¦ãæ¸ãã¦ããã®ã§ãã®ãããé·ãã§ãã ãã®è¨äºãJSer.infoã«é¢ããæè¦ãææ³ãªã©ã¯ã次ã®å ´æã«æ¸ãã¦ãã ããã ãã®è¨äºãTweetãã Twitter: #jserinfo GitHub Issue: JSer.in
ã¾ã¨ã async/await æ§æã¯ãPromise ã§æ¸ããå¦çã®ãã¡ç¹å®ã®ã±ã¼ã¹ãã表ç¾ã§ããªã ç¹å®ã®ã±ã¼ã¹ã¨ã¯ãããéåæå¦çã®åå¦çã¨å¾å¦çããããã 1 åãã¤ã®å ´åã®ã¿ã§ãã async/await æ§æã¯åå¿è ã«éåæå¦çãå°å ¥ããéã«é©ãã¦ããããéåæå¦çã鿬¡å¦çã¨ãã¦æ¸ããã¨ããå¹»æ³ãä¸ããã®ã§ãã©ããã§ç¥èãã¢ãããã¼ãããæ©ä¼ãè¨ããã¹ãã§ãã ãã®è¨äºã¯ãªã«ï¼ å°ãããºã£ãã®ã§ã¾ã¨ãã¦ããããã¨ã ãasync/await ãããã° Promise ãªãã¦é£ãããã®ã¯è¦ããªãï¼ãã¨ãè¨ã£ã¦ãã¦ããªåã«ãè¤æ°ã® API ã«ä¸¦åã«ãªã¯ã¨ã¹ããæãã¦ä¸ã¤ä»¥ä¸æåããæã ãå ã«é²ããã¿ãããªåé¡ãä¸ãã¦æã§ã¦ã¿ãããâ Yuta Okamoto (@okapies) 2020å¹´12æ11æ¥ async/await 㯠Promise ã®ãã¹ããæç¶ãçãªã³ã¼ãã«è¦ã
ãã©ã¦ã¶ã§é·ãã«ã¼ãããéãå¦çãã¨ããªãã«ã¼ããåãããã¨ããåæçã«JavaScriptãå®è¡ããã¨ã¡ã¤ã³ã¹ã¬ããããããã¯ãã¦ãã¾ãã®ã§ãã¡ãã£ã¨ãã¤ç´°åãã«åå²ãã¦å®è¡ããããã¨ãããã¨ãããã æ¨æ¥ä¹ ãã¶ãã«æ¸ãããæ°ããªãã¿ã¼ã³ã¨åºä¼ã£ãã®ã§ãããã¾ã§ã«ã©ãæ¸ãã¦ã¦ä»åã©ããªã£ããã¡ã¢ã setTimeoutãã 以å(10å¹´åã¨ã)ã¯ãããªã®ãããæ¸ãã¦ããã itemsãã§ããArrayã§ãconsole.logããããéãå¦çã ã¨ãã¦èªãã§ãã ããã function iterateHeavyTask(items) { const startAt = new Date(); while (items.length > 0 && new Date().getTime() - startAt < 10) { console.log(items.shift()); } if (
ãã®è¨äºãèªãã§ãæåè²ã®å¤å®ã®åºæºãæ°ã«ãªã£ãã®ã§èª¿ã¹ã¦ã¿ã¾ããã w3cã®Web Content Accessibility Guidelinesã§ã¯ãæããè²ã¨æãè²ã®ã³ã³ãã©ã¹ãæ¯ãå°ãªãã¨ã 4.5:1 ã«ãªãããã«ã¨ãªã£ã¦ãã¾ããã大ããæåã§ã¯ 3:1 ã¾ã§ã Material DesignãWCAGã®ãã®åºæºããã¨ã«ãã¦ããããã§ãã
JavaScriptã®éåæå¦çPromiseãAsyncã¨Awaitã®ä»çµã¿ãGIFã¢ãã¡ã§è§£èª¬ããè¨äºãç´¹ä»ãã¾ãã âï¸ð JavaScript Visualized: Promises & Async/Await by Lydia Hallie ä¸è¨ã¯åãã¤ã³ããæè¨³ãããã®ã§ãã â»å½ããã°ã§ã®ç¿»è¨³è¨äºã¯ãå ãµã¤ãæ§ã«ã©ã¤ã»ã³ã¹ãå¾ã¦ç¿»è¨³ãã¦ãã¾ãã ã¯ããã« ã³ã¼ã«ããã¯å°ç Promiseã®æ§æ ã¤ãã³ãã«ã¼ã: Microtasksã¨(Macro)tasks Asyncã¨Await ã¯ããã« JavaScriptã®ã³ã¼ããæå¾ éãã«å®è¡ãããªããã¨ã«æ©ã¾ããããã¨ã¯ãªãã§ããï¼ ããããã颿°ãä¸è¦åã«å®è¡ãããããäºæ¸¬ã§ããªãã¿ã¤ãã³ã°ã§å®è¡ãããããå®è¡ãé ããããããã¨ãããããããã¾ãããããã¦ãES6ã§å°å ¥ãããæ°æ©è½Promiseãåå ããããã¾ããï¼ ä½å¹´ã
setTimeout(() => console.log(5), 1000); setTimeout(() => console.log(4), 1000); setTimeout(() => console.log(3), 1000); setTimeout(() => console.log(2), 1000); setTimeout(() => console.log(1), 1000); setTimeout(() => console.log(0), 1000); ãã太éãâãã®ã³ã¼ããå®è¡ããã®ã«ãåè¨ã§ä½ç§ãããã¨æãï¼ã å¨ãããã¨ãsetTimeout()ã¯ç¢ºãã å¨ãã¿ã¤ãã¼ãã»ããããã¡ã½ããã ããã å¨ã1,000ããªç§å¾ã»ã»ã»ã¤ã¾ã1ç§å¾ã«console.log(5)ãå®è¡ãããããã ãã太éããããªã å¨ããã®å¾ã次ã®è¡ãå¦çãããããã å¨ãã¾ã1ç§çµéã
ãã®3ã¤ã®ååã¯æ¸ç±ã®æ§æã«ãç¾ãã¦ãã¾ãã 第ä¸é¨ã®åºæ¬ææ³ã§ãæ¸ãæ¹ããå¦ã³ã第äºé¨ã®ã¦ã¼ã¹ã±ã¼ã¹ã§ãä½ãæ¹ããå¦ã¹ãããã«ãªã£ã¦ãã¾ãã ãå¦ã³æ¹ãã¯ãç« ã¨ãã¦ã§ã¯ãªãå ¨ä½çãªæµãã¨ãã¦åãå ¥ãããã¨ã«ãã¾ããã ãªããªãããå¦ã³æ¹ãèªä½ã¯å¦ã³ãããã¨ã«ãã£ã¦ãç°ãªãæ¹æ³ãåãå ´åãããã¾ãã ãã®ããããå¦ã³æ¹ãã§åå¥ã®ç« ã¨ããããã¯ãä»ã®ç« ã§ãæ¸ãæ¹ãããä½ãæ¹ãã¨ä¸ç·ã«è¦ãã»ããããã¨èããããã§ãã ãã¨ãã°ãåºæ¬ææ³ãªã©ã®å¦ã³æ¹ã«ã¯MDNã®ãããªãªãã¡ã¬ã³ã¹ãµã¤ããè¦ãã»ãããããã ã¢ããªã±ã¼ã·ã§ã³ã®ä½ãæ¹ã¯å®éã®ãµã¤ããªã©ãåèã«ããã»ããããããã§ãã 第ä¸é¨ã¨ç¬¬äºé¨ãã©ã®ããã«æ¸ãããã®ãããã£ããã¨æ¯ãããã£ã¦ã¿ã¾ãã 第ä¸é¨: åºæ¬ææ³ 第ä¸é¨: åºæ¬ææ³ã¯JavaScriptã®åºæ¬çãªææ³ã«ã¤ãã¦æ±ã£ã¦ãã¾ãã ããã°ã©ãã³ã°ã®å ¥éæ¸ã§ææ³ã«ã¤ãã¦ã¯é¿ãããã¨
ã©ã³ãã³ã°
ãç¥ãã
ã©ã³ãã³ã°
ãªãªã¼ã¹ãé害æ å ±ãªã©ã®ãµã¼ãã¹ã®ãç¥ãã
ææ°ã®äººæ°ã¨ã³ããªã¼ã®é ä¿¡
å¦çãå®è¡ä¸ã§ã
j次ã®ããã¯ãã¼ã¯
kåã®ããã¯ãã¼ã¯
lãã¨ã§èªã
eã³ã¡ã³ãä¸è¦§ãéã
oãã¼ã¸ãéã
{{#tags}}- {{label}}
{{/tags}}