本記事では、サイドバーで目次を表示する方法を解説しています。JAMStackでブログを作る際に、必要になると思います。参考になれば幸いです。

## JavaScriptのコード

本ブログでは、Nuxt.jsを使っているのですが、JavaScriptを使用しているので、基本的な実装方法はどのフレームワークを使用しても変わらないと思います。

```js
document.addEventListener("DOMContentLoaded", () => {
  const article = document.querySelector(".article")
  const heads = article.querySelectorAll("h1, h2")
  if (heads && heads.length) {
    let contents = ""
    heads.forEach((head, i) => {
      contents += `<li><a href="#head${i}">${head.textContent}</a></li>`
      head.innerHTML += `<a id="head${i}"></a>`
    })
    document.querySelector(
      "#table-of-content"
    ).innerHTML += `<ol>${contents}</ol>`
  }
})
```

[Window: DOMContentLoaded イベント](https://developer.mozilla.org/ja/docs/Web/API/Window/DOMContentLoaded_event)で、最初の HTML 文書の読み込みと解析が完了を待ってから、Headタグを取得します。

`document.querySelector(".article")` で記事のセレクタを取得します。

次に`article.querySelectorAll("h1, h2")`で`h1`と`h2`タグを取得しています。

そして、`"#table-of-content"`にHTMLを挿入しています。

## HTMLのコード

```html
<div id="table-of-content" />
```

このようにidを指定していれば、HTMLが挿入されます。

セレクタは、classでもidでも良いと思います。

## Vue.jsの場合

`mounted`の中に、JavaScriptのコードを入れてあげてください。

```js
mounted() {
  // JavaScriptのコード
}
```

`created`の中にコードを入れてしまうと、`document`が読み込めないので、注意しましょう。

本記事では、サイドバーで目次を表示する方法を解説しています。JAMStackでブログを作る際に、必要になると思います。参考になれば幸いです。

JavaScriptでサイドバーに目次を表示する方法

<p>本記事では、サイドバーで目次を表示する方法を解説しています。JAMStackでブログを作る際に、必要になると思います。参考になれば幸いです。</p>
<h2>JavaScriptのコード</h2>
<p>本ブログでは、Nuxt.jsを...

非同期処理を挟み、`window.open()`を実行すると、ポップアップブロックに引っかかる。

（Reactで実装）

```ts
const handleClick = async () => {
  try {
    const url = await getURL() // 非同期処理
    open.window(url, '_blank')
  } catch (e) {
    console.error(e)
  }
}
```

とにかく別タブで開きたい。

## 回避策1

先に空のwindowを開き、後でurlを入れる。

errorなどでcloseなどを行う。

（手元のChrome,Safari,Edge,Firefoxでは機能した）

```ts
const handleClick = async () => {
  try {
    let openWindow = window.open('', '_blank')
    const url = await getURL() // 非同期処理
    openWindow.localtion.href = openWindow
  } catch (e) {
    openWindow.close()
    console.error(e)
  }
}
```

https://stackoverflow.com/questions/2587677/avoid-browser-popup-blockers#answer-25050893

## 回避策2

諦めて、処理を分ける。

```ts
const [targetURL, setTargetURL] = useState('')

const handleGenerateURL = async () => {
    try {
    const url = await getURL() // 非同期処理
    setTargetURL(url)
  } catch (e) {
    console.error(e)
  }
}

const handleClick = async () => {
  targetURL && window.open(targetURL, '_blank')
}
```

## 回避策3

`useEffect()`を使用して、`{ href && <a href={href} />}`のようにセットしておく

window.open時のポップアップブロックの回避

```js
const arr = [
  {
    id: 1,
    age: 18
  },
  {
    id: 2,
    age: 20
  }
];

// idが消える
const output = arr.map(({ id, ...a }) => a);
console.log("output:", output);
```

[javascript - スプレッド演算子からプロパティを削除するには? - スタックオーバーフロー](https://stackoverflow.com/questions/56155922/how-to-delete-property-from-spread-operator)

[Destructuring assignment - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Rest_in_Object_Destructuring)

JS Objectの配列から特定のKeyを消す

## 特定の単語を抽出する

[danger/danger-js: ⚠️ Stop saying "you forgot to …" in code review](https://github.com/danger/danger-js)などで抽出するときに使用する。

```js
const keyword = "lookup";
const content = "aaaa lookup"
console.log('1:',content.match(new RegExp(`\b${keyword}\b`))) // Bad
console.log('2:', content.match(new RegExp(`\\b${keyword}\\b`))) // Good

// https://stackoverflow.com/questions/25938990/regex-b-word-boundary-not-works
const keyword2 = "lookup";
const content2 = "aaaa \blookup\b"
console.log('2-1:',content2.match(new RegExp(`\b${keyword2}\b`))) // match
```

`\b`: 単語境界マッチ。空白のことかな？

テンプレートリテラルが最初に実行されるのでエスケープしないといけない？

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp#%E3%82%B3%E3%83%B3%E3%82%B9%E3%83%88%E3%83%A9%E3%82%AF%E3%82%BF%E3%83%BC%E3%81%AE%E3%83%95%E3%83%A9%E3%82%B0 書いてあった

> コンストラクター関数を使用する場合は、通常の文字エスケープ規則 (文字列内に特殊文字が含まれるとき、前に \ を付加する) が必須です。

JS 正規表現まとめ

- [regex - Using JavaScript to check whether a string contains Japanese characters (including kanji) - Stack Overflow](https://stackoverflow.com/questions/15033196/using-javascript-to-check-whether-a-string-contains-japanese-characters-includi)
- [Unicode Kanji Code Table](http://www.rikai.com/library/kanjitables/kanji_codes.unicode.shtml)

```ts
// ひらがな・全角カタカナ・漢字・アルファベットを許容
value.match(/^[a-zA-Z\u3040-\u309f\u30a0-\u30ff\u4e00-\u9faf\u3400-\u4dbf]+$/))
```

全角１や全角！を排除しやすくするために、半角カタカナも排除している。

 JS 日本語のバリデーション

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

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

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

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

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

```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でサイドバーに目次を表示する方法

JavaScriptのコード

HTMLのコード

Vue.jsの場合

Related

Tags

Share

Table of Contents