結論: startOf('days')で時間をまるめる

const dayOne = moment('2020-01-01 10:00:00').startOf('days');
const dayTwo = moment('2020-01-02 09:00:00').startOf('days');
console.log('dayOne', dayOne.format());
console.log('dayTwo', dayTwo.format());
console.log('diff', dayTwo.diff(dayOne, 'days'));

はじめに

moment.jsには指定した二つの日時を比較し、出力するdiffという機能があります。

この機能は、2つの日付の差分を時間単位まで観測し、デフォルトでは秒数で出力されます。
diffは第二引数で測定する時間単位を指定することが可能です。しかしその時、内部では秒数を任意の単位に再計算した値を返しています。
また、その時小数点以下は切り捨てられてしまいます

const dayOne = moment('2020-01-01 10:00:00');
const dayTwo = moment('2020-01-02 11:00:00');
const dayThree = moment('2020-01-02 09:00:00');
const dayFour = moment('2020-01-02 10:00:00');

console.log("dayTwo", dayTwo.diff(dayOne, 'days')); // dayTwoはdayOneの時間を過ぎているので1
console.log("dayTwo asFloat", dayTwo.diff(dayOne, 'days', true));
console.log("dayThree", dayThree.diff(dayOne, 'days')); // dayThreeはdayOneの時間を過ぎてないので0
console.log("dayThree asFloat", dayThree.diff(dayOne, 'days', true));
console.log("dayFour", dayFour.diff(dayOne, 'days')); // dayFourはdayOneと同じ時間なので1
console.log("dayFour asFloat", dayFour.diff(dayOne, 'days', true));

(tips: 第三引数にtrueを渡すことで値から小数点を切り捨てず返されます)

以下はmomentjsでdiffを行なっている箇所です。
GitHub - moment.js/moment/src/lib/moment/diff.js

---

厳密な日付を計算するのであればこれが最良ですが、時間を考えず単純に日にちが変わったかどうかを計算したい、といった場合も多いと思います。
startOfを使えば、そのような機能を簡単に実装することができます。

startOfとは

momentの機能の一つで、指定した時間単位の始まりの値を出力します。

startOfでdayを指定すると、日のはじまり0:00:00に時刻を変換して出力されます。

参考: moment.js - Start of Time

ではstartOfを用いでdiffを使ってみます。

例

const dayOne = moment('2020-01-01 10:00:00').startOf('days');
const dayTwo = moment('2020-01-02 09:00:00').startOf('days');
console.log('dayOne', dayOne.format());
console.log('dayTwo', dayTwo.format());
console.log('diff', dayTwo.diff(dayOne, 'days'));

diffは単位以下の値が同値の場合は1になるので、これで日にちが変わったかどうか計算することができます。

アンチパターン、Math.roundを使う

小数点以下が切り捨てられるなら、Math.roundで繰り上げるようにすればよい、という案もあります。
しかし、Math.roundは意図せぬ値まで繰り上げてしまいます。

1. 第三引数にtrueを渡し、Math.roundを使う

const dayOne = moment('2020-01-01 01:00:00');
const dayTw0 = moment('2020-01-02 00:00:00');
const dayThree = moment('2020-01-01 17:00:00');
console.log(Math.round(dayTwo.diff(dayOne, 'days', true)), dayTwo.diff(dayOne, 'days', true));
console.log(Math.round(dayThree.diff(dayOne, 'days', true)), dayThree.diff(dayOne, 'days', true));

この場合、ある程度時間がたってしまった値だと、日付が同じでも繰り上げてしまいますので使用することができません。
なので、startOfが現状最良の手段だと思われます。

---

いかがでしたでしょうか？時間単位の日はあくまで例に使っただけなので、その他の単位でも使用することができると思います。momentはドキュメントが丁寧でわかりやすく、自動翻訳でもそれなりに見ることができるので、皆さんもよかったらご一読ください。

moment.js - Docs

結論: startOf('days')で時間をまるめる

const dayOne = moment('2020-01-01 10:00:00').startOf('days');
const dayTwo = moment('2020-01-02 09:00:00').startOf('days');
console.log('dayOne', dayOne.format());
console.log('dayTwo', dayTwo.format());
console.log('diff', dayTwo.diff(dayOne, 'days'));

はじめに

moment.jsには指定した二つの日時を比較し、出力するdiffという機能があります。

この機能は、2つの日付の差分を時間単位まで観測し、デフォルトでは秒数で出力されます。
diffは第二引数で測定する時間単位を指定することが可能です。しかしその時、内部では秒数を任意の単位に再計算した値を返しています。
また、その時小数点以下は切り捨てられてしまいます

const dayOne = moment('2020-01-01 10:00:00');
const dayTwo = moment('2020-01-02 11:00:00');
const dayThree = moment('2020-01-02 09:00:00');
const dayFour = moment('2020-01-02 10:00:00');

console.log("dayTwo", dayTwo.diff(dayOne, 'days')); // dayTwoはdayOneの時間を過ぎているので1
console.log("dayTwo asFloat", dayTwo.diff(dayOne, 'days', true));
console.log("dayThree", dayThree.diff(dayOne, 'days')); // dayThreeはdayOneの時間を過ぎてないので0
console.log("dayThree asFloat", dayThree.diff(dayOne, 'days', true));
console.log("dayFour", dayFour.diff(dayOne, 'days')); // dayFourはdayOneと同じ時間なので1
console.log("dayFour asFloat", dayFour.diff(dayOne, 'days', true));

(tips: 第三引数にtrueを渡すことで値から小数点を切り捨てず返されます)

以下はmomentjsでdiffを行なっている箇所です。
GitHub - moment.js/moment/src/lib/moment/diff.js

---

厳密な日付を計算するのであればこれが最良ですが、時間を考えず単純に日にちが変わったかどうかを計算したい、といった場合も多いと思います。
startOfを使えば、そのような機能を簡単に実装することができます。

startOfとは

momentの機能の一つで、指定した時間単位の始まりの値を出力します。

startOfでdayを指定すると、日のはじまり0:00:00に時刻を変換して出力されます。

参考: moment.js - Start of Time

ではstartOfを用いでdiffを使ってみます。

例

const dayOne = moment('2020-01-01 10:00:00').startOf('days');
const dayTwo = moment('2020-01-02 09:00:00').startOf('days');
console.log('dayOne', dayOne.format());
console.log('dayTwo', dayTwo.format());
console.log('diff', dayTwo.diff(dayOne, 'days'));

diffは単位以下の値が同値の場合は1になるので、これで日にちが変わったかどうか計算することができます。

アンチパターン、Math.roundを使う

小数点以下が切り捨てられるなら、Math.roundで繰り上げるようにすればよい、という案もあります。
しかし、Math.roundは意図せぬ値まで繰り上げてしまいます。

1. 第三引数にtrueを渡し、Math.roundを使う

const dayOne = moment('2020-01-01 01:00:00');
const dayTw0 = moment('2020-01-02 00:00:00');
const dayThree = moment('2020-01-01 17:00:00');
console.log(Math.round(dayTwo.diff(dayOne, 'days', true)), dayTwo.diff(dayOne, 'days', true));
console.log(Math.round(dayThree.diff(dayOne, 'days', true)), dayThree.diff(dayOne, 'days', true));

この場合、ある程度時間がたってしまった値だと、日付が同じでも繰り上げてしまいますので使用することができません。
なので、startOfが現状最良の手段だと思われます。

---

いかがでしたでしょうか？時間単位の日はあくまで例に使っただけなので、その他の単位でも使用することができると思います。momentはドキュメントが丁寧でわかりやすく、自動翻訳でもそれなりに見ることができるので、皆さんもよかったらご一読ください。

moment.js - Docs

元記事

高階関数を書いたら、中級者になれた気がした。

批判記事

高階関数を書いたら、中級者になれた気がした。を批判したら上級者になれた気がした。

休日ワイ

ワイ「おっ」
ワイ「ワイの記事に対して批判記事を書いてくださっている方がおるやんけ」
ワイ「ありがたいこっちゃ」
ワイ「いっちょ学ばせてもらおか！」

音読完了

ワイ「なるほどな〜」
ワイ「大変勉強になったわ」
ワイ「必読の記事やな！」

しかし気になることが

ワイ「ん？」
ワイ「なんやこのコード？」

const mapArray=callback=>
    array=>{
        for(let i=0;i<array.length;i++)
            array[i]=callback(array[i]);
        return array;
    };

const doubleArray=mapArray(x=>x*2);

const tenMinusArray=mapArray(x=>x-10);

console.log(doubleArray([1,2,3,4]))
console.log(tenMinusArray([10,20,30,40]))

ワイ「JavaScriptの配列には元々mapメソッドがあるから」

console.log([1,2,3,4].map(x => x * 2))
console.log([10,20,30,40].map(x => x - 10))

