概要 yieldおよびジェネレータ関数について勉強したことをまとめてみます。 yieldとは Javascriptにおけるジェネレータ関数で処理を一時停止したり再開したりするのに使われるもの 一般的な関数のreturnに相当するもので、ジェネレータ関数ではyieldを使用する returnと違って関数内で何回でも呼び出すことができる 参考：yield ジェネレータ関数(Generator)とは イテレータを生成する関数 イテレータとは配列のような繰り返し処理できるもののこと 書き方 /* ジェネレータ */ function* testGenerator() { for(let i=1; i<=10; i++){ if (i % 2 == 0) yield i; } } // イテレータを生成 g = testGenerator() // 繰り返し処理 for (let even of g) { console.log(even); } // next()を使用する場合 // 上記繰り返し処理ですべての要素を呼び出したので、もう一度作り直す g = testGenerator() // next()の返り値は { value: 2, done: false } のようになっている console.log(g.next()); // { value: 2, done: false } console.log(g.next()); // { value: 4, done: false } console.log(g.next()); // { value: 6, done: false } console.log(g.next()); // { value: 8, done: false } console.log(g.next()); // { value: 10, done: false } console.log(g.next()); // { value: undefined, done: true } valueがundefinedになってdoneは初めてtrueになる あらためてyieldとは ジェネレータ関数.next()では 一回目の呼び出しは最初のyieldで一旦処理をストップ。 二回目は最初のyieldから二回目のyieldまでを処理しストップ。 三回目は...(以下繰り返し)となる。 function* testGenerator() { console.log('yield 1!'); yield 1; console.log('yield 3!'); yield 3; console.log('yield 5!'); yield 5; } g = testGenerator() console.log(g.next().value); console.log(g.next().value); console.log(g.next().value); // または // for (let odd of g) { // console.log(odd); // } // 結果 // yield 1! // 1 // yield 3! // 3 // yield 5! // 5 yield* ジェネレータ関数内で別のジェネレータ関数を呼び出す際に使用する next()を使用した際の返り値は「呼び出したジェネレータ関数の順」になる function* testGenerator() { yield 1; yield 3; yield 5; } function* testGenerator2() { yield 2; yield 4; yield 6; } function* parentGenerator() { yield* testGenerator(); yield* testGenerator2(); } g = parentGenerator() for (let num of g) { console.log(num); } // 結果 // 1 // 3 // 5 // 2 // 4 // 6 ジェネレータ関数に引数を渡したい ジェネレータ関数には引数を渡せます。 渡した引数は関数内のどこからでも参照できます。 function* testGenerator(val) { console.log(val); yield 1; console.log(val + 1); } let g = testGenerator(123); g.next(); g.next(); // 結果 // 123 // 124 さらにジェネレータ関数.next(引数)とすることで渡すこともできます 渡した引数はyield時に取り出すことができます。 function* testGenerator() { let result = yield 1; yield result + 2; } let g = testGenerator(); console.log(g.next(g.next().value).value); // 結果 // 3 yieldを使った同期処理・非同期処理 yieldの「処理を一時停止したり、再開したりする」機能を用いて非同期処理を同期的に処理することができます。 例えばこちらの関数 function async(){ let count = 1; setTimeout(() => { console.log(count++); setTimeout(() => { console.log(count++); setTimeout(() => { console.log(count++); },1000) },1000) },1000) } async(); // 1秒毎に1, 2, 3と表示される yieldを使えば以下のように書き換えられます function async(g, num){ setTimeout(() => { console.log(num); g.next(); }, 1000) } g = (function* () { yield async(g, 1); yield async(g, 2); yield async(g, 3); })(); g.next(); 元々ネストを浅くする目的で使われていたようですが、現在はasync, awaitが主流のようです。 function test(num){ return new Promise(resolve => { setTimeout(() => { console.log(num); resolve(); }, 1000) }); } async function g(){ await test(1); await test(2); await test(3); } g(); 疑問 ジェネレータ関数内でreturnするとどうなるか function* testGenerator() { yield 1 yield 2; return 'return'; console.log('hello'); yield 3; } g = testGenerator(); console.log(g.next()); console.log(g.next()); console.log(g.next()); console.log(g.next()); // 結果 // { value: 1, done: false } // { value: 2, done: false } // { value: 'return', done: true } // { value: undefined, done: true } returnを呼び出した時点でdone: trueとなる return以降の処理は例えyieldの記載があっても呼ばれることはない。

