JavaScript の便利なワンライナーを p5.js Web Editor上で試したり p5.js版に書きかえたり（＋配列シャッフルに関する補足）

以下の記事を見かけて、気になったものを試してみる、という内容です。

●10 JavaScript One-Liners That Will Help You Improve Your Productivity - DEV Community
　https://dev.to/nourdinedev/10-javascript-one-liners-that-will-help-you-improve-your-productivity-5hjj

なお、それを実行する環境として p5.js のオンライン開発環境である「p5.js Web Editor」を使ってみたり、一部は p5.js の処理と少し混ぜてみたりしました。

また、p5.js だと上記の記事のワンライナーを利用しなくても良いものがあり、その場合は p5.js で同じ処理を実現する方法を書きました。

なおソースコードは、処理に関係する箇所だけ掲載しています

試した部分のソースコード

1. Generating a Random Number Within a Range

これは p5.js の場合は、random() と floor() を使えば簡単に実現できてしまうやつでした。
元記事の内容だと、「randomInt」と書いている部分は「random」ですが、p5.js の random() を上書きしてしまうため、試す時は名前を変えておくことにしました。

  const max = 20;
  const min = 10;
  const randomInt = Math.floor(Math.random() * (max - min + 1)) + min;
  console.log(randomInt);

  // p5.jsの場合は、以下のやり方でできてしまう
  console.log(floor(random(10, 20)));

2. Reverse a String

次に紹介されているのはこちらです。
これも、p5.js だと reverse() があるので、上記 1. と同じ理由で変数名の変更を行っています。

  const reverseStr = (str) => str.split("").reverse().join("");
  const str = "hello world";
  console.log(reverseStr(str));

何か p5.js　で活用するとしたら何があるか、というのを少し考えてみたのですが思いつかず...

3. Generate a Random Hex Code

これは、活用法が思いつきそうなやつでした。

const randomColor =
   '#' +
   Math.floor(Math.random() * 0xffffff)
      .toString(16)
      .padEnd(6, '0');
console.log(randomColor);

p5.js　で扱う色をランダムに生成するのに使えそうです。
p5.js の random() と floor() を使った形にして、背景色の指定にこのワンライナーを使ってみます。

  const randomColor =
    "#" +
    floor(random() * 0xffffff)
      .toString(16)
      .padEnd(6, "0");
  background(randomColor);

4. Shuffle an Array

p5.js の場合は、shuffle() で実現できてしまうものでした。

const arr = Array.from({ length: 10 }, (_, i) => i + 1);
console.log('array: ', arr);
const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
console.log('shuffled array: ', shuffleArray(arr));

p5.js だと、以下で似たようなことができます。

const arr = Array.from({ length: 10 }, (_, i) => i + 1);
console.log('array: ', arr);
console.log("shuffled array: ", shuffle(arr));

実は、これらは詳細を見ていくと同一のものではなさそうです。
それについて、この記事の最後に余談として書いておきます。

9. Get a Random Boolean

真偽値をランダムに生成するというものになります。

const randomBoolean = () => Math.random() >= 0.5;
console.log(randomBoolean());

p5.js だと、ほんの少しだけ短く書けます（ Math. の部分を省略できる、というだけですが）。

  const randomBoolean = () => random() >= 0.5;
  console.log(randomBoolean());

おわりに

JavaScript に関して気になる記事を見かけたので、p5.js Web Editor上でサクッと試してみました。
そのうち、上記のどれかが必要になった時に、「過去に見た気がするけど思い出せない」ということが起こりそうだったので、未来の自分のメモの意味もこめて記事に書いておきました。

余談： p5.js のシャッフル「Fisher-Yates Shuffle Algorithm」

記事の中で少し触れた、配列のシャッフルの話です。

まず、p5.js　の shuffle() の仕組みについて見てみると、「Fisher-Yates Shuffle Algorithm」が使われている、という記載があります。

●reference | shuffle()
　https://p5js.org/reference/#/p5/shuffle

そのアルゴリズムに関しては、例えば以下を見ると、改良版のアルゴリズムもあるような話があったりするようです。

●JavaScript で シャッフルする - Qiita
　https://qiita.com/pure-adachi/items/77fdf665ff6e5ea22128
●フィッシャー–イェーツのシャッフル - Wikipedia
　https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A3%E3%83%83%E3%82%B7%E3%83%A3%E3%83%BC%E2%80%93%E3%82%A4%E3%82%A7%E3%83%BC%E3%83%84%E3%81%AE%E3%82%B7%E3%83%A3%E3%83%83%E3%83%95%E3%83%AB

改良版にあたるものはダステンフェルドの手法や Durstenfeld shuffle という呼ばれ方をしているようです。

●Durstenfeld shuffle
　https://gist.github.com/webbower/8d19b714ded3ec53d1d7ed32b79fdbac
●Alg009_ダステンフェルドのシャッフル – しめじのネタ帳
　http://ozateck.sakura.ne.jp/wordpress/2018/09/05/alg009_%E3%83%80%E3%82%B9%E3%83%86%E3%83%B3%E3%83%95%E3%82%A7%E3%83%AB%E3%83%89%E3%81%AE%E3%82%B7%E3%83%A3%E3%83%83%E3%83%95%E3%83%AB/