
### JavaScriptの値をリアルタイムに監視する
![watch](https://i.gyazo.com/6672149b7ec1d9594b135a95b466d3df.png)　　
目のマークをクリック、監視したい対象を記述する。  

Next.jsのpropsなどもこのように指定することで見れる。  
![__NEXT_DATA](https://i.gyazo.com/c0aea2fc27e14a4e81581efbdf7accc3.png)

### minifyされたJSファイルを見やすくする
巷でいうpritty printは「{}」と表示された箇所をクリック
![minified](https://i.gyazo.com/6dc5d5259c2116dd0be1580eae2da93b.png)
![prittyprint](https://i.gyazo.com/5f7cc0e5ce0a3abed4685a13992fd689.png)

### ブレークポイント

| ブレークポイントの設定できるもの | 説明 |
|:-----------|:------------|
| Line-of-code|	On an exact region of code. |
| DOM|	On the code that changes or removes a specific DOM node, or its children.|
| XHR	|When an XHR URL contains a string pattern.|
| Event listener|	On the code that runs after an event, such as click, is fired.|
| Exception|	On the line of code that is throwing a caught or uncaught exception.|
| Function	| Whenever a specific function is called.|

詳しくは[ここ](https://developer.chrome.com/docs/devtools/javascript/breakpoints/)を見てくれ

DOMを右クリックして「BreakOn」から設定したり、Sourceタブの右側からXHR(Fetch)をリクエスト先を指定して設定したりできる。

### console
Node.jsで使うことの方が多いが、一応紹介
#### console.dir
HTML Elementを見るときなどにconsole.logだと出力してくれない情報などがあって便利
```js
const obj = getElementById('hoge')
console.dir(obj)
```

#### console.time
実行時間を調べたいとき
```js
console.time();
for (var i = 0; i < 100000; i++) {
  let square = i ** 2;
}
console.timeEnd();
```

![console.time実行結果](https://i.gyazo.com/1e32408254a932443cfc9763d5ad213e.png)

### その他一言
#### performanceタブ
ボトルネックになっている箇所を調べるときに。パフォーマンス改善したいならとりあえず見るとこ。

#### networkタブ
APIとのやりとりを見ようね。  

飽きた。

### 参考文献
- [Watch JavaScript values in real-time with Live Expressions - Chrome Developers](https://developer.chrome.com/docs/devtools/console/live-expressions/)
- [Pause your code with breakpoints - Chrome Developers](https://developer.chrome.com/docs/devtools/javascript/breakpoints/)
- [Console API reference - Chrome Developers](https://developer.chrome.com/docs/devtools/console/api/)

ちょっと目に止まったディベロッパーツールの機能を紹介

Chromeディベロッパーツールを使おう


### 疑問
console.logの上書きで本番環境はデバッグメッセージを表示させないという技を知ったが、これがメモリに影響ないのかどうか知りたい。
```javascript
console.log = () => {}
```
ちなみに最近ディベロッパーツールでメモリーのスナップショットを撮るという技を知った。

Create React Appで適当に作ったプロジェクトで適当にconsole.logを出力してみた。
![ソース](https://i.gyazo.com/f55499b3db011a5c81d04c58d71b089b.png)

`console.log`の呼び出しを増やしてブラウザを更新->HEAP Snapshot取得すると`console.log`の呼び出し回数に応じてメモリ使用量が一見増えるように見えたが、しばらく放置して再びHEAP Snapshotを取得するとメモリ使用量が低水準にまで戻る。GCに回収されたのかな？と想像したが、よくわからない。
![メモリ](https://i.gyazo.com/1ef68f7e017d8ed2309a6ff90d9036ad.png)

### 結論
ほぼ影響はない


cosole.logをソースコードに残しておくことのメモリへの影響について

Reactはあまり関係ないです。

筆者はReactからWebの世界に入ったため、Reactの世界観からWeb標準技術を見ることが多いですが、Reactのドキュメントを読んでいるとWeb標準なのかReactの世界の話なのかがよくわからないまま進んでしまいます。そんな状況だったので、JavaScriptの勉強を改めてしていたところに「Reactをやっていて出てきた言葉だけど、なんかよくわからないからスルーしたやつだ！」と再会を果たしたので記念にこの記事を書いています。

### 例題

```tsx
function Hoge() {
  return (
    <div onClick={() => console.log("test")}>
      <p onClick={() => console.log("p")} >pだよ</p>
    </div>
  );
}
```
作成した`<p/>`をクリックすると次のようになります。これが何気なく目にしている挙動と書き方だと思います。

![実行結果1](https://i.gyazo.com/63f658d09ff5f2711823f9e01fc1c2a1.png)


次に`onClickCapture`という属性からconsole.logで結果を出力してみましょう。

```tsx
function Hoge() {
  return (
    <div onClickCapture={() => console.log("test")}>
      <p onClick={() => console.log("p")} >pだよ</p>
    </div>
  );
}
```

console.logで出力される順序が変わりました。

![実行結果2](https://i.gyazo.com/3fb88bf4ba65dbc23410e35d38cf89d9.png)

これはWEBの標準仕様、DOMのイベントフローに基づいた仕様なのでvanillaJSであろうが、Reactであろうが元の考え方は一緒です。


### イベントフロー
`キャプチャリングフェーズ` 親から子へイベントを見ていく処理
|
`ターゲットフェーズ` 発生源の要素に到達した後、その要素自体の処理
|
`バブリングフェーズ` 発生源から親へイベントを見ていく段階
参考: [https://www.w3.org/TR/DOM-Level-3-Events/#event-flow](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)

### JavaScriptとReact
JavaScriptではaddEventListenrで初心者的に何も意識せずにイベントを追加すると、バブリングフェーズでイベントが発火します。

Reactでも通常、ほとんどのイベントでバブリングフェーズで発火します。
> 以下のイベントハンドラはイベント伝搬のバブリングフェーズで呼び出されます。キャプチャフェーズのイベントハンドラを登録するには、イベント名に Capture を追加します。たとえば、キャプチャフェーズでクリックイベントを処理するには onClick の代わりに onClickCapture を使用します。


### addEventListenerの第3引数（オプション）
第3引数にあたるものは`options`、もしくは`useCapture`のプロパティです。構造上、第3引数に急にBoolean(true/false)が現れたら、useCapture属性のことです。
以下に引用したMDNの小難しく感じる文章もそこそこ理解できるようになったのではないでしょうか。


- options
  - capture
    - Boolean値で、この型のイベントがDOMツリーで下に位置するEventTargetに配信dispatchされる前に、登録されたlistenerに配信されることを示します。
  - once
    - Boolean値で、listenerの呼び出しを一回のみのとしたいかどうかを値で指定します。trueを指定すると、listenerは一度実行された時に自動的に削除されます。
- useCapture
  - Boolean値で、この型のイベントが、DOMツリー内の下のEventTargetに配信される前に、登録されたlistenerに配信されるかどうかを示します。ツリーを上方向にバブリングしているイベントは、キャプチャーを使用するように指定されたリスナーを起動しません。イベントのバブリングとキャプチャーは、両方の要素がそのイベントのハンドラーを登録している場合に、別の要素内に入れ子になっている要素で発生するイベントを伝播する2つの方法です。イベント伝播モードは、要素がイベントを受け取る順番を決定します。詳細な説明は DOM Level 3 Events と JavaScript Event order を参照してください。指定されていない場合、useCaptureは既定でfalseとなります。


### 参考
- [https://uhyohyo.net/javascript/3_4.html](https://uhyohyo.net/javascript/3_4.html)
- [https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)
- [https://ja.reactjs.org/docs/events.html](https://ja.reactjs.org/docs/events.html)
- [https://ja.reactjs.org/blog/2020/08/10/react-v17-rc.html#no-event-pooling](https://ja.reactjs.org/blog/2020/08/10/react-v17-rc.html#no-event-pooling)


イベントキャプチャリングとバブリング（React）

### フォント
デジタルデータとしてフォントを表示するには切っても切り離せない。
これはもちろんWebの世界でも、ネイティブアプリの世界でも一緒。

フォントがない世界はありえない。

### 歴史？
Adobeはフォントという存在を意識できる人なら誰でも知ってる。
「Adobe Illustrator」「Adobe Photoshop」などに始まり、印刷用に開発されたPostScriptなどを開発したりしていた。

truetype(.ttf)
woff(.wof)
woff2(.woff2)
などの拡張子がある。

### フォントをユーザーにどう届けるか
* クライアントにプリインストールされているフォントを使う
* 自サーバーから配信
* Webフォントを使う（配信されているものにタダ乗り）

#### ライアントにプリインストールされているフォントを使う

- macOS Big Sur
  - [https://support.apple.com/ja-jp/HT211240](https://support.apple.com/ja-jp/HT211240)
- Windows 11
  -  [https://docs.microsoft.com/en-us/typography/fonts/windows_11_font_list](https://docs.microsoft.com/en-us/typography/fonts/windows_11_font_list)
- iOS
  - [https://developer.apple.com/fonts/system-fonts/](https://developer.apple.com/fonts/system-fonts/)
- Android
  - 端末メーカーによる場合があり

#### 自サーバーから配信
主要ブラウザはwoff2に対応しているので、woff2で用意するば十分。

[対応ブラウザ](https://caniuse.com/woff2)

#### Webフォントを使う
有名なものとして
- [Google Fonts](https://googlefonts.github.io/japanese/)
- [REALTYPE](https://www.realtype.jp/)


### 参考文献
- [各OSの標準搭載フォント一覧へのリンク集  |  Rriver](https://parashuto.com/rriver/development/preinstalled-font-list-by-operating-system)



フォントについて


まずはこちらをご覧ください。毒々しいCSSが施されたselect要素です。
![chrome-normal](https://i.gyazo.com/a3079d8e10a42eb46b9d55d1f99e6c97.png)

上の画像のようなちょっと変わったデザインのselect要素を作った時、ChromeやOperaではfocus状態の時は次のようになります。  
![chrome-focus-default](https://i.gyazo.com/15638460feada9a82dfb8df92a5ccc7b.png)

毒々しくしたいのですがデフォルトの青い枠線が中途半端にかかり、邪魔になっています。
そんな時、borderとかなり似ている[outline](https://developer.mozilla.org/en-US/docs/Web/CSS/outline)というプロパティを使います。
```css
.poison-select:focus {
  outline: 1px solid #ff0;
  /* Chromeなどでのデフォルトの色味を設定したい場合は「-webkit-focus-ring-color」を設定する */
  /* outline: 1px solid -webkit-focus-ring-color; */
}
```

![chrome-focus-custom](https://i.gyazo.com/81d1875832d0538bdded5a56d7af5895.png)

いい感じにすることができました。  
safariでも見てみましょう。

![safari-focus-without-offset](https://i.gyazo.com/151a452bffb8191e2c8949781dc14769.png)

違和感がありますよね？  
大きく2点で違いがあります。
* safariではselect要素の内側にfocus時の枠線ができる
* safariではoutline要素にradiusが効かない(※2023年3月27日リリースの[Safari V16.4](https://webkit.org/blog/13966/webkit-features-in-safari-16-4/)から解消)

主に1点目の「select要素の内側にfocus時の枠線ができる」時の対策に[outline-offset](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset)を明示的に設定(0pxで)してあげます。

```css
.poison-select:focus {
  outline: 1px solid #ff0;
  outline-offset: 0px;
}
```
すると綺麗になります。  
![safari-focus-without-offset](https://i.gyazo.com/65572abbec5eaf9876f7e66ceef26857.png)


### Reproduction
<iframe src="https://codesandbox.io/embed/affectionate-surf-e2w97d?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="affectionate-surf-e2w97d"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

### 参考文献
- [outlineプロパティで作った枠線は角丸にすることができない - dskd](https://dskd.jp/archives/73.html)
- [css - What is the default style of the blue focus outline in Chrome? - Stack Overflow](https://stackoverflow.com/questions/20609485/what-is-the-default-style-of-the-blue-focus-outline-in-chrome)

やっぱりsafariはおかしいね。select要素を少しカスタマイズしようとしたところにも地雷がある。

select要素をCSSでカスタマイズする際に気をつけるべきブラウザごとの差


### 著者近況
転職を経てシステム開発会社に入社して2ヶ月。知らないことばかりが頭上を飛び交うドタバタの中、合間を縫って引っ越しをした。少し新しい生活に慣れ始めた今日この頃。久々に自分の興味を昇華しようとGitHubで他人のdotfilesを覗いたりしている。なお当人はMacのデフォルトのterminalを使い続け、特に設定にこだわろうとしたことすらなかったところ。

## Tips

### Webブラウザを簡易的なメモ帳として使う
アドレスバーに以下を入力しEnter
`data:text/html, <html contenteditable>`

htmlなのでstyleの指定やscriptタグも読み込める。
`data:text/html, <html contenteditable style="font-style: italic;">`

### Zsh
#### historyの検索
`control + r` でhistoryからの検索&実行ができる

#### cd系
pushdとpopdとこれらを使うのに便利な設定
```shell
# This is in ~/.zshrc
setopt auto_pushd
setopt pushd_ignore_dups
```

#### history系
```shell
# This is in ~/.zshrc
setopt hist_ignore_dups
setopt share_history
setopt inc_append_history
```

#### Zshのオプションの一覧(Web）はここ
[https://zsh.sourceforge.io/Doc/Release/Options-Index.html](https://zsh.sourceforge.io/Doc/Release/Options-Index.html)


### Mac標準TerminalとiTerm2
使ってて一番違うのが"色"という自分なりの結論。
[pastel](https://github.com/sharkdp/pastel)をbrew installして使ってみるのが体感しやすかった。
今まで標準のTerminalを使っていたが、nvimを試している中でiTerm2に乗り換えることにした。


### 周辺用語
- true color 
- 16bit color 
- 24bit color

### 参考文献
- [ブラウザのタブがメモ帳になる技が便利　とっさに何かメモりたいときなどに](https://nlab.itmedia.co.jp/nl/articles/2207/06/news129.html)
- [現役シリコンバレーエンジニアが教える NeoVim(VIM) + Tmux + Zsh 入門](https://www.udemy.com/course/vim-tmux-zsh/)

2022年度に知ったTipsまとめその1

最近知ったTips


### 疑問
WebブラウザではV8エンジンがJavaScriptを解釈・実行するのはわかったが、JavaScriptに埋め込まれたwasm（別言語・npm）で提供されている場合もV8エンジンが同一スレッド内でwasmを解釈・実行するの？
V8がhidden classを作成して、、、

### 参考文献
- [https://postd.cc/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code/](https://postd.cc/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code/)


疑問メモ_WASMとV8エンジン

### 疑問に遭遇した状況
ネットサーフィンをしていて`<head/>`を覗いていた

### 疑問
csp-hashディレクティブって何？なんのために使うの？

どうもcspは Content-Security-Policy の略っぽい。
```html
<script csp-hash>
  if (/Mac OS X/.test(navigator.userAgent))document.documentElement.classList.add('apple')
</script>
```

このブログがわかりやすかった気がしたが、わからなかった。[CSP(コンテンツセキュリティポリシー)について調べてみた - SSTエンジニアブログ](https://techblog.securesky-tech.com/entry/2020/05/21/)


### 参考文献
- [patterns.dev](https://www.patterns.dev/)
- [CSP(コンテンツセキュリティポリシー)について調べてみた - SSTエンジニアブログ](https://techblog.securesky-tech.com/entry/2020/05/21/)


ikmnjrd.github.io

Webブラウザの投稿記事一覧