ワイ「↑この2行だけで済むのに」
ワイ「なんで16行もコード書いてんねやろ？」
ワイ「mapArrayもdoubleArrayもtenMinusArrayも無駄ですやん」
ワイ「もしもワイがこんなコードを書いたなら・・・」

ワイ「うわ！10行以上も無駄なコード書いてもうた！」
ワイ「しかも高階関数の記事なのに、mapという高階関数を再発明してもうた！」

ワイ「って後悔してしまうなぁ・・・」

もしかして

ワイ「あっ！？」
ワイ「分かったで！」
ワイ「書いたことを後悔するような関数をわざと書いて」
ワイ「後悔関数と高階関数を掛けていらっしゃるんや！」
ワイ「いやー、ギャグセンスが高過ぎてかなわんわ！」
ワイ「ん、なになに？」
ワイ「このコードの説明が書いてあるで」

カリー化と部分適用を使ってさらに綺麗に美しく書くことができる。

ワイ「確かに綺麗や」
ワイ「美しいくらい見事なボケやわ！」
ワイ「全体的に学びも多いし、素晴らしい記事やし」
ワイ「さすが上級者や！」

〜おしまい〜

はじめに

Promiseって...難しくないですか？？？
3ヶ月くらい前の私は、Promiseをほとんど理解できてないのにasync/awaitとか使っちゃってたし、様々な記事を読み漁ってもなかなか理解できず、Promiseの正体を掴むのに時間がかかってしまいました。

そんな3ヶ月くらい前の自分にも伝わるように、できる限り丁寧にPromiseを説明していこうと思います。

前提

本記事では、Promise以外のES6の書き方に関しては触れておりません。
アロー関数やテンプレート文字列などを例文で用いているため、わからない方がいましたら下記記事などを参考にしていただけると幸いです。

ES2015(ES6) 入門

Promiseとは

JavaScriptは処理を待てない！

まずはじめに、下記コードを実行してみると、どのような結果になるでしょうか。

console.log("1番目");

// 1秒後に実行する処理
setTimeout(() => {
  console.log("2番目(1秒後に実行)");
}, 1000);

console.log("3番目");

1番目、2番目、3番目...という順番で実行されることが理想的ではありますね。

しかし、実際には下記のような順序で実行されてしまいます。

1番目
3番目
2番目(1秒後に実行)

JavaScriptは非同期言語であるため、一つ前の実行に時間がかかった場合、実行完了をまたずに次の処理が行われてしまいます。

Promiseは、処理の順序に「お約束」を。

Promiseを日本語に翻訳すると「約束」です。
なので、私はPromiseのことを、処理の順序に「お約束」を取り付けることができるもの、処理を待機することや、その結果に応じて次の処理をすることお約束するものだと思っています。

先ほどの例で詳しく見ていきましょう。
(コードの中身は、後ほど説明していきますので、わからなくて大丈夫です！)

console.log("1番目");

// お約束を取り付けたい処理にPromise
new Promise((resolve) => {
  //1秒後に実行する処理
  setTimeout(() => {
    console.log("2番目(1秒後に実行)");
    //無事処理が終わったことを伝える
    resolve();
  }, 1000);
}).then(() => {
  // 処理が無事終わったことを受けとって実行される処理
  console.log("3番目");
});

すると、実行結果は下記のようになります。

1番目
2番目(1秒後に実行)
3番目

Promiseを用いることで、理想の処理を実行することができました。

それでは、より詳しくPromiseをみていきましょう。

Promiseには3つの状態がある

Promiseには、PromiseStatusというstatusがあり、3つのstatusがあります。

• pending: 未解決 (処理が終わるのを待っている状態)
• resolved: 解決済み (処理が終わり、無事成功した状態)
• rejected: 拒否 (処理が失敗に終わってしまった状態)

new Promise()で作られたPromiseオブジェクトは、pendeingというPromiseStatusで作られます。
処理が成功した時に、PromiseStatusはresolvedに変わり,thenに書かれた処理が実行されます。
処理が失敗した時は、PromiseStatusがrejectedに変わり、catchに書かれた処理が実行されます。

Promiseの大まかな処理の流れはわかりましたでしょうか。
それでは実際に書いてみましょう...！

Promiseの書き方

Promiseインスタンスの作成

sample1.js

const promise = new Promise((resolve, reject) => {});

Promiseの引数には関数を渡し、その関数の第一引数にresolveを設定し、第二引数にrejectを任意で設定します。
(resolveもrejectも関数です。)

ちなみに、上記コードにて定義したpromiseをconsole.logすると下記のようなPromiseオブジェクトが返ってきます。

作りたてのPromiseオブジェクトなので、PromiseStatusは、pendeingですね。

resolveさせよう

sample1のコードをresolveさせてみましょう。

// rejectは今回使わないため、引数から削除
const promise = new Promise((resolve) => {
  resolve();
}).then(() => {
  console.log("resolveしたよ");
});

実行結果は下記のようになります。

resolveしたよ

Promiseオブジェクトを確認してみると...

resolve()を呼び出すことによって、
PromiseStatusはresolvedに変わり,thenの処理が走ってることがわかりますね。

resolve関数に引数を渡してあげると...

resolve関数は、引数を受け取ることができ、次に呼ばれるメソッド(then)の第一引数に渡してあげることができます。

const promise = new Promise((resolve) => {
  // 引数に文字列を渡す
  resolve("resolveしたよ");
}).then((val) => {
  // 第一引数にて、resolve関数で渡した文字列を受け取ることができる
  console.log(val);
});

実行結果.

resolveしたよ

resolve関数の引数にて渡された値が、thenの第一引数に渡されてることがわかりますね。

下記コード時点でのpromiseを確認してみましょう。

const promise = new Promise((resolve) => {
  // 引数に文字列を渡す
  resolve("resolveしたよ");
});

PromiseValueに、resolveに渡した文字列が入ってることがわかりましたね。
PromiseValueに格納された値を、次に呼ばれるメソッドの第一引数に渡すことができる、という仕組みになっております。

rejectさせよう

sample1のコードをrejectさせてみましょう。

const promise = new Promise((resolve, reject) => {
  reject();
})
  .then(() => {
    console.log("resolveしたよ");
  })
  .catch(() => {
    console.log("rejectしたよ");
  });

実行結果は下記のようになります。

rejectしたよ

thenの処理は実行されず、catchの処理が実行されることがわかりますね。

Promiseオブジェクトを確認してみると...

想定通り、PromiseStatusがrejectedに.....なってない！！！！！

なぜrejectedにならない...？

下記コード、つまりcatchの処理を行なっていない状態のPromiseオブジェクトをみてみましょう。

const promise = new Promise((resolve, reject) => {
  reject();
});

この時点では、PromiseStatusがrejectedですね。
ちょっと安心ですね。笑

(Uncaught (in promise)というエラーはrejectされた時に、一回もcatchの処理が行われなかった時にでます。)

実は、catchにて実行される関数がreturnした値をresolveします。
めちゃくちゃ簡単にいうと、catchはエラー返したら満足して、解決済みだ！ってするみたいです。
つまり、catchにて返されたpromiseオブジェクトのPromiseStatusはresolveになります。

んー、難しい。

Promiseのメソッドチェーン

処理が成功した時にthenに書かれた処理が実行され、処理が失敗した時はcatchに書かれた処理が実行されると説明しましたが、それらの処理の後にまた別のthenを実行することができます。

さらに、returnで返した値を第一引数として次のthenに渡すことが可能です。

resolveした場合.js

const promise = new Promise((resolve, reject) => {
  resolve("test");
})
  .then((val) => {
    console.log(`then1: ${val}`);
    return val;
  })
  .catch((val) => {
    console.log(`catch: ${val}`);
    return val;
  })
  .then((val) => {
    console.log(`then2: ${val}`);
  });

実行結果.

then1: test
then2: test

resolveされたため、1つめのthenが実行されたあと、
returnでvalを受け取り、2つめのthenが実行されました。

rejectした場合.js

const promise = new Promise((resolve, reject) => {
  reject("test");
})
  .then((val) => {
    console.log(`then1: ${val}`);
    return val;
  })
  .catch((val) => {
    console.log(`catch: ${val}`);
    return val;
  })
  .then((val) => {
    console.log(`then2: ${val}`);
  });

実行結果.

catch: test
then2: test

rejectされたため、1つめのthenは処理されず、
1つめのcatchが実行されたあとに2つめのthenが実行されました。

Promise.allとPromise.race

これらは、Promiseを複数実行して、その結果に応じて次の処理に進む便利メソッドです。

Promise.all

Promise.all()は配列でPromiseオブジェクトを渡し、
全てのPromiseオブジェクトがresolvedになったら次の処理に進みます。

const promise1 = new Promise((resolve) => {
  setTimeout(() => {
    resolve();
  }, 1000);
}).then(() => {
  console.log("promise1おわったよ！");
});

const promise2 = new Promise((resolve) => {
  setTimeout(() => {
    resolve();
  }, 3000);
}).then(() => {
  console.log("promise2おわったよ！");
});

