• 初めてのThree.js, HTML5による物理シミュレーション, クラウドできでるHTMLハイブリッドアプリ開発を読んだ。
• WebGLはOpenGL ES 2.0から開発が始まったので、固定パイプライン機能は無い。やっぱり面倒だからThree.jsを使おう。
• Three.jsはSceneに、Camera, Meshを追加すればいい。すべてのメッシュは、Sceneの子ノードとして管理される。
• requestAnimationFrameを使えばいいブラウザがいいタイミングで引数の関数を呼び出してくれるらしい。そのため、レンダリング関数の中でこれを呼び出すことでアニメーションを書けるだろう。でも、そこまでせずとも値を更新するイベントリスナで少しずつ呼び出せば十分な気もする。
• 標準でPointerLookControlsとかOrbitControlsとかが存在する。使わないほうがシンプルになりそうだけど。
• ProjectorとRaycasterをつかってクリックしたメッシュを触る事もできるらしい。
• UIについて。ラジオボタンとかはhtml内に呼び出す関数を書くのが結局一番シンプルなのかもしれない。
• 古い話だから怪しいが、-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; -webkit-user-select: none; -webkit-overflow-scrolling: touch:を使うとよりネイティブアプリっぽくなるらしい。
• JavaScriptのNavigatorオブジェクトはネスケの名残でブラウザを表している。
• Cordovaプラグインでマイクを触って、その際にパーミッションを獲ればいいのでは！？
• AngularJS？使う価値はあるか。
• CSSコンパイラというものがあるらしい。
• XSS攻撃受けるな。名前入力のところとか。
• JSの関数は引数がプリミティブなら値渡し、オブジェクトなら参照渡しである。
• 結局イベントリスナーの中に値を渡すには外側のスコープの変数やオブジェクトを通すことになる。それ以外にわかりやすい方法は無い。
• bind()?ようわからん
• でもイベントリスナ内で新しいオブジェクトを生成してしまう場合がある。その場合の対処をchatGPTに教えてもらった。
• Sourceというのは、ボタンをクリックしたイベントリスナ中に生成したaudioBufferSourceを２回めにクリックしたタイミングで消す方法が見つからなくて困ったから。
• 結局外側のコンテキスト内で宣言したからいいんだけど。window.variableとかなにかわかりやすくする方法を考えないとやばいな。
• これはきっと複数のソースを作るときに役立つだろう。

const sources = []; // 生成したオブジェクトを格納する配列

element.addEventListener('yourEvent', () => {
  const source = new YourObject(); // 新しいオブジェクトを作成
  sources.push(source); // 配列にオブジェクトを追加

  // イベントが起きたときの処理
});

// あとで sources 配列を管理、アクセス、削除できる

無理してグローバル変数をなくそうとすると関数を返す関数を書くはめになる。

function outerFunction() {
  let externalVariable = 42;

  function eventHandler() {
    console.log(externalVariable);
    // イベントが発生したときの処理
  }

  return eventHandler;
}

const clickHandler = outerFunction();

element.addEventListener('click', clickHandler);

あるいはclassをつかうとわかりやすくなるが、通常の関数定義ではthisの指すものがその時によって変わるらしい？のでbindを使う必要がある。 あるいはvar self = this; としてselfをつかってアクセスするか。（それって関数のときだけで、クラスなら問題ないんじゃないのか？）

class MyObject {
  constructor() {
    this.externalVariable = 42;
  }

  eventHandler() {
    console.log(this.externalVariable);
    // イベントが発生したときの処理
  }
}

const myInstance = new MyObject();

element.addEventListener('click', myInstance.eventHandler.bind(myInstance));

class MyObject {
  constructor() {
    this.externalVariable = 42;
    this.eventHandler = () => {
      console.log(this.externalVariable);
      // イベントが発生したときの処理
    };
  }
}

const myInstance = new MyObject();

element.addEventListener('click', myInstance.eventHandler);