はじめに デザイン上、D3.jsのグラフのタイトルに画像のアイコンを表示させる必要があったので、調べてみたメモ。 やり方 単にSVGのImageタグをD3の流儀に従って張り付けるだけ。 座標はうまいこと調整しよう。 // グラフタイトル svg.append("image") .attr("x", 0) .attr("y", 0) .attr("href", "https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image/mdn_logo_only_color.png") .attr("height",20) .attr("width",20) // グラフタイトルの設定 svg.append("text") .attr("x", 24) .attr("y", 12) .attr("font-size", "13px") .attr("text-anchor", "top") .attr("font-weight", 700) .text("タイトル"); するとこんな感じで画像がタイトルの横にアイコンっぽく表示される。当たり前っちゃー、当たり前の話だ。 参考 https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

Drupal 開発でなんちゃら Observer が使われていましたが理解が追いつかなかった..。 (まず JS 自体そんな理解できてない) 今回は一旦整理したいので Drupal を無視して学習しました。 やること 画像をふわっと表示 ファイルの準備 practice ディレクトリ化にファイル作成します。 practice |-index.html |-style.css |-observer.js Codepen では rootMargin が上手く機能しなかったので、ローカルのほうが良さそうです。 index.html head タグ内でスタイルシートとJSファイルを読み込みます。 <head> <link rel="stylesheet" href="style.css"> <script src="observer.js" defer></script> </head> <body> <h1>テストだよ</h1> <img src="https://baconmockup.com/500/400" alt=""> <img src="https://baconmockup.com/500/400" alt=""> <img src="https://baconmockup.com/500/400" alt=""> <img src="https://baconmockup.com/500/400" alt=""> <img src="https://baconmockup.com/500/400" alt=""> <img src="https://baconmockup.com/500/400" alt=""> <img src="https://baconmockup.com/500/400" alt=""> <img src="https://baconmockup.com/500/400" alt=""> <img src="https://baconmockup.com/500/400" alt=""> </body> style.css JS で付与する .is-show で表示制御。 opacityとtransitionで表示をふわっとさせます。 img { display: block; max-width: 100%; height: auto; opacity: 0; transition: opacity 3s; } img.is-show { opacity: 1; transition: opacity 3s; } observer.js // 全ての img を取得し変数に入れる. const sections = document.querySelectorAll("img"); let options = { // viewport を指定できる.今回はデフォルト. root: null, // 監視中の要素がどんだけ viewport 内に入っているか. // 0.5 は 50% 入ったらイベント発火. threshold: 0.5, // viewport の範囲を大きくしたり小さくしたりできる. // 上下に 100px ずつ広がっている状態. rootMargin: "100px 0px 100px 0px", }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { // isIntersecting プロパティで監視中の要素が viewport に入っているかどうか判断できる. if(entry.isIntersecting) { // entry.target で要素にアクセスできる. // viewport に入ったら is-show を付与する. entry.target.classList.add("is-show"); } else { // viewport の外に出たらクラスを削除. entry.target.classList.remove("is-show"); } }) // 第２引数に設定したオプション. }, options); // 複数監視したいときは forEach で繰り返し処理. sections.forEach(section => { // observe() メソッドを呼び出して処理を実行.引数には監視対象の要素が入る observer.observe(section); }); とりあえずそれっぽく作ってみましたが、 const observer = new IntersectionObserver((entries) => { 辺りがよくわからん..。第２引数もやたら遠くて理解に苦しんだ。 ↓ 第１引数を分けてみました。 // img 取得と options の記載は省略. const observer = new IntersectionObserver(huwatto, options); function huwatto(entries) { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add("is-show"); } else { entry.target.classList.remove("is-show"); } }); } sections.forEach(section => { observer.observe(section); }); こっちの方がわかりやすそうです。 これを Drupal で実装してみようと思います。 またいつか。 参考にしたサイト MDN : https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API わかりやすかった動画 : https://www.youtube.com/watch?v=T8EYosX4NOo