Promise.all([promise1, promise2]).then(() => {
  console.log("全部おわったよ！");
});

実行結果.

promise1おわったよ！
promise2おわったよ！
全部おわったよ！

Promise.race

Promise.race()はPromise.all()と同じく配列でPromiseオブジェクトを渡し、
どれか1つのPromiseオブジェクトがresolvedになったら次に進みます。

const promise1 = new Promise((resolve) => {
  setTimeout(() => {
    resolve();
  }, 1000);
}).then(() => {
  console.log("promise1おわったよ！");
});

const promise2 = new Promise((resolve) => {
  setTimeout(() => {
    resolve();
  }, 3000);
}).then(() => {
  console.log("promise2おわったよ！");
});

Promise.race([promise1, promise2]).then(() => {
  console.log("どれか一つおわったよ！");
});

実行結果.

promise1おわったよ！
どれか一つおわったよ！
promise2おわったよ！

async/awaitを使ってもっと簡潔に！

Promiseの処理は、Promiseインスタンスを生成したり,resolve/rejectしたりするため、場合によっては結構冗長的になってしまいます。
async/awaitを使うとPromiseの処理をより簡潔に書くことができます。

例に、下記のPromiseの処理をasync/awaitを使って、リファクタします。

const alwaysLateBoy = (ms) => {
  new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, ms);
  }).then(() => {
    console.log(`すまん！${ms}ms待たせたな。`);
  });
};

処理としては、引数で渡したms秒分待機して、その後console.logを走らせれば良さそうですね。

上記の処理をasync/awaitを用いると、下記のようにまとめることができます。

// async function を定義
const alwaysLateBoy = async (ms) => {
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, ms);
  })
  // Promiseの結果が返ってくるまで実行されない
  console.log(`すまん！${ms}ms待たせたな。`)
};

asyncとは

asyncは非同期関数を定義する関数宣言であり、関数の頭につけることで、
Promiseオブジェクトを返す関数にすることができます。
そのような関数をasync functionといいます。

const asyncFunc = async () => {
  return 1;
};

上記async functionを実行すると、下記のようなPromiseオブジェクトが返ってきます。

async functionが値をreturnした場合、Promiseは戻り値をresolveし、
その値はPromiseValueとして扱われます。

awaitとは

awaitは、Promiseオブジェクトが値を返すのを待つ演算子です。
awaitは必ず、async function内で使います。

下記のコードを例に考えてみましょう。

const asyncFunc = async () => {
  let x, y;
  x = new Promise(resolve => {
    setTimeout(() => {
      resolve(1);
    }, 1000 )
  })
  y = new Promise(resolve => {
    setTimeout(() => {
      resolve(1);
    }, 1000 )
  })
  console.log(x + y)
}

この処理では、Promiseがresolveするのを待つ処理を書いてないため、
console.log(x + y)では、下記のような結果が返ってきます。

実行結果...

NaN

この処理を、Promiseがresolveするのを待つようにするには、
このPromiseオブジェクトが全て実行完了するのを待つPromise.allを使えばできそうですが、awaitを使うともっと簡単に実装できます。

const asyncFunc = async () => {
  let x, y;
  // Promiseがresolveするまで待機
  x = await new Promise((resolve) => {
    setTimeout(() => {
      resolve(1);
    }, 1000);
  });
  // Promiseがresolveするまで待機
  y = await new Promise((resolve) => {
    setTimeout(() => {
      resolve(1);
    }, 1000);
  });

  console.log(x + y);
};

console.log(x + y)は、上二つのPromiseが値を返すのを待ってから実行されるため、実行結果は下記のようになります。

実行結果...

2

おわりに

想像以上に長くなってしまい、後半からわかりづらいかもしれません。。。泣
少しでもPromiseに対して苦手意識がなくなったら良いなと思います。
(自分自身、この記事を書いていくうちに、さらにPromiseを理解できたような気がします。)

参考記事

• Promiseによる非同期処理の書き方
• 【JavaScript】非同期処理/Promise/asyncと聞くとビビっちゃう人を救う
• Promiseの使い方、それに代わるasync/awaitの使い方
• async/await 入門（JavaScript）

前回まで

前回はカレンダーの表示月を切り替えたら画面も切り替わるようにした。
ただ、切り替える度に画面更新で数秒真っ白になるのでダサかった。

レスポンシブルな感じのUIにしたい。

HTMLを最小限にする

HTML内にカレンダーの構造をそのまま書いているのでこれをごっそり削って最小限の記述にする。
カレンダーの構造自体はJavaScriptで作っていく。

before

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ElectronCalendar</title>
  <script text="text/javascript" src="./js/index.js"></script>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <div class="calendar-wrapper">
    <div class="preMonthButton">
      <button type="button" id="preMonth">＜先月</button>
    </div>
    <div class="nextMonthButton">
      <button type="button" id="nextMonth">来月＞</button>
    </div>
    <table id="table" class="calendar">
      <caption id="caption"></caption>
      <thead>
        <tr>
          <th>日</th>
          <th>月</th>
          <th>火</th>
          <th>水</th>
          <th>木</th>
          <th>金</th>
          <th>土</th>
        </tr>
      </thead>
      <tbody>
        <tr id="row1">
          <td id="cell1"></td>
          <td id="cell2"></td>
          <td id="cell3"></td>
          <td id="cell4"></td>
          <td id="cell5"></td>
          <td id="cell6"></td>
          <td id="cell7"></td>
        </tr>
        <tr id="row2">
          <td id="cell8"></td>
          <td id="cell9"></td>
          ．．．略
          <td id="cell34"></td>
          <td id="cell35"></td>
        </tr>
        <tr id="row6">
          <td id="cell36"></td>
          <td id="cell37"></td>
          <td id="cell38"></td>
          <td id="cell39"></td>
          <td id="cell40"></td>
          <td id="cell41"></td>
          <td id="cell42"></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

after

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ElectronCalendar</title>
  <script text="text/javascript" src="./js/index.js"></script>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <div class="calendar-wrapper">
    <div class="preMonthButton">
      <button type="button" id="preMonth">＜先月</button>
    </div>
    <div class="nextMonthButton">
      <button type="button" id="nextMonth">来月＞</button>
    </div>
    <div id="calendars"> 
    </div>
  </div>
</body>
</html>

<div id="calendars">ってなんでこのIDにしたか謎。

index.jsを改修する

index.js

'use strict';

//momentモジュール
const moment = require("moment");

// カレンダーをキャッシュしておくMap
let calendarMap = new Map();

// 画面に表示されている月
let currentDispMonth;

window.onload = function() {

    //URL文字列から初期表示の月を取得
    const month = parseURLParam(location.search).month;

    //直近3か月のカレンダー作成
    createLatestCalendar(month);
    //カレンダーの親要素取得
    const root = document.getElementById('calendars');
    //子要素としてパネルを追加
    const callendar = calendarMap.get(month);
    root.appendChild(callendar.getPanel());
    //カレンダー表示
    display(callendar.createContents);

    //先月ボタン押下時
    document.getElementById('preMonth').onclick = function() {
        const localMoment = moment(currentDispMonth);
        const preMonth = localMoment.add(-1,'month').format("YYYY-MM"); 
        const beforPanel = calendarMap.get(currentDispMonth).getPanel();
        const afterCallendar = calendarMap.get(preMonth);
        const afterPanel = afterCallendar.getPanel();
        changePanel(beforPanel, afterPanel, afterCallendar.createContents);
        createLatestCalendar(preMonth);
    };

    //来月ボタン押下時
    document.getElementById('nextMonth').onclick = function() {
        const localMoment = moment(currentDispMonth);
        const nextMonth = localMoment.add(1,'month').format("YYYY-MM"); 
        const beforPanel = calendarMap.get(currentDispMonth).getPanel();
        const afterCallendar = calendarMap.get(nextMonth);
        const afterPanel = afterCallendar.getPanel();
        changePanel(beforPanel, afterPanel, afterCallendar.createContents);
        createLatestCalendar(nextMonth);
    };
};

/**
 * URLパラメータを分解してkey:valueの形式で返す。
 * @param URL 
 */
function parseURLParam(URL) {
    // URLパラメータを"&"で分離する
    const params = URL.substr(1).split('&');

    var paramsArray = [];
    var keyAndValue = null;

    for(var i = 0 ; i < params.length ; i++) {
        // "&"で分離したパラメータを"="で再分離
        keyAndValue = params[i].split("=");

        // パラメータを連想配列でセット
        paramsArray[keyAndValue[0]] = keyAndValue[1];
    }

    // 連想配列パラメータを返す
    return paramsArray;
}

/**
 * パネルを切り替える
 * @param  beforPanel
 * @param  afterPanel
 * @param  callback パネル切り替え後に実行される関数
 */
function changePanel(beforPanel, afterPanel, callback) {
    //カレンダーの親要素取得
    const root = document.getElementById('calendars');
    //afterPanelでbeforPanelを置き換え
    root.replaceChild(afterPanel, beforPanel);
    display(callback);
}

