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](https://editor.p5js.org/)」を使ってみたり、一部は p5.js の処理と少し混ぜてみたりしました。

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

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

## 試した部分のソースコード
### 1. Generating a Random Number Within a Range
これは p5.js の場合は、[random()](https://p5js.org/reference/#/p5/random) と [floor()](https://p5js.org/reference/#/p5/floor) を使えば簡単に実現できてしまうやつでした。
元記事の内容だと、「randomInt」と書いている部分は「random」ですが、p5.js の random() を上書きしてしまうため、試す時は名前を変えておくことにしました。

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

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

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

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

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

### 3. Generate a Random Hex Code
これは、活用法が思いつきそうなやつでした。

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

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

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

### 4. Shuffle an Array
p5.js の場合は、[shuffle()](https://p5js.org/reference/#/p5/shuffle) で実現できてしまうものでした。

```javascript
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 だと、以下で似たようなことができます。

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

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

### 9. Get a Random Boolean
真偽値をランダムに生成するというものになります。

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

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

```javascript
  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
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5a5c5f00-5b1d-759c-1bae-a5a1d6b2a7c2.png)

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

●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/