
ハンズオンJavaScriptを進めていく上での補助記事その３です。


- やること：配列（array）,for文, for-of文, if文
- やらないこと：Object,アロー関数 など


## クイズゲームの作成 その３

### 配列とfor文を使い、処理を繰り返す。 （P75 2.12 配列  P104 3.5処理を繰り返す）
さらに短くしていきます。今回作った関数*removeAnswer*を３回繰り返しているので、これを**配列(array)** と**for文** を使って短縮します。

まずは**配列(array)** についてです。

配列を使うことで、複数の要素（リテラル）を順番にまとめて管理することができます。
宣言の仕方は[ ]で囲むことです。
```javascript
    fruits = ["りんご","みかん","バナナ"]
```

次に繰り返し処理を行う**for文**です。
これは他の言語とほぼ同じ書き方なので省略します。

これらを使うとremoveAnswerと書くのが１度で済みます。

```html
<script>
    function removeAnswer(answer) {
        const answerElement = document.getElementById(answer);
        answerElement.removeAttribute("class");
        answerElement.textContent = answer;
    }

    document.getElementById("A").addEventListener("click", function () {
        this.setAttribute("class", "true");
        this.textContent = "正解";
        buttons = ["B","C","D"];
        for (let i = 0; i < 3; i++;){
            removeAnswer(buttons[i])
        }
    })

    // 略
</script>
```
さらに、**for-of文**を使うとより短くなります。
Javaでいう拡張for文であり、ofの後ろに入れた配列を順番に取り出す構文です。

```html
<script>
    // 略
    document.getElementById("A").addEventListener("click", function () {
        this.setAttribute("class", "true");
        this.textContent = "正解";
        for (const ans of ["B","C","D"]){
            removeAnswer(ans)
        }
    })
</script>
```

### if文　（P97 3.4 処理を分岐する）

毎回["B","C","D"] や ["A","B","D"]などと特定の要素を抜く配列を書くのは面倒です。<br/>
条件分岐を行う**if文**を使って簡単にしたいと思います。
まずは buttons  = ["A","B","C","D"]; という配列を作った上で、
if文と !== 演算子を使い、各クリックごとに特定の要素だけを除外します。

```html
<script>
    // 略

    buttons  = ["A","B","C","D"];
    document.getElementById("A").addEventListener("click", function () {
        this.setAttribute("class", "true");
        this.textContent = "正解";
        for (const button of buttons){
            if (button !== "A"){
                removeAnswer(button)
            }
        }
    })
    document.getElementById("B").addEventListener("click", function () {
        this.setAttribute("class", "false");
        this.textContent = "不正解";
        for (const button of buttons){
            if (button !== "B"){
                removeAnswer(button)
            }
        }
    })
    document.getElementById("C").addEventListener("click", function () {
        this.setAttribute("class", "false");
        this.textContent = "不正解";
        for (const button of buttons){
            if (button !== "C"){
                removeAnswer(button)
            }
        }
    })
    document.getElementById("D").addEventListener("click", function () {
        this.setAttribute("class", "false");
        this.textContent = "不正解";
        for (const button of buttons){
            if (button !== "D"){
                removeAnswer(button)
            }
        }
    })
</script>
```
### if文を使ってクリック動作を関数にまとめる
「このクリックをする」という処理は同じことが書かれているので、ここも一つの関数にしたいと思います。
if文使ってクリックされたボタンによって条件分岐させてあげます。

```html
<script>
    // 略

    buttons  = ["A","B","C","D"];

    function clickBotton(clickBotton) {
        document.getElementById(clickBotton).addEventListener("click", function () {
            if (clickBotton = "A"){
                this.setAttribute("class", "true");
                this.textContent = "正解";  
            } else {
                this.setAttribute("class", "false");
                this.textContent = "不正解";
            }
            for (const button of buttons) {
                if (button !== selectBotton) {
                    removeAnswer(button)
                }
            }
        })
    }

    clickBotton("A");
    clickBotton("B");
    clickBotton("C");
    clickBotton("D");
</script>
```

最後の４行もforループを使ってまとめましょう。

```html
<script>
    // 略

    for (const btn of buttons){
        clickBotton(btn)
    }
</script>
```

以下、３日目の完成形です。<br/>
当初に比べてかなり短くなりました。

```html
<script>
    buttons  = ["A","B","C","D"];

    function removeAnswer(answer) {
        const answerElement = document.getElementById(answer);
        answerElement.removeAttribute("class");
        answerElement.textContent = answer;
    }

    function clickButton(clickButton) {
        document.getElementById(clickButton).addEventListener("click", function () {
            if (clickButton === "A") {
                this.setAttribute("class", "true");
                this.textContent = "正解";
            } else {
                this.setAttribute("class", "false");
                this.textContent = "不正解";
            }
            for (const button of buttons) {
                if (button !== clickButton) {
                    removeAnswer(button)
                }
            }
        })
    }

    for (const btn of buttons) {
        clickButton(btn)
    }

</script>
```

<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=blogtukki-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=4873119227&linkId=70e51d79bcd70d5aa03ca0c65b7dffb1"></iframe>

JavaScriptでクイズゲームを作る③

【ハンズオンJavaScript】最速でJavaScriptを扱えるようになる ３日目 クイズゲーム③


ハンズオンJavaScriptを進めていく上での補助記事その２です。


- やること：removeAttribute(),DRYの法則,const,function()
- やらないこと：for,if,配列,Object,アロー関数 など


## クイズゲームの作成 その２
### おさらい

*addEventListener()*,*getElementById()* ,*setAttribute()* を使ってクイズゲームの最低限の機能を持たせた場合、
こんな感じになると思います。（cssはテキトー）

```html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            margin-left: -20px;
        }
        li {
            width: 800px;
            height: 75px;
            margin-bottom: 10px;
            padding: 10px;
            font-size: 24px;
            border: 1px black solid;
            background-color: yellowgreen
        }
        .mondai {
            width: 800px;
            height: 200px;
            margin-left: 20px;
            padding: 10px;
            font-size: 24px;
            border: 1px black solid;
            background-color: orange;
        }
        .true {
            background-color: blue;
            color: white;
        }
        .false {
            background-color: red;
            color: white;
        }
    </style>
</head>

<body>
    <div class = "mondai">
        <p>問題文</p>
    </div>
    <ul>
        <li id="A">A</li>
        <li id="B">B</li>
        <li id="C">C</li>
        <li id="D">D</li>
    </ul>
</body>
<script>
    document.getElementById("A").addEventListener("click", function () {
        this.setAttribute("class", "true");
        this.textContent = "正解";
    })
    document.getElementById("B").addEventListener("click", function () {
        this.setAttribute("class", "false");
        this.textContent = "不正解";
    })
    document.getElementById("C").addEventListener("click", function () {
        this.setAttribute("class", "false");
        this.textContent = "不正解";
    })
    document.getElementById("D").addEventListener("click", function () {
        this.setAttribute("class", "false");
        this.textContent = "不正解";
    })
</script>

</html>
```

![クイズ２日目start](/images/2021年/5月/quiz2_start.png)

複数選択すると下記のように全て色が変化します。

![クイズ２日目start_1](/images/2021年/5月/quiz2_start_1.png)


### removeAttributeでclass要素を削除する
同時に違う回答を選べるのはクイズとして良くないので、１度に選べる選択肢は１つにします。<br/>
そのために、「ある選択肢を選ぶと他の選択肢のclass属性と文字は元に戻る。」という仕様にしました。
*removeAttribute("class")* を使い、クリックした時にclass属性を削除するコードを追加します。