/**
 * カレンダーを表示する。
 * @param callback 実行される関数
 */
function display(callback) {
    callback();
}

/**
 * 指定した月の直近（当月、先月、来月）のCallendarオブジェクトを作成する。
 */
function createLatestCalendar(month) {
    //当月分
    if(!calendarMap.get(month)) {
        const callendar = new Callendar(month);
        callendar.createPanel();
        calendarMap.set(month, callendar);
    }

    const localMoment = moment(month);

    //先月分
    const preMonth = localMoment.add(-1,'month').format("YYYY-MM");
    if(!calendarMap.get(preMonth)) {
        const preCallendar = new Callendar(preMonth);
        preCallendar.createPanel();
        calendarMap.set(preMonth, preCallendar);
    }

    //今月分
    const nextMonth = localMoment.add(2,'month').format("YYYY-MM");
    if(!calendarMap.get(nextMonth)) {
        const nextCallendar = new Callendar(nextMonth);
        nextCallendar.createPanel();
        calendarMap.set(nextMonth, nextCallendar);
    }

}

/**
 * カレンダークラス
 * @param month(YYYY-MM) 
 */
const Callendar = function(month) {

    //コンストラクタ
    this._month = month;
    this._moment = moment(this._month);
    this._panel = {};

    //コールバック関数で利用するのでthisを固定しておく
    const _this = this;

    /**
     * カレンダーのパネルを作成する。
     */
    this.createPanel = function() {
        // カレンダーのパネルを作成
        const panel = document.createElement('div');
        panel.id = 'panel';

        // 子要素にテーブルを追加
        const table = panel.appendChild(document.createElement('table'));
        table.id = 'table';
        table.classList.add('calendar');

        // テーブルにキャプション追加
        const caption = table.appendChild(document.createElement('caption'));
        caption.id = 'caption';

        // ヘッダー追加
        const header = table.appendChild(document.createElement('thead'));

        // ヘッダーのカラムを作成する。
        const headerRow = header.appendChild(document.createElement('tr'));
        headerRow.appendChild(document.createElement('th')).innerText = '日';
        headerRow.appendChild(document.createElement('th')).innerText = '月';
        headerRow.appendChild(document.createElement('th')).innerText = '火';
        headerRow.appendChild(document.createElement('th')).innerText = '水';
        headerRow.appendChild(document.createElement('th')).innerText = '木';
        headerRow.appendChild(document.createElement('th')).innerText = '金';
        headerRow.appendChild(document.createElement('th')).innerText = '土';

        // body作成
        let cellNum = 1;
        for (let i = 1; i < 7; i++) {
            const row = table.appendChild(document.createElement('tr'));
            row.id = 'row' + i;
            for(let j = 1; j < 8; j++) {
                const cell = row.appendChild(document.createElement('td'));
                cell.id = 'cell' + cellNum;
                cellNum++;
            }
        }
        this._panel = panel;
    };

    /**
     * カレンダーの内容を作成する。
     */
    this.createContents = function() {
        const __moment = _this._moment;

        //captionを表示
        document.getElementById('caption').innerText = __moment.format("YYYY年MM月");

        //当月の日数を取得
        const daysOfMonth = __moment.daysInMonth();

        //月初の曜日を取得（index.htmlと合わせるために＋1する）
        const firstDayOfManth = __moment.startOf('month').day() + 1;

        //カレンダーの各セルに日付を表示させる
        let cellIndex = 0;
        for(let i = 1; i < daysOfMonth + 1; i++) {
            if(i === 1) {
                cellIndex += firstDayOfManth;
            } else {
                cellIndex++;
            }
            document.getElementById("cell" + cellIndex).innerText = i;
        }

        //6行目の第1セルが空白なら6行目自体を非表示にする。
        if(document.getElementById("cell36").innerText === "") {
            document.getElementById('row6').style.display = "none";
        }

        currentDispMonth = _this._month;
    };

    /**
     * パネルを取得する。
     */
    this.getPanel = function() {
        return this._panel;
    };

    /**
     * 月を取得する。
     */
    this.getMonth = function() {
        return this._month;
    };
};

修正・追加点

①カレンダーの構造を動的に作るようにする。

Calendarオブジェクトでカレンダーの構造(HTML要素)を作成して持っておくようにする。
Calendarオブジェクトは月ごとに一つ作られる。

display関数にCalendarクラスのcreateContentsメソッドをコールバック関数として渡すことで画面にカレンダーの内容が表示される。

index.js

/**
 * カレンダーを表示する。
 * @param callback 実行される関数
 */
function display(callback) {
    callback();
}

※コールバック関数をそのまま実行しているだけなのでコールバックという名前は不適なので修正したい。

②ボタンを押したら画面の更新無しでカレンダーを切り替えるようにする。

カレンダーの表示の切り替えは、changePanel関数でHTML要素を置き換える。

index.js

/**
 * パネルを切り替える
 * @param  beforPanel
 * @param  afterPanel
 * @param  callback パネル切り替え後に実行される関数
 */
function changePanel(beforPanel, afterPanel, callback) {
    //カレンダーの親要素取得
    const root = document.getElementById('calendars');
    //afterPanelでbeforPanelを置き換え
    root.replaceChild(afterPanel, beforPanel);　※
    display(callback);
}

※replaceChildメソッドの引数はreplaceChild(置き換えたいHTML要素(Node), 置き換え対象のHTML要素)となるので注意。

③カレンダーの切り替え毎に前後一ヶ月のCalendarオブジェクトを作っておくようにする。

初期表示では今月・先月・来月分のCalendarオブジェクトを作成しておき、今月分のカレンダーの表示させる。
以後、ボタン押下毎にCalendarオブジェクトが作られていく。

index.js

/**
 * 指定した月の直近（当月、先月、来月）のCallendarオブジェクトを作成する。
 * 対象月のCalendarオブジェクトがキャッシュされているならそれを使い回す。
 */
function createLatestCalendar(month) {
    //当月分
    if(!calendarMap.get(month)) {
        const callendar = new Callendar(month);
        callendar.createPanel();
        calendarMap.set(month, callendar);
    }

    const localMoment = moment(month);

    //先月分
    const preMonth = localMoment.add(-1,'month').format("YYYY-MM");
    if(!calendarMap.get(preMonth)) {
        const preCallendar = new Callendar(preMonth);
        preCallendar.createPanel();
        calendarMap.set(preMonth, preCallendar);
    }

    //今月分
    const nextMonth = localMoment.add(2,'month').format("YYYY-MM");
    if(!calendarMap.get(nextMonth)) {
        const nextCallendar = new Callendar(nextMonth);
        nextCallendar.createPanel();
        calendarMap.set(nextMonth, nextCallendar);
    }

}

なんかごちゃっとしてる。

index.js

    //先月ボタン押下時
    document.getElementById('preMonth').onclick = function() {
        const localMoment = moment(currentDispMonth);
        const preMonth = localMoment.add(-1,'month').format("YYYY-MM"); 
        const beforPanel = calendarMap.get(currentDispMonth).getPanel();
        const afterCallendar = calendarMap.get(preMonth);
        const afterPanel = afterCallendar.getPanel();
        changePanel(beforPanel, afterPanel, afterCallendar.createContents);
        createLatestCalendar(preMonth);
    };

    //来月ボタン押下時
    document.getElementById('nextMonth').onclick = function() {
        const localMoment = moment(currentDispMonth);
        const nextMonth = localMoment.add(1,'month').format("YYYY-MM"); 
        const beforPanel = calendarMap.get(currentDispMonth).getPanel();
        const afterCallendar = calendarMap.get(nextMonth);
        const afterPanel = afterCallendar.getPanel();
        changePanel(beforPanel, afterPanel, afterCallendar.createContents);
        createLatestCalendar(nextMonth);
    };

こっちもごちゃっとしてる。

・キャッシュしたCalendarオブジェクトの取得方法

Calendarオブジェクトはグローバル変数のMapに保存されているので月をキーにして取り出せる。

index.js

// カレンダーをキャッシュしておくMap
let calendarMap = new Map();

動かす

$ electron .

初期表示

来月ボタン押下時

画面更新で真っ白になることが無くなった！！！（画像じゃ分からない）

TODO

・コードをもっとスッキリさせたい。
・Electronの機能をもっと使いたい。

あとがき

・Javaの型で縛るプログラミングに慣れているので動的型付け言語は自由だけど不自由。
・ロジックを書くのはやっぱり楽しい。プログラミングの醍醐味だと思う。
・Electronの記事なのにほぼHTML・JSの記事になってる･･･。今回に関してはipc通信の箇所すら削っちゃってる！！！

登場人物

丹生（にゅう）あれい
魔法少女「魔法（マジカル）JS（女子小学生）☆あれい」として活動中。

イテレー太
正体不明の魔法生物。