特定のクエリが変わった時だけレンダリングを行うという処理を書こうと思った時に、window.location.XXXのXXXの部分の指定に色々あるということを学んだので、メモ。 window.location.XXXの色々 URLがhttps://higu.com:8080/higu/scraps?status=openv#hereの場合 window.location.href // -> "https://higu.com:8080/higu/scraps?status=open#here" window.location.protocol // -> "https:" window.location.host // -> "higu.com:8080" window.location.hostname // -> "higu.com" window.location.port // -> "8080" window.location.pathname // -> "/higu/scraps" window.location.search // -> "?status=open" window.location.hash // -> "#here" window.location.origin // -> "https://higu.com:8080" その他の便利な機能 URLがhttps://higu.com:8080/higu/scraps?status=open#hereの場合 ?の後のクエリだけ欲しい window.location.search.substring(1) // -> "status=openv#here" 特定の場所のクエリが欲しい ver query = window.location.href; // /higuの前 query.split("/higu")[0]; // -> "https://higu.com:8080" // /higuのの後 query.split("/higu")[1]; // -> "/scraps?status=openv#here" // status=openだけ var tmp = query.split("/scraps?")[1]; tmp.split("#here")[0]; // -> "status=open" 私が実際にwindow.location.XXXを用いたコード クエリが変わった時に、useEffect内が走る const query = window.location.href; const updateQuery = query.split("/mypage")[0]; useEffect(() => { ~略~ }, [updateQuery]); 参考：こちら

はじめに JavaScriptでコード書いているとき、 null や undefinde と上手く付き合うために以下のような記法をよく使うと思います。 && ... 論理積 || ... 論理和 hoge?.huga ... オプショナルチェーン ?? ... Null合体演算子 このうち 論理和 と Null合体演算子 の違いを理解せずに使用されているケースをたまに見るため、その違いについて改めて記事として書こうと思いました。そのため、非常に短い記事になります。 論理和とNull合体演算子の違い 一言で言うと 論理和は左の値がfalsyの時、次の右の処理がよばれる Null合体演算子は左の値が null または undefinde の時、次の右の処理がよばれる です。 falsyな値とは以下です。(公式から引用) false falseキーワード 0 数値ゼロ -0 数値マイナスゼロ 0n BigInt で、論理値として使用された場合、 Number と同じ規則に従う "" 空文字列の値 null 何も値が存在しないこと undefinde プリミティブ値 NaN 非数 つまり 論理和 を使用すると 上記テーブルの値以外であれば短絡させます。 let toyA; //undefinde const toyB = toyA || "doll" // toyB ... "doll" const count = 0 || 1 // count ... 1 const noNameMan = "" const friendName = noNameMan || "Sakuragi" // friendName ... "Sakuragi" これに対し Null合体演算子 は null と undefind のみ短絡させます。 let toyA; //undefinde const toyB = toyA ?? "doll" // toyB ... "doll" const count = 0 ?? 1 // count ... 0 const noNameMan = "" const friendName = noNameMan ?? "Sakuragi" // friendName ... "" この違いを理解して使用しないと思わぬバグを招いてしまうため注意です。 終わりに 最後まで読んでいただきありがとうございました。 Null 合体(??)

