2022-01-01ãã1å¹´éã®è¨äºä¸è¦§
å¹´æ«ã¨ãããã¨ã§ãä»å¹´ã®åå¼·ã«ã¤ãã¦åçãã¾ããä»å¹´1å¹´ãæ¯ãè¿ããæ¥å¹´ã®åå¼·ã«æ´»ããããã§ããæ¥å¹´åå¼·ããããã¨ãä½µãã¦æãã¾ãã 2022å¹´ã«åå¼·ããã㨠åç 2023å¹´ã®ç®æ¨ 2022å¹´ã«åå¼·ããã㨠YAML mustache p5.js SVG Processing Three.js jQuâ¦
The Nature of Code(PDFç)ããã©ã³ãã ã¦ã©ã¼ã¯ã«ã¤ãã¦åãä¸ãã¾ããProcessingã§ããã°ã©ã ãæ¸ãã¦ãåä½ã確èªãã¾ããåä½ã確èªã§ããã¨ãããProcessingã®æ¥½ããã¨ããã§ããProcessingã®ããã©ã«ãã®ããã°ã©ãã³ã°è¨èªã¯ãJavaã§ããJavaã®åå¼·ãâ¦
é«æ ¡æ°å¦ã®å¦ã³ç´ãã®ç¶å ±ã§ãã 以åã®è¨äºã§ããã¯ãã«ã¨ä¸è§æ¯ãä¸è§é¢æ°ããããåå¼·ãç´ãããã¨ãæ¸ãã¾ãããããããããã«åå¼·ãé²ããã®ã§ããã®ãã¨ã«ã¤ãã¦æ¸ãã¾ãã ããããæ°å¦ãå¦ã³ç´ããã£ããã¯ãProcessingã§å¿ è¦ã«ãªã£ãããã§ãã é«â¦
å½ããã°ã§ç´¹ä»ããThree.jsã®è¨äºãä¸è¦§ã«ã¾ã¨ãã¾ãããThree.jsã¯ããã©ã¦ã¶ä¸ã§3DCGãæç»ããJavaScriptã®ã©ã¤ãã©ãªã§ãã5Gã主æµã«ãªã£ããéè¦ãé«ã¾ãããããã¾ããã Vue.jsã®è¨äºã¾ã¨ã ä»å¾ã®åãçµã¿ åèãµã¤ã Vue.jsã®è¨äºã¾ã¨ã Three.jsâ¦
2022å¹´ã«èªãã æ¬ãã¡ã¢ã¨ãã¦æ®ãã¾ããããã°ã§ç´¹ä»ãã¦ããªãæ¬ãè¼ãã¦ãã¾ããä»å¹´ã¯ããã¸ãã¹ã»çµæ¸ç³»ã®æ¬ãèªãã å¹´ã§ãããæ¬å½ã¯ãã£ã¨æ¬ãèªã¿ããã®ã§ãããèªæ¸ã¹ãã¼ããé ãã®ã§ä»æ¹ããã¾ãããæ¥å¹´ãåããããã®ãã¼ã¹ã§èªããã°ã¨èãã¾â¦
æ¬æ¸ã¯ãèªã¿ãããã³ã¼ã=ç解ããããã³ã¼ãã¨ããèãã§æ¸ããã¦ãã¾ãããã®ãããç解ããããã³ã¼ããæ¸ãæ¹æ³ã«ã¤ãã¦4é¨ã«ãããåãä¸ãã¦ãã¾ãã æ¬ã®ç´¹ä» å¦ãã ã㨠表é¢ä¸ã®æ¹å ã«ã¼ãã¨ãã¸ãã¯ã®åç´å ã³ã¼ãã®åæ§æ ææ³ æ¬ã®ç´¹ä» èªã¿â¦
é«æ ¡æ°å¦ã®å¦ã³ç´ãããã¦ãã¾ãã ä½æ ãé«æ ¡æ°å¦ã®å¦ã³ç´ãããã¦ããã®ããæ°å¦ã¨ããã°ã©ãã³ã°ã«ã¤ãã¦æ¸ãã¦ãã¾ãã端çã«è¨ãã¨ãProcessingã§ããã°ã©ãã³ã°ããã®ã«æ°å¦ãå¿ è¦ã«ãªã£ãã®ã§ãé«æ ¡æ°å¦ã®å¦ã³ç´ãããã¦ããã¨ããã話ã§ãã é«æ ¡æ°â¦
Sassã®åå¼·ããã¾ããããã®å 容ãã¡ã¢ã¨ãã¦æ®ãã¾ããSassã®å ¥éçãªå 容ã«ã¤ãã¦æ¸ãã¾ãã ãã¹ã å¤æ° mixin mixinã«å¼æ°ã渡ã & ååæ¼ç® CSSã®calcé¢æ° import ãã¹ã <div class="header"> <div class="log"></div> <div class="tagline"></div> <div class="menu"> <ul> <li><a href="">ã¡ãã¥ã¼1</a></li> <li><a href="">ã¡ãã¥ã¼2</a></li> <li><a href="">ã¡ãã¥ã¼3</a></li></ul></div></div>
Linuxã«Processingãã¤ã³ã¹ãã¼ã«ãã¾ããããã®æã«è¡ã£ããã¨ãåå¿é²ã¨ãã¦æ®ãã¾ããã¡ãªã¿ã«ãLinux mint 21ã«Processingãã¤ã³ã¹ãã¼ã«ãã¾ãããå人çã«ã¯ãæ°ããªå¦ã³ããã£ãã®ã§è¯ãã£ãã§ãã Processingã®ãã¦ã³ãã¼ã ãã¡ã¤ã«ã®å±é ã¤ã³ã¹ãâ¦
ä»åã¯ãã¢ã¸ã¥ã¼ã«ã®ã¤ã³ãã¼ãã¨ã¨ã¯ã¹ãã¼ãã®ç¹æ®ãªæ¸ãæ¹ã«ã¤ãã¦è¦ã¦ããã¾ããå ·ä½çã«ã¯ã*(ã¢ã¹ã¿ãªã¹ã¯)ã使ã£ãè¨è¿°ã¨åã¨ã¯ã¹ãã¼ããå¯ä½ç¨ã®ããã¤ã³ãã¼ãã®3ã¤ã«ã¤ãã¦ã§ãã äºåæºå *ã§ã¾ã¨ãã¦ã¤ã³ãã¼ããã åã¨ã¯ã¹ãã¼ã ååä»ãã¨â¦
ã¢ã¸ã¥ã¼ã«ã®ã¤ã³ãã¼ãã¨ã¨ã¯ã¹ãã¼ãã«ã¤ãã¦æ¸ãã¾ãããã®ä¸ã§ãããã©ã«ãã¤ã³ãã¼ã(default import)ã¨ããã©ã«ãã¨ã¯ã¹ãã¼ã(default export)ã®è¨è¿°ã«ã¤ãã¦æ¸ãã¾ãã äºåæºå ã¢ã¸ã¥ã¼ã«ã®import/export å¤æ°ã®default import/default export é¢â¦
ã¢ã¸ã¥ã¼ã«ã®ã¤ã³ãã¼ãã¨ã¨ã¯ã¹ãã¼ãã«ã¤ãã¦æ¸ãã¾ãããã®ä¸ã§ãååä»ãã¤ã³ãã¼ã(named import)/ååä»ãã¨ã¯ã¹ãã¼ã(named export)ã¨ã¨ã¤ãªã¢ã¹ã«ã¤ãã¦æ¸ãã¾ãã äºåæºå ã¢ã¸ã¥ã¼ã«ã®import/export named import/named export è¤æ°ã®å¤æ°ãimpoâ¦
ä»å¹´ã®9æã§ããã°éè¨2å¹´ã«ãªãã¾ããå°ãé ããªãã¾ãããæ¯ãè¿ãã¾ãããããªããã°ãããã®ã ã¨æã£ã¦è¦ã¦ããã ããã幸ãã§ãã ããã°ãæ°å¤ã§æ¯ãè¿ã 課é¡ã»å¾åãã«ãã¦ããã㨠ä»å¾ã«ã¤ã㦠ããã°ãæ°å¤ã§æ¯ãè¿ã å½ããã°ã®æ°å¤ãç°¡åã«ã§ã¯â¦
JavaScriptã®ã¢ã¸ã¥ã¼ã«ã¯ãES2015ã§è¿½å ãããä»çµã¿ã§ããä»åã¯ãã¢ã¸ã¥ã¼ã«ã®åºæ¬ã®æ¸ãæ¹ã«ã¤ãã¦åå¼·ãããã¨ãæ¸ãã¾ããã¯ã©ã¤ã¢ã³ãå´ã®JavaScriptã§ãã¢ã¸ã¥ã¼ã«ã使ããããã«ãªãã便å©ã«ãªãã¾ããã ã¢ã¸ã¥ã¼ã«ã¨åå空é ã¢ã¸ã¥ã¼ã«ãªãã®Javâ¦
Node.jsã¨VS Codeã§HTMLã»CSSã®éçºç°å¢ãä½ã£ã¦ã¿ã¾ãããã¿ã¹ã¯ã©ã³ãã¼ã®Gulpã使ããã«ãnpm scriptsã§Pugã¨Sassã®å¤æå¦çãèªååãã¦ã¿ã¾ãããã¾ãããã¡ã¤ã«ã«å¤æ´ããã£ããèªåã§ãã©ã¦ã¶ãæ´æ°ããããã«ãã¾ããã ãããããã¨ã¯4ã¤ã§ã1.Pugâ¦
Linuxã«Visual Studio Codeãã¤ã³ã¹ãã¼ã«ãã¾ããããã®æã«è¡ã£ããã¨ãåå¿é²ã¨ãã¦æ®ãã¾ããã¡ãªã¿ã«ãLinux mint 21ã«Visual Studio Codeãã¤ã³ã¹ãã¼ã«ãã¾ããã Visual Studio Codeã®ã¤ã³ã¹ãã¼ã« Visual Studio Codeã®èµ·å åèãµã¤ã Visual Studâ¦
Linuxã«Node.jsãã¤ã³ã¹ãã¼ã«ãã¾ããããã®æã«è¡ã£ããã¨ãåå¿é²ã¨ãã¦æ®ãã¾ããã³ãã³ãã®è©³ãã使ãæ¹ã«ã¤ãã¦ã¯ãåãä¸ãã¦ãã¾ãããã¡ãªã¿ã«ãLinux mint 21ã«Node.jsãã¤ã³ã¹ãã¼ã«ãã¾ããã Node.jsãå§ãã nvmã®ã¤ã³ã¹ãã¼ã« Node.jsã®ã¤ã³â¦
Linuxã試ãããã¦ãLinux Mintãã¤ã³ã¹ãã¼ã«ãã¾ããããã®éãåèã«ãããµã¤ãããç´¹ä»ãã¾ãã Linuxã®ã¤ã³ã¹ãã¼ã« å¿ è¦ãªãã® åæè¨å® ä»å¾ã®ææ°è¾¼ã¿ åèãµã¤ã Linuxã®ã¤ã³ã¹ãã¼ã« ä¸è¨ã®åç»ãåèã«Linux Mint 21ãã¤ã³ã¹ãã¼ã«ãã¾ããã ãLâ¦
æè¿ãæ°ããããã¹ãã¨ãã£ã¿ãå ¥ãã¾ãããããã§ãããã¾ã§ã®ããã¹ãã¨ãã£ã¿ã®éæ´ã¨ä»å¾ã®ä½¿ãåãã«ã¤ãã¦æ¸ãã¾ãã ç§ã®ããã¹ãã¨ãã£ã¿éæ´ ã¡ã¢å¸³ Emacs,vim TeraPad Atom Visual Studio Code ããã¹ãã¨ãã£ã¿ã®ä½¿ãåã ä½è« ç§ã®ããã¹ãã¨ãâ¦
ä»åã¯ãLiveServerã«ã¤ãã¦æ¸ãã¾ããè²ã ã¨èª¿ã¹ã¦ãããLiveServerã¨ãããã®ã«åºä¼ãã¾ãããã¦ã§ããµã¤ããå¶ä½ããæ¹ã«ã¨ã£ã¦ä¾¿å©ãªæ©è½ãªã®ã§å°å ¥ãã¦ã¿ãã¨è¯ãã§ãã ã³ã¼ãã£ã³ã°ã®æµã LiveServerã®è¿½å ææ åèãµã¤ã ã³ã¼ãã£ã³ã°ã®æµã ç·¨é â¦
éçºããä¸ã§ã¹ãã¬ã¹ã«æãã¦ãããã¨ãããã¾ããä»åã¯ããã®æ¹åã®ããã«ãããã¨ãæ¸ãã¾ããå ·ä½çã«ã¯ãã¨ãã£ã¿ã«ã¿ã¼ããã«ã®æ©è½ã追å ãããã¨ã¨ä»®æ³ç°å¢ã«æ¥ç¶ããæ¹æ³ã«ã¤ãã¦ã§ãã èª²é¡ Atomã«ã¿ã¼ããã«ã追å vagrantã®ä»®æ³ç°å¢ã«æ¥ç¶ããâ¦
Pugã¯ãHTMLã®æ¡å¼µè¨èªã§ããpug-cliã使ã£ã¦ãPugã試ãã¾ããPugã¯ãã®ã¾ã¾ã§ã¯ãã©ã¦ã¶ã«è¡¨ç¤ºããã¾ãããHTMLã«å¤æããå¿ è¦ãããã¾ãã ã¤ã³ã¹ãã¼ã« æºå DOCTYPEå®£è¨ åºæ¬ ããã¹ããè¤æ°è¡è¨è¿°ããå ´å ãªã¹ãã¿ã°ã®æ¸ãæ¹ IDã¨CLASS ã¿ã°ãçç¥ãâ¦
å½ããã°ã§ç´¹ä»ããVue.jsã®è¨äºãä¸è¦§ã«ã¾ã¨ãã¾ãããVue.jsã¯ãUIãæ§ç¯ããã®ã«ä¾¿å©ã§ããããã³ãé¨åã®å¶ä½ã«å½¹ç«ã¤ãã¨ã§ãããã Vue.jsã®è¨äºã¾ã¨ã é¢é£é ç® Vue.jsã®è¨äºã¾ã¨ã Vue.js|Vue.jsã®å°å ¥ Vue.js|æ¡ä»¶ä»ãã¬ã³ããªã³ã°:v-ifã¨v-showã§â¦
æ¬æ¸ã¯ãä¼è¨ã¯ã¤ãºãéå¬ãã¦ããèè ãã楽ãã決ç®æ¸ãèªã¿è§£ããã¨ã«ä¸»ç¼ãç½®ãã¦æ¸ããæ¬ã§ãã ä¼è¨ç¥èããªãç§ã§ãæµæãªãèªã¿é²ãããã¨ãã§ãã¾ããã決ç®æ¸ã®èªã¿æ¹ãåãããªãã§å°ã£ã¦ããæ¹ã¯ãæ¬æ¸ã足æããã«ããã¨è¯ãã§ãã æ¬ã®ç´¹ä» å¦â¦
ã³ã³ãã¼ãã³ãã§v-modelã使ãæ¹æ³ã«ã¤ãã¦æ¸ãã¾ããv-modelããã®ã¾ã¾ä½¿ãã®ã§ã¯ãªããv-bind:valueã¨v-on:inputã«ç½®ãæãã¦å®ç¾ãã¾ãã v-modelã¨v-bind:value,v-on:input ã³ã³ãã¼ãã³ãã§v-modelã使ã æçµçãªè¨è¿° åèãµã¤ã v-modelã¨v-bind:valâ¦
ç§èªèº«ãVue.jsã®ç解ãã¾ã ã¾ã æµ ãã§ããã¡ã¢ç¨åº¦ã®ãã®ã¨ãã¦è¦ã¦é ããã°ã¨æãã¾ãã ä»åã¯ãã³ã³ãã¼ãã³ãã«ã¤ãã³ããè¨å®ããæ¹æ³ã«ã¤ãã¦æ¸ãã¾ãããã¤ã³ãã¯ã$emit()ã¨$eventã§ããã¤ãã³ããã©ã®ããã«ç´ã¥ããã®ãããã¤ãã³ãã§ã®å¤ã®æ¸¡ãâ¦
ä¾ãã°ãã³ã³ãã¼ãã³ãã使ã£ã¦ããã°ãä½æããã¨ãªãã¨ãè¨äºã®ã¿ã¤ãã«ãæ稿å 容ãªã©ã®ãã¼ã¿ãã³ã³ãã¼ãã³ãã«æ¸¡ãã¦å¦çãããã¨ã«ãªãã¾ããä»åã¯ãã³ã³ãã¼ãã³ãã«ãã¼ã¿ã渡ãæ¹æ³ã«ã¤ãã¦æ¸ãã¾ãã ã«ã¹ã¿ã å±æ§ã¨ãã¦ãã¼ã¿ã渡ã Vueã¤ã³ã¹â¦
以åã®è¨äº(Ajaxã§å¤é¨ãã¼ã¿ãåå¾ãã)ã§ãAjaxãå©ç¨ãã¦å¤é¨ãã¼ã¿ãåå¾ããã³ã¼ãããç´¹ä»ãã¾ããããã®ã³ã¼ãã§ã¯ãJavaScriptã®ã³ã¼ãã®ä¸ã«HTMLã®ã³ã¼ããå«ã¾ãã¦ãã¾ãããä»åã¯ãJavaScriptããHTMLãåé¢ããä¾ãæ¸ãã¾ãã 以åã®ã³ã¼ã:XMLâ¦
以åãmustacheã®è¨äºãæ¸ãã¾ããããåå¼·ãç´ããã®ã§æ¹ãã¦è¨äºã«ãã¾ããä»åã¯ãHTMLã¨JavaScriptã®åé¢ã«ç¦ç¹ãå½ã¦ã¦æ¸ãã¾ãã HTMLãæ¿å ¥ããä¾ HTMLã®ãã³ãã¬ã¼ãå HTMLã³ã¼ãã®åé¢ ã¾ã¨ã åè HTMLãæ¿å ¥ããä¾ idå±æ§ãresultã§ããè¦ç´ ã®åâ¦
jQueryã®Ajaxã使ã£ã¦ãå¤é¨ãã¼ã¿(JSONãXMLãHTML)ãåå¾ããæ¹æ³ãè¦ã¦ããã¾ãã JSONã®åå¾ XML(RSS)ã®åå¾ HTMLã®åå¾ ã¾ã¨ã åè JSONã®åå¾ ex.)æ°è±¡åºã®ãµã¤ãããæ±äº¬é½ã®å¤©æ°äºå ±ã®ãã¼ã¿ãJSONå½¢å¼ã§åå¾ åå¾å :https://www.jma.go.jp/bosai/fâ¦