第1部「ミューテーター・メソッド編」
* 第1話「popでpushした、ような……」
* 第2話「shiftはとってもunshiftって」
* 第3話「もうsortもreverseも怖くない」
* 第4話「fillも、spliceも、copyWithinもあるんだよ」

第2部「アクセサ・メソッド編」
* 第5話「joinなんて、concatなわけない」
* 第6話「indexOfなの絶対lastIndexOf」
* 第7話「includesのsliceと向き合えますか？」

第3部「イテレーション・メソッド編」
* 第8話「filterって、ほんとfindとfindIndex」
* 第9話「someなの、everyが許さない」

map()

イテレー太「さあ、引き続き戦いの真っ最中だよ！」
あれい「いつまで続くんだよこの駄犬」
イ「召喚したデータは第8話を参照してね！　そして、今回の敵の弱点は、『記事のタイトル（title）と使用されているタグ（tags）の名前（name）を一覧にしたもの』だよ！」
あ「要は見出しか」
イ「そうだよ！　さあ、記事の見出しをreturnして敵を倒してよ！」
あ「面倒くせえなあ……」

return items.map(item => `${item.title} (${item.tags.map(tag => tag.name).join('/')})`)

あ「これでいいのか」
イ「あれい、今回も解説をお願い！」
あ「ああん？　面倒くせえなあ……だから、map() メソッドですべての記事にアクセスしてtitleとtagsを取得するだろ」
イ「ふむふむ」
あ「で、さらにtags内のすべての要素にmap() メソッドでアクセスして、nameのみの配列を作成してから、それをjoin()メソッドで連結してるんだよ」
イ「いやー、さすがはあれい！　魔法少女コスが壊滅的に似合わないけど仕事は早いね！」
あ「しばくぞ」

解説

map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

（MDNより）

配列のすべての要素に対してコールバック関数を実行し、返ってきた結果で新しい配列が作成されます。
コールバック関数では、filter() メソッドと同じく、「現在の要素、現在の要素のインデックス、元の配列」という3つの引数を使用できます。

forEach()

解説

forEach() メソッドは与えられた関数を、配列の各要素に対して一度ずつ実行します。

（MDNより）

さて、forEach() メソッドについては解説のみとなります。なぜなら、forEach() メソッドには戻り値がないため、敵に攻撃できないからです。
配列のすべての要素に対して関数を実行する……という点ではmap() メソッドなどと同じ動きをしますが、戻り値がないのでメソッドチェーンとして使用しづらく、map()やreduce()を使わずにあえてforEach() を使うというケースが、正直言って思いつきません。
（……逆に言うと、他のオブジェクトであるMapやSetではforEach()くらいでしか反復処理ができないけど、Arrayオブジェクトは便利なメソッドが豊富に揃っていて幸せだなー、という事なんでしょうね。多分……）

あ「なんだこの試合放棄感丸出しの解説は」
イ「一応、記事のタイトルを順にコンソールに出力する例だけでも提示しておいてよ！」
あ「面倒くせえなあ……」

items.forEach(item => console.log(item.title));

次回予告

ずっと配列の要素達にコールバック関数を実行しながら、あなたは何も感じなかったの？
皆がどんな風にアキュムレータに代入されたか、わかってあげようとしなかったの？

第11話 最後に残ったreduceとreduceRight

経緯

vis.jsをさわった経緯
チームでWebアプリ開発をしようとして、ネットワーク図を書けるやつないかな～って探して見つかったのがこのvis.jsだった！

紹介基準

僕が見て役に立ったもの！
僕はJavaScriptをそれまで書いたことがなく、ちゃんと文法がわかっている訳でもないです。そんな僕が紹介するものなので、結構信頼してもらっても大丈夫だと思います！(笑)

参考にしたもの

vis.jsの公式ページ

これめっちゃすごくて、自分の実現したいことのコードは大体そろっています。「こういうネットワーク図書きたいな～」みたいな感じになったらとりあえずそういうものがあるかを見に行くといいと思います！公式githubからコードを取得できるのでコピペでとりあえず書けてしまいます。。。正直すごすぎてびっくりしました。
他にも3Dグラフとかいろいろあるのでやってみたいと思いました！(感想)

vis.js公式ページはこちら！
https://visjs.org/

vis.js ネットワーク図のサンプルページはこちら！
https://visjs.github.io/vis-network/examples/

公式githubはこちら！
https://github.com/visjs

Qiitaの記事

ノードの名前を変更するコードが載っています！
https://qiita.com/KyoheiOkawa/items/1ca82afada3761c3be92

vis.jsではなくJavaScript。ダブルクリックイベントを実装するときに助けてもらいました！
https://qiita.com/sashim1343/items/e3728bea913cadab677d

基本的な書き方がしっかりのっています！！
https://qiita.com/junjis0203/items/ecc3f4eb9b3a1c4802e4

終わりに

最後までありがとうございました！！！
僕が紹介したのはあくまでも僕が実装するときに役立ったもので、もっと他にも素晴らしい記事があると思うので他の記事も見てみてくださいね！
アプリとして完成すればそのリンクを追記したいと思います！
そのときにvis.jsのコードも載せようと思うのでもしよければ定期的に確認してみてください！

Stelte+Elmを学習中なもので、Vue.jsとElmを比べてみよう！ テンプレートとview編に便乗させていただき、Svelte編を書かせていただきます。元記事のVue.jsとElmを対比してお読みくださいませ。

①オブジェクトの表示

Svelte

汎用ループを扱うことがディレクティブはeachとなります。コレクションのそれぞれ(each)を扱うイメージを持つと良いかと。

