https://github.com/remarkjs/react-markdown

[GitHub](https://github.com/remarkjs/react-markdown)

Markdownでいい感じにOGPを表示する

<p>https://github.com/remarkjs/react-markdown</p>
<p><a href="https://github.com/remarkjs/react-markdown">GitHub</a></p>...

JSで最後の文字列を取得する

再起関数を書く機会にパフォーマンスが気になったのでメモ。

```js
const startTime = performance.now(); // 開始時間
someFunc(); // 計測する処理
const endTime = performance.now(); // 終了時間
console.log(endTime - startTime); // 何ミリ秒かかったかを表示する
```

計測結果

```
map: 0.19999998807907104
for: 0.7000000476837158
```

結論: mapの方が早い

forEachとfor...ofとforの中では、forEachが一番パフォーマンスがよく。forEachとmapでは、mapの方が良いみたい。

他のもの

```ts
if (Array.isArray(action.payload)) {
  state.items = [...state.items, ...action.payload]
} else {
  state.items = [...state.items, action.payload]
}
```

```ts
const payload = action.payload
const pushed = Array.isArray(payload) ? payload : [payload]
state.items.push(...pushed)
```

```
0.20000004768371582
0.30000007152557373
```

- [Performance of JavaScript .forEach, .map and .reduce vs for and for..of](https://leanylabs.com/blog/js-forEach-map-reduce-vs-for-for_of/)
- [JavaScriptで任意の処理にかかる時間を計測する](https://sbfl.net/blog/2017/12/01/javascript-measure-time/)


JSで関数の実行時間を調べる

## 問題

重い処理と軽い処理が混在するケースで、いい感じにローディングを表示させたいが、__処理が早い場合、ローディングがチラついてしまう。__

## 解決策

処理が早すぎる場合を考慮して、`1000ms(1秒)　-　実行時間`表示を遅延させ、`1000ms以上`実行時間がある場合は、遅延時間`0ms`にする。

## コード

```tsx
const [isLoading, setIsLoading] = useState(false)

const handleUpdate = () => {
  setIsLoading(true) // ローディング状態にする
  const startTime = new Date().getTime()　// 計測開始時間
  dispatch(update())
    .then(() => {})
    .catch(() => {})
    .finally(() => {
      const currentTime = new Date().getTime()　// 計測終了時間
      const executionTime = currentTime - startTime　// 実行時間
      const delayTime = 1000 - executionTime　// 表示を遅延させる時間
      // ローディング状態を解除する
      setTimeout(() => setIsLoading(false), Math.max(delayTime, 0))
    })
}
```

### ショートコード

```tsx
setTimeout(() => setIsLoading(false), Math.max(1000 - (currentTime - startTime), 0))
```

## hooksを作る

凝縮性

[javascript-useStatesetメソッドは変更をすぐには反映しません-StackOverflow](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately)

```ts
import { useState } from 'react'

export const useLoading = () => {
  const [isLoading, setIsLoading] = useState(false)
  let startTime = 0

  const startLoading = () => {
    setIsLoading(true)
    startTime = new Date().getTime()
  }

  /**
   * ローディングを終了する
   * @param minWaitTime ローディングが完了するまでの最小待ち時間
   */
  const endLoading = (minWaitTime: number = 1000) => {
    const currentTime = new Date().getTime()
    const executionTime = currentTime - startTime
    const delayTime = minWaitTime - executionTime
    setTimeout(() => {
      setIsLoading(false)
      startTime = 0
    }, Math.max(delayTime, 0))
  }

  return { isLoading, startLoading, endLoading }
}

```

## 解説

実行時間が1000ms以下の場合、`delayTime`は、`0 ~ 999`の値になる。

実行時間が1000ms以上の場合、`delayTime`は、`-(マイナス)`になるので、`Math.max(delayTime, 0))`で0が返され、遅延時間が0msになる。

## 参考

- [Math.max() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/max)
- [javascript-useStatesetメソッドは変更をすぐには反映しません-StackOverflow](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately)

JavaScript 実行時間・遅延時間の計算

## Formula

1, 1, 2, 3, 5, 8, 13, 21.... と続いていく数式

$
Fn = Fn-1 + Fn-2 
$

## Noob

```js
function fib(n) {
  if (n === 0 || n === 1) {
    return 1;
  } else {
    return fib(n - 1) + fib(n - 2);
  }
}

// 出力
console.log(fib(0)); // 1
console.log(fib(1)); // 1
console.log(fib(2)); // 2
console.log(fib(3)); // 3
console.log(fib(4)); // 5
console.log(fib(50)); // stackoverflow
```

> スタックオーバーフロー ≒ メモリ不足。コールスタックを超えていった

## Student

```ts
const fib = (n: number): number => (n <= 1 ? n : fib(n - 1) + fib(n - 2));

console.log("fib:", fib(50)); // stackoverflow
```

## Expert

```ts
  const memoFib = (n: number) => {
    const memo = new Map();
    memo.set(0, 0);
    memo.set(1, 1);
    const fib_ = (n: number) => {
      if (memo.has(n)) {
        return memo.get(n);
      }
      const result: number = fib_(n - 1) + fib_(n - 2);
      memo.set(n, result);
      return result;
    };
    return fib_(n);
  };

  console.log(memoFib(50)); // 👌
```

## 学び

- __参照透過性__: 入力(渡す値)が同じであれば、出力（戻り値）が同じであるという性質
- __副作用__: 関数とは引数を受け取り、値を返すものである。それ以外の振る舞いを副作用と名付けた。望まれない子か救世主か。それは、生みの親に委ねられた。子供に罪はないと人々は豪語する。
- __純粋関数__: 副作用のないピュアな関数 


JavaScript フィボナッチでスタックオーバーフローをちょっと観察

```js
const getLengthOfOptiomalCompression = function(str) {
  if (str.length === 0) {
    console.log('Please enter valid string.');
    return;
  }

  let output = '';
  let count = '';
  for (let i = 0; i < str.length; i++) {
    count++;
    if (str[i] !== str[i+1]) {
      output += str[i] + count;
      count = 0;
    }
  }
  console.log(output);
}

getLengthOfOptiomalCompression('aaaa');
getLengthOfOptiomalCompression('aaaabbccddd');

```

JavaScript Run-length encoding

- [クロージャ - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures)
- [You-Dont-Know-JS/README.md at 2nd-ed · getify/You-Dont-Know-JS](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/README.md)

> クロージャは「関数」と「その関数が作られた環境」という 2 つのものの組み合わせです。

```js
function makeFunc(name) {
  return function(age) {
    return `${name}の年齢は、${age}ですね！`;
  };
}

const func1 = makeFunc("田中太郎");
const func2 = makeFunc("山田太郎");

console.log(func1(22)); // 田中太郎の年齢は、22ですね！
console.log(func2(23)); // 山田太郎の年齢は、23ですね！
```

## クロージャでプライベートメソッドの模倣

```js
// Module Pattern
const counterModule = (function() {
  let count = 0;

  return {
    increment: function() {
      count++;
    },
    show: function() {
      console.log(count);
    }
  };
})();

counterModule.show(); // 0
counterModule.increment();
counterModule.show(); // 1
console.log(count); // ReferenceError: count is not defined
```

[IIFE (Immediately Executed Function Expression) --MDN Web Docs Glossary: Definition of Web-related Terms | MDN](https://developer-mozilla-org.translate.goog/ja/docs/Glossary/IIFE?_x_tr_sl=ja&_x_tr_tl=en&_x_tr_hl=en&_x_tr_pto=nui,sc)

Bad Case:

> アロー関数 call、apply、bind のような、一般にスコープの設定のためのメソッドには適していません。

[アロー関数式 - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

JavaScript Closure

```js
str = "http://example.com";
str = str.replace("http://", "https://");

console.log(str);
// "https://example.com"
```

正規表現で先頭だけでも良いかも

JavaScript http https replace

```js
let lastElement = array.slice(-1)[0];
// or 
let lastElement = array[array.length - 1];
```

Markdownでいい感じにOGPを表示する

関連記事

記事のタグ

Share?