JavaScript 内で JavaScript を呼んでロード後に then する

コード

単品

new Promise(resolve => {
  let e = document.createElement(`script`)
  e.src = // JavaScript URL
  document.head.appendChild(e)
  e.onload = () => {
    resolve()
  }
})
.then(() => {
  // 処理
})

複数

let scriptFiles = {
  // JavaScript URL
}
let promiseArray = []
for (let i of scriptFiles) {
  promiseArray
  .push(
    new Promise(resolve => {
      let e = document.createElement(`script`)
      e.src = i
      document.head.appendChild(e)
      e.onload = () => {
        resolve()
      }
    })
  )
}
Promise.all(promiseArray)
.then(() => {
  // 処理
})

経緯

ライブラリ的に複数の JavaScript ファイルを読み込んで処理しようとしたのですが、どうもライブラリ的なやつのロード終了より先に処理が始まって不具合が生じるようでした。これの解決のために取った策が今回の記事です。

読み込むファイル側で Export しているならまた書き方が変わるし、もしかしたら不具合は起きなかったかもしれません。でも今回はそうではなかったので。

読み込むファイルを fetch() してどうにかならないかと最初は思ったのですが、読み込んだからといって、その生テキストをどうにもできず。 HTML の script タグの中にテキストを流し込んでやれば……？　なんか泥くさいのでやめました。

それでも結局は HTML の script タグを挿入という泥くさいっぽいやり方になりました。まぁ動いたからいいや。

JavaScript でイベントを then する

コード

単品

new Promise(resolve => {
  window.onload = e => {
    resolve(e)
  }
})
.then(e => {
  // 処理
})

複数

let promiseArray = []
for (let i of array) {
  promiseArray
  .push(
    new Promise(resolve => {
      // 処理
      someone.onload = e => {
        resolve(e)
      }
    })
  )
}
Promise.all(promiseArray)
.then(eArray => {
  // 処理
})

経緯

他の Promise と合わせてどちらも終了した時点で次に移りたいなーという欲求があり、どうにかならんかな、と考えました。

JavaScriptでイベントが取得できない

イベントが取得できない、発火しない、と困っていました。下のようなコードです。

let element = null
new Promise(resolve => {
  // 処理
})
.then(rly => {
  element.innerHTML = rly
})
element.onclick = () => {
  // 処理
}

これだと onclick が取得できません。タイミングの問題で element.innerHTML = rly する前に element.onclick が発行されます。これでは null にイベントリスナーが紐付いてしまいます。なので下のようにしました。

let element = null
new Promise(resolve => {
  // 処理
})
.then(rly => {
  element.innerHTML = rly
  element.onclick = () => {
    // 処理
  }
})

処理とロードの終了をトリガーにする

ある処理の終了と、諸要素のロードの両方が終了したタイミングで次の処理に移る書き方です。

let promise0 = new Promise(resolve => {
  // 処理
})
let promise1 = new Promise(resolve => {
  window.onload = () => {
    resolve()
  }
})
Promise.all([
  promise0,
  promise1
])
.then(rly => {
  // 処理
})

Unicode Property EscapesのHanは記号を含む

Unicode Property Escapesの「Han」は次の記号を含みます（僕とChatGPT調べ）。

〜、。〈〉《》「」『』【】〔〕〖〗〘〙〃〆・〓

なので本当に感じだけにマッチさせるには次のように書くといいと思います。

/(?![〜、。〈〉《》「」『』【】〔〕〖〗〘〙〃〆・〓])\p{scx=Han}/u