<div id="app">
  <ul>
    {#each items as { message }, i}
      <li> { message }</li>
    {/each}
  </ul> 
</div>

<script>
    let items = [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
</script>

Svelteの場合、htmlコードの中に、素のJSでitemsを用意します。
私はSvelte初心者なので、REPLで確認しながら実行しています。
https://svelte.dev/repl/

Svelteの利点

全体のコード量はVueより少し短いくらい、とっつき易いJavascriptの表現になりました。HTML側のテンプレートは少し慣れが必要ですが、数も少ないので何かを作り始める際には難しくないと思います。

Svelteの問題点

Vueと同じくやはりタイポをしてしまうと、リストの文字列が空っぽになってしまいます。この程度ならすぐ気付けるかもしれませんが、ベースがHtmlという元が文章を書くための表現方法のためシンタックスのミスなどは検知がしにくいですね。短くコンポーネント(ファイル)を保つなど人間がミスを起こしにくいような仕組みを工夫し続けなければなりません。正直、大規模な開発は厳しいかと。

② 数値の扱い

Svelte

演算が必要なところのみ素のJavaScriptを用いて、結果をHTMLが解釈し文字列を導き出します。

<div id="app">
  <ul>
    {#each items as { num }, i}
      <li> x= { incl(num) }</li>
    {/each}
  </ul> 
</div>

<script>
    let items = [
    { num: 1 },
    { num: 2 }
    ]
    const incl = (x)=>x+1
</script>

実行結果:

Svelteの利点

表現がとても柔軟です。最初の例と変わらずに記述することができました。

Svelteの問題点

柔軟が故に以下のようなミスも起こし易いです。が、REPLで直ぐに結果を確認しておけばミスは減るでしょう。

③ 条件付き繰り返し

Svelte

Vueでは何やら留意点があるようですが、素のJSでロジックを書くSvelteでは淡々と記述するのみです。

<ul>
  {#each evenNumbers as x}
    <li> { x }</li>
  {/each}
</ul>   

<script>
  const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  const evenNumbers = nums.filter(x => x % 2 === 0)
</script>

Svelteの利点

依然として表記としては短く簡単ですね。

Vueの問題点

なんか、このあたりVue、つらそうで可哀想。

私のまとめ

Svelteは初期の学習コストが低く、Vueのように独自に覚えることが少ない点は良い点です。しかし、複雑性が増した時にJSで頑張って書くことになります。Vueと同じく、副作用も柔軟に書けることの利点が問題点に跳ね返ってくることがしばしばありそうです。その時にどう工夫をして解決していくかが課題となると思います。
Elmとの比較は、元記事を読みましょう！私はある規模を越えたらelmを使う！
すなわち、Svelte+elm =Sveltelm ;-)

そして、Thanks, @ababup1192さん！

導入

TypeScript無しでは、FlatListを書いたことあるので、スラスラ書けるかなと思って、
TypeScriptでFlatListを書いていました。

しかし、TypeScriptのエラーに引っかかりまくり、なかなか解決できなかったので、
その解決方法を共有する目的で記事を書いています。

前提

VersionとFlatListについての前提情報を記載します。

Version

• ReactNative: 0.59.8
• Expo: 35.0.0

FlatListとは？

スクロールできるリストのこといいます。
ReactNativeで作成するアプリで、リスト形式で表示したい時は多くの場合利用すると思います。

ハマったこと

サンプルコードは以下の通りなのですが、ハマったのは、
FlatList内のrenderItemの型です。
TypeScriptを導入していなければ以下のサンプルコードのままでいいのですが、
TypeScriptを導入していると以下のコードでは怒られてしまいます。

修正前のコード

  import React from 'react';
  import { SafeAreaView, View, FlatList, StyleSheet, Text } from 'react-native';
  import Constants from 'expo-constants';

  const DATA = [
    {
      id: '1',
      title: 'アイテム1',
    },
    {
      id: '2',
      title: 'アイテム2',
    },
    {
      id: '3',
      title: 'アイテム3',
    },
    {
      id: '4',
      title: 'アイテム4',
    },
    {
      id: '5',
      title: 'アイテム5',
    },
    {
      id: '6',
      title: 'アイテム6',
    },
    {
      id: '7',
      title: 'アイテム7',
    },
  ];

  const Item = ({ title }) => {
    return (
      <View style={styles.item}>
        <Text style={styles.title}>{title}</Text>
      </View>
    );
  };

  export default App = () => {
    return (
      <SafeAreaView style={styles.container}>
        <FlatList
          data={DATA}
          renderItem={({ item }) => <Item title={item.title} />}
          keyExtractor={item => item.id}
        />
      </SafeAreaView>
    );
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      marginTop: Constants.statusBarHeight,
    },
    item: {
      backgroundColor: 'red',
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
    },
    title: {
      fontSize: 32,
    },
  });

怒られたエラーメッセージ

Type ListRenderItemInf<any> is missing ...

ListRenderItemInfo<any>が存在しないよというエラーが発生しました。

解決方法

解決方法は、ListRenderItemInfo型をreact-naiveからimportしてきて、
FlatListのrenderItempropsの型として定義してあげる方法です。

修正後のコード

   import React from 'react';
  // ListRenderItemInfoをimportしてきます
  import { SafeAreaView, View, FlatList, StyleSheet, Text, ListRenderItemInfo } from 'react-native';
  import Constants from 'expo-constants';

  const DATA = [
    {
      id: '1',
      title: 'アイテム1',
    },
    {
      id: '2',
      title: 'アイテム2',
    },
    {
      id: '3',
      title: 'アイテム3',
    },
    {
      id: '4',
      title: 'アイテム4',
    },
    {
      id: '5',
      title: 'アイテム5',
    },
    {
      id: '6',
      title: 'アイテム6',
    },
    {
      id: '7',
      title: 'アイテム7',
    },
  ];

  const Item = ({ title }) => {
    return (
      <View style={styles.item}>
        <Text style={styles.title}>{title}</Text>
      </View>
    );
  };

　// Itemはどのような型なのかを設定します。
  // interfaceなので慣習的にIをつけるので、IItemとします。
  export interface IItem{
    id: number;
    title: string;
  }

  // _renderItemというメソッドを作成します。
  // ListRenderItemInfoを型に設定します。
  const _renderItem = (listRenderItemInfo: ListRenderItemInfo<IItem>) => {
    return <Item title={listRenderItemInfo.item.title} />;
  };

  export default App = () => {
    return (
      <SafeAreaView style={styles.container}>
        <FlatList
          data={DATA}
          // 先程作成した_renderItemメソッドを当て込みます
          renderItem={_renderItem}
          keyExtractor={item => item.id}
        />
      </SafeAreaView>
    );
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      marginTop: Constants.statusBarHeight,
    },
    item: {
      backgroundColor: 'red',
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
    },
    title: {
      fontSize: 32,
    },
  });

まとめ

TypeScriptでは思わぬところで、ハマってしまうことが多いですよね。
renderItemにも型が決められていると気づくことができれば、一瞬で解決できるのですが、焦ってしまい少し時間がかかってしまいました。

また、ReactNativeの情報はまだ日本語で不足しているので、日本語では解決方法を見つけることができませんでした。
同じような構成でアプリを作成している皆さんの助けになれば幸いです。

参考

https://reactnative.dev/docs/flatlist
https://github.com/ranuseh/TraderJoeProjectFrontend/blob/e24a9fc5372356a24028c9029a00627d3e9fae3c/app/screens/shoppingList.screen.tsx

課題

• historyオブジェクトを利用して、ページをリダイレクトしたいがreduxを利用すると上手く動かない。
• console.logを仕込んでみると、どうやらhistoryオブジェクト自体がpropsとして渡されていないようだった。

環境

• node v12.7.0
• express 4.16.1
• react 16.12.0
• npm 6.10.2
• macOS Mojave 10.14.4

解決方法

reduxとreact-router-domのみを利用するとhistoryが利用できないので、reduxとreact-routerの統合が必要となる。
上記を実現するためにConnected React Routerというライブラリをインストールする。
（react-router-reduxは現在、非推奨）
引用元/@nacam403さんの記事

実装の流れ

• まず、npmで上記のライブラリを全てインストールします。

npm install --save redux
npm install --save react-router-dom
npm install --save connected-react-router
npm install --save redux-thunk

• index.jsを実装します。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux'
import { createBrowserHistory } from "history"
import { routerMiddleware, ConnectedRouter } from 'connected-react-router'
import thunk from "redux-thunk"
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import rootReducers from './reducers'

const history = createBrowserHistory()

const store = createStore(
    rootReducers(history),
    applyMiddleware(
      thunk,
      routerMiddleware(history),
    )
)

ReactDOM.render(<App store={store} history={history} />, document.getElementById('root'));

serviceWorker.unregister();

• App.jsを実装します。

AddFormでデータを登録して、CharacterListで一覧を表示する、というシンプルな構成です。

App.js

import React, {Component} from 'react'
import {Switch, Route} from 'react-router-dom'
import { Provider } from "react-redux"
import { ConnectedRouter } from 'connected-react-router'
import AddForm from './crud_components/AddForm'
import CharacterList from './crud_components/CharacterList'


class App extends Component {
  render() {
    return (
      <Provider store={this.props.store}>
        <ConnectedRouter history={this.props.history}>
          <Switch>
            <React.Fragment>
              <div className="App">
                <div className="container">
                  <Route exact path="/addform" render={() => <AddForm store={this.props.store} history={this.props.history}/>}/>
                  <Route exact path="/characterlist" render={() => <CharacterList store={this.props.store}/>}/>
                </div>
              </div>
            </React.Fragment>
          </Switch>
        </ConnectedRouter>
      </Provider>
    );
  }
}

export default App;

• AddForm.jsを実装します。

データ登録時のメソッドのみ抜粋します。ここでリダイレクトしたいpathをhistoryにpushします。

AddForm.js

   onSubmit(e){
        e.preventDefault() // フォームsubmit時のデフォルトの動作を抑制

        const newCharacter = {
            name: this.state.name,
            age: this.state.age
        }
        const store = this.props.store;

        character(newCharacter).then(res => {
            if (res) {
                this.props.history.push('/characterlist')
                store.dispatch(initializeForm()) // submit後はフォームを初期化
            }
        })

    }

まとめ

これでhistoryが利用できるようになりました。
しかし、historyでリダイレクトする際にstoreのデータを引き継ぎできないという課題が残るため、引き続き調べていきます。