こんな感じ はじめに Nuxtで作ったwebアプリで、スマホアプリのsplash screen（?のような起動時に表示される画像）を表示させたいと思いました。 よくあるローディング画面とは違って、必ず指定した秒数だけ表示させるようにしたかったので色々と調べた結果をここに記録します！！ splash screen用の画面 最初の画面が表示される前に、ふんわりとロゴが表示されます。 components/LoadingScreen.vue <template> <div :class="{ loader: true, fadeout: !isLoading }"> <div class="page-container"> <img class="splash" src="@/assets/images/Logo.png" /> </div> </div> </template> <script lang="ts"> import Vue from "vue"; export default Vue.extend({ name: "LoadingScreen", props: ["isLoading"], }); </script> <style scoped> .page-container { max-width: 500px; width: 100%; margin: auto; } .loader { background-color: #ffffff; bottom: 0; color: white; display: flex; align-items: center; text-align: center; left: 0; overflow: hidden; position: fixed; right: 0; top: 0; } .splash { width: 150px; } .fadeout { animation: fadeout 2s forwards; } @keyframes fadeout { to { opacity: 0; visibility: hidden; } } </style> LoadingScreen.vueを一番最初に表示させる Nuxtで一番上の階層？にあるdefault.vueを編集。 これでindex.vueが読み込まれる前にsplash screenっぽい感じで、ロゴ画像をふんわりと表示させることに成功しました！ layouts/default.vue <template> <div> <LoadingScreen :isLoading="isLoading" /> <transition name="fade" v-if="!isLoading"> <Nuxt /> </transition> </div> </template> <script> const LoadingScreen = () => import("../components/LoadingScreen.vue"); export default { components: { LoadingScreen, }, data() { return { isLoading: true, }; }, mounted() { setTimeout(() => { this.isLoading = false; }, 1000); }, }; </script> <style scoped> .fade-enter-active, .fade-leave-active { transition: opacity 1s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </style> 参考

普段はPythonを使っているが、JS/TSを雰囲気で触ってみたら思わぬ罠にハマったので残しておく ハマった罠 Pythonでlistの要素存在を確認する時、以下のように書く 「そもそもリスト内包表記([i for i in range(3)])使えよ」とか細かい点は一旦無視する numbers = [1, 2, 3] print(1 in numbers) JS/TSでも同じノリで描いてみたら const array = [1, 2, 3] console.log(1 in array) // True console.log(2 in array) // True console.log(3 in array) // False Why!? JS/TS People!!! 原因 ちゃんとMozillaの基本的な使い方のとこに書いてあった // Arrays let trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; (中略) 'bay' in trees // false を返す (インデックスの指す値ではなく、インデックスの数字を指定しなければならない) インデックスは0,1,2になるため3だけFalseになるわけね 解決策 includesを使う const array = [1, 2, 3] console.log(array.includes(1)) // True console.log(array.includes(2)) // True console.log(array.includes(3)) // True

useMemoとは 関数による計算結果をメモ化するためのフックです。 useMemo()を利用する場合はimportでuseMemoを読み込みます。 import React, { useMemo } from 'react'; 基本構文は下記の通りになります。 useMemo(() => 値を計算する関数の呼び出し,[値の計算に必要な要素の配列]); useMemoとuseCallbackの違い useCallbackは関数をメモ化しますが、useMemoは関数の結果をメモ化します。 App.js import React, { useState, useMemo } from 'react'; import { Counter } from './Counter'; const initialCount = 0; const square = (params) => { const data = [...Array(100).keys()]; data.forEach(() => { console.log( `B+1のボタンがクリック、square関数実行中、 ループ処理を${data.length}回実行中…` ); }); return params * params; } export default function App() { const [countA, setCountA] = useState(initialCount); const [countB, setCountB] = useState(initialCount); const countResultA = () => { setCountA((prevCountA) => prevCountA + 1); console.log('Aボタンがクリックされました'); } const countResultB = () => { setCountB((prevCountB) => prevCountB + 1); console.log('Bボタンがクリックされました'); } const squareArea = useMemo(() => square(countB), [countB]); return ( <> <Counter text='Aボタン' count={countA} countIncrement={countResultA} /> <Counter text='Bボタン' count={countB} countIncrement={countResultB} /> <p>計算結果：{ squareArea }</p> </> ); }; Counter.js import React from 'react'; export const Counter = React.memo(({ text, count, countIncrement, countDecrement, countReset, initialCount }) => { return ( <> <p>現在のカウント数：{count}</p> <button onClick={countIncrement}>increment</button> {/* <button onClick={countDecrement}>decrement</button> <button onClick={countReset}>reset</button> */} </> ); }); 下記の画像は、AとBのボタンをそれぞれ2回ずつクリックした時の結果です。 Aをクリックした時はcountResultAが実行され、コンポーネントが再レンダリングされたタイミングではsquare関数は実行されません。 Bをクリックした時のみsquare関数が実行されます。 useMemo()を利用しなかった場合どうなるか確認してみます。 Aのボタンがクリックされたタイミングでも計算結果の値が変わらないのにsquare関数が実行されています。 useMemo()を利用することでパフォーマンスのチューニングができることが理解できたかと思います。 前回までのReact.memoやuseCallbackも含めて機能と使い所を覚えておきましょう。 React.memoの記事 useCallbackの記事

はじめに JavaScriptでaddEventListener()を使った処理に詰まった。そこで、使い方のメモを自分用に残そうと思う。同じようなことに詰まった方の参考になれば嬉しい。 やりたいこと JavaScriptでサイトに挿入した動画が何割が再生されたかをリアルタイムで計算して出力したい。apiで動画が再生された、止まったなどの状態と長さ、現在の再生位置は取得できる。長さ、現在の再生位置から再生された割合を計算する。 実現方法 addEventListenerとsetIntervalを用いた。apiで動画の状態を取得し、setIntervalを始め、計算した割合を出力する。動画の再生が完了したら処理を停止する。 詰まったこと addEventListner is not function エラーが出てしまっていた。下記の2つに書いた初歩的なミスが原因であった。jsに慣れていない人は同じように詰まる人がいるかも？ ①変数のスコープ 対象要素.addEventListener(イベントの種類, 関数)と書くのだが、対象要素がスコープ外にあってエラーが出ていた。 ②文法がミスっていた。 関数の書き方や閉じかっこが足りないなどしょうもないミスがちらほらありました。先ずは初歩的なミスをしていないかを確認、エディタの機能でくだらない文法エラーはしないようにしたい・・・ 今後使うときにコピペで使うようにサンプルを貼っておく。 document.addEventListener('DOMContentLoaded', function() { //var title = document.getElementById("title"); ← varは古いし、letのほうがよさそう let title = document.getElementById("title"); title.textContent = "はじめまして"; }); ひとこと 慣れていないapiを使っている時はそちらに気が向いており、初歩的なミスに気が付かないことがあった。自分がよくやるミスを覚えておくと気が付きやすいかもと思った。 参考文献 田中 賢一郎. ゲームで学ぶJavaScript入門 HTML5&CSSも身につく！. 株式会社インプレス. Kindle 版.

はじめに 現在双方向通信などの勉強をしておりgRPCを主に調査していたのですが、お客様先の上司にSignalRについて教えてもらったので公式チュートリアルをやってみました！ SignalRについては名前はよく聞いていたのですが、なかなか手を付ける機会がなく...しかしながらこの機会にちゃんと学習していこうと思います！ 記事の内容は以下の公式チュートリアルに沿って学習した備忘録的な感じになっているので詳細はそちらを確認したほうが良さそうです。 Webアプリプロジェクトの作成 公式チュートリアルに沿って新しいプロジェクトクトの作成 > ASP.NET Core Webアプリを選択し、新規プロジェクトを作成します。 SignalRクライアントライブラリを追加 デフォルトではJavaScript用のSignalRライブラリは入っていないのでunpkgからインストールします。 SignalRプロジェクトを右クリック > 追加 > クライアント側のライブラリをクリックします。 以下のようにダイアログが表示されるのでプロバイダーをunpkg、ライブラリを@microsoft/signalr@latestとし、特定のファイルの選択を選択してsignalr.jsとsignalr.min.jsにチェックを入れます。 以下のように設定できたらインストールをクリックします。 SignalRハブの作成 Hubはクライアント側とサーバ側を繋げるパイプラインの役割を担います。 接続しているクライアント情報、グループ情報等を管理するHubクラスを継承し、以下のようにコードを作成します。 Chathub.cs using Microsoft.AspNetCore.SignalR; using System.Threading.Tasks; namespace WebApplication1.Hubs { public class ChatHub : Hub { public async Task SendMessage(string user, string message) { //ハブに接続しているユーザ全てにメッセージを送信する。 await Clients.All.SendAsync("ReceiveMessage", user, message); } } } SignalRサーバの構成 Startupクラスへ以下のようにそれぞれ追加します。 startup.cs public void ConfigureServices(IServiceCollection services) { services.AddRazorPages(); services.AddSignalR(); //<--追加 } public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { //省略 app.UseEndpoints(endpoints => { endpoints.MapRazorPages(); //Hubへのエンドポイント endpoints.MapHub<ChatHub>("/chatHub"); //<--追加 }); } SignalRクライアントコードの追加 Index.cshtml @page <div class="container"> <div class="row">&nbsp;</div> <div class="row"> <div class="col-2">User</div> <div class="col-4"><input type="text" id="userInput" /></div> </div> <div class="row"> <div class="col-2">Message</div> <div class="col-4"><input type="text" id="messageInput" /></div> </div> <div class="row">&nbsp;</div> <div class="row"> <div class="col-6"> <input type="button" id="sendButton" value="Send Message" /> </div> </div> </div> <div class="row"> <div class="col-12"> <hr /> </div> </div> <div class="row"> <div class="col-6"> <ul id="messagesList"></ul> </div> </div> <script src="~/js/signalr/dist/browser/signalr.js"></script> <script src="~/js/chat.js"></script> chat.js "use strict"; var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build(); // 上記のコネクションが成立するまでは送信ボタンを押せないようにします。 document.getElementById("sendButton").disabled = true; // Hub側から"ReceiveMessage"が呼び出された場合にこちらで登録した操作が動きます。 connection.on("ReceiveMessage", function (user, message) { var li = document.createElement("li"); document.getElementById("messagesList").appendChild(li); li.textContent = `${user} says ${message}`; }); connection.start().then(function () { document.getElementById("sendButton").disabled = false; }).catch(function (err) { return console.error(err.toString()); }); document.getElementById("sendButton").addEventListener("click", function (event) { var user = document.getElementById("userInput").value; var message = document.getElementById("messageInput").value; // Hub側のSendMessageメソッドを呼び出します。userとmessageはSendMessageメソッドの引数になります。 connection.invoke("SendMessage", user, message).catch(function (err) { return console.error(err.toString()); }); event.preventDefault(); }); デバッグ実行 実際に実行すると、以下のようにチャットアプリのような動きを確認することができます。 異なるタブから実行しても片方のタブの画面でチャット結果が表示されます。 おわりに こんな簡単にブラウザ間での双方向ストリーミングが出来るなんて！！とても良いですね！ 双方向ストリーミングといえば最近はgRPCをよく聞きますが、そちらの勉強と並行してこちらも今後勉強していこうと思います！

解決したい問題点 2021/10/09現在、OpenProcessing上でInput系のコントローラー(createSlider()とかcreateButton())を使うと盛大に位置がずれます。 例えば、createSlider()のリファレンスコードをみると と表示されるものが、OpenProcessing上では下記のように表示されます。 いつからかこうなってしまったので、たぶん一時的な不具合だと思うのですが、結構長い間修正されていないので、ワークアラウンドを検討しました。 解決策 結論はこれ。 let slider; function setup() { slider = createSlider(0, 255, 100); slider.style('width', '80px'); } function draw() { let controllerOffsetX = 10; let controllerOffsetY = 10; // URLからOpenProcessingサイトであると判明したら、ワークアラウンド発動 const url = getURL(); if( url.includes('openprocessing') ){ // canvas位置を特定して、そのX/Y座標をOffsetへ反映させる const canvasRect = document.querySelector('canvas').getBoundingClientRect(); controllerOffsetX += canvasRect.left; controllerOffsetY += canvasRect.top; } slider.position(controllerOffsetX, controllerOffsetY); const val = slider.value(); background(val); } ポイント OpenProcessingのサイトかどうか判定しているので、他のPlatform上への影響もない。はず。 ほかのスケッチでの効果確認 問題なさそう

event.record.フィールドコード.disabled = true; kintone フィールド 非活性化で検索したら一発でひっかからなくて悔しかったです。（所感） 参考記事 kintoneで実施する入力制限、フィールドの無効化とその活用 フィールドの入力不可をラジオボタンとチェックボックスで完全制御！ こちらはタイトル無しのリンクになります。

はじめに Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。 前回の記事 目的 変数についての理解を深める 本題 1.暗黙的な型変換 暗黙的な型変換とは変数が呼ばれた状況によって変数の型が自動的に変換されることです。 例："1" => 1（文字列から数値に変換） javascriptはJavaのようにデータ型の宣言をしない。 →動的型付け言語 上記をVSコードで確認していく // データ型を調べる関数を用意 function printTypeAndValue(val){ // typeofメソッド（？）を入れるとデータ型がわかる console.log(typeof val, val) } // 変数を定義 let a = 0; // number 0と出力される printTypeAndValue(a); // 文字列　＋　数値 let b = "1" + a; // この場合Stringの型で出力 // データ型が違う場合はどちらかのデータ型が出力される printTypeAndValue(b); // 数値　ー　文字列 let c = 15 - b; // -は数値の計算にしか使われない！なので、15-10で5が出力 printTypeAndValue(c); // nullとは参照を保持しない＝空ということ let d = c - null // nullが暗黙的に0に変換される 5がそのまま保持 printTypeAndValue(d); // tureは数値の計算で使用された場合は０扱いになる let e = d - true // 数値の４が出力 printTypeAndValue(e); // 明示的に型変換をする // 文字列を数値へ // parseInt（文字列）で数値に変換 let g = parseInt("1") + a; // number 1 と出力される printTypeAndValue(g); Udemyのサーバー落ちたので、 今日はここまで！ 参考にさせて頂いた記事 【JS】ガチで学びたい人のためのJavaScriptメカニズム

上のサイトの補足。 結論は、クラス構文ではイベントメソッドはアロー関数を使え。 クラス構文でのthisのbind class Game { constructor() { const btn = $('#btn'); btn.on({ click: (function(e) { //通常ここの this は $('#btn') になってまうのでthis.start()はundefinedになるが、 this.start(); //click:(function(e){}.bind(this)),で // 上の this が class Game になるので、this.start()が機能する。 }.bind(this)), }); } start() { this.runTimer(); } runTimer() { // console.log('＼(^o^)／'); this.timeoutId = setTimeout((function() { //通常ここのthisはsetTimeoutメソッドになってまう。 this.runTimer(); //.bind(this)で 上の this が class Game になるので、this.runTimer()が機能する。 }).bind(this), 10); } } /*------------------------------------------------------*/ /* クラスのときは、アロー関数を使え。 */ /* アロー関数自身は this を持たないため　　　　 */ /* アロー関数の特徴 */ /* this を束縛しない（アロー関数自身は this を持たない） */ /* コンストラクタとして使うことはできない（new できない） */ /* arguments を参照できない */ /*------------------------------------------------------*/ class Game { constructor() { const btn = $('#btn'); btn.on({ //()=>{ ここのthisはclass Game } になる。 click: ((e)=> { //eは$('#btn')のイベントが格納されている。 //console.log(e); this.start(); }), }); } start() { this.runTimer(); } runTimer() { // console.log('＼(^o^)／'); this.timeoutId = setTimeout(()=> { //ここのthisはclass Gameのため this.runTimer(); }, 10); } } /*------------------------------------------*/ /* thisをbindしたくない時は */ /*------------------------------------------*/ class Game { constructor() { //gameSelfとかは無理 const self = this; const btn = $('#btn'); btn.on({ click: (function() { //this.start()ではなく self.start(self); }), }); } start(self) { this.runTimer(self); } //コンストラクタのselfは引数で持ってくる必要がある。 runTimer(self) { this.timeoutId = setTimeout(function() { //selfは class Game self.runTimer(self); }, 10); } }