```html
<script>
    document.getElementById("A").addEventListener("click", function () {
        this.setAttribute("class", "true");
        this.textContent = "正解";
        document.getElementById("B").removeAttribute("class");
        document.getElementById("B").textContent = "B";
        document.getElementById("C").removeAttribute("class");
        document.getElementById("C").textContent = "C";
        document.getElementById("D").removeAttribute("class");
        document.getElementById("D").textContent = "D";
    })
    document.getElementById("B").addEventListener("click", function () {
        this.setAttribute("class", "false");
        this.textContent = "不正解";
        document.getElementById("A").removeAttribute("class");
        document.getElementById("A").textContent = "A";
        document.getElementById("C").removeAttribute("class");
        document.getElementById("C").textContent = "C";
        document.getElementById("D").removeAttribute("class");
        document.getElementById("D").textContent = "D";
    })
    document.getElementById("C").addEventListener("click", function () {
        this.setAttribute("class", "false");
        this.textContent = "不正解";
        document.getElementById("A").removeAttribute("class");
        document.getElementById("A").textContent = "A";
        document.getElementById("B").removeAttribute("class");
        document.getElementById("B").textContent = "B";
        document.getElementById("D").removeAttribute("class");
        document.getElementById("D").textContent = "D";
    })
    document.getElementById("D").addEventListener("click", function () {
        this.setAttribute("class", "false");
        this.textContent = "不正解";
        document.getElementById("A").removeAttribute("class");
        document.getElementById("A").textContent = "A";
        document.getElementById("B").removeAttribute("class");
        document.getElementById("B").textContent = "B";
        document.getElementById("C").removeAttribute("class");
        document.getElementById("C").textContent = "C";
    })
</script>
```

![クイズ２日目start_2](/images/2021年/5月/quiz2_start_2.png)