/pages/*.vue
を下記の内容で作成する。

<template>
  <div>
    404 redirect
  </div>
</template>
<script>
export default {
  middleware({ redirect }) {
    return redirect('/')
  }
}
</script>

That's it.
Relax, man.

案件でPOSTする際、
『Content-type: form-data』で送信する機会があったので、まとめます。
ボタン部分はマテリアルUIを使っています、初見の方は細かく気にしなくても大丈夫です

環境

react　16.12.0
typescript　3.7.3
material-ui/core　4.8.0(Buttonに使用)

したいこと

inputで選択したファイルをstateにセット、セットしたファイルを POSTする

全体

const IconUpload: FC = () => {

  const [userIconFormData, setUserIconFormData] = useState<File>()

  const handleSetImage = (e: ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files) return
    const iconFile:File = e.target.files[0]
    setUserIconFormData(iconFile)
  }

  const handleSubmitProfileIcon = () => {
    const iconPram = new FormData()
    if (!userIconFormData) return

    iconPram.append('user[icon]', userIconFormData)
    axios
      .post(
        'https://api/update',
        iconPram,
        {
          headers: {
            'content-type': 'multipart/form-data',
          },
        }
      )
  }

  return (          
     <form>
       <p>アイコンアップロード</p>
       <input
         type="file"
         accept="image/*,.png,.jpg,.jpeg,.gif"
         onChange={(e: ChangeEvent<HTMLInputElement>) => handleSetImage(e)}
       />
       <Button
         text="変更する"
         variant="contained"
         color="primary"
         type="button"
         onClick={handleSubmitProfileIcon}
         disabled={userIconPreview === undefined}
       />
    </form>
  )
}

export default IconUpload

切り分けて解説

form周り、ボタン部分

　　<form>
       <p>アイコンアップロード</p>
       <input
         type="file"
         accept="image/*,.png,.jpg,.jpeg,.gif"
         onChange={(e: ChangeEvent<HTMLInputElement>) => handleSetImage(e)}
       />
       <Button
         text="変更する"
         variant="contained"
         color="primary"
         type="button"
         onClick={handleSubmitProfileIcon}
         disabled={userIconPreview === undefined}
       />
    </form>

input

• type：fileにすることによってアップロードが可能になる
• accept：アップロード画面で、ここに指定された拡張子のファイルのみ選択可能になる
• onChange：通常のinputと異なり、valueにはFileを入れることはできない、なので別の場所に取得したFileを保持するfunctionを呼び出す

Button

• onClick：onChangeでセットしたstateをaxiosでPOSTするfunctionを呼び出す

ファイルを取得するfunction

const handleSetImage = (e: ChangeEvent<HTMLInputElement>) => {
  if (!e.target.files) return
  const iconFile:File = e.target.files[0]
  setUserIconFormData(iconFile)
}

if (!e.target.files) return
TypeScriptでは、undefindになる可能性のある値に関してはエラーがでるので先に無い場合はreturnすることを明示的にしている

const iconFile:File = e.target.files[0]
これがファイル本体。
filesは複数選択可能の場合を備え、配列になっていて、[0]としてあげないと取得できない。
型はFile。

setUserIconFormData(iconFile)
stateにセット

ちなみに、e.target.files[0]をURLにしてimgに入れたいとなると

const blobUrl = URL.createObjectURL(iconFile)

blob:http://パスに変換され、URLをしてとして扱うことができます。

ファイルをaxiosでPOSTするfunction

const createProfileIcon = () => {
    const iconPram = new FormData()
    if (!userIconFormData) return

    iconPram.append('user[icon]', userIconFormData)
    axios
      .post(
        'https://api/update',
        iconPram,
        {
          headers: {
            'content-type': 'multipart/form-data',
          },
        }
      )
  }

ようやくAPI送信部分
content-type: multipart/form-dataで送信する際、気をつけること２つ

1. FormDataという形式で送ってあげなければいけない。

const iconPram = new FormData()
FormDataオブジェクトを作成
型はそのまんまで、FormData

iconPram.append('user[icon]', userIconFormData)
作成したFormDataオブジェクトにパラメーターを追加
append(キー, 送信したいファイル)

2. headersに'content-type': 'multipart/form-data'を指定

基本API通信する時はjsonが多いかと思いますが、jsonでは正しく送れず、空になるので注意

_axios.createを使って、Classでまとめている場合にも、

className.defaults.headers = { 'Content-Type': 'multipart/form-data' }

で、上書きしてあげましょう

送信内容

こんな感じです。

確認ポイント

1. RequestHeadersのcontent-typeがmultipart/form-dataになっている
2. FormDataのvalueが(binary)になっている

まとめ

これで正常にmultipart/form-dataでファイルをPOSTできるようになりました！
WEBサービスを作成する際、画像のアップロードはよく出でくるシチュエーションだとおもいますので、参考になれば幸いです

初めてこの機能を実装する際には迷う部分がたくさんあって、ファイルのPOSTする形も何種かあると思っていましたが、２種類のみのようです。

• Fileのまま送信（multipart/form-data）
• Base64にエンコードして送信（application/json）

エンコードするとjsonのまま送れるメリットがあるのですが、ファイルサイズが20~30%あがるそうです。
やればやるほど奥が深く、正解がなくて迷いますが、楽しいですね

案件でPOSTする際、
『Content-type: form-data』で送信する機会があったので、まとめます。
ボタン部分はマテリアルUIを使っています、初見の方は細かく気にしなくても大丈夫です

環境

react　16.12.0
typescript　3.7.3
material-ui/core　4.8.0(Buttonに使用)

したいこと

inputで選択したファイルをstateにセット、セットしたファイルを POSTする

全体

const IconUpload: FC = () => {

  const [userIconFormData, setUserIconFormData] = useState<File>()

  const handleSetImage = (e: ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files) return
    const iconFile:File = e.target.files[0]
    setUserIconFormData(iconFile)
  }

  const handleSubmitProfileIcon = () => {
    const iconPram = new FormData()
    if (!userIconFormData) return

    iconPram.append('user[icon]', userIconFormData)
    axios
      .post(
        'https://api/update',
        iconPram,
        {
          headers: {
            'content-type': 'multipart/form-data',
          },
        }
      )
  }

  return (          
     <form>
       <p>アイコンアップロード</p>
       <input
         type="file"
         accept="image/*,.png,.jpg,.jpeg,.gif"
         onChange={(e: ChangeEvent<HTMLInputElement>) => handleSetImage(e)}
       />
       <Button
         text="変更する"
         variant="contained"
         color="primary"
         type="button"
         onClick={handleSubmitProfileIcon}
         disabled={userIconPreview === undefined}
       />
    </form>
  )
}

export default IconUpload

切り分けて解説

form周り、ボタン部分

　　<form>
       <p>アイコンアップロード</p>
       <input
         type="file"
         accept="image/*,.png,.jpg,.jpeg,.gif"
         onChange={(e: ChangeEvent<HTMLInputElement>) => handleSetImage(e)}
       />
       <Button
         text="変更する"
         variant="contained"
         color="primary"
         type="button"
         onClick={handleSubmitProfileIcon}
         disabled={userIconPreview === undefined}
       />
    </form>

input

• type：fileにすることによってアップロードが可能になる
• accept：アップロード画面で、ここに指定された拡張子のファイルのみ選択可能になる
• onChange：通常のinputと異なり、valueにはFileを入れることはできない、なので別の場所に取得したFileを保持するfunctionを呼び出す

Button

• onClick：onChangeでセットしたstateをaxiosでPOSTするfunctionを呼び出す

ファイルを取得するfunction

const handleSetImage = (e: ChangeEvent<HTMLInputElement>) => {
  if (!e.target.files) return
  const iconFile:File = e.target.files[0]
  setUserIconFormData(iconFile)
}

if (!e.target.files) return
TypeScriptでは、undefindになる可能性のある値に関してはエラーがでるので先に無い場合はreturnすることを明示的にしている

const iconFile:File = e.target.files[0]
これがファイル本体。
filesは複数選択可能の場合を備え、配列になっていて、[0]としてあげないと取得できない。
型はFile。

setUserIconFormData(iconFile)
stateにセット

ちなみに、e.target.files[0]をURLにしてimgに入れたいとなると

const blobUrl = URL.createObjectURL(iconFile)

blob:http://パスに変換され、URLをしてとして扱うことができます。

ファイルをaxiosでPOSTするfunction

const createProfileIcon = () => {
    const iconPram = new FormData()
    if (!userIconFormData) return

    iconPram.append('user[icon]', userIconFormData)
    axios
      .post(
        'https://api/update',
        iconPram,
        {
          headers: {
            'content-type': 'multipart/form-data',
          },
        }
      )
  }

ようやくAPI送信部分
content-type: multipart/form-dataで送信する際、気をつけること２つ

1. FormDataという形式で送ってあげなければいけない。

const iconPram = new FormData()
FormDataオブジェクトを作成
型はそのまんまで、FormData

iconPram.append('user[icon]', userIconFormData)
作成したFormDataオブジェクトにパラメーターを追加
append(キー, 送信したいファイル)

2. headersに'content-type': 'multipart/form-data'を指定

基本API通信する時はjsonが多いかと思いますが、jsonでは正しく送れず、空になるので注意

_axios.createを使って、Classでまとめている場合にも、

className.defaults.headers = { 'Content-Type': 'multipart/form-data' }

で、上書きしてあげましょう

送信内容

こんな感じです。

確認ポイント

1. RequestHeadersのcontent-typeがmultipart/form-dataになっている
2. FormDataのvalueが(binary)になっている

まとめ

これで正常にmultipart/form-dataでファイルをPOSTできるようになりました！
WEBサービスを作成する際、画像のアップロードはよく出でくるシチュエーションだとおもいますので、参考になれば幸いです

初めてこの機能を実装する際には迷う部分がたくさんあって、ファイルのPOSTする形も何種かあると思っていましたが、２種類のみのようです。

• Fileのまま送信（multipart/form-data）
• Base64にエンコードして送信（application/json）

エンコードするとjsonのまま送れるメリットがあるのですが、ファイルサイズが20~30%あがるそうです。
やればやるほど奥が深く、正解がなくて迷いますが、楽しいですね

動機

YouTube Live Spam Killer - Chrome ウェブストア

突然ですが、自分はバーチャルYouTuber(VTuber)のライブストリーミングやそのアーカイブを複数窓垂れ流して作業するのが大好きです。
しかし、最近そのライブチャット欄に品のないユーザ名の出会い系スパムが多発しています。
これらのブロック作業で配信に集中できなかったりといった面倒が目立つようになりました。
せっかくの至福の時間を邪魔される、というのは人間誰しも嫌なものです。

人間様がクソプログラムに苛つかせられる必要はありません。
技術でなんとかしましょう。

YouTubeを利用している関係上、ブラウザ上でバックグラウンド動作してくれるタイプの技術を使うほうが見通しは良いです。
したがって今回、自分がメインで利用しているウェブブラウザであるGoogle Chrome上の拡張機能として実装することにしました。

なお、手元の事前調査などは使い慣れているPythonを利用しているため、Python(のREPLであるiPython)とJavaScriptのコードが混在する点のみご承知おきください。

実験

事前調査

これらのスパムは数種のパターンが存在しますが、大方以下のような特徴を持っています。

• ユーザ名の形式: (英語圏の女性名) (スパムユーザのアカウントに誘導する文言)
  • 例: Lilah ʜ0'ᴛ ᴄʜᴀᴛ ᴊᴏɪɴ ᴍᴇ [ɪ ᴍ ʟɪᴠᴇ]
  • 最近ではコロナウィルス周りの文言になったスパムも登場している
• 直前のチャット欄に現れた(人間の)コメントをコピーし、絵文字を追加したコメントを行う

上記の例で示したように、『スパムユーザのアカウントに誘導する文言』は単純なフィルタで取り除けないように、プレーンな英語ではなく記号類を用いています。

In [1]: import unicodedata

In [2]: target = "Lilah ʜ0'ᴛ ᴄʜᴀᴛ ᴊᴏɪɴ ᴍᴇ [ɪ ᴍ ʟɪᴠᴇ]"

In [3]: for i, c in enumerate(target):
   ...:     print(i, '"{}"'.format(c), '{:04x}'.format(ord(c)),
   ...:           unicodedata.category(c), unicodedata.name(c))
   ...:
0 "L" 004c Lu LATIN CAPITAL LETTER L
1 "i" 0069 Ll LATIN SMALL LETTER I
2 "l" 006c Ll LATIN SMALL LETTER L
3 "a" 0061 Ll LATIN SMALL LETTER A
4 "h" 0068 Ll LATIN SMALL LETTER H
5 " " 0020 Zs SPACE
6 "ʜ" 029c Ll LATIN LETTER SMALL CAPITAL H
7 "0" 0030 Nd DIGIT ZERO
8 "'" 0027 Po APOSTROPHE
9 "ᴛ" 1d1b Ll LATIN LETTER SMALL CAPITAL T
10 " " 0020 Zs SPACE
11 "ᴄ" 1d04 Ll LATIN LETTER SMALL CAPITAL C
12 "ʜ" 029c Ll LATIN LETTER SMALL CAPITAL H
13 "ᴀ" 1d00 Ll LATIN LETTER SMALL CAPITAL A
14 "ᴛ" 1d1b Ll LATIN LETTER SMALL CAPITAL T
15 " " 0020 Zs SPACE
16 "ᴊ" 1d0a Ll LATIN LETTER SMALL CAPITAL J
17 "ᴏ" 1d0f Ll LATIN LETTER SMALL CAPITAL O
18 "ɪ" 026a Ll LATIN LETTER SMALL CAPITAL I
19 "ɴ" 0274 Ll LATIN LETTER SMALL CAPITAL N
20 " " 0020 Zs SPACE
21 "ᴍ" 1d0d Ll LATIN LETTER SMALL CAPITAL M
22 "ᴇ" 1d07 Ll LATIN LETTER SMALL CAPITAL E
23 " " 0020 Zs SPACE
24 "[" 005b Ps LEFT SQUARE BRACKET
25 "ɪ" 026a Ll LATIN LETTER SMALL CAPITAL I
26 " " 0020 Zs SPACE
27 "ᴍ" 1d0d Ll LATIN LETTER SMALL CAPITAL M
28 " " 0020 Zs SPACE
29 "ʟ" 029f Ll LATIN LETTER SMALL CAPITAL L
30 "ɪ" 026a Ll LATIN LETTER SMALL CAPITAL I
31 "ᴠ" 1d20 Ll LATIN LETTER SMALL CAPITAL V
32 "ᴇ" 1d07 Ll LATIN LETTER SMALL CAPITAL E
33 "]" 005d Pe RIGHT SQUARE BRACKET

これはまだ素直な方ですが、ものによってはUnicodeの隅を突くような記号を突っ込んでくることもあります。
このような手口に対応する手法はいくつか考えられますが、この場合正規化を行い適当な英語表記に変換してやるのが一番楽でしょう。

正規化概要

具体的な手法としては、次に示すような連想配列を用いてユーザ名を逐一英語小文字に変換していく手法を採っています。

const NORMALIZE_MAP = {
  a: ['ᴀ', 'ᗩ'],
  c: ['ᴄ', 'ᑕ'],
  e: ['3', 'ǝ', 'ᴇ', 'Ꭼ', 'є'],
  h: ['ʜ', 'н', 'ᕼ'],
  i: ['ɪ', 'ι', 'Ꭵ', 'í'],
  j: ['ᴊ'],
  k: ['ᴋ'],
  l: ['ʟ', 'Ꮮ', 'ᒪ'],
  m: ['ᴍ', 'ᗰ'],
  n: ['ɴ', 'ᑎ'],
  o: ['0', 'ᴏ'],
  p: ['ᴘ'],
  r: ['ʀ'],
  s: ['ꜱ'],
  t: ['т', 'ᴛ'],
  v: ['Ꮙ', 'ᴠ'],
} // 執筆時のバージョン

var normalizeWord = word => { // 単語単位で正規化を行う
  word = word.replace(/[!-/:-@\[-`{-~]/g, '') // 約物の除去
  Object.keys(NORMALIZE_MAP).forEach(key => {
    NORMALIZE_MAP[key].forEach(item => {
      word = word.replace(new RegExp(item, 'g'), key)
    })
  })
  return word.toLowerCase()
  // 英語圏以外の文字に作用し、連想配列をすり抜けてしまう事象が確認されたため、
  // 後付けでtoLowerCase()を作用させている
}

スパム検知手法

さらに、予め用意しておいたブラックリスト単語に合致するかを調べます。

const BLACKLIST_WORDS = ['chat', 'click', 'colona', 'here', 'hot', 'join', 'live', 'love',
                         'mask', 'me', 'photo', 'sex', 'tap'] // 執筆時のバージョン

先頭の人名を除去した部分のユーザ名を正規化し、これらのブラックリスト単語が多くヒットすればスパムと見なします。

旧検知手法

別の検出方法として、複数の言語圏の文字を利用していることを検出する手法も考えていました。
しかし、これはあまり一般性がないことが判明したためボツとしました。

ソース

https://github.com/Le96/youtube-live-spam-killer

参考

参考にした記事一覧です。
JavaScriptはほぼ触った経験がなかったので基本的なことも紛れています。

言語仕様

Array.filterが使えないNodeListに対してフィルターをかける方法 - Qiita
JavaScript で forEach を使うのは最終手段 - Qiita
Javascript 連想配列(オブジェクト)をforEachでループさせたい。 - かもメモ
Javascript：任意の文字列を含むかどうかの確認方法 | WWWクリエイターズ
JavaScriptにおける連想配列のforループ操作 - Qiita
JSのArray.prototype.filter.callとArray.from().filterどっちが早いか - Qiita
Unicode Property Escapesについての補説
Unicodeの文字プロパティを指定した正規表現をみてみる（ECMAScript2018） - TES Blog
特定の文字列を全て置換する[Javascript] - Qiita

(jQueryを利用しない)DOM操作

【Javascript】setInterval()で要素が現れるまで待つ - Qiita
iframeのonloadのタイミングでiframeのソースを確認する - みかづきブログ その3
JavaScript - js読み込みの際はnullになるが、devツールのコンソールではnullにならない｜teratail
javascript - 読み込み完了の取得について - スタック・オーバーフロー
JavaScriptのMutationObserverでDOMの変化を監視する方法 - Qiita
ライブラリを使わない素のJavaScriptでDOM操作 - Qiita
要素の取得方法まとめ - Qiita

Chrome拡張機能

Chrome Extension を作って公開する - Qiita
Chrome 拡張機能のマニフェストファイルの書き方 - Qiita
Chromeブラウザの拡張機能を作ってみたい初心者向けに開発方法を紹介！【サンプルあり】 - Qiita
Chrome拡張　備忘録　１から１０まで - Qiita
Chrome拡張の開発方法まとめ　その1：概念編 - Qiita

類似の試み a.k.a.先行研究

YouTube Live の絵文字スパムをブロックする - Qiita
YouTubeコピペスパムを抽出する（モデレータなら自動ブロック？） - Qiita

アイコン

コメントアイコン7 | アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロ ードできるサイト

あとがき

本当はスパム報告・ブロックまで行いたかったのですが、手元のアイデアでは実装方法が浮かびませんでした。
ご教示いただければ非常に助かります。

また、想定の甘さや新種スパムの発生などに伴い、False Positive/False Negativeなど発生している場合もぜひご教示ください。