はじめに

「色々な機械学習処理をブラウザ上で試せるサイトを作った」中で実装したモデルの解説の三回目です。

今回は階層型クラスタリングの実装について解説します。

デモはこちらから。（TaskをClusteringにして、Modelのhierarchyを選択）
実際のコードはhierarchy.jsにあります。

なお、可視化部分については一切触れません。

概説

階層型クラスタリングのうち、以下の７手法を実装します。

• Complete Linkage（完全連結法）
• Single Linkage（単純連結法）
• Group Average（群平均法／UPGMA）
• Ward's（ウォード法）
• Centroid（重心法／UPGMC）
• Weighted Average（重み付き平均法／WPGMA）
• Median（メジアン法／WPGMC）

実装はこちらの資料を参考にしました。

手法ごとで処理が異なる部分は、クラスタ間の距離の計算とその更新式です。
k-means法ではDependency Injectionの雰囲気で実装しましたが、こちらはクラスを継承して実装しました。

処理の流れ

階層構造の解析

fit関数で木構造を使って階層構造を一気に解析します。

処理の流れは次の通りです。

1. 木構造のルート直下に、葉としてデータが一つのみ存在するクラスタを設定する。また同時に、各データ間の距離を計算する
2. ルート直下の全てのノード間の距離を計算する
3. ルート直下のノードが一つの場合は、処理を終了する
4. ルート直下のノードの中から、最も距離の近い二つのノードを選択する。この二つのノードをまとめたものが、新しいクラスタとなる。
5. ルート直下から選択された二つのノードを削除し、その二つを子に持つ部分木をルート直下に入れる
6. ルート直下の全てのノード間の距離を再計算し、3.に戻る

データ間の距離はユークリッド距離、マンハッタン距離、チェビシェフ距離の三つを使用できるようにしています。

ノード間の距離をdistancesとして二次元配列で保持し、再計算時はノードの削除・挿入と位置が合うように縮めていきます。

また、各ノードには子となる二つのクラスタ間距離を保持しておきます。

Lance-Williamsの更新式

ノード間の距離の再計算は部分的な情報のみから計算することができ、計算量は$O(1)$になります。

結合前のクラスタを$C_a, C_b$、結合後のクラスタを$C_c$とし、それらとは別のクラスタを$C_k$とします。
また、クラスタ$C_x, C_y$間の距離を$d_{xy}$、クラスタ$C_x$に含まれるデータ数を$N_{C_x}$とします。

結合前のクラスタ間の距離$d_{ka}, d_{kb}$が分かっていたとき、結合後のクラスタ間の距離$d_{kc}$は、こちらの資料によると

d_{kc} = \alpha_a d_{ka} + \alpha_b d_{kb} + \beta d_{ab} + \gamma \left| d_{ka} - d_{kb} \right|

となります。ただし式中の$\alpha_a, \alpha_b, \beta, \gamma$は、手法別に次の通りとなります。

	$\alpha_a$	$\alpha_b$	$\beta$	$\gamma$
Complete Linkage	$\frac{1}{2}$	$\frac{1}{2}$	$0$	$\frac{1}{2}$
Single Linkage	$\frac{1}{2}$	$\frac{1}{2}$	$0$	$-\frac{1}{2}$
Group Average	$\frac{N_{C_a}}{N_{C_c}}$	$\frac{N_{C_b}}{N_{C_c}}$	$0$	$0$
Ward's	$\frac{N_{C_k} + N_{C_a}}{N_{C_k} + N_{C_c}}$	$\frac{N_{C_k} + N_{C_b}}{N_{C_k} + N_{C_c}}$	$-\frac{N_{C_k}}{N_{C_k} + N_{C_c}}$	$0$
Centroid	$\frac{N_{C_a}}{N_{C_c}}$	$\frac{N_{C_b}}{N_{C_c}}$	$-\frac{N_{C_a}N_{C_b}}{N_{C_c}^2}$	$0$
Weighted Average	$\frac{1}{2}$	$\frac{1}{2}$	$0$	$0$
Median	$\frac{1}{2}$	$\frac{1}{2}$	$-\frac{1}{4}$	$0$

クラスタの取得

上記の流れで得られた木を使用すると、クラスタの取得はシンプルになります。
木の中のクラスタ間距離が大きいノードで分割していき、指定されたクラスタ数になるまで続けるだけです。

クラスタ間距離は親ノードよりも子ノードの方が小さいことが保証されますので、幅優先探索の要領でルートから順番にたどっていけば、不要な探索が無くなります。

処理の流れは次の通りです。

1. クラスタ一覧にすべてのデータが含まれたノードを設定する
2. クラスタ一覧に含まれるノード数が指定されたクラスタ数になった場合は、そのクラスタ一覧を返して処理を終了する
3. クラスタ一覧の中から、分割したのちのクラスタ間距離が一番大きいノードを選択する
4. 選択したノードをクラスタ一覧から取り除き、その子ノードを取り出してクラスタ一覧に追加する
5. 2.に戻る

なお木の配列を返しているのは、可視化時に使用するためです。
実際のデータは葉ノードにありますので、その部分を走査すれば取得できます。

木

木構造は、手作り数学ライブラリmath.jsに定義したTreeを使用します。

ここで使用している処理は次の通りです。

• プロパティ
  • length : 子ノードの数
  • value : ノードが持っている値
• 関数
  • at : 指定された位置の子ノードを返す
  • push : 子ノードの最後に渡された値を持った木を設定する。ただし、木が渡された場合はそのまま設定する
  • set : 指定した位置に渡された値を持った木を設定する。ただし、木が渡された場合はそのまま設定する
  • removeAt : 指定された位置の子ノードを削除する
  • leafCount : 葉の数を返す
  • isLeaf : 葉ノードの場合はtrueを返す
  • leafValues : 葉ノードの値を配列として返す

コード

親クラス

子クラスで実装する関数はdistanceとupdateで、それぞれクラスタ間距離の計算とクラスタ間距離の更新計算を行います。

また、_lanceWilliamsUpdaterによりLance-Williamsの更新式を計算する関数を返します。

class HierarchyClustering {
    constructor(metric = 'euclid') {
        this._root = null;
        this._metric = metric;

        switch (this._metric) {
        case 'euclid':
            this._d = (a, b) => Math.sqrt(a.reduce((s, v, i) => s + (v - b[i]) ** 2, 0));
            break
        case 'manhattan':
            this._d = (a, b) => a.reduce((s, v, i) => s + Math.abs(v - b[i]), 0)
            break
        case 'chebyshev':
            this._d = (a, b) => a.reduce((s, v, i) => Math.max(s, Math.abs(v - b[i])), -Infinity)
            break;
        }
    }

    fit(points) {
        this._root = new Tree()
        points.forEach((v, i) => {
            this._root.push({
                point: v,
                index: i,
                distances: points.map(p => this._d(v, p))
            });
        });

        const distances = []
        for (let i = 0; i < this._root.length; i++) {
            if (!distances[i]) distances[i] = [];
            for (let j = 0; j < i; j++) {
                if (!distances[i][j]) distances[i][j] = distances[j][i] = this.distance(this._root.at(i), this._root.at(j));
            }
        }
        while (this._root.length > 1) {
            let n = this._root.length;

            let min_i = 0;
            let min_j = 1;
            let min_d = distances[0][1];
            for (let i = 1; i < n; i++) {
                distances[i].forEach((d, j) => {
                    if (d < min_d) {
                        min_i = i;
                        min_j = j;
                        min_d = d;
                    }
                });
            }
            let min_i_leafs = this._root.at(min_i).leafCount();
            let min_j_leafs = this._root.at(min_j).leafCount();
            distances.forEach((dr, k) => {
                if (k != min_j && k != min_i) {
                    dr[min_i] = this.update(min_i_leafs, min_j_leafs, this._root.at(k).leafCount(), dr[min_i], dr[min_j], distances[min_j][min_i]);
                    distances[min_i][k] = dr[min_i];
                    dr.splice(min_j, 1);
                }
            });
            distances[min_i].splice(min_j, 1);
            distances.splice(min_j, 1);
            this._root.set(min_i, new Tree({
                distance: min_d,
            }, [this._root.at(min_i), this._root.at(min_j)]));
            this._root.removeAt(min_j);
        }
        this._root = this._root.at(0);
    }

    getClusters(number) {
        const scanNodes = [this._root]
        while (scanNodes.length < number) {
            let max_distance = 0;
            let max_distance_idx = -1;
            for (let i = 0; i < scanNodes.length; i++) {
                const node = scanNodes[i];
                if (!node.isLeaf() && node.value.distance > max_distance) {
                    max_distance_idx = i;
                    max_distance = node.value.distance
                }
            }
            if (max_distance_idx === -1) {
                break
            }
            const max_distance_node = scanNodes[max_distance_idx];
            scanNodes.splice(max_distance_idx, 1, max_distance_node.at(0), max_distance_node.at(1))
        }
        return scanNodes;
    }

    distance(c1, c2) {
        throw new Error('Not Implemented');
    }

    _mean(d) {
        const m = Array(d[0].length).fill(0);
        for (let i = 0; i < d.length; i++) {
            for (let k = 0; k < d[i].length; k++) {
                m[k] += d[i][k]
            }
        }
        return m.map(v => v / d.length);
    }