### 定数宣言のconstを使いをデータを一つにまとめる。 P32 2.3定数
上記のコードには同じキーワードがたくさん出てくるため、書くのは少し面倒でした。<br/>
ところで、プログラミングの世界にはDRY(Don't Repeat Yourself:繰り返しを避けろ)という原則があります。<br/>
これはAndy HuntとDave Thomaの著書「達人プログラマー」に出てくる有名な原則です。<br/>
（達人プログラマーは先日２０周年記念版として第２版が出ました。オススメ。）<br/>
[達人プログラマー ―熟達に向けたあなたの旅― 第2版](https://www.amazon.co.jp/dp/B08T9BXSVD/ref=cm_sw_r_tw_dp_6KYWX0RTVBW0YAS6B8G3?_encoding=UTF8&psc=1)<br/>


この原則に従い同じものは共通化していこうと思います。

まずは、JavaScriptで定数を宣言するキーワードである**const**を使います。
**const**を使い、何度も出てくるdocument.getElementById()を定数に代入します。

```html
<script>
    const answerA = document.getElementById("A");
    const answerB = document.getElementById("B");
    const answerC = document.getElementById("C");
    const answerD = document.getElementById("D");

    document.getElementById("A").addEventListener("click", function () {
        this.setAttribute("class", "true");
        this.textContent = "正解";
        answerB.removeAttribute("class");
        answerB.textContent = "B";
        answerC.removeAttribute("class");
        answerC.textContent = "C";
        answerD.removeAttribute("class");
        answerD.textContent = "D";
    })

    // 長いので以下略

</script>
```

これで少しスッキリしました。プログラミングにおいて読みやすいコードというものは正義です。<br/>
コードが短いことは多くの場合読みやすさに繋がります。<br/>
ですが、この処理の中には繰り返しがまだ存在しています。<br/>
この部分でほぼ同じ処理を３回繰り返しています。

```javascript
answerB.removeAttribute("class");
answerB.textContent = "B";
answerC.removeAttribute("class");
answerC.textContent = "C";
answerD.removeAttribute("class");
answerD.textContent = "D";
```

### 関数を使い処理を一つにまとめる。 P110 3章 3.6 関数

同じ部分は関数を用いて一つにまとめることができます。<br/>
今回はfunctionキーワードによって*removeAnswer()* という関数を宣言して、<br/>
「class属性を取り除く処理」と「テキストを初期状態（A ,B ,C ,D）に戻す処理」を関数の中にまとめました。

*removeAnswer(answer)* の*answer* は**引数** と呼びます。
answerに"A"や"B"などを入れることで、関数内部のanswerを使用しているところに"A"や"B"が代入され実行されます。


```html
<script>
    function removeAnswer(answer){
        const answerElement = document.getElementById(answer);
        answerElement.removeAttribute("class");
        answerElement.textContent = answer;
    }

    document.getElementById("A").addEventListener("click", function () {
        this.setAttribute("class", "true");
        this.textContent = "正解";
        removeAnswer("B");
        removeAnswer("C");
        removeAnswer("D");
    })
    document.getElementById("B").addEventListener("click", function () {
        this.setAttribute("class", "false");
        this.textContent = "不正解";
        removeAnswer("A");
        removeAnswer("C");
        removeAnswer("D");
    })
    document.getElementById("C").addEventListener("click", function () {
        this.setAttribute("class", "false");
        this.textContent = "不正解";
        removeAnswer("A");
        removeAnswer("B");
        removeAnswer("D");
    })
    document.getElementById("D").addEventListener("click", function () {
        this.setAttribute("class", "false");
        this.textContent = "不正解";
        removeAnswer("A");
        removeAnswer("B");
        removeAnswer("C");
    })
</script>
```

<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=blogtukki-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=4873119227&linkId=70e51d79bcd70d5aa03ca0c65b7dffb1"></iframe>

JavaScriptでクイズゲームを作る②

【ハンズオンJavaScript】最速でJavaScriptを扱えるようになる ２日目 クイズゲーム②


ハンズオンJavaScriptを進めていく上での補助記事です。
(html,cssの基本が分かっていて、エディターは何を使うとか、scriptの書き方はどうするみたいな話は省略。)

最初に１２章のwebを学ぶから初め、クイズゲームを作ることを目指します。

- やること：addEventListener(),getElementById(),setAttribute(),function()とthis,textContent
- やらないこと：let,const,if,for,Object,アロー関数,イベントハンドラ, など


## 簡単なクイズゲームの作成
### イベントとaddEventListener()
JavaScriptにはクリックやマウスの移動といった出来事に反応してコードを動かすことができます。
このことを**<red>イベント</red>**と呼びます。まず最初に<red>addEventListenr</red>という
モノを用いて、クリックに反応して"Hello World"を出力するサンプルを確認します。

```javascript
document.body.addEventListener("click",function(){
    console.log("Hello World!");
}
```

上記の例では、前から「場所→イベントの種類→やりたいこと」の順番に並んでいます。
- 場所：*document.body*
- イベントの種類: *addEventListener("click", )*
- やりたいこと: *function(){console.log("Hello World")}*

### getElementById()によるID属性の指定
次に場所を指定する方法を見ていきます。<br/>
代表的なのが<red>getElementById()</red> です。これはID属性によって場所を指定することができます。<br/>
また、*function()* 内では<br/>
- <red>this.style.CSSプロパティ名</red>によってCSSを設定・変更する
- <red>this.textContent</red>によってテキストを設定・変更する
といったことをすることができます。

下記にコードで、正解であるAをクリックするとhtmlとcssの変更が適用されます。
```html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            width: 200px;
        }
    </style>
</head>

<body>
    <div>
        <p>問題文</p>
    </div>
    <ul>
        <li id="A">A</li>
        <li id="B">B</li>
        <li id="C">C</li>
        <li id="D">D</li>
    </ul>
</body>
<script>
    document.getElementById("A").addEventListener("click", function () {
        console.log("正解！")
        this.style.backgroundColor = "blue"
        this.style.color = "white"
        this.textContent = "正解!"
        // ついでにthisとは何かを確認する。
        console.log(this) // <li id="A">A</li>
    })
</script>
</html>
```
### setAttribute()による属性の変更
<red>setAttribute()</red>を使うと、属性を変更できることを説明し、class属性を追加してみます。
クリックするとAのクラス属性にtrueが設定され、cssの適用を受けるようになることが確認できます。

```html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            width: 200px;
        }
        .true {
            background-color: blue;
            color: white;
        }
    </style>
</head>

<body>
    <div>
        <p>問題文</p>
    </div>
    <ul>
        <li id="A">A</li>
        <li id="B">B</li>
        <li id="C">C</li>
        <li id="D">D</li>
    </ul>
</body>
<script>
    document.getElementById("A").addEventListener("click", function () {
        console.log("正解！")
        this.setAttribute("class","true")
        this.textContents = "正解!"
    })
</script>
</html>
```

これでクイズゲームの骨格ができましたので、htmlとcssを整えれば最低限の動きを作れると思います。

<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=blogtukki-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=4873119227&linkId=70e51d79bcd70d5aa03ca0c65b7dffb1"></iframe>

JavaScriptでクイズゲームを作る①

【ハンズオンJavaScript】最速でJavaScriptを扱えるようになる １日目　クイズゲーム①


ふわっと分かるなんと無く使えるけど、実はよく理解していないものの代表。

## リテラル(Literal)
「literal」は「文字通り」の意味。
通常はプリミティブ型の値を定義するモノのことを指す。
- ・Boolean型を返す**真偽直リテラル**
- ・Number型を返す**数値リテラル**、**浮動小数点リテラル**
- ・String型を返す**文字列リテラル** など。

これ以外にオブジェクト型の値を定義するリテラルがある。
- ・Arrayオブジェクトのインスタンスとして生成される**配列リテラル**。 [1,2,3]の形式で表記する。いわゆるリストやArrayList
- ・Objextオブジェクトのインスタンスとして生成される**オブジェクトリテラル**。{ key: value } の形式で表記する。いわゆる連想配列やMap
- ・RegExpオブジェクトのインスタンスとして生成される**正規表現リテラル**。/pattern/frags の形式で表記する。

## 配列リテラルの反復処理

Arrayオブジェクトのprototypeメソッドを利用するのが良い。
・引数を１つ取るもの
- ・**map()** 対象の配列の要素ひとつひとつを任意に加工した新しい配列を返す。
- ・**filter()** 与えた条件に適合する要素だけを抽出した新しい配列を返す。
- ・**find()** 与えた条件に適合した最初の要素を返す。(ES2015)
- ・**findIndex()** 与えた条件に適合した最初の要素のインデックスを返す。(ES2015)
- ・**every()** 与えた条件をすべての要素が満たすかを真偽値で返す。
- ・**some()** 与えた条件を満たす要素がひとつでもあるかを真偽値で返す。
- ・**includes()** 指定した値の要素がひとつでも含まれているかを真偽値で返す。(ES2016)

```javascript
const arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.map((n)=>n*2)); //[2,4,6,8,10,12,14,16,18]
console.log(arr.filter((n)=>n%3 === 3)); //[3,6,9]
console.log(arr.find((n)=>n>4)); //5
console.log(arr.findIndex((n)=>n>4)); //4
console.log(arr.every((n)=> n!==0)); //true
console.log(arr.some((n)=> n>= 10)); //false
```


・引数を２つ取るもの
- ・**reduce(n,m)**  nに前回の関数の実行結果、mに対象の配列の要素を順に代入し、結果を返す
- ・**sort(n,m)** nとmを比較関数によって比較し、並び替えを行う。

```javascript
const arr = [1,2,3,4,5];

console.log(arr.reduce((n,m) => n + m)); // 15
console.log(arr.sort(n,m) => n > m ? -1 : 1)); // [5,4,3,2,1]
```

そのほかに配列の反復処理で値を返さない構文がある。
- ・**Array.prototype.forEach()** mapなどに似た書き方。
- ・**for...of** Javaの拡張for文に近い書き方。

```javascript
arr.forEach((n) => {
    if (n % 2 === 0){
        console.log(`${n} is even`);
    }
});

for (let n of arr){
    if ( n % 2 !== 0){
        console.log(`${n} is odd`);
    }
}
```
ただし、これら２つの値を返さないメソッドはその内部で外部と変数を書き換えること（これを **副作用** と呼ぶ）が目的になることが多い。
AirbnbのJavaSriptスタイルガイドには、バグの原因になる可能性を含むので極力使わないようが良いとに書かれている。

## オブジェクトリテラルの反復処理
- ・**Object.keys(A)**  Aのkeyを配列で返す。
- ・**Object.values(A)** Aのvalueを配列で返す。
- ・**Object.entries(A)** Aのkeyとvalueが対になった2次元配列を返す。

注意するのはインスタンス自身にkeysやvaluesといったメソッドがあるのではなく、Object自身がこれらのメソッドを持っているということ。
keysやvaluesで作成した配列に対して,配列のメソッドを用いて反復処理を適用すると良い。

参考：[Map - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map)

### 追記：HTMLCollectionの反復処理
getElementByTagName()などで取得できるHTMLCollectionはリストの形に見えるがそのままでは反復処理ができないので、
Array.form()を使って変形してあげる必要がある。

```javascript
const elems = document.getElementsByTagName('div');
// HTMLCollectionはそのままではループできない
const elemsArray = Array.from(elems);
console.log(elems);
console.log(elemsArray);
elemsArray.map((elem) => (
    // 行いたい処理
);

```

りあクト！１　反復処理について

【りあクト！１】コレクションの反復処理

正規表現をしっかり勉強したくなって買った。


## UnicodeとJavaScript

・コードポイント・・・Unicode文字データベースの１エントリのこと。<br/>
・プロパティ・・・・・各コードポイントの大まかな分類。<br/>
・General Category・・・「文字」「数字」「記号」などの文字の大まかな分類。<br/>
・Script・・・「ラテン文字」「アラビア文字」「ひらがな」「カタカナ」「漢字」のような分類。<br/>
・Script Extensions・・・長音記号や濁音などのどのカテゴリでも使われる記号をScriptの分類に追加したもの。<br/>

JavaScriptではECMAScript2018からUnicodeの文字プロパティにマッチングする正規表現の書き方が取り入れられている。<br/>

## 日本語の正規表現

```javascript
const ja = "ひらがなカタカナ漢字";
const matchHiragana = /\p{Script=Hiragana}/ug
// const matchHiragana = /[\u3040-\u309F]/g 
const matchKatakana = /[\u30A0-\u30FF]/g
const matchKanji = /\p{Script=Han}/ug
// const matchKanji = /[\u4E00-\u9FFF]/
console.log(ja.match(matchHiragana));
console.log(ja.match(matchKatakana));
console.log(ja.match(matchKanji));


```

参考：[Unicodeの文字プロパティを指定した正規表現をみてみる（ECMAScript2018）](https://blog.tes.co.jp/entry/2018/06/29/145450)

<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=blogtukki-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=4873114500&linkId=172596c18f0d211fc7d8e42ad4a871be"></iframe>

正規表現クックブック　Unicodeについて

【正規表現クックブック】Unicode

正規表現はしっかり理解せずになんと無く書いてた分野。
冒頭に<strong>「多くのWeb開発者が、正規表現を無視して幸せな人生を送っている」</strong>って書かれててワロタ

# 7.2 正規表現の概要
## 7.2.1 正規表現の説明

たとえば、"test"と完全に一致する正規表現は以下の２パターンで書ける。
```javascript
const pattern_1 = /test/;

const pattern_2 = new RegExp("test");
```
正規表現の内容がすでに開発の時点で判明している場合はリテラルの構文であるpattern_１を使う方が良い。
正規表現が実行時に、文字列の中に動的に構築される場合は、コンストラクタによるpattern_２の場合を使うのが良い。

## 7.2.2 項と演算子

### 文字
<red>[abc]</red>・・・"a"か"b"か"c"のどれかにマッチする。<br/>
<red>[^abc]</red>・・・"a"か"b"か"c"以外の文字とマッチする。<br/>
<red>[a-m]</red>・・・"a"〜"m"までのどれかにマッチする。<br/>
<red>  \  </red>・・・エスケープ文字。<br/>
<red>/^test/</red>・・・"test"が対象の先頭にあるとマッチする。<br/>
<red>/test$/</red>・・・"test"が対象の末尾にあるとマッチする。<br/>

### 繰り返し
<red> A? </red>・・・Aが１個あっても無くてもマッチする。<br/>
<red> A+ </red>・・・Aが1個以上あればマッチする。<br/>
<red> A* </red>・・・Aが0個以上あればマッチする。<br/>
<red> A{4} </red>・・・Aが4個あればマッチする。<br/>

### 定義済み文字クラス
<red> \d </red>・・・任意の数字(decimal digit)。[0-9]と等価。<br/>
<red> \w </red>・・・任意の単語文字(word)。[A-Za-z0-9_]と等価。<br/>
<red> \s </red>・・・任意のUnicode空白文字。<br/>

## 7.3 正規表現のコンパイル

new RegExp()コンストラクタを使うと、動的に変化する正規表現を作成できる。
こうすることで、各パターンの場合の正規表現を書く必要がなくなり、性能が改善できる。

```html
<div class="samurai ninja"></div>
<div class="ninja samurai"></div>
<div></div>
<span class="samurai ninja ronin"></span>

<script>
    function findClassInElements(className, type){

        const elems = document.getElementByTagName(type || *);
        const regex = new RegExp("(^|\\s)" + className + "(\\s|$)");

        const results = [];

        for ( let i = 0; i < elems.length; i++ ){
            if ( regex.test(elems[i].className)){
                results.push(elems[i])
            }
            return results;
        }
    }

    findClassInElements("ninja","div").length == 2 // True
    findClassInElements("ninja","span").length == 1 // True
    findClassInElements("ninja").length == 3 // True

</script>
```

## 7.4 マッチした部分をキャプチャする
マッチした部分だけでなく、その内部の数値などを別に取り出す機能としてキャプチャがある。

下記は不透明度を表すopacityからその数値をキャプチャとして取得する。

```html
<div id="opacity" style="opacity:0.5; filter:alpha(opacity=50);">
</div>

<script>
    function getOpacity(elem) {
        const filter = elem.style.filter;
        // filterプロパティが存在するか
        return filter ? 
                // 不透明度文字列が存在しているか
                filter.indexOf("opacity=") >= 0 ?
                    //  /opacity=([^)]+)/ のうち ([^)]+) がキャプチャ。
                    //  opacity=に続く)以外の文字 を全体マッチとは別に取り出す。
                    // キャプチャは全体マッチの次に配置されるので[1]で指定する。
                    (parseFloat(filter.match(/opacity=([^)]+)/)[1]) / 100) + "" : ""
                : elem.style.opacity;
    }

    getOpacity(document.getElementById("opacity"))
    >> "0.5"
</script>
```

## 7.5 置換関数を使う
Stringオブジェクトのreplace()メソッドは、第一引数に正規表現を受け取ると、パターンにマッチした部分を置換する。
もしグローバル正規表現だった場合は複数の部分を一度に変換できる。
第二引数に利用できる関数を工夫することで、置き換え以外の方法にも利用することができる。


```javascript
function compress(source){
    // 見つかったkeyを保存する
    let keys = {};

    console.log(source.match(/([^=&]+)=([^&]*)/))
    // ["foo=1", "foo", "1", index: 0, input: "foo=1&foo=2&blah=a&blah=b&foo=3", groups: undefined]
    
    source.replace(

        /([^=&]+)=([^&]*)/g,
        // キーと値の情報を抽出する
        //グローバルサーチなので、マッチする度に[マッチしたテキスト全体、そのマッチにおけるキャプチャ群]の
        //可変調パラメータリストを関数に渡す
        function(full, key, value){
            // 副作用
            keys[key] = (keys[key] ? keys[key] + "," : "") + value;
            // 元の文字を置換えたいわけではないので、""を返す
            return "";
        }
    );

    let result = [];
    for (let key in keys){
        result.push(key + "=" + keys[key]);
    }
    // & で結果を連結する
    return result.join("&");
}

compress("foo=1&foo=2&blah=a&blah=b&foo=3")
 >> "foo=1,2,3 &blah = a,b"
```
<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=blogtukki-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B00ESXY9MA&linkId=a82ef349f8ab5a832867e6985ab8b020"></iframe>

JavaScript Ninjaの極意　正規表現について

【JS忍者】正規表現

参考書１度読んでも全然分からんこと多いけど、こうやってまとめるとかなり理解できる気がする。

## 6.1 実体化とプロトタイプ
### 6.1.1 オブジェクトの実体化
すべての関数はprototypeプロパティを持つが、最初は空のオブジェクトを参照している。
newキーワードを用いて関数がコンストラクタとして呼び出されたとき、新しく実体化された空のオブジェクトが渡される。

同じ関数を関数として呼び出したときと、newキーワードを用いてコンストラクタとして呼び出した時の比較。

空の関数にprototypeの身を設定した時、関数として呼び出すとundefinedが帰ってくるが、
コンストラクタとして呼び出すと、オブジェクトが作成され、さらにそのオブジェクトのプロパティにprotptypeに設定したメソッドが設定される。

```javascript
function Ninja(){}

// 関数のプロトタイプにメソッドを追加する
Ninja.prototype.swingSword = () => true;

// その関数を「関数として」呼び出す。　何も生じない
const ninja1 = Ninja(); // undefined

// 同じ関数をコントラクタとして呼び出す。
const ninja2 = new Ninja(); // ninja2 && ninja2.swingSword && ninja2.swingSword() が存在する

```

コンストラクタ関数の中で、thisパラメータを用いてプロパティの値を初期化することができる。

```javascript
function Ninja(){
    this.swung = false;
    // インスタンスメソッド
    this.swingSword = () => !this.swung;
};

// インスタンスメソッドと同じ名前のプロトタイプメソッド
Ninja.prototype.swingSword = () => this.swung;

const ninja = new Ninja();

ninja.swingSword() // True

```
このことから、まずコンスタラクタのプロトタイプメソッドを利用してインスタンスが作成され、
その後にコンストラクタ関数内部のプロパティがインスタンスに追加されることが分かる。

ちなみに、インスタンスが作成されたときに、プロパティが単純にコピーされるわけではない。
オブジェクトを作成した後でプロトタイプメソッドを追加しても問題はない。
オブジェクトでプロパティ参照を解決するときに、アタッチされているプロトタイプを参照する。

```javascript
function Ninja(){
    this.swung = true;
};

const ninja = new Ninja();

// オブジェクトを作成した後で、プロトタイプメソッドを追加
Ninja.prototype.swingSword = () => this.swung;

// この時点で初めてアタッチされているプロトタイプを参照する。
ninja.swingSword() // True
```

### 6.1.2 コンストラクタ経由で行われるオブジェクトの「型付け」と逆参照

instanceof演算子を使うと、あるインスタンスが特定の関数コンストラクタから作られたかを調べることができる。
constructorプロパティを使うと、コンストラクタへの逆参照（refer back）によって、instanceofと同じようにインスタンスの起源を確認することができる。
<red>動的更新(live-update)</red>と呼ぶらしい

```javascript
function Ninja(){}

const ninja = new Ninja();

typeof ninja === "object" // True

// instanceofを使うと型をテストすることができる
ninja instanceof Ninja // True

// コンストラクタ参照を使ってもninjaの型をテストすることができる。
ninja.constructor == Ninja // True
```
### 6.1.3 プロトタイプチェーン

これまではprototypeにメソッドを定義していたが、オブジェクトのインスタンスをprototypeに定義することができる。
これをObjectまで連鎖させることをプロトタイプチェーンに呼び、これによってJavaScriptでも継承を扱うことができる。

```javascript
function Person(){}
Person.prototype.dacne = function(){};

function Ninja(){}

// プロトタイプチェーン
Ninja.prototype = new Person();

const ninja = new Ninja();

ninja instanceof Ninja // True
ninja instanceof Person // True
ninja instanceof Object // True

```

### 6.1.4 HTML DOM のプロトタイプ
ブラウザでは、すべてのDOM要素がHTMLElementコンストラクタを継承している。
例として,prototypeを用いてremove()というメソッドを実装する。
```javascript
HTMLElement.prototype.remove = function(){
    if (this.parentNode)
        this.parentNode.removeChild(this);
}

// 従来の方法
const a = document.getElementById("a");
a.parentNode.removeChild(a);

// 実装した方法
document.getElementById("b").remove();

```
## 6.2 落とし穴に注意！
### 6.2.1 オブジェクトの拡張

Object.prototypeは拡張するのは良くない。ありとあらゆるオブジェクトにプロパティが追加されてしまう。

### 6.2.2 Numberの拡張
Number.prototypeも拡張しない方が良い。数値が変数内にある場合や式の場合は良いが、数値リテラルとして直接扱う場合に問題が起こる。
```javascript
Number.prototype.add = (num) => this + num;

// 1.数値が変数内にある
let n = 5;
n.add(3) == 8; // True
// 2.数値が式の場合
(5).add(3) == 8 // True
// 3.数値リテラルの場合
5.add(3) == 8 // Error!
```

### 6.2.3 ネイティブオブジェクトを継承する
略

### 6.2.4 実体化の問題
関数は「普通の」関数とコンストラクタという２つの役割を演じることができる。
new演算子をつけてコンストラクタとして使うべき関数にnewを付け忘れると、新しいオブジェクトが実体化されない。
それだけでなく、<strong>「普通の」関数内では this はグローバルスコープを指す</strong>ので、場合によってはグローバルスコープの全く関係のない
変数を参照してしまう場合がある。

```javascript
function User(first, last){
    this.name = first + " " + last;
}

let name = "Rukia";

// コンストラクタを間違って呼び出す
let user = User("Ichigo","Kurosaki");

name == "Rukia" // False


```
<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=blogtukki-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B00ESXY9MA&linkId=a82ef349f8ab5a832867e6985ab8b020"></iframe>

JavaScript Ninjaの極意　prototypeについて

【JS忍者】プロトタイプによるオブジェクト指向


[1兆ドルコーチ――シリコンバレーのレジェンド　ビル・キャンベルの成功の教え   エリック・シュミット](https://www.amazon.co.jp/dp/B07ZCY5BXF/ref=cm_sw_r_tw_dp_C6XK625P502M33BCDMYN)

## 1.ビルならどうするか？

大学アメフトのコーチを退任したあとビジネス界に転身し、さまざまなシリコンバレーのテック企業にコーチとして関わり成功に導いたビル・キャンベルのコーチ論。
Appleやグーグル、Amazonなどの巨大テック企業の幹部というのは完璧な人ばかりだと思っていたので、コーチという立場の人がいたというのがまず意外だった。

## 2.マネジャーは肩書きがつくる。リーダーは人がつくる。
・人がすべて - あらゆるマネジャーの最優先課題は部下のしあわせと成功だ。<br/>
・「旅の報告」から始める - チームメンバーの連帯感を生み出し高めるために、旅の報告など仕事以外のプライベートな話題からスタッフミーティングを始めよ。<br/>
・カネはカネだけの問題ではない - 高い報酬は愛と敬意の証であり、社員を会社の目標に強く結びつける。<br/>

プライベートな話題をすると連帯感が高まるのはもちろん知っている。問題は普通に仕事をしているとなかなかタイミングが無いことで、それを機会を決めて作るのはとても良いと思う。
あとカネの話も分かる。若年層の退職が増加していることがうちの職場でも問題になっているけど、その対策が「帰属意識を高める」と書いてあってズッコけてしまったの思い出した。

## 3.「信頼」の非凡な影響力
・正直で謙虚な人材を見極める - コーチャブルな資質とは、正直さと謙虚さ、あきらめずに努力を厭わない姿勢、つねに学ぼうとする意欲である。<br/>
・「フリーフォーム」で話を聞く - 相手に全神経を集中させ、じっくり耳を傾け、相手が言いそうなことを先まわりして考えず、質問を通して問題の確信に迫れ。<br/>
・「勇気」の伝道師になる - 相手の能力を、相手が自分で思っているよりさらに深く信頼せよ。そしてもっと勇敢になるようハッパをかけよ。<br/>


## 4.チーム・ファースト
・「正しいプレーヤー」を見つけよ - 人に求めるべき最も重要な資質は、知性と心だ。つまり、すばやく学習する能力と厳しい仕事を厭わない姿勢、誠実さ、グリッド、共感力、そしてチーム・ファーストの姿勢である。<br/>
・ 正しく勝利する - 勝利を目指せ。だが献身、チームワーク、誠実さをもって、つねに正しく勝利せよ。<br/>
・リーダーは先陣に立て - 物事がうまくいかないとき、いつにも増して「誠意」「献身」「決断力」がリーダーに求められる<br/>
・人々のあいだの「小さなすきま」を埋める - 耳を傾け、目をこらし、理解やコミュニケーションのギャップを埋めよ。<br/>

## 5.パワー・オブ・ラブ
・「やさしい組織」になる - 人を大切にするには、人に関心を持たなくてはならない。プライベートな生活について尋ね、家族を理解し、大変なときは駆けつけよ。<br/>
・立ち上がって「応援」する - 部下と彼らの成功を派手に応援せよ。<br/>
・つねに「コミュニティ」に取り組め - 仕事でも仕事以外でもコミュニティをつくれ。人々が絆で結ばれるとき、チームはずっと強くなれる。<br/>
・人を助けよ - 時間や人脈などの資源を、人のために惜しみなく使え。<br/>



【読書メモ】1兆ドルコーチ――シリコンバレーのレジェンド　ビル・キャンベルの成功の教え 


TypeScriptはなんとなく書いてて全然分かってなかったけど、この本のおかげで理解がかなり進んだ気がする。

### 型引数

型引数(Type Parameter)は関数に渡す引数と同じで、任意の型を<>によって引数として渡すことで、
その関数の引数や戻り値の型に対応できるようになる。

```typescript
const toArray = <T>(arg1: T, arg2: T): T[] => [arg1, arg2];
>toAttay(8,3);
[8,3]

>toArray('foo','bar');
['foo','bar']

>toArray(5,'bar')
// コンパイルエラー
```

この例では、１つ目と２つ目は型推論によってnumber型、string型が当てられているが、型引数によって
arg1とarg2は同じ型を持つことが指定されているので、3つ目は型推論では型を一致できずエラーになる。

このように、データの型に束縛されないよう型を抽象化してコードの再利用性を向上させつつ、静的型付け言語の持つ型安全性を維持するプログラミングを
<strong>ジェネリックプログラミング</strong>と呼ぶ。そして、型引数を用いて表現するデータ構造のことを<strong>ジェネリクス</strong>と呼ぶ。

可変長引数を使うと、個数を指定せずにジェネリクスを作成できる。
```typescript
const toArrayVariably = <T>(...args: T[]): T[] => [...args];
```


### 条件付き型

extends　キーワードと三項演算子を併用することで任意の条件による型の割り振りができる。
関数の型から任意の引数の型を抽出したりもできる。

```typescript
type User = { id: unknown };
type NewUser = User & { id: string };
type OldUser = User & { id: number };
type Book = { isbn: string };

// 条件付き型 型TがUserを拡張していれば True そうでなければFalse
type IdOf<T> = T extends User ? T['id']: never;

type NewUserId = IdOf<NewUser>; // string;
type OldUserId = IdOf<OldUser>; // number;
type BookId = IdOf<Book>; // never;
```

またinferキーワードによって、マッチング中に取得した型を出力に利用することもできる。

```typescript
type Flatten<T> = T extends Array<infer U> ? U : T;

const num = 5;
const arr = [3,6,9];
type A = Flatten<typeof arr>; // number
type N = Flatten<typeof num>; // number
```

型Tが何らかの型の配列(Arrayの拡張)だった場合、その配列の中身の型を infer U で型 U として取得できる。
配列出なかった場合、そのまま型が出力される。


### テンプレートリテラル型

テンプレートリテラル型を使うことで、これまで文字列でベタ書きしていたクエリやパスにも型をつけることができる。

```typescript
const tables = ['users','posts','comments'] as const;
type Table = typeof tables[number];
type AllSelect = `SELECT * FROM ${Table}`;
type LimitSelect = `${AllSlect} LIMIT ${number}`;

const createQuery = (table:Table , limit?:Limit): AllSelect | LimitSelect =>
    limit ? `SELECT * FROM ${table} LIMIT ${limit}` as const
          : `SELECT * FROM ${table}` as const;

const query = createQuery('users',20);
console.log(query)
```

テンプレートリテラル型とinferを組み合わせると、

```typescript
const q1 = 'SELECT * FROM users';
const q2 = 'SELECT id, body, createdAt FROM posts';
const q3 = 'SELECT userId, postId FROM comments';

type PickTable<T extends string> = T extends `SELECT ${string} FROM ${infer U}` U : never;

type Tables = PickTable<typeof q1 | typeof q2 | typeof q3>; // 'users'|'posts'|'comments';
```

Tがsql文の拡張であった場合、そのテーブル名を型として取得できる。かな？

自由過ぎて型の概念が分からなくなりそう。

【りあクト！１】TypeScript 高度な型表現


子供を抱っこしようとしたら軽いギックリ腰になりました。運動不足よくない。


## thisの中身４つのパターン

### （１）new演算子をつけて呼び出したとき：新規に生成されるオブジェクト

JavaScriptのnew演算子はあらゆる関数につけて実行することができる。
実行時、関数のprototypeオブジェクトをコピーして新規にオブジェクトを作り、次にそれを関数に暗黙の引数thisとして渡す。
最後に、その関数がreturn this で終わっていない場合は、それを実行してくれる。

```javascript

> const dump = function(){ console.log('`this` is', this ); };
> const obj = new dump();
`this is` dump{}

>obj
dump{}

>dump.prototype
dump{}

>obj !== dump.prototype
true
```


### (2)メソッドとして実行されたとき：その所属するオブジェクト

メソッドとして実行された場合、そのアクセス演算子.の前のオブジェクトがthisとして渡される。
この場合はthisを呼び出すメソッドdump()の前についている.(ドット)の前のfooオブジェクトがthisとして渡される。

```javascript
const foo = {
    name: 'Foo Object',
    dump(){
        console.log(this);
    },
};

foo.dump(); //{ name: 'Foo Object', dump: [Function: dump]}

```

### (3)1.2以外の関数[非strictモード]:グローバルオブジェクト

Node.jsではglobalオブジェクト、ブラウザではWindowオブジェクトを参照する

### (4)1.2以外の関数[strictモード]:undefined
(3)の方式はグローバルスコープが汚染される可能性があるので、strictモードでは利用できなくなっている


## thisが問題を引き起こすとき
.（ドット）なしでthisを含む関数を呼び出すと、(2)のオブジェクトを呼び出しではなく(4)のundefinedになる


## 結局どうすれば良いのか
**thisはクラス構文内でしか使わない** <br/>
**クラス構文内では、メソッドを含めたあらゆる関数の定義をアロー関数式で行う**



<br/>
それはそうと、この本の登場人物の方々が<br/>
「ここまで見てきた私たちには、なぜエラーが起こるかは理解できるよね。」<br/>
「これまでの話を踏まえるとそうなりますよね」<br/>
とか言ってて理解力高過ぎて泣ける。<br/>


とてもわかりやすかったQiita記事<br/>
[JavaScript の this を理解する多分一番分かりやすい説明](https://qiita.com/takkyun/items/c6e2f2cf25327299cf03)<br/>
![JS_This](/images/2021年/5月/JS_This.png)

【りあクト！１】JavaScriptの鬼門、this②


買ったまましっかり読んでなかったので、GW中に読み進めたい


## JavaのthisとPythonのself

Javaのthisはそんなに難しくないんですよねー。
javaでthisは自インスタンスを指し、主に自クラスの変数と同じ名前で引数を使いたい時に使う。

```java
public class Person {
        String name;
         void Person(String name){
            this.name = name;
        }
        void greet(){
            System.out.println("Hi,I'm" + name)
        }
    }

public class Main {
    public static void main(String[] args){
        Person minky = new Person("Momo")
        minky.greet()
    }
}

```
Pythonではthisの代わりにselfを使う。

```python
class Person:
    def ___init__(self,name):
        self.name = name

    def greet(self):
        print("Hi,I'm" + self.name)
    
minky = Person("Momo")
minky.greet()   #Hi,I'm Momo
```
selfは同じく自インスタンスを指す。<br/>
Pythonには設計哲学に「暗黙的であるよりも明示的のほうがいい」という一文があるらしい。見比べて見ると、引数の宣言にselfを入れることで自インスタンスをメソッドで利用すると明示的に宣言しているのがわかる。よく考えたらJavaのgreetメソッドでは自インスタンスのメンバーのnameを呼び出しているので、thisが引数として渡されていてもおかしくないかも。<br/>
これを「Javaでは暗黙的にthisを渡している」「Pythonでは明示的にselfを渡している。」と考えるらしい。

## JavaScriptのthis

ポイントは「JavaScriptも暗黙的にthisを渡している」ところ。

```javascript

const Person = function(name){
    this.name = name;

    return this;
};

// { gender: 'f' }をthisとして渡す
const kanae = Person.call({ gender: 'f' }, 'Kanae'):
console.log(kanae)  
// { gender:'f', name:'Kanae'}
```

この例では、function(this,name) となっていると考えると良いらしい。

最初全然分からんかったけど、自分で文章にしてみたら少しピンときた気がする・・・！

【りあクト！１】JavaScriptの鬼門、this①


続き

オブジェクト指向にあるプライベート変数とかオーバーライドとかカプセル化をクロージャを使って実現しようとしているらしい。
JavaScriptって引数に型の宣言がないことに読みにくいなー。動的片付け言語なので仕方ないんやけど。


## クロージャを使って関数をメモ化する

P.119
4.5.1 メモ化　より

素数を判定するプログラムに、クロージャを用いて過去に計算した内容を覚えさせる（キャッシュ）の機能を追加する。
##
```javascript

// プロトタイプを使えば、全ての関数にメソッドを追加できる
Function.prototype.memorized = function(key){
    this._values = this._values || {};
    return this._value[key] !== undefined ?
        this._value[key] :
        this._value[key] = this.apply(this,arguments);
};

Function.prototype.memorize = function(){
    // 呼び出しコンテクストをクロージャに代入するため、変数に代入する
    let fn = this;
    // 元の関数をメモ化関数でラップする
    return function(){
        // プロトタイプで追加したメソッド
        return fn.memorized.apply( fn, arguments )
    }
}

let isPrime = (function(num){
    let prime = num != 1;
    for (let i = 2; i < num; i++){
        if (num % i == 0){
            prime = false;
            break;
        }
    }
    return prime;
}).memorize();

```

memorize()メソッドを使用するだけで、元の関数にキャッシュ機能を追加している。

<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=blogtukki-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B00ESXY9MA&linkId=a82ef349f8ab5a832867e6985ab8b020"></iframe>

JavaScript Ninjaの極意　関数のメモ化についてのまとめ

【JS忍者】関数のメモ化について②


この本難解で去年一度挫折してしまったんですが、少し知識も付いた思い再チャレンジ中。<br />
でも相変わらず難しい。実は何も成長していないのでは？


## コストの高い関数をメモ化する

P.79
4.3.2 自分をメモ化する関数　より

素数を判定するプログラムに過去に計算した内容を覚えさせる（キャッシュ）の機能を追加する。

```javascript

function isPrime(value) {
    // キャッシュを作成する
    if (!isPrime.cache) isPrime.cache = {};
    // キャッシュされた値をチェックする
    if (isPrime.answers[value] != null){
        return isPrime.answers[value]
    }
    let prime = value != 1;
    for (let i = 2; i < value; i++){
        if (value % i == 0){
            prime = false;
            break;
        }
    }
    // 計算した値を保存する
    return isPrime.answers[value] = prime;
}

```
関数にメモを追加して以前の計算結果をキャッシュすることができる。
これさえ定義しておけば他に特別な動作や初期化を必要としない。

これはDOM要素に対しても応用できる

```javascript

// 略

function getElements(name){
    if (!getElements.cache) getElements.cache = {};
    return getElements.cache[name] = 
        getElements.cache[name] ||
        documents.getElementsByTagName(name);
}
```

<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=blogtukki-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B00ESXY9MA&linkId=a82ef349f8ab5a832867e6985ab8b020"></iframe>

【JS忍者】関数のメモ化について①


２章　非同期プログラミング　より


## マルチスレッドとイベントループ

```javascript

function parseJSONAsync(json,callback){
    setTimeout(()=>{
        try{
            callback(null,JSON.parse(json))
        } catch (err) {
            callback(err)
        }
    }, 1000)
}


const cache = {}
function parseJSONAsyncWithCache(json,callback){
    const cached = cache[json]
    // キャッシュがあればキャッシュを返す
    if (cached){
        callback(cached.err,cached.result)
        return
    }
    parseJSONAsync(json,(err,result) => {
        cache[json] = { err, result }
        callback(err,result)
    })
}


parseJSONAsyncWithCache(
    '{"message": "Hello","to":"world"}',
    (err,result)=>{
        console.log('1回目の結果',err,result)
        //コールバックの中で２回目を実行
        parseJSONAsyncWithCache(
            '{"message": "Hello","to":"world"}',
            (err,result)=>{
                console.log('2回目の結果',err,result)
            }
        )
        console.log('2回目の呼び出し完了')
    }
)
console.log('1回目の呼び出し完了')
```
```terminal
1回目の呼び出し完了
1回目の結果 null { message: 'Hello', to: 'world' }
2回目の結果 null { message: 'Hello', to: 'world' }
2回目の呼び出し完了
```

parseJsonAsyncWithCacheが状況によってコールバックを同期的に実行したり非同期的に実行したりするため、一貫性が保てていない。
コールバックをパラメータとする関数は、それを常に同期的に実行するか、常に非同期的に実行するかのどちらかでなければならない。

```javascript

// 略

const cache = {}
function parseJSONAsyncWithCache(json,callback){
    const cached = cache[json]
    // キャッシュがあればキャッシュを返す
    if (cached){
        setTimeout(() => callback(cached.err,cached.result),0)
        return
    }
    parseJSONAsync(json,(err,result) => {
        cache[json] = { err, result }
        callback(err,result)
    })
}

// 略
```

```terminal
1回目の呼び出し完了
1回目の結果 null { message: 'Hello', to: 'world' }
2回目の呼び出し完了
2回目の結果 null { message: 'Hello', to: 'world' }
```




[ハンズオンNode.js   今村 謙士](https://www.amazon.co.jp/dp/4873119235/ref=cm_sw_r_tw_dp_D2BQAFY8YCY8Q2TW5ND9)




ハンズオンNode.js 2章　非同期プログラミングのまとめ

【Node.js】コールバック関数の同期呼び出しと非同期呼び出しについて


[デジタルエコノミーの罠   マシュー・ハインドマン](https://www.amazon.co.jp/dp/4757123779/ref=cm_sw_r_tw_dp_HQ5bGb3XYB6VF)



デジタルエコノミーの罠の読書メモ

【読書メモ】デジタルエコノミーの罠 


## next/imageについて

Next10より提供されたnext/imageは、画像の軽量化とレスポンシブ対応を自動で適応してくれるImageタグを提供してくれます。  

このライブラリはImageタグを書く必要があるので、そのままではマークダウン内の画像にも適用させることができません。  

今回は、React-Markdownを利用してnext/image をマークダウン内の画像に適用させる方法をメモします。  

Next.jsの公式チュートリアルを終えたところからの主な変更点を掲載します。

参考：
[Using NextJS and Next/Image with MDX Markdown Processing](https://theviewport.io/post/using-nextjs-and-nextimage-with-mdx-markdown-processing)


## React-Markdownを導入する

```terminal:
yarn add react-markdown
```



React-Markdownではrenderersオブジェクトでレンダリング方法を変更することができる。
詳しくはこちら[React-MarkDown](https://github.com/remarkjs/react-markdown#appendix-b-node-types)  

このrenderersオブジェクトでimgタグはnext/imageを使用するように指定すれば良い。

```javascript
import Image from 'next/image'
import Layout from '../components/layout'

const renderers = {
  image: image => {
    return <Image src={image.src} alt={image.alt} width="600" height="450"  />
  },
}

export default function Post({ postData }) {
  return (
    <Layout>
      <Head>
        <title>{postData.title}</title>
      </Head>
      {/* ReactMarkdownを使わないとき */}
      {/* <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} /> */}

      {/* ReactMarkdownを使うとき */}
      <ReactMarkdown
        children={postData.content}
        allowDangerousHtml = {true}
        renderers={renderers}
      />
    </Layout>
  )
}

//その他使っている関数

export async function getStaticProps({ params }) {
  // Fetch necessary data for the blog post using params.id
  const postData = await getPostData(params.id)

  return {
    props: {
      postData
    }
  }
}

export async function getPostData(id) {
    const fullPath = path.join(postsDirectory, `${id}.md`)
    const fileContents = fs.readFileSync(fullPath, 'utf8')
    const { data, content } = matter(fileContents)

    //本来はマークダウンから取得した本文が入っているcontentをHTMLに変換する
    // const contentHtml = await markdownToHtml(matterResult)

    //マークダウンから取得した本文が入っているcontentをそのまま渡す

    return {
        id,
        ...data,
        content
    }
}

```

これによってブログ画像のレスポンシブ対応はnext/imageに全て任せることが出来るようになった。


## おまけ：react-syntax-highlighterを導入する

ついでに[react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter)を使って、
このページのようにコードブロックを扱えるようにします。

```terminal

yarn add react-syntax-highlighter
```

react-syntax-highlighterを導入したあと、下記のようにrenderersを書き換えればOK。


```javascript

import ReactMarkdown from 'react-markdown';
import Image from "next/image";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";


const renderers = {
  image: image => {
    return <Image src={image.src} alt={image.alt} width="600" height="450" />
  },
  code: ({ language, value }) => {
    return <SyntaxHighlighter language={language} children={value} />
  }
}

```

【Next.js】next/imageとReact-Markdownを使いマークダウン内の画像を最適化する


[ＭａａＳ戦記　伊豆に未来の街を創る   森田創](https://www.amazon.co.jp/dp/B08CVG3PNV/ref=cm_sw_r_tw_dp_4MCQAF7JZH5FQB7JW68K)
 
 kindle Unlimited対象だったのでなんとなくダウンロードしたのだが面白かった。
 
 東急の観光型MaaSの実証実験として、静岡県の伊豆を中心とした取り組みを発案・企画の段階から先陣を走った方のエッセイ風のビジネス書。<br />
 MaaS = Uberぐらいのイメージしかなかったので、MaaSを実際に地域に根付かせようとすると何が必要で何が問題になるかがリアルな体験として書かれており、とても面白かった。<br />

今は担当している講師の仕事がめちゃくちゃ面白いので満足しているけど、もう２、３年したらこんな感じでICTを使って地域新興するような部署があったはずなので行ってみたいな〜
（転職した方が早い気もするけど）

（本と睨めっこしながら追記予定）

[izuko公式サイト](https://www.izuko.info)


【読書メモ】ＭａａＳ戦記　伊豆に未来の街を創る 


<br />

[RANGE（レンジ）　知識の「幅」が最強の武器になる   デイビッド・エプスタイン](https://www.amazon.co.jp/dp/B0868DR365/ref=cm_sw_r_tw_dp_DOJbGbE980BAT)


ぜネラリストになるか、スペシャリストになるか。<br />
個人のこの生き方の選択について、この本は早い段階でスペシャリストの道に進むことの弊害を解いている。<br />
技術の急速な発展に伴って社会から求められるスキルのレベルはどんどん上がっていっている。<br />
その一方で、自身の持っているスキルが問題を解決するための手段として常に最適であるとは限らない。<br />
専門性を高めれば高めるほど、全ての問題を高めた己のスキルで解決しようとしてしまう危険性があるという。<br />
マズローが遺した「金槌を持っていると、すべてが釘に見える」とは、まさしくそのような手段が目的化した状態を指しているのだと思う。<br />

また、天才児の教育を題材に、専門性を選ぶタイミングについての考察があった。<br />
個人の得意なことや好きなものといった特性は様々なことを経験して運が良ければ巡り会えるというものなのだそうだ。<br />
なので、人生の早い段階で自身の専門性を決めてしまうと、実際は得意でも好きでもないことを仕事にするハメになってしまう可能性がある。<br />
これは、自分の経験からも感じるところで、高校や大学の情報の授業で受けたプログラミングは全然面白くなかったが、色々な分野の経験して10年ほどたった<br />
最近になって触れてみるとめちゃくちゃ面白く、自身の特性があっていることを発見することができた。<br />


また本を読み返してじっくり書こう・・・・


【読書メモ】RANGE（レンジ）知識の「幅」が最強の武器になる 



Next.jsを使ってみたいというだけで作ったこのブログがなんとか形になってきました。
Next.jsの理解を深めるための単なるメモです。


（参考）<br />

[公式](https://nextjs.org/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=next-website)
<br />

[Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな](https://qiita.com/jagaapple/items/faf125e28f8c2860269c#13-%E3%81%9D%E3%81%AE%E4%BB%96dx%E3%82%92%E5%90%91%E4%B8%8A%E3%81%95%E3%81%9B%E3%82%8Btips)

<br />

[Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明する](https://qiita.com/thesugar/items/47ec3d243d00ddd0b4ed)

## CSRとSSRとSSG

- <red>CSR(Client Side Rendering) </red> <br/>
    Vue.jsやReactなどJavaScriptのライブラリやフレームワークで使われる方式。<br /> 
    最初に必要な材料をクライアントに送信した後に、クライアント側でJavaScriptを動作させてレンダリングする（ページを生成する）。<br />
    クライアント側で処理するJavaScriptの量が膨大になった場合、ユーザーのCPUの性能によってはレンダリングに時間がかかる場合がある。<br />
    また、SEOに対しても難がある（らしい）<br />

- <red>SSR(Server Side Rendering) </red> <br/>
    リクエストを受ける毎にサーバー側でページをレンダリングする方法。<br />
    リクエスト毎に異なるページを送信できる。<br />
    ユーザーのCPUの性能に影響を受けないが、リクエスト毎にレンダリングを行う必要があるので、オーバーヘッドが発生する。
    SEOについては問題がない。<br />
![SSR_image](/images/2021年/1月/SSR.png)

- <red>SSG(Static Site Generator)  </red> <br/>
    ビルド時にページをあらかじめレンダリングし、各リクエストに対しては同じページを送信する。<br />
    HTMLとCSSとJavaScriptのみのシンプルなWebサイトに近い状態。<br />
    SEOにも速度にも問題がないが、ユーザーごとに内容が異なるページを作るには適さない。
![SSG_image](/images/2021年/1月/SSG.png)

SSRとSSGのような、あらかじめレンダリングしておく方法を<text style=color:orange>プレレンダリング（pre-rendering）</text>という。<br />
Next.jsではこの両方をサポートしており、ページごとに使い分けることができる。<br />
リクエストごとに表示内容が異なるならSSR、ブログなどのように毎リクエストで同じ内容を表示するならSSGを使う。  
![SSG_SSR_image](/images/2021年/1月/SSG-SSR-hybrid.png)

ただし、開発環境では常にSSRでレンダリングされていることには注意。（理屈的にSSGすることができない）
使っていると開発環境では表示が遅いがvercelのサーバ上では高速に表示されることが体感できた。



Next.jsのレンダリングについて



## tailwindの導入

## CSS Modules or CSS in JS

CSS Modules は　モジュールごとにCSSを分割して作成する。  


[TailwindCss 公式](https://tailwindcss.com/)

![tailwind](/images/2021年/1月/TailWindCss.jpg)


[tailwind-cheat-sheet](https://nerdcave.com/tailwind-cheat-sheet/)
<br/>
適用したいCSSでキーワード検索すると対応したクラスを表示してくれる。
<br />

![tailwind](/images/2021年/1月/TailWindCheetSheet.jpg)


[tailwindcomponents](https://tailwindcomponents.com/)


![TailWindComponent](/images/2021年/1月/TailWindComponents.jpg)  

参考:[Tailwind CSSでUIをマークアップしてく為の参考となるサイトまとめ](https://blog.nakamu.life/posts/tailwind-css-ui)

Tailwindがめちゃくちゃ便利だった

## きっかけ
Next.jsを使ってみたかったから

## 作った流れ

Next.jsのチュートリアル  
↓  
JavaScriptをTypeScriptに置き換え  
↓  
CSS Modulesと CSS in JS でどちらが良いか迷ったが、 Next.jsの公式はCSS ModulesのフレームワークのTailWind推しのようなので、 TailWindを導入

↓

Typographyを導入

↓

今ここ（21年1月）


参考にしたサイト

[公式](https://nextjs.org/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=next-website)

[How to Make a Markdown Blog With Next.js](https://jfelix.info/blog/how-to-make-a-static-blog-with-next-js)

やりたいこと

- 画像の処理を軽くする方法
- Amazonリンクの貼り方
- 書評を書く
- 写真のギャラリーを作る
- カテゴリ訳をする
- 育児日記を書く









