即時関数でconstにあらゆる値を格納できるしthenメソッドチェーンも使えることにJavaScript初心者が気付いたのでサンプルを作ってみた

Q.そもそもどんな書き方なの？

A.例えばこんな感じで書けます。

sample.js

const a = (() => {
  function1(handle1)
    .then(x => functionSuccessful(x))
    .catch(() => {
      function2(handle2)
        .then(y => functionSuccessful(y))
        .catch(e => functionError(e))
    })
})();

即時関数の中なのでもちろんtry...catch構文も使えます。

sample.js

const a = (() => {
    try { 
        return x;
    } catch {
        return y;
    }
})();

try...catch構文のほうは見たまんまなので、まぁそのままの動きしかしないのですが、上の方は少し悪さができそうです。

サンプル:リアカメラとフロントカメラを存在の有無によって切り替えるコード

JavaScriptでデバイスのカメラを起動するとき、まずリアカメラの有無を確認して、起動に失敗したときデバイスのデフォルトのカメラを起動するコードです。QRコード読み取りなどに使えますね。

sample.js

const video = document.getElementById('video');
const media = (() => {
    navigator.mediaDevices.getUserMedia({
        video: {facingMode: {exact:'environment'}}})
    .then(camerastream => cameraPlay(camerastream))
    .catch(() => {
        navigator.mediaDevices.getUserMedia({
            video: true})
            .then(camerastream => cameraPlay(camerastream))
            .catch(() => {
                alert('media device is not found.')
        })();
    })();
})();

function cameraPlay(camerastream) {
    video.srcObject = camerastream;
    video.onloadeddata = () => {
        video.play();
    };
}

このように、まずは代入できるかわからない値を入れてみて、ダメだったら次の代入できるかわからない値を入れてみて、最終的にデフォルトの処理を行うという流れを行うときに便利だと思います。