    _lanceWilliamsUpdater(ala, alb, bt, gm) {
        return (ka, kb, ab) => ala * ka + alb * kb + bt * ab + gm * Math.abs(ka - kb);
    }

    update(ca, cb, ck, ka, kb, ab) {
        throw new Error('Not Implemented');
    }
}

Complete Linkage（完全連結法）

クラスタ間距離は、それぞれのクラスタに含まれるデータの中で一番遠いデータ同士の距離になります。

class CompleteLinkageHierarchyClustering extends HierarchyClustering {
    distance(c1, c2) {
        let f1 = c1.leafValues();
        let f2 = c2.leafValues();
        return Math.max.apply(null, f1.map(v1 => {
            return Math.max.apply(null, f2.map(v2 => v1.distances[v2.index]));
        }));
    }

    update(ca, cb, ck, ka, kb, ab) {
        return this._lanceWilliamsUpdater(0.5, 0.5, 0, 0.5)(ka, kb, ab)
    }
}

Single Linkage（単純連結法）

クラスタ間距離は、それぞれのクラスタに含まれるデータの中で一番近いデータ同士の距離になります。

class SingleLinkageHierarchyClustering extends HierarchyClustering {
    distance(c1, c2) {
        let f1 = c1.leafValues();
        let f2 = c2.leafValues();
        let minDistance = Math.min.apply(null, f1.map(v1 => {
            return Math.min.apply(null, f2.map(v2 => v1.distances[v2.index]));
        }));
        return minDistance;
    }

    update(ca, cb, ck, ka, kb, ab) {
        return this._lanceWilliamsUpdater(0.5, 0.5, 0, -0.5)(ka, kb, ab)
    }
}

Group Average（群平均法／UPGMA）

クラスタ間距離は、それぞれのクラスタに含まれるデータの間の距離の平均になります。

class GroupAverageHierarchyClustering extends HierarchyClustering {
    distance(c1, c2) {
        let f1 = c1.leafValues();
        let f2 = c2.leafValues();
        let totalDistance = f1.reduce((acc1, v1) => {
            return acc1 + f2.reduce((acc2, v2) => acc2 + v1.distances[v2.index], 0);
        }, 0);
        return totalDistance / (f1.length * f2.length);
    }

    update(ca, cb, ck, ka, kb, ab) {
        return this._lanceWilliamsUpdater(ca / (ca + cb), cb / (ca + cb), 0, 0)(ka, kb, ab);
    }
}

Ward's（ウォード法）

クラスタ間距離は、結合後のクラスタの重心との距離の平均から、結合前それぞれのクラスタの重心との距離の平均を引いた値になります。

class WardsHierarchyClustering extends HierarchyClustering {
    distance(c1, c2) {
        let f1 = c1.leafValues().map(f => f.point);
        let f2 = c2.leafValues().map(f => f.point);
        let fs = f1.concat(f2);
        let ave1 = this._mean(f1);
        let ave2 = this._mean(f2);
        let aves = this._mean(fs);
        let e1 = f1.reduce((acc, f) => acc + this._d(f, ave1) ** 2, 0);
        let e2 = f2.reduce((acc, f) => acc + this._d(f, ave2) ** 2, 0);
        let es = fs.reduce((acc, f) => acc + this._d(f, aves) ** 2, 0);
        return es - e1 - e2;
    }

    update(ca, cb, ck, ka, kb, ab) {
        return this._lanceWilliamsUpdater((ck + ca) / (ck + ca + cb), (ck + cb) / (ck + ca + cb), -ck / (ck + ca + cb), 0)(ka, kb, ab);
    }
}

Centroid（重心法／UPGMC）

クラスタ間距離は、それぞれのクラスタの重心の距離になります。

class CentroidHierarchyClustering extends HierarchyClustering {
    distance(c1, c2) {
        let f1 = c1.leafValues().map(f => f.point);
        let f2 = c2.leafValues().map(f => f.point);
        let d = this._d(this._mean(f1), this._mean(f2));
        return d * d;
    }

    update(ca, cb, ck, ka, kb, ab) {
        return this._lanceWilliamsUpdater(ca / (ca + cb), cb / (ca + cb), -ca * cb / ((ca + cb) * (ca + cb)), 0)(ka, kb, ab);
    }
}

Weighted Average（重み付き平均法／WPGMA）

クラスタ間距離は、二つのクラスタ間の距離の平均を再帰的に計算していくことにより求めます。

class WeightedAverageHierarchyClustering extends HierarchyClustering {
    distance(c1, c2) {
        let calcDistRec = function calcDistRec(h1, h2) {
            if (h1.leafCount() == 1 && h2.leafCount() == 1) {
                return h1.value.distances[h2.value.index];
            } else if (h2.leafCount() == 1) {
                return (calcDistRec(h2, h1.at(0)) + calcDistRec(h2, h1.at(1))) / 2;
            } else {
                return (calcDistRec(h1, h2.at(0)) + calcDistRec(h1, h2.at(1))) / 2;
            }
        }
        return calcDistRec(c1, c2);
    }

    update(ca, cb, ck, ka, kb, ab) {
        return this._lanceWilliamsUpdater(0.5, 0.5, 0, 0)(ka, kb, ab);
    }
}

Median（メジアン法／WPGMC）

クラスタ間距離は、それぞれのクラスタの重心の中間点と、一方の重心との距離になります。

class MedianHierarchyClustering extends HierarchyClustering {
    distance(c1, c2) {
        let m1 = this._mean(c1.leafValues().map(f => f.point));
        let m2 = this._mean(c2.leafValues().map(f => f.point));
        let m = m1.map((v, i) => (v + m2[i]) / 2);
        return this._d(m, m2) ** 2;
    }

    update(ca, cb, ck, ka, kb, ab) {
        return this._lanceWilliamsUpdater(0.5, 0.5, -0.25, 0)(ka, kb, ab);
    }
}

さいごに

文末にセミコロンが付いたり付かなかったり、constでいいところをletを使用していたりと、気になる部分が多い。

どうも7noteです。スクロールしたら出てくるヘッダー作ります。

最初は大きく写真を見せて、スクロールした後にヘッダーを表示させたい時の動きです。

※jQueryを使っています。jQeryってなんだ？って方はこちら

ソース

index.html

<!-- html、長いですがほとんど意味のあまりないソースです。 -->
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<header>
  <p>ここがヘッダーです。</p>
</header>
<div class="mv">
  <img src="sample.jpg" alt="メインビジュアル">
</div>

<main>
  <div class="step1">
    <h2>ステップ1</h2>
    <p>こんにちは。こんにちは。こんにちは。こんにちは。</p>
  </div>
  <div class="step2">
    <h2>ステップ2</h2>
    <p>コンバンワコンバンワコンバンワコンバンワ</p>
  </div>

  <!-- ここから先はスクロールさせるための尺稼ぎ -->
  <div class="stepx">
    <h2>ステップx</h2>
    <p>〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜</p>
  </div>
  <div class="stepx">
    <h2>ステップx</h2>
    <p>〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜</p>
  </div>
  <div class="stepx">
    <h2>ステップx</h2>
    <p>〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜</p>
  </div>
  <div class="stepx">
  <h2>ステップx</h2>
    <p>〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜</p>
  </div>
</main>

style.css

header {
  width: 100%;            /* 要素を幅いっぱいにする */
  background: #555;       /* 背景色を濃いグレーに指定。半透明の「rgba(0,0,0,0.5)」でもいいかも */
  display: none;          /* ページ読み込み時は非表示にする */
  position: fixed;        /* ヘッダーを絶対位置にする。スクロールしても固定 */
  top: 0;                 /* 上から0pxに指定 */
  left: 0;                /* 左から0pxに指定 */
  padding: 10px 20px;     /* ちょっと余白をとっとくと綺麗 */
  box-sizing: border-box; /* paddingを含んで幅100%ちょうどにするため */
}
header p {
  color: #fff;            /* 文字色を白にする */
}

.mv {
  width: 100vw;           /* ウィンドウサイズ横幅いっぱいに表示 */
  height: 100vh;          /* ウィンドウサイズ縦幅いっぱいに表示 */
}

.mv img {
  width: 100%;            /* 幅いっぱい */
  height: 100%;           /* 高さいっぱい */
  object-fit: cover;      /* background-size: cover;みたいに全面に収まるように画像を表示（IEでは効かないよ。） */
}

script.js

$(window).scroll(function () {           /* スクロールされた時 */
  var pos = $('main').offset();          /* mvを過ぎたmainタグの高さを取得して変数[pos]に格納 */
  if ($(this).scrollTop() > pos.top) {   /* 変数[pos]より、スクロールされていたら */
    $('header').fadeIn();                /* ヘッダーをふわっと表示 */
  } else {                               /* それ以外の場合 */
    $('header').fadeOut();               /* ヘッダーをふわっと非表示 */
  }
});

出る時はフェードインで出てくる

---

---

---

---

解説

動画が重くて動画が出せなかったのですが、ふわっとヘッダーが出ます。
pos.topでmain要素の高さを取得していますが、任意の高さをpx指定することもできます。

htmlがスクロールの関係上長くなっていますが、javascript自体はコンパクトにかけるので難易度は優しい方かなと思います。

他にもいろいろヘッダーの出し方あるので、今後の記事でも書いていけたらとおもっています。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

条件分岐

プログラミングにおいて重要な条件分岐
「ある条件が成り立つときだけある処理を行う」という場面が出てくる

このようなプログラムを条件分岐

script.js

const number =12;

↓yes 定数numberの値が10より大きい?

script.js

console.log("numberは10より大きいです");

のようなものを作りたい。

if文の書き方

if文を用いると「もし〇〇ならば⚫️⚫️を行う」という条件分岐が可能になります。ifの後ろに条件式を書き、それが「成り立つ」場合の処理を{ }のなかに書きます。

下記でイメージ

script.js

if(条件式){

  処理//条件式が成り立てば実行される

}//セミコロンは不要

script.js

const number=12;

if(numberが10より大きい場合){

  console.log("numberは10より大きいです。")

  //条件式が成り立てば実行される
}

if文のコード

実際のコードを見てみましょう
条件式の一例「number > 10」の部分は「定数numberの値が10より大きい」という意味の条件式になります。
定数numberには12が代入されているので、この条件は成り立ち、処理が実行されます。

script.js

const number =12;
if(number>10){
  //「numberの値が10より大きい」という条件
  console.log("numberは10より大きいです")  
}

numberは10より大きいです

if文書くときのポイント

if文を書くときは、インデントするようにしましょう。
console.logの部分でtabキーを1回おすと半角スペース2つ分インデントすることができます。
インデントすると、コードが見やすくなります。

scirpt.js

const number= 12;
if(number > 10){
  console.log("numberは10より大きいです")
//↑tabキーでインデント!
}

演習

script.js

const level = 12;

// 条件式を「level > 10」とするif文を作ってください
if(level>10){
  console.log("レベルが10より大きいです");
}

条件式の出力

if文を使うことができました。次は条件式の部分を詳しく見てみましょう。
先ほどのif文の条件式の部分を出力してみると「true」が出力されます

script.js

const number=12;

//条件式を抜き出す
「if(number > 10)」{
  console.log("numberは10より大きいです");
}

script.js

const number=12;
//抜き出した部分の条件式を出力
「console.log(number>10);」

コンソール(出力結果)

true

となる

真偽値

先ほどの例で出力された「true」は真偽値と呼ばれる。
真偽値にはtrueとfalseという２つの値しか存在しない。
条件式
・成り立つと「true」
・成り立たないと「false」
という真偽値に置き換わる

よって条件式を出力すると、trueやfalseが出力される

真偽値-true

script.js

const number =12;
console.log(number >10);

コンソール

true

真偽値-false

script.js

const number =8 ;
console.log(number =10);

コンソール

false

if文と真偽値

if文の条件式が
trueであれば処理が実行され、
falseであれば実行されない
ということがわかります。
if文の条件式がtrueの処理の流れをみていきましょう。

script.js

const number=12;
//条件式が成り立つ
if(number > 10){

  console.log("numberが10より大きいです")

}

script.js

const number=12;

//trueの置き換わる
if(true){

  console.log("numberが10より大きい")
}

大小を比べる演算子

条件式に使った「>」は比較演算子と呼ばれる、大小比較の記号です。
「a<b」は、aの方がbより小さいときtrue,大きいときfalseになります。
また「a<=b」とすると、aの方がbより小さいまたは等しい(つまりb以下のときtrueになります。

script.js

 a<b  ・・・aはbより小さい
 a<=b ・・・aの方が小さいまたは等しい
 a>b  ・・・aはbより大きい
 a>=b ・・・aの方が大きいまたは等しい

script.js

const number=12;
//true
console.log(number<30);

//true
console.log(number<=12);

//false
console.log(number>12);

演習

script.js

const age = 24;

// 「age >= 20」を出力してください
console.log(age>=20);

// 「age < 20」を出力してください
console.log(age<20);

// ageの値が20以上の場合に、「私は20歳以上です」と出力してください
if(age>=20){
  console.log("私は20歳以上です");
}

比較演算子

比較演算子には左と右の値が等しいか調べる
「a===b」はaとbが等しければtrue、等しくなければfalseになる
「a!==b」はその逆

等しいか比べる

scipt.js

a===b　・・・ aとbが等しい
a!==b　・・・ aとbが異なる

script.js

const number=12;
//true
console.log(number===12;)

const name= "john";
//false
console.log(name !== "john");

演習

script.js

const password = "ninjawanko";

// passwordの値が"ninjawanko"の場合、「ログインに成功しました」と出力してください
if (password === "ninjawanko"){
  console.log("ログインに成功しました");
}



// passwordの値が"ninjawanko"でない場合、「パスワードが間違っています」と出力してください
if (password !=="ninjawanko"){
  console.log("パスワードが間違っています");
}

条件が成り立たない場合の処理

numberの値が10より大きくない場合には「10以下です」と出力する方法

scirpt.js

const number=7;

↓定数 numberの値が10より大きい?

Yes

"10より大きいです"

No

"10以下です"

としたい

elseの書き方

if文に「else」を組み合わせると
「もし〇〇なら⚫️⚫️を行うそうでなければ■■を行う」
という処理ができるようになります。

script.js

if(条件式){
  条件が「true」の時の処理
}else{
  条件が「false」の時の処理
}

elseのコード

elseを使った実際のコード

script1.js numberの値が10より大きいかどうかで処理を分けた場合に
ifのみを使用した例

script2.js else文を用いると、1つの条件分岐で同じことを実現できます。

elseを使わない場合→複数のif文が必要

script.js

const number=7;
if(number >10 ){
  console.log("numberは10より大きいです");
}
if(number<=10){
  console.log("numberは10以下です")
}

elseを使う場合→１つの条件紙で成立する

script.js

const number=7;
if(number = 10){
  console.log("numebrは10より大きいです")
}else{
  console.log("numberは10以下です")
}

演習

script.js

const age = 17;

// 条件式が成り立たない場合に「私は20歳未満です」と出力してください
if (age >= 20) {
  console.log("私は20歳以上です");
} else{
  console.log("私は20歳未満です");
}

条件を追加する

「10より大きい」という条件を満たさない中で「5より大きい」という条件で
処理を分岐する方法

script.js

const number=7;

定数numberの値が10より大きい?

Yes

"10より大きいです"

NO

かつ定数numberの値が5より大きい?

Yes

"5より大きい"

No

"5以下です"

としたい

else ifの書き方

ifとelseの間に「else if(条件)」を追加することで、
ifに条件分岐に追加することができます。

script.js

if(条件式1){
  条件式1が「true」の時の処理  
}else if(条件式2){
  条件式1が「false」、条件式2が「true」の時の処理
}else{
  どちらの条件式も「false」の時の処理
}

else ifのコード

「else if」を使った実際のコードを確認
条件式2がtrueなので「else if」 の中の処理が実行され、
コンソールは以下のようになる

script.js

const number = 7;
if(number = 10){//false
  console.log("numberは10より大きいです")

}else if(number > 5){//true
  console.log("numberは5より大きいです)

}else{
  console.log("numberは5以下です")
}

numberは5より大きいです

script.js

const age = 17;


##演習

// ageの値が10以上20未満のとき、「私は20歳未満ですが、10歳以上です」と出力してください
if (age >= 20) {
  console.log("私は20歳以上です");
} else if(age>=10){
  console.log("私は20歳未満ですが、10歳以上です");
}
 else {
  console.log("私は10歳未満です");
}

かつ

複数の条件を組み合わせる方法
「かつ」について
「かつ」は「&&」→「条件1&&条件2」は「条件１かつ条件2」
という意味で、複数の条件が全てtrueならtrueになる
「10より大きいかつ30より小さい」は「10<x<30」と書くことはできない

かつ - &&
・true && true → true
・true && false → false
・false && true → false
・false && false → false

xが20の時 x>10 && x<30 ・・・true
true true

xが5の時 x>10 && x<30 ・・・false
false true

または

「または」は「||」→「条件1||条件2」は「条件1または条件2」
という意味で、複数の条件のうち1つでもtrueならtrueになる

または - ||
・true || true →true
・true || false →true
・false|| true →true
・false|| false →false

xが5の時 x<10 || x>30 ・・・true
true false

xが20の時 x<10 || x>30 ・・・false
false true

組み合わせの具体例

if文を使った「かつ」の具体例
number31のとき
「number>=10」も「number<100」もともとtrueなので、
処理が実行されます

script.js

const number=31;
if(number >=10 && number <100){
  console.log("numberは2桁です");
}

numberは2桁です。

演習

script.js

const age = 24;

// 指定された条件のif文を作成してください
if(age>=20 && age<30){
  console.log("私は20代です");
}

switch文とは

信号機の色を表す、定数colorの値によって処理をしたい例
ある値によって処理を分岐する場合に
switch文を用いることができる

定数color

ある値によって処理も分けたい!

・値が"緑"→「進めます」
・値が"黄"→「要注意」
・値が"赤"→「ストップ」

switch文の書き方(1)

「switch(条件の値){処理}」戸することでswitch文を使って
colorの値によって処理を分岐させる

switchの書き方

script.js

switch(条件の値){
      //変数や定数など
 :
 :

}//セミコロン不要

具体例

script.js

const color="赤":

switch(color){
 :    //定数のcolorの値に応じて処理を分岐する
 :
}

switch文の書き方(2)

switch文の中にcaseを追加することで処理を分けることができます
定数colorの値が「赤」であるときに「ストップ!」という文字列が出力される

script.js

switch(条件の値){
  case 値1:
  「条件の値」が「値1」と等しい時の処理
  break;
  //switch{}のなかにcaseを追加して処理を分ける
}

具体例

script.js

const color ='赤';
switch(color){
  case"赤":
  console.log("ストップ!");
  //定数colorの値が'赤'の時に実行される
  break;
}

switchの書き方(3)

switch文では分岐の数だけcaseを追加
caseの値に「黄」が指定されており、定数colorの値が「黄」である
場合には、「要注意」と出力されるようになっている

分岐の数だけ追加する

script.js

switch(条件の値){
  case 値1:
  //「条件の値」が「値1」と等しい時の処理
  break;
  case 値2:
  //「条件の値」が「値2」と等しい時の処理
}

script.js

const color ="赤";
switch(color){
  case"赤":
  //定数colorの値が"赤"の時に実行される
     console.log("ストップ");
  break
  case"黄":
  //定数colorの値が"黄"の時に実行される
     console.log("要注意");
  break
}

switch文の注意点

switch文ではbreakが非常に重要です。
breakとはswitch文を終了する命令
合致したcaseの処理を行なった後、その次のcaseの処理も実行してしまいます。そのため、switch文を使う時にはbreakを忘れないように気をつけましょう。

script.js

const color="赤";
switch(color){
  case"赤";
     console.log("ストップ");
  case"黄";
     console.log("要注意");
  berak;

}

上記のどちらも実行される

コンソール

ストップ!
要注意

演習

script.js

const rank = 2;

switch (rank) {
  case 1:
    console.log("金メダルです！");
    break;

  // rankの値が2のcaseを追加してください
  case 2:
   console.log("銀メダルです！");
   break;

  // rankの値が3のcaseを追加してください
  case 3:
  console.log("銅メダルです！");

  break;

}

switch文-default

switchの条件の値がcaseの値と一致した時、
その部分の処理が実行されます。
caseのどれにも一致しなかった時、defaultの
ブロックが実行されます。
defaultはif文のelseに似たようなもの

script.js

switch(条件の値){
  case 値1:
    :
    :
  case 値2:
    :
    :
  case 値3:
    :
    :
//「条件の値」が値1,値2,値3のどれも異なる時
   default
    処理
    break;

}

script.js

const color="黒"

switch(条件の値){
  case "赤":
    :
    :
  case "黄":
    :
    :
  case "緑":
    :
    :
//「条件の値」が値1,値2,値3のどれも異なる時
//この処理が実行される
   default
     console.log("colorの値が正しくありません")
    break;
}

switch文 -defalut

このようなswitch文の性質を利用すると、if,elseによる分岐が多く
複雑な場合、switch文で書き換えるとシンプルで読みやすいコードにできます。

script.js

  if(条件式){
    処理
}else if (条件式2){
  処理
}else{
  処理
}

script.js

switch(条件の値){
  case 値1:
    処理
    break;
  case 値2:
    処理
    break;
  case 値3:
    処理
    break;
  default
    処理
    break;
}

演習

script.js

const rank = 5;

switch (rank) {
  case 1:
    console.log("金メダルです！");
    break;
  case 2:
    console.log("銀メダルです！");
    break;
  case 3:
    console.log("銅メダルです！");
    break;
  // defaultの処理を追加してください
  default:
    console.log("メダルはありません");
   break;
}

JavaScript には filter, map, reduce などの配列を扱う便利な関数がいくつかありますが，他のモダンな言語にはあるけど JavaScript にはない関数というのもあります。今回はその中で collect と scan という関数を自作してみます。

collect

map と flat を合わせたようなものです。
各要素に対して指定された関数を適用し，結果を連結したリストを返します。

参考：https://fsharp.github.io/fsharp-core-docs/reference/fsharp-collections-listmodule.html#collect

（2020/10/26 追記）
コメントいただきました。普通に同じ意味の flatMap というのがありますね。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap
ランタイムが古くて使えないなどの理由がない限りは必要ないですね。
※ また，その場合でも「大きな配列の場合は避けるべきである」と上記リンクで警告されてます。

ソースコード

const collect = (list, fn) => (
  list && list.map(fn).reduce((acc, x) => acc.concat(x), [])
);

Array.prototype.collect = function(fn) {
  return collect(this, fn);
}

実行例

[3, 4, 5].collect(x => [...new Array(x).keys()].map(x => x + 1))
// > [1, 2, 3, 1, 2, 3, 4, 1, 2, 3, 4, 5]

任意の数を受け取ると１からその数までの配列を生成する関数を適用しています。
適用する関数では 3 なら [1, 2, 3] が，4 なら [1, 2, 3, 4] が返りますが，collect はそれらを展開した結果を返します。

scan

fold (reduce) に似ていますが，最終的な結果だけでなく，途中経過の結果の配列を返します。

参考：https://fsharp.github.io/fsharp-core-docs/reference/fsharp-collections-listmodule.html#scan

ソースコード

const scan = (list, fn, initialValue) => (
  list && list.reduce(
    ([acc, scanAcc], cur, idx, src) => {
      const ret = fn(acc, cur, idx, src);
      scanAcc.push(ret);
      return [ret, scanAcc];
    },
    [initialValue, []]
  )[1]
);

Array.prototype.scan = function(fn, initialValue) {
  return scan(this, fn, initialValue);
}

実行例

[1, 2, 3, 4, 5].scan((a, x) => a + x, 0)
// > [1, 3, 6, 10, 15]

アキュムレーター a に各要素 x を加算する関数と初期値 0 を指定します。

 0 + 1 =  1
 1 + 2 =  3
 3 + 3 =  6
 6 + 4 = 10
10 + 5 = 15

このような順に計算されていきます。fold (reduce) では，最終結果 15 が返却されますが，scan の場合は途中結果も含めて各要素に適用した結果が配列として返却されます。

概要

ES2015の{}←コイツの記法で惑わされたので自分の理解の範囲でまとめる。
CやJavaは嗜んでいた私。JavaScriptを勉強し始めて現れた{ hoge }の表記。{}ってナニ？
で、調べた。

分割代入

{}で囲うとそのプロパティの値を代入できる

{ a } = { a: 1, b: 2 } //a=1
{ a, b } = { a: 1, b: 2 } //a=1, b=2

なお分割代入は配列でも使える。
分割代入 - JavaScript | MDN

プロパティ名の省略

変数やメソッドをオブジェクトに入れると、プロパティを省略できる。
プロパティ名はその変数名,メソッド名。

  const a = 1
  const b = {a} //b = { a: 1 }

  const c = x => {
    console.log({x})
  }
  c(a) //{ x: 1 }
  c(b) //{ x: { a: 1 } }

引数で{}を使うと分割代入

分割代入もプロパティ名省略も理解したぞーと思ったらここがややこしい。

  const a = 1
  //プロパティ名省略
  const b = { a }

  //引数の{}は分割代入
  const c = ({ a }) => {
    console.log(a) //1

    //プロパティ名省略
    console.log({ a }) //{ a: 1 }
  }

プロパティ名省略の部分が分割代入のに見えたり見えなかったりでつまずいたのでした。

概要

ES2015の{}←コイツの記法で惑わされたので自分の理解の範囲でまとめる。
CやJavaは嗜んでいた私。JavaScriptを勉強し始めて現れた{ hoge }の表記。{}ってナニ？
で、調べた。

分割代入

{}で囲うとそのプロパティの値を代入できる

{ a } = { a: 1, b: 2 } //a=1
{ a, b } = { a: 1, b: 2 } //a=1, b=2

なお分割代入は配列でも使える。
分割代入 - JavaScript | MDN

プロパティ名の省略

変数やメソッドをオブジェクトに入れると、プロパティを省略できる。
プロパティ名はその変数名,メソッド名。

  const a = 1
  const b = {a} //b = { a: 1 }

  const c = x => {
    console.log({x})
  }
  c(a) //{ x: 1 }
  c(b) //{ x: { a: 1 } }

仮引数で{}を使うと分割代入

分割代入もプロパティ名省略も理解したぞーと思ったらここがややこしい。

  const a = 1
  //プロパティ名省略
  const b = { a }

  //仮引数の{}は分割代入
  const c = ({ a }) => {
    console.log(a) //1

    //プロパティ名省略
    console.log({ a }) //{ a: 1 }
  }

プロパティ名省略の部分が分割代入のに見えたり見えなかったりでつまずいたのでした。

はじめに

本記事では、JavaScriptのグラフ描画ライブラリのamChartを用いて、複数軸の線グラフの実装する際の第２縦軸の作成方法や日本語化などのカスタム方法を共有します。

開発環境

Ruby 2.5.1
Rails 5.2.4.4

amChartsとは

amChartsは、javascriptのグラフ描画ライブラリで、様々な種類の高機能なグラフを描画することができます。

公式リファレンス：https://www.amcharts.com/docs/v4/

日本語の情報が少ないため、カスタマイズする際は、公式リファレンスを参照することをおすすめします。

完成イメージ

現在、体重と体脂肪率を記録してグラフ化する機能を持つアプリを開発中で、
1つのグラフに横軸を日付、第１縦軸に体重、第２縦軸に体脂肪率を描画するため、amCharts4を使用しました。

下図のグラフが完成イメージとなります。

• 横軸：日付、第１縦軸：体重、第２縦軸：体脂肪率
• カーソル上のデータをTooltipで表示
• スクロールバーで拡大
• タイトルをマウスホバーするとTooltipを表示

実装手順/解説

amChartsの導入

amChartsの導入方法はこちらの記事が参考になります。
amcharts 4 Demos を使ってグラフを作成

横軸の値が不連続な場合のグラフの作成

本記事の横軸の値が不連続になる場合のグラフの作成は、下記の記事を参考にさせていただきました。
Railsにて不連続な間隔(日付など)で投稿された値をamChartsを使って折れ線グラフを作成する。

デモデータの準備

csvファイルをseedして以下のようなデモデータを準備します。

id	date	weight	body_fat_percentage
1	2020/06/08	72	15
2	・・・	・・・	・・・

完成サンプルコード

解説の前にサンプルコードを貼っておきます。
Rails側の記述は今回割愛します。

record.html.erb

<style>
  #chartdiv {
    width: 700px;
    height: 300px;
  }
</style>

//必要なJSファイルの読み込み
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//www.amcharts.com/lib/4/lang/ja_JP.js"></script>

<script>
am4core.ready(function() {

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.dateFormatter.language = new am4core.Language();
chart.dateFormatter.language.locale = am4lang_ja_JP;
chart.language.locale["_date_day"] = "MMMdd日";
chart.language.locale["_date_year"] = "yyyy年";

const weights = <%== JSON.dump(@weights) %>;
const body_fat_percentages = <%== JSON.dump(@body_fat_percentages) %>;
const dates = <%== JSON.dump(@dates) %>;

var firstDate = new Date(dates[0])
var lastDate = new Date(dates.slice(-1)[0])
var termDate = (lastDate - firstDate) / 1000 / 60 / 60 / 24 + 1

function generateChartData() {
  var chartData = [];
  for (var j = 0; j < weights.length; j++ ) {
    for (var i = 0; i < termDate; i++ ) {
      var newDate = new Date(firstDate)
      newDate.setDate(newDate.getDate() + i);
      if ((new Date(dates[j])) - (newDate) == 0 ){
        weight = weights[j]
        body_fat_percentage = body_fat_percentages[j]
        chartData.push({
          date1: newDate,
          weight: weight,
          date2: newDate,
          body_fat_percentage: body_fat_percentage
        });
      }
    }
  }
  return chartData;
}

chart.data = generateChartData();

//グラフタイトルの設定
var title = chart.titles.create();
title.text = "体重・体脂肪率の推移"; //グラフタイトルの設定
title.fontSize = 15; //グラフタイトルのフォントサイズの設定
//タイトルをマウスホバーした際に表示させるTooltipの表示内容設定
title.tooltipText = "スクロールバーで拡大できます。"; 

//第１横軸の設定
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.labels.template.fill = am4core.color("#ffffff");

//第２横軸の設定
var dateAxis2 = chart.xAxes.push(new am4charts.DateAxis());
dateAxis2.tooltip.disabled = true; //Tooltipの非表示設定
dateAxis2.renderer.grid.template.location = 0;
dateAxis2.renderer.labels.template.fill = am4core.color("#000000");

//第１縦軸の設定
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.labels.template.fill = am4core.color("#e59165");
valueAxis.renderer.minWidth = 60;
valueAxis.renderer.labels.template.adapter.add("text", function(text) {
  return text + "kg";
});
valueAxis.renderer.fontWeight = "bold"; //軸の値を太字に変更

//第２縦軸の設定
var valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis2.tooltip.disabled = true;
valueAxis2.renderer.grid.template.strokeDasharray = "2,3";
valueAxis2.renderer.labels.template.fill = am4core.color("#dfcc64");
valueAxis2.renderer.minWidth = 60;
valueAxis2.renderer.labels.template.adapter.add("text", function(text) {
  return text + "%";
});
valueAxis2.renderer.opposite = true; //第２縦軸を右側に設定
valueAxis2.renderer.fontWeight = "bold"; //軸の値を太字に変更

//第１縦軸用の値の設定
var series = chart.series.push(new am4charts.LineSeries());
series.name = "体重";
series.dataFields.dateX = "date1";
series.dataFields.valueY = "weight";
series.tooltipText = "{valueY.value}kg";
series.fill = am4core.color("#e59165");
series.stroke = am4core.color("#e59165");
series.smoothing = "monotoneX";
series.strokeWidth = 2;

//系列のポイントの設定(第１縦軸)
var bullet = series.bullets.push(new am4charts.Bullet());
var circle = bullet.createChild(am4core.Circle);
circle.width = 5;
circle.height = 5;
circle.horizontalCenter = "middle";
circle.verticalCenter = "middle";

//第１縦軸用の値の設定
var series2 = chart.series.push(new am4charts.LineSeries());
series2.name = "体脂肪率";
series2.dataFields.dateX = "date2";
series2.dataFields.valueY = "body_fat_percentage";
series2.yAxis = valueAxis2;
series2.xAxis = dateAxis2;
series2.tooltipText = "{valueY.value}%"; //ツールチップの表示設定
series2.fill = am4core.color("#dfcc64"); //ツールチップの色
series2.stroke = am4core.color("#dfcc64"); //グラフの線の色
series2.smoothing = "monotoneX";
series2.strokeWidth = 2;

//系列のポイントの設定(第2縦軸)
var bullet2 = series2.bullets.push(new am4charts.Bullet());
var circle2 = bullet2.createChild(am4core.Circle);
circle2.width = 5;
circle2.height = 5;
circle2.horizontalCenter = "middle";
circle2.verticalCenter = "middle";

chart.scrollbarX = new am4core.Scrollbar(); //スクロールバーの設定

//カーソルの設定
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis2;

//凡例の設定
chart.legend = new am4charts.Legend();
chart.legend.parent = chart.plotContainer;
chart.legend.zIndex = 100;
chart.legend.position = "top";
chart.legend.contentAlign = "right";

//グリッド線の設定
valueAxis2.renderer.grid.template.strokeOpacity = 0.07;
dateAxis2.renderer.grid.template.strokeOpacity = 0.07;
dateAxis.renderer.grid.template.strokeOpacity = 0.07;
valueAxis.renderer.grid.template.strokeOpacity = 0.07;

});
</script>

<div id="chartdiv"></div>

解説

複数縦軸の設定

サンプルコードの通り、複数軸のグラフの場合、各軸及び各値の設定が必要になります。
それぞれの使用するデータなどの設定を行います。

• 第１横軸：dateAxis
• 第２横軸：dateAxis2
• 第１縦軸：valueAxis
• 第２縦軸：valueAxis2
• 体重：series
• 体脂肪率：series2

日本語化

横軸が日付の場合、デフォルトの表記が米国式のため下図のように英語表記になります。

そのままでも問題は無いのですが、もし「◯月◯日」という表記にしたい場合は、以下の設定を追加します。
標準の翻訳設定では、例えば「Aug」を「8月」に翻訳はできますが、何日の方は「〇〇日」とは翻訳されないため、独自ルールを以下のように追加します。年も同様に行えます。

<script src="//www.amcharts.com/lib/4/lang/ja_JP.js"></script> //localeファイルの呼び出し
<script>
//中略
chart.dateFormatter.language = new am4core.Language(); //標準の翻訳設定
chart.dateFormatter.language.locale = am4lang_ja_JP; //標準の翻訳設定
chart.language.locale["_date_day"] = "MMMdd日"; 独自ルールで上書き
chart.language.locale["_date_year"] = "yyyy年";　独自ルールで上書き
//中略
</script>

【参考リンク】
　https://www.amcharts.com/docs/v4/concepts/locales/
　https://github.com/amcharts/amcharts4/blob/master/src/lang/ja_JP.ts

第２縦軸の設定

デフォルトの設定ですと第１縦軸と第２縦軸は両方左側にあります。

少し見にくいので、第２縦軸を右側に変更したい時は、以下の設定を追加します。

valueAxis2.renderer.opposite = true; //第２縦軸を右側に設定

他の追加設定を紹介

• データポイントの設定

各系列毎にデータポイントの設定が行えます。circleをsquareに変えると四角に変更できます。

var bullet = series.bullets.push(new am4charts.Bullet());
var circle = bullet.createChild(am4core.Circle);
circle.width = 5;
circle.height = 5;
circle.horizontalCenter = "middle";
circle.verticalCenter = "middle";

【参考リンク】
　https://www.amcharts.com/docs/v4/concepts/bullets/

• グラフの線を曲線に変更

series.smoothing = "monotoneX";

• 色の変更

series2.fill = am4core.color("#dfcc64"); //ツールチップの色
series2.stroke = am4core.color("#dfcc64"); //グラフの線の色

まとめ

amChartsを使うと高機能なグラフを描画できます。
折れ線グラフ以外にも様々なグラフを作ることができます。
日本語の情報が少ないので、カスタマイズしたい場合は、公式リファレンスを参照することをおすすめします。

参考URL

amcharts 4 Demos を使ってグラフを作成
Railsにて不連続な間隔(日付など)で投稿された値をamChartsを使って折れ線グラフを作成する。

「トップへ戻る」ボタンと「100vhだけ・一番下まで進む・戻る」ボタン

jQueryの「トップへ戻る」ボタンのやり方は鬼のように出てくるのですけど、
下に行くのも、マウスホイールぐるぐる回して地味にめんどくさいときありませんか？
ぼくはめんどくさいときがあったのでやってみました。

See the Pen
pobezbL by sarap422 (@sarap422)
on CodePen.

似たようなこと考えた方はやはりいたようで、
「scrollBottom」で検索するとすぐ出てきしたが、
なかなかわからなかったのは、「100vh」だけページ送り・戻りする方法。

結論として言うと、「100vh = window.innerHeight」で、

// 一番下まで
document.body.clientHeight
// 100vh下
window.pageYOffset + window.innerHeight
// 100vh上
window.pageYOffset - window.innerHeight

で、実装することができました。わーい

参考

JavaScriptで画面サイズを取得・変更する方法
https://uxmilk.jp/28500

ついでに「mix-blend-mode」というのが便利そうだったので、
調べてみましたが「exclusion」が楽そうだなーと思いました。

See the Pen ZEOLZwx by sarap422 (@sarap422) on CodePen.

プログラミング勉強日記

2020年10月25日
Babel、Typescript、Node、React、Angularなどで使えるテストの存在を知ったのでまとめる。

Jestとは

　FaceBook社がOSSとして開発しているJavaScriptのユニットテストのためのツール。公式のドキュメントはこちらで、日本語のドキュメントもある。
　特別な設定をすることなく、他のライブラリを追加することなく、誰でもすぐにユニットテストを書けるのが特徴。

特徴

　公式ドキュメントにあるようにJestの特徴は以下のようになる。

• zero config
• snapshots
• isolated
• great api
• fast and safe
• code coverage
• easy mocking
• great exceptions

zero config

　上でも述べているが、JestはJavaScriptプロジェクトにおいて細かい設定が不要なので、すぐにユニットテストを書くことができる。

snapshots

　テストと一緒にインラインに埋め込んだ状態で表示できるスナップショット機能で大きなオブジェクトを容易に追跡できるテストを作成できる。

isolated(独立的)

　パフォーマンスを最大化するために、別々のプロセスで実行してテストを並列化する。

great api

　itからexpectまで、Jestにはすべてのツールキットが1つにまとまっている。ドキュメント化されてメンテナンスもできている。

fast and safe

　テストが一意なグローバル状態であり、Jestは安全にテストを並列実行することができる。また、開発効率を上げるために前に失敗したテストから実行して、テストファイルの所要時間に基づいて再整理する。

code coverage

　フラグの--coverageを指定することで、追加の設定なしでコードガバレッジを生成する。Jestは最後のテストのファイルを含むプロジェクト全体からコードガバレッジ情報を収集できる。

easy mocking

　Jestはテストにおけるインポートに独自のリゾルバを使用することで、テストコード外のオブジェクトを簡単にモックできる。豊富なモック機能APIでモックされたインポートを利用して、読みやすいテスト構文で関数呼び出しをできる。

great exceptions

　テストが失敗したときの理由をわかりやすく表示する。

参考文献

第1回 環境の準備とテストの実行
公式ドキュメント

概要

railsでアプリケーションを作成中。
Javascriptを使用してボタンのクリックで要素の表示/非表示を切り替えたいが、クリックをしても動かない。
コードは以下のとおり。

html.erb

  <button type=button id="info-btn">ログイン情報</button>  
  <div class="login-info" id="js-login-info">
   <p>アドレス：hoge パスワード：hogehoge</p>
  </div>

css

.login-info { 
  display: none;
}

click.js

document.getElementById("info-btn").onclick = function(){
  const loginInfo = document.getElementById("js-login-info");
  if(loginInfo.style.display=="block"){
    loginInfo.style.display = "none";
  }else{
    loginInfo.style.display = "block";
  };
};

application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("../click")←ここで該当のjsファイルを読み込む

display: noneで要素を見えないようにしておき、クリックしたタイミングで値をblockに切り替えるようにしていたがいくらクリックしても動かず...。
コンソールを確認したところUncaught TypeError: Cannot set property 'onclick' of nullというエラーが表示されていた。

解決方法

個別でjsファイルをコンパイルして参照することで解決。下記の記事を参考にさせていただきました！
Ruby on RailsにおけるJavascriptファイルの取り扱い(Rails6)
具体的には以下の点を変更しました。
・ jsファイルの場所をapp/javascript/click.jsからapp/javascript/packs/click.jsに変更
・ 該当ビューファイル(new.html.erb)の一番下に<%= javascript_pack_tag 'click' %>を追加

検証ツールで確認すると<%= javascript_pack_tag 'click' %>を追加した箇所にscriptタグと共にコンパイルされたjsファイルが読み込まれていました。

最後に

headタグ内にある<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>でjavascriptファイルを読み込んでいるため、bodyタグの中身が読み込まれる前にjsファイルが読み込まれたことが原因でエラーが起きていたということだろうか。
問題は解決できたが自分の中に落とし込めていないため間違っている点がありましたらご指摘お願いします！

前書き

ゼロパディングの逆がしたくなりました。
以下のように変換。

'000001230' => '1230'

（追記）

投稿後に検索したら以下でもできると知りました。

Number('000001230');    //1230

状況が合えばこのパターンも良いですね。

コード（3パターン）

正規表現

const suppressZero1 = str => {
    //略
    return str.replace(/^0+/, '');
};
console.log( suppressZero1('000001230') );  //'1230'

配列化

const suppressZero2 = str => {
    //略
    const idx = str.split('').findIndex(x => x!=='0');
    return str.slice(idx);
};
console.log( suppressZero2('000001230') );  //'1230'

while

const suppressZero3 = str => {
    //略
    let idx = 0;
    while (str.charAt(idx)==='0') idx++;
    return str.slice(idx);
};
console.log( suppressZero3('000001230') );  //'1230'

速度

私の環境での処理時間は
（速＜遅）while =< 配列化 << 正規表現
の順番でした。

はじめに

こんにちは。高校2年生のmomeemtです。
今回は、Nimというプログラミング言語を使って、Vue.js風のCanvas（HTML5 APIの1つ）ライブラリ、「Blackvas」を開発している話についてまとめていきます。

Canvasとは、<canvas>要素とJavaScriptを用いてグラフィックを描画するための、HTML5 APIの1つです。詳しくはCanvas API - Web API | MDNをご覧ください。本記事では、Canvasそのものについての解説は、必要以外は省きます。

また、Nimとは2008年に最初の開発バージョンが、2019年に安定版がリリースされたモダンなシステムプログラミング言語です。Pythonのような構文を採用した一見インタプリタ言語のような言語ですが、静的型付けで、C言語やObjective-C、JavaScriptにトランスパイルできます。Nimについては、公式サイトや、Qiitaに投稿されているNimを知ってほしいなどの解説記事をお読みください。

本ライブラリはGitHubで公開しています。
Nimbleにも公開しておりますので、

nimble install blackvas

でイントールして使い始めることができます。
また、開発途中のライブラリであり、破壊的変更が行われることがあります。

動機

Canvas APIにおけるライブラリの必要性

Canvas APIは、かなり低レベルなAPIです。パスの設定・描画、気持ち程度に四角形などの描画が提供されていますが、直接Canvas APIのみを利用して開発することは憚られます。
ですから、EaselJSやPaper.jsなどのサードパーティ製のJavaScriptライブラリが開発されてきました。
では、それらのコードを眺めてみましょう。

EaselJS

var stage = new createjs.Stage("stage");
var shape = new createjs.Shape();
shape.graphics.beginFill("blue");
shape.graphics.drawCircle(0, 0, 100);
stage.addChild(shape);

Paper.js

const circle = Shape.Circle(0, 0, 100);
circle.fillColor = 'blue';
paper.view.draw();

これらは、青い円を描画するだけのプログラムです。シンプルな処理ですが、どちらのライブラリからも方向性は感じ取ることはできます。
Canvas APIを愚直に用いると、

CanvasAPI

const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d')
context.beginPath()
context.arc(100, 100, 100, 0 * Math.PI / 180, 360 * Math.PI / 180, false)
context.fillStyle = 'blue'
context.fill()

このようなコードが必要になります。Canvas APIは円の描画関数を提供しませんから、円弧のPathを動くarc関数を用いて描くことになります。

この程度ならCanvas APIでも良い、と感じられるでしょう。しかし、Canvas APIは本当に上のようなシンプルなパスを描くことだけを提供した良くも悪くも最低限のライブラリです。例えば、Canvas APIはHTMLサイドがCanvas要素1つだけで、ほとんどJavaScriptが描画を担うため、クリックイベントを始めとしたイベント系は描画した要素に対して適用させることはできません。

サードパーティライブラリはそのような点もサポートしていることが多いため、描画することが増えるにつれて、ライブラリの存在が頼りになることでしょう。

既存ライブラリの問題点

しかし、私は既存ライブラリには問題点があると考えました。

Canvas APIで行う描画はアニメーションなども用いられ、複雑で、込み入ったものになりがちです。しかし、既存ライブラリは描画やイベントに関してはサポートを行いますが、設計についてはサポートを行いません。
開発者自身で、複雑なCanvasプログラムを保守していかなければならないのです。

話はWeb開発になりますが、近年では、JQueryで行われやすい手続き型プログラミングは規模の拡大と主に保守の困難さから敬遠されるようになりました。代わりに、Vue.jsやReactのような宣言型UIライブラリが台頭し、誰も彼もがこれらを使ってWebフロントエンド開発を行うようになりました。

宣言型プログラミングというのは、ある対象の性質を宣言することでプログラムを構築する手法です。
関数型プログラミングも、宣言型プログラミングに属しています。特に、Reactは関数型プログラミングによく影響を受けているように感じます。

Vue.jsは、Evan You氏が開発した人気のある宣言型UIライブラリのひとつです。

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello, Vue.js'
    }
  }
}
</script>

Vue.jsの宣言的UI・コンポーネント志向は、Canvasにも適用できるのではないかと思いました。特に、図形の描画において同じような素材 = コンポーネントが大量に存在するでしょうから、コンポーネント指向とも親和性が高いはずだと考えました。

そのことから、ユーザーが利用しやすい高レベルの関数を提供することと、宣言的UI・コンポーネント指向を提供することで、より設計しやすく簡潔に記述できることを目指したライブラリを開発し始めました。

Blackvasのサンプルコード

ここでBlackvasの使い方について事細かく説明するのは野暮ですから、サンプルコードをもとに簡単に解説します。

import Blackvas, random

Blackvas:
  shapes:
    shape MyCircle:
      circle(100f, 100f, 100f)

  style:
    id red:
      color = PrimaryColor.red

  data:
    var
      dx = 5.0
      dy = 5.0

  methods:
    proc randomWalk(context: var VasContext) =
      context.x += dx
      context.y += dy
      var dPos = rand(5.0) + 5.0
      if context.x <= 0:
        dx = dPos
      elif context.y <= 0:
        dy = dPos
      elif context.x + 200.0 >= width:
        dx = -dPos
      elif context.y + 200.0 >= height:
        dy = -dPos

  data:
    const redId = "red"

  view:
    MyCircle:
      id = redId
      @animation = randomWalk

図形がコンポーネントとしてshapesで切り出されています。
定義されたshapeは、view内から呼び出すことで画面に描画されます。

図形の色などスタイルを変更したい場合には、styleに記述します。図形はidとclassを持つことができるので、それらを用いるか、shape名からスタイルを適用できます。

methods内にあるプロシージャ（他言語の関数のことをNimではプロシージャと呼びます）は、VasContext型のパラメータを受け取ります。これは、呼び出し元のshapeのデータを保持しており、座標などのデータを操作することができます。

shape呼び出しの中にある@animationは、アニメーションを実行します。正確には、20msごとに設定したプロシージャが呼び出されます。
また、サンプル内にはありませんが@clickを用いることで、shapeごとに独立したクリックイベントを発行します。

Blackvasの実装

Blackvasの雰囲気を感じ取っていただけたでしょうか。
それでは、これらの実装について触れていきます。

NimからCanvasを利用する

Nimは、JavaScriptにトランスパイルできると序文で説明しましたが、JavaScriptの資産を利用することもできます。

canvas.nim

import dom

type
  Event* = ref EventObj
  EventObj {.importc.} = object of RootObj
    target*: Node
  ...

Canvas* = ref CanvasObj

CanvasObj {.importc.} = object of dom.Element
  width* : float
  height* : float

...

# methods
proc addEventListener*(et: Canvas, ev: cstring, cb: proc(ev: Event), useCapture: bool = false) {.importcpp.}
proc addEventListener*(et: Window, ev: cstring, cb: proc(ev: Event), useCapture: bool = false) {.importcpp.}

proc arc*(c: CanvasContext2d, x: float, y: float, radius: float, startAngle: float, endAngle: float, anticlockwise: bool = false) {.importcpp.}

...

一部省略していますが、Blackvasのcanvas.nimというコードです。
標準ライブラリからDOMを扱えるdomモジュールが提供されているので、import domで読み込めます。
また、コンパイラに補足的に情報を付与するプラグマ{.importcpp.}を用いて、JavaScriptからaddEventListener、arcなどの関数を読み込んでいます。

ちなみに逆も同様で、JavaScriptからNimのコードを呼び出すこともできます。

仮想Canvas

Canvasでは、各々の要素のパラメータを変化させてアニメーションを行うことがよくあります。
Blackvasでもそれをサポートしているので、コンパイル時に出力されるCanvas情報が確定してしまうと、アニメーションを発生させることができません。
そこで、仮想Canvasという、実際に画面に描画される前にJSONの形でshapeとviewに出力される
shapeの情報を保持して、その情報をもとに描画されます。そうすることでCanvasのアニメーションは再描画を繰り返して実現しますから、仮想Canvasの更新 + 画面の再描画を行うだけで実現できることになります。

shape.nim

macro Blackvas*(body: untyped): untyped =

  result = """
import json, strutils, math, dom, tables
var
  canvas*: Canvas
  context*: CanvasContext2d
  globalEvent*: Blackvas.Event
  virtualCanvas* = %* { "virtual_canvas": {}, "shapes": {}, "styles": {} }
""".parseStmt

  result.add quote do:
    proc removeDoubleQuotation(str: string): string =
      result = str[1..str.len-2]
    proc drawShape (context: CanvasContext2d, shapesArr: JsonNode, baseX: float, baseY: float) =
      for obj in shapesArr:
        let rawObjFunc = obj["func"].pretty
        let objFunc = rawObjFunc[1..rawObjFunc.len-2]
        case objFunc:
        of "style_color":
          let color = removeDoubleQuotation(obj["color"].pretty)
          context.fillStyle = color
        of "rect":
          let
            x = obj["x"].pretty.parseFloat + baseX
            y = obj["y"].pretty.parseFloat + baseY
            width = obj["width"].pretty.parseFloat
            height = obj["height"].pretty.parseFloat
          context.beginPath()
          context.rect(x, y, width, height)
          context.fill()
        of "text":
          let
            value = removeDoubleQuotation(obj["value"].pretty)
            x = obj["x"].pretty.parseFloat + baseX
            y = obj["y"].pretty.parseFloat + baseY
          context.strokeText(value, x, y)
          context.fillText(value, x, y)
        of "triangle":
          let
            v1x = obj["x1"].pretty.parseFloat + baseX
            v1y = obj["y1"].pretty.parseFloat + baseY
            v2x = obj["x2"].pretty.parseFloat + baseX
            v2y = obj["y2"].pretty.parseFloat + baseY
            v3x = obj["x3"].pretty.parseFloat + baseX
            v3y = obj["y3"].pretty.parseFloat + baseY
          context.beginPath()
          context.moveTo(v1x, v1y)
          context.lineTo(v2x, v2y)
          context.lineTo(v3x, v3y)
          context.fill()
        of "circle":
          let
            x = obj["x"].pretty.parseFloat + baseX
            y = obj["y"].pretty.parseFloat + baseY
            r = obj["r"].pretty.parseFloat
          context.beginPath()
          context.arc(x, y, r, 0, 2 * math.PI)
          context.fill()

    proc draw (context: CanvasContext2d) =
      context.clearRect(0, 0, canvas.width, canvas.height)
      let virtualCanvasObjects = virtualCanvas["virtual_canvas"]
      let shapesObjects = virtualCanvas["shapes"]
      let styleObjects = virtualCanvas["styles"]
      for item in virtualCanvasObjects.pairs:
        if not item.val.hasKey("shape"):
          continue
        let shapeName = removeDoubleQuotation(item.val["shape"].pretty)
        var
          idName = ""
          className = ""
          baseX = 0.0
          baseY = 0.0
        if item.val.hasKey("id"):
          idName = "#" & removeDoubleQuotation(item.val["id"].pretty)
        if item.val.hasKey("class"):
          className = "." & removeDoubleQuotation(item.val["class"].pretty)
        if item.val.hasKey("x"):
          baseX = item.val["x"].getFloat.float
        if item.val.hasKey("y"):
          baseY = item.val["y"].getFloat.float
        context.font = "24px Arial"
        context.fillStyle = "#000000"
        context.textAlign = "start"
        let shapeArray = shapesObjects[shapeName]
        let styleArrayById = styleObjects[idName]
        for obj in styleArrayById:
          let
            style = removeDoubleQuotation(obj["style"].pretty)
            value = removeDoubleQuotation(obj["value"].pretty)
          case style:
          of "color":
            context.fillStyle = value
        drawShape(context, shapeArray, baseX, baseY)

    window.addEventListener("load",
      proc (event: Event) =
        if document.getElementById(canvasId) == nil:
          let blackvas = document.getElementById("Blackvas")
          canvas = dom.document.createElement("canvas").Canvas
          canvas.id = canvasId
          canvas.height = height
          canvas.width = width
          blackvas.appendChild(canvas)
        else:
          canvas = document.getElementById(canvasId).Canvas

        context = canvas.getContext2d()

        when Debug:
          echo pretty virtualCanvas
        draw(context)
        echo "Hello, Blackvas ;)"
    )
  result.add body

これは、Blackvasマクロです。Nimのマクロは、C言語のプリプロセッサのような単なる項置き換えマクロではなく、抽象構文木を構築して返すことができるので高い表現力を持っています。

virtualCanvasは、JSON型の変数で、その要素のvirtual_canvasは、view層で呼び出された描画されるshape、shapesは定義されたshape全て、stylesは定義されたstyle全てが格納されます。

吐き出されるdrawプロシージャは、仮想Canvasの情報をもとにCanvas contextに適用しています。そこで呼び出されるdraw_shapeプロシージャは、実際にshapesの要素をCanvasのcontextに書き出します。

BlackvasマクロはBlackvasプログラムの一番最初で呼び出されることを前提にしています。なぜなら、ここで最初にvirtual_canvas変数が定義されることを他のマクロは期待しているからです。
ユーザーは、コンポーネント指向や宣言的UIの恩恵を受けるために、いくつかの制約を守らなければいけないようになっています。

クリックイベントの実装

開発でおそらく最も苦労したことは、クリックイベントの実装です。
現在は、Blackvasが提供している図形が四角形、三角形、丸のみですが、今後自由に記述できるパスなどを追加したら実装が地獄になる予感がします。

Canvas領域の中で図形がどの座標に位置しているか、クリックした座標がそれらの図形の内側の存在するかを判定しています。
getAddListenderClickEventは、shapesマクロから吐き出されるプロシージャです。処理自体はとても単純なのですが、このプロシージャもNimNodeという構文木を返すので、実際にされるコードまで3段階あり、途中でどの段階のコードを考えているのか混乱することが多々ありました。
プロシージャ名を受け取って呼び出さなければならないので、構文木を扱う段階まではずっと構文木を返すコードを考え続けなければならずこのような実装になりましたが、もう少しあったんじゃないかとも思います。

proc getAddListenerClickEvent (procedureName: NimNode, shape: string, shapeInstanceName: string): NimNode =
      let shapeNimNode = shape.parseStmt
      var devideShapes = newSeq[string]()
      for sentence in shapeNimNode:
        let shapeKind = sentence[0].repr
        case shapeKind:
        of "rect":
          devideShapes.add (%* {
            "kind": shapeKind,
            "x": sentence[1].floatVal.float,
            "y": sentence[2].floatVal.float,
            "width": sentence[3].floatVal.float,
            "height": sentence[4].floatVal.float
          }).pretty
        of "triangle":
          devideShapes.add (%* {
            "kind": shapeKind,
            "x1": sentence[1].floatVal.float,
            "y1": sentence[2].floatVal.float,
            "x2": sentence[3].floatVal.float,
            "y2": sentence[4].floatVal.float,
            "x3": sentence[5].floatVal.float,
            "y3": sentence[6].floatVal.float
          }).pretty
        of "circle":
          devideShapes.add (%* {
            "kind": shapeKind,
            "x": sentence[1].floatVal.float,
            "y": sentence[2].floatVal.float,
            "r": sentence[3].floatVal.float
          }).pretty

      result = quote("@@") do:
        import json
        window.addEventListener("load",
          proc(event: Event) =
            var canvas: Canvas
            if document.getElementById(canvasId) == nil:
              let blackvas = document.getElementById("Blackvas")
              canvas = dom.document.createElement("canvas").Canvas
              canvas.id = canvasId
              canvas.height = height
              canvas.width = width
              blackvas.appendChild(canvas)
            else:
              canvas = document.getElementById(canvasId).Canvas
            let context = canvas.getContext2d()
            canvas.addEventListener("click", 
              proc (event: Blackvas.Event) =
                let shapeInstance = virtualCanvas["virtual_canvas"][@@shapeInstanceName]
                echo shapeInstance.pretty
                var
                  # Shapeの基準座標
                  baseShapeX = 0.0
                  baseShapeY = 0.0
                if shapeInstance.hasKey("x"):
                  baseShapeX = shapeInstance["x"].getFloat
                if shapeInstance.hasKey("y"):
                  baseShapeY = shapeInstance["y"].getFloat
                let
                  canvasRect = canvas.getBoundingClientRect()
                  # click時のCanvas内における基準座標
                  basePointX = event.clientX - canvasRect.left
                  basePointY = event.clientY - canvasRect.top
                var isClick = false
                var shapes = newSeq[JsonNode]()
                for shapeStr in @@devideShapes:
                  shapes.add shapeStr.parseJson
                for shape in shapes:
                  let
                    rawKind = shape["kind"].pretty
                    kind = rawKind[1..rawKind.len-2]
                  case kind:
                  of "rect":
                    let
                      x = shape["x"].getFloat + baseShapeX
                      y = shape["y"].getFloat + baseShapeY
                      width = shape["width"].getFloat
                      height = shape["height"].getFloat
                      intoCond1 = x <= basePointX and y <= basePointY
                      intoCond2 = (x + width) >= basePointX and (y + height) >= basePointY
                    if intoCond1 and intoCond2:
                      isClick = true

                  of "triangle":
                    # ベクトル係数を計算して三角形内にクリック座標が含まれているか
                    let
                      x1 = shape["x1"].getFloat + baseShapeX
                      y1 = shape["y1"].getFloat + baseShapeY
                      x2 = shape["x2"].getFloat + baseShapeX
                      y2 = shape["y2"].getFloat + baseShapeY
                      x3 = shape["x3"].getFloat + baseShapeX
                      y3 = shape["y3"].getFloat + baseShapeY
                      area = 0.5 * (-y2 * x3 + y1 * (-x2 + x3) + x1 * (y2 - y3) + x2 * y3)
                      sScala = 1 / (2 * area) * (y1 * x3 - x1 * y3 + (y3 - y1) * basePointX + (x1 - x3) * basePointY)
                      tScala = 1 / (2 * area) * (x1 * y2 - y1 * x2 + (y1 - y2) * basePointX + (x2 - x1) * basePointY)
                      scalaDiff = 1 - sScala - tScala
                    if (0 < sScala and sScala < 1) and (0 < tScala and tScala < 1) and (0 < scalaDiff and scalaDiff < 1):
                      isClick = true

                  of "circle":
                    let
                      x = shape["x"].getFloat + baseShapeX
                      y = shape["y"].getFloat + baseShapeY
                      r = shape["r"].getFloat
                      pointDistanceSquare = (x - basePointX) ^ 2 + (y - basePointY) ^ 2
                    if pointDistanceSquare <= r ^ 2:
                      isClick = true
                if isClick:
                  var vasContext = getVasContext(@@shapeInstanceName)
                  @@procedureName(vasContext)
                  restructJson(@@shapeInstanceName, vasContext)
                  draw(context)
            )
        )

展望など

現在、BlackvasはVue.js風の文法や、コンポーネント指向や宣言的UIの恩恵を受けるため、制約を守ったり、大部分をmacroで記述しなければいけないというデメリットがあります。

特に後者は、Nim公式も「プロシージャでどうしても実現できない場合にテンプレートを使い、テンプレートでどうしても実現できない場合にマクロを使いなさい」と呼びかけているほど、マクロは可読性を下げます。
ドキュメントがなければ他のマクロがvirtual_canvasの宣言を前提に動作していることには気づけないでしょう。今後は、テンプレートに置き換えたり、プロシージャに置き換えることで可読性を上げていきたいと考えています。

Canvas APIにはまだまだ可能性があるような気がしています。WebGL APIなども読んでみて、2Dだけでなく3Dの描画ができるように実装を進めたり、Unityのようなゲーム開発エンジンのように開発を進めても面白いなあと思っています。

また、Issueを作成している通り、いろいろなアイディアがあり、それを少しずつ実装している状態です。
もし、何かBlackvasをよりよくするようなアイディアがあれば、Issueに書き込んでいただければ大変助かります。

せっかくオープンソースにしているので、新しい開発者が増えるようにドキュメントの整備なども行っていきたいです。

最後に

前回の単位型ライブラリを開発してから、ライブラリを開発することがとても楽しくなりました。
特に、Web開発にずっと取り組んでいたので、Webに関係のあるライブラリをどんどん作って、Web開発にもNimが参入するようになったら嬉しいなと思います。

開発は主にメタプログラミングが中心で、いつもと考えるステップが（このコードで出力されるコードが〇〇と働くから...のように）一段増えたので混乱することも多くあり、コードも綺麗にはかけませんでしたが、できる限り直していって、正式リリースを目指したいと思います。

駄文ではありましたが、読んでいただきありがとうございました。
本ライブラリは

GitHub

で公開していますので、よければご覧ください。では！