はじめに

初めまして。
年末まで毎日webサイトを作っている者です。
今日はMDNのサイトにあった数字当てゲームを作りました。
載ってあるコードは一切見ずに、完成しているものを触っていきなり作り出したのでかなりカオスな状態になっております。。。
ちなみに+@で正解したかどうか画像で判断できるようにしました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は8日目。(2019/10/26)
よろしくお願いします。

サイトURL

• https://sin2cos21.github.io/day8.html

やったこと

MDNのサイトに載ってある数字当てゲームをコードを見ずに作りました。
+@で画像で正解したかどうかわかるようにしてあります↓

では、かなり汚いコードを載せますのでご注意ください・・・↓

    <script>
        var cNumber = Math.floor(Math.random() * 101);
        var eNumbers = [10];
        var count = 0;
        var yosou = document.getElementById('yosou');
        var button = document.getElementById('button');
        var houkoku = document.getElementById('houkoku');
        var daisyo = document.getElementById('daisyo');
        var textBox1 = document.getElementById('textBox1');
        var flag2;
        var flagImg = document.getElementById('flagImg');

        function imgChange() {
            var mySrc = flagImg.getAttribute('src');
            if (flag2 === true) {
                flagImg.setAttribute('src', 'maru.png');
            } else {
                flagImg.setAttribute('src', 'batu.png');
            };
        };

        function onButtonClick() {
            if (count < 10) {
                count += 1;
                var iNumber = document.forms.form1.textBox1.value;
                eNumbers[count - 1] = iNumber;
                var miNumber = Number(iNumber);
                yosou.textContent += miNumber + " ";
                textBox1.value = "";
                if (count == 10) {
                    button.disabled = true;
                };
                if (miNumber === cNumber) {
                    houkoku.textContent = "おめでとう！正解です！";
                    flag2 = true;
                    daisyo.textContent = "";
                    button.disabled = true;
                } else {
                    houkoku.textContent = "間違いです！";
                    flag2 = false;
                    if (cNumber > miNumber) {
                        daisyo.textContent = "今の予想は小さすぎです!もっと大きな数字です。";
                    } else {
                        daisyo.textContent = "今の予想は大きすぎです!もっと小さな数字です。";
                    };
                };
            };
        };

        function allReset() {
            eNumbers.length = 0;
            count = 0;
            button.disabled = false;
            yosou.textContent = "";
            houkoku.textContent = "";
            daisyo.textContent = "";
        };
    </script>

imgChange関数は正解かどうかで画像を切り替えています。
昨日作ったものと同じ構成です。
変数flag2で正解したかどうか判断していますが、この変数はonButtonClickの中で切り替えています。

感想

動くものを触って中身を判断するのは思ったより大変でした！
最初は「おっ、簡単そうじゃん！」なんて思っていたのですが、実際に作るとなるとやっぱり違いますね。

ちなみにMDNはとてもいいサイトだということが分かったので今後もMDNを中心に勉強していこうと思います。よし、明日も頑張るぞ。
最後までお読みいただきありがとうございます。そして今までグッドを押してくれた皆様、本当に励みになっております。ありがとうございます！

参考

• MDN(https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript)

補間関数マシンとしてのAI実験　 AI Test as an Interpolation Function Machine

ニューラルネットは補間関数だと前に述べた（https://randomwalkjapan.blogspot.com/2019/05/ai-reality-of-booming-ai.html）が、下の自作ツールで試してみよう！Ealier I mentioned that neural net is an interpolation function(https://randomwalkjapan.blogspot.com/2019/05/ai-reality-of-booming-ai.html) so let's try it out in below tool I made!

１０個のデータポイントを色々変えると、関数が難しくなるにつれて、ニューロン数、繰り返し回数、中間層の数を増やさないと追従できなくなることが確認できる。If you change 10 data points, as function become complex, you can confirm that interpolation becomes difficult unless you increase number of neurons, epochs, layers.

https://randomwalkjapan.blogspot.com/2019/10/aiai-as-interpolation-machine.html

Program is at
https://github.com/tanakayutaka/Tensorflow.js-tools-/upload/master .

忘備録として、、、、

GASを用いてスプレッドシートにあるデータの内、特定の条件がある行のみを削除するループ処理の関数を作成した時のメモです。
カウントアップすると削除時に行ズレが発生するので、カウントダウンさせています。

例:2列目に登録されている時刻データを現在時刻と比較して、古い場合は行を削除します。

ClearRowOnSpreadSheet

function ClearRowOnSpreadSheet(){
  const Now = new Date(); //現在時刻を取得
  const Sheet = SpreadsheetApp.getActiveSheet(); //シートを取得
  const Time_Column = 2; //条件検索の列を指定
  const lastRow = sheet.getLastRow();

  for(var row = lastRow; row > 0; row--){
   var Time = sheet.getRange(row, Time_Column).getValue();
   var TimeDate = Date.parse(startTime);

     if(TimeDate < Now.getTime()){
      sheet.deleteRow(row);
      }
    }
}

私はなぜか「もっと見る」ボタンを実装することがやたらと多いので、いろいろなやり方を試す中で「これが一番シンプル！」と発見した方法を書いておきます。

要件

今回は以下のような要件の「もっと見る」ボタンを実装します。

• 一覧があり、最初は6件表示されている
• 「もっと見る」ボタンをクリックすると6件ずつ表示される
• もっと見るものがなくなったら、「もっと見る」ボタンは消える
• データのロードは最初に全件行う。「もっと見る」をクリックしたときにロードするわけではない
• したがって、速度を速くする目的ではなく、一覧の量が多いので隠しておきたい時に使えるものを実装する

デモ

デモを作成しましたので以下のリンクから動作確認ができます。
もっと見るボタン - codepen

この「もっと見る」ボタンのおすすめポイント

• jsがたったの8行！
• htmlはn件ごとにdivで区切ったりする必要なし
• 「もっと見る」をクリックして出現する時、ささやかなアニメーションつき

実装のポイント

詳しい実装はデモのcodepenを見てほしいのですが、jQueryでやっていることは下記のような内容です。

1. 最初の6件以外を非表示にする
2. 「もっと見る」をクリックしたら、非表示になっている項目の頭から6件だけ表示する
3. 表示後、非表示の項目が0件の場合は、「もっと見る」ボタンを非表示にする

実装は以下のようになっています。

JavaScript

var moreNum = 6;
$('.list li:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden');
$('.more').on('click', function() {
  $('.list li.is-hidden').slice(0, moreNum).removeClass('is-hidden');
  if ($('.list li.is-hidden').length == 0) {
    $('.more').fadeOut();
  }
});

1. 最初の6件以外を非表示にする

「最初の6件以外」をどう取得するかがポイントですが、cssのnth-childという疑似クラスを使用しました。以下のコードの部分です。

$('.list li:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden');

.list li:nth-child(n + 7)とすることで、「listクラス内のliタグの７番目以降」が取得できます。nth-childは大変便利で、jsでロジックを書かなくてもcssのセレクタだけでn番目、n以前、n以降、最初、最後などが取得できます。

2. 「もっと見る」をクリックしたら、非表示になっている項目の頭から6件だけ表示する

こちらは以下のような実装をしました。

$('.list li.is-hidden').slice(0, moreNum).removeClass('is-hidden');

非表示の要素にはis-hiddenクラスが付与されるので、これをセレクタにします。
6件目までを取得するには配列のsliceメソッドを使用しています。sliceは、配列の0から6までの要素をコピーして新しい配列を返すメソッドです。

最初はnth-childでできないか試してみたのですが、この場合では難しかったです。
li.is-hidden:nth-child(-n + 6)とか
li.is-hidden:nth-of-type(-n + 6)とか
これらはうまくいきません。理由はnth-childもnth-of-typeもタグに対して何番目かを選択できるもので、is-hiddenなどのクラス要素内で何番目かは選択できないのでした。

スライドアニメーションの実装方法

アニメーションはcssで実装しています。以下はアニメーション部分のcssの抜粋です。

css

.list li {
    opacity: 1;
    height: 32px;
    margin-top: 10px;
    transition: all 0.4s ease 0s;
}
.list li.is-hidden {
    opacity: 0;
    height: 0;
    margin: 0;
}

.list li {...}に書かれているのが表示状態のスタイルで、
.list li.is-hidden {...}に書かれているのが非表示状態です。
非表示→表示に変わる時の変化の指定をしているのが、transitionプロパティです。transitionはアニメーション関連の設定のショートハンドです。一言で解説すると「0.4秒で変化しろ！」という指定となっています！

「非表示のスタイルはdisplay:none;でいいんじゃないの？」と思う方もいるかもしれませんが、ダメなのです。
transitionできるプロパティとできないプロパティがあるためです。そのため、非表示→表示や表示→非表示にアニメーションを入れたい場合、opacity（透明度）をよく使っています。fadeIn・fadeOutの効果が出せておすすめです。
今回はheightにも変化をつけたため、「fadeInしながらスライド」みたいなアニメーションになりました。

この実装の問題点

初回表示時に全件表示されたあと7件目以降が隠れるところのが一瞬見えてしまいます。もっと良い実装をするなら、アニメーション時だけ特定のクラスを付与すると良いのですが…それはまたの機会に…。
気になる場合はアニメーションをやめると良いと思います。

まとめ

css疑似クラスのnth-childやjs配列のsliceメソッドを使って、n番目以降やn番目以前を取得する方法をご紹介しました。こういうテクを知っていればごりごりロジックを書く必要がなくなって便利ですね！

参考記事

何番目系の便利なCSSまとめ
【CSS】nth-childとnth-of-typeでもう混乱しない。
【CSS3】Transition（変化）関連のまとめ

初めに

Ankosoftの山崎です。
redmine.tokyo の第17回勉強会まで後１週間と迫っていますので、少しでもRedmineを盛り上げられればと思い、RedmineのUI改善のお話をしたいと思います。

Redmineで管理者権限があるユーザーが「管理」ページで「ユーザー」、「グループ」、「ロール」、「トラッカー」、「チケットのステータス」、「カスタムフィールド」、「文書カテゴリ」、「チケットの優先度」、「作業分類 (時間管理)」で項目を削除することができます。

しかし下図のように項目名と削除のボタンがかなり離れているため、削除したい項目の削除ボタンをクリックしたつもりが、他の項目の削除ボタンを誤ってクリックしてしまう可能性があります。（実際に何度か誤って削除してしまったことがあり、対応に苦労しました）

誤って項目が削除されることを防止するユーザーの操作性の向上のためにアラートがポップアップする仕様になっていますが、「よろしいですか？」というメッセージでは「OK」をクリックした場合に何が削除されるのか分からないので、ユーザーとしては不安感が残るUIになっていました。

さすがにプロジェクトが誤って削除されたら、問題の影響が大きいので、「ユーザー」、「グループ」などとは異なり、削除をクリックすると、ページが遷移して、プロジェクト名が明記された状態でユーザーに最終意思確認をしています。

改善した削除UI

下図のように「削除」をクリックすると、【「項目名」を削除してもよろしいですか？】というメッセージを表示します。
これにより、正しい項目を削除することができ、削除の最後の確認段階で自分が意図した項目であるかどうかを確認することができます。

作成したJavaScriptコード

htmlソースを確認すると、削除ボタンをクリックすると、「data-confirm」に記載されている「よろしいですか？」がポップアップアラートのメッセージとして表示されることが分かります。

強制的にJavaScriptで「data-confirm」に「【項目名】＋削除しても」を追加してポップアップアラートのメッセージに項目名を表示させます。

qiita.rb

$('tr').each(function(i, elem){
    $(elem).find("a:last").data('confirm',"「"+$(elem).find("a:first").text()+"」を削除しても"+$(elem).find("a:last").data('confirm'))
});

簡単にコードの説明をすると
$('tr').each(function(i, elem){の部分で全てのtrタグに対してループ処理をしています。

$(elem).find("a:last").data('confirm',"の部分で、trタグ配下の一番最後のaタグの「data-confirm」に下記の２つの値を設定しています。

"「"+$(elem).find("a:first").text()+"」を削除しても"の部分で、項目名の取得

+$(elem).find("a:last").data('confirm')の部分で元々の「data-confirm」の値、ここでは「よろしいですか？」を取得

これにより、「data-confirm」の値が「よろしいですか？」から「【項目名】＋削除してもよろしいですか？」に変更されます。

これにより、削除ボタンをクリックすると「【項目名】＋削除してもよろしいですか？」が表示されます。

上記のJavaScriptをview customize pluginに登録して使えばOKです。

ちなみに、このコードで「ユーザー」、「グループ」、「ロール」、「トラッカー」、「チケットのステータス」、「カスタムフィールド」、「文書カテゴリ」、「チケットの優先度」、「作業分類 (時間管理)」全ての削除ボタンで項目名を表示させることができます。

参考情報

ではでは、来週のredmine.tokyo の第17回勉強会で皆様とお会いできるのを楽しみにしております。

JavaScriptでUIを改善した記事です。
たった1行のJavaScriptコードでRedmine UI （カスタムフィールドのトラッカー名の表示）を改善する方法

RedmineのガントチャートUIを大幅に改善したANKOガントチャートの紹介ページ
ANKOガントチャート

初心者こそ、Dockerを使おうの 素のjavascript 編です。

多分一番ボリュームがあります。
* 素のJSという割には、Parcel, Pug, TypeScript,等を使っていますのでここでは、Vue.js や　React 等を使わないでという意味で解釈ください。

このTodoは、JavaScript Primer　さんのTodo を参考にしています。
ｃlass を使って実践的なTodoが学べますので、ぜひ覗いてみてください.
* https://jsprimer.net/use-case/todoapp

• fileの構成予定

├── docker-compose.yml
└── src
    ├── App.ts
    ├── EventEmitter.ts
    ├── TodoItemModel.ts
    ├── dist
    ├── html-util.ts
    ├── index.pug
    ├── index.ts
    ├── package.json
    ├── style.stylus
    └── yarn.lock

• 同じディレクトリで作業をするなら、データのコピーはもう済んでいるので docker-compose.yml のworking_dir, commandの #を差し替えると、docker-compose up -d でバックグラウンドで Parcel がたちあがるはずです。 docker-compose ps で確認してみてください. バックグラウンドのコンテナに入るコマンドは　docker-compose exec node bash です

00

docker-compose.yml

version: "3"
services:
  node:
    container_name: node
    image: atoris1192/node:0.1.5
    # build: .
    # volumes は上書きに注意
    volumes:
      - .:/app
    ports:
      - "1234:1234"
      - "1235:1235"
    # working_dir: /app
    working_dir: /app/src
    # command: cp -rp /tmp/src /app
    command: npx parcel --hmr-port 1235 --hmr-hostname localhost index.pug
    tty: true

src/index.pug

<!DOCTYPE html>
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    meta(http-equiv="X-UA-Compatible", content="ie=edge")
    title Document
    link(rel="stylesheet", href="style.stylus")
  body
    .todoapp
      form#js-form(action="")
        input#js-form-input.new-todo(type="text" placeholder="new todo" autocomplete="off")

      #js-todo-list.todo-list

      footer.footer
        span#js-todo-count TodoItems: 0
    script(src="./index.ts")

index.ts

import { App } from './App';

const app = new App()
document.addEventListener('DOMContentLoaded', () => {
  app.main();
})

App.ts

export class App {
  constructor() {
    console.log("App init ...");
  }
  main() {
    console.log("App ...");
  }
}

style.stylus

html,
body {
    margin: 0;
    padding: 0;
}

button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 100%;
    vertical-align: baseline;
}

body {
    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.4em;
    background: #f5f5f5;
    color: #4d4d4d;
    min-width: 230px;
    max-width: 550px;
    margin: 0 auto;
    font-weight: 300;
}

:focus {
    outline: 0;
}

.todoapp {
    background: #fff;
    margin: 130px 0 40px 0;
    position: relative;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
    0 25px 50px 0 rgba(0, 0, 0, 0.1);
    min-height: 150px;
}


.todoapp input::placeholder {
    font-style: italic;
    font-weight: 300;
}

.new-todo {
    position: relative;
    margin: 0;
    width: 100%;
    font-size: 24px;
    line-height: 1.4em;
    border: 0;
    color: inherit;
    box-sizing: border-box;
    padding: 16px 16px 16px 60px;
    border: none;
    background: rgba(0, 0, 0, 0.003);
    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}

.todo-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.todo-list li {
    position: relative;
    font-size: 24px;
    border-bottom: 1px solid #ededed;
    padding: 16px;
}

.todo-list li:last-child {
    border-bottom: none;
}

.todo-list li input[type="checkbox"] {
    width: 40px;
    height: auto;
    margin: auto 0;
    border: none;
}

.todo-list li .delete {
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    width: 40px;
    height: 40px;
    color: #cc9a9a;
}

.footer {
    color: #777;
    height: 20px;
    padding: 10px 15px;
    border-top: 1px solid #e6e6e6;
}

Parcel 確認

• docker-compose.yml を書き換えている人は、もうすでに Parel が立ち上がっているので以下は必要ありません。

docker-compose up
docker-comppse ps
docker-compose run --service-port node bash
uname
cd src
npx parcel --hmr-port 1235 --hmr-hostname localhost index.pug

描画処理 App.ts に書いていきます

App.ts

記述は、html 文字列で書いて、処理は、htmlエレメントがほしいので、とりあえず関数化htmlElement()しておきます。

処理は、 main 関数に書いていきます。　描画は render に分けておきます

const todos = [
  { id: 0, title: "task0", isDone: false },
  { id: 1, title: "task1", isDone: true },
  { id: 2, title: "task2", isDone: false },
]

export class App {
  constructor() {

  }
  render() {
    const jsTodoList = document.querySelector('#js-todo-list');

    function htmlElement(todos) {
      const ul = document.createElement('ul');
      const template = document.createElement('template');

      todos.forEach( todo => {
        const li = `<li>${ todo.title } : ${ todo.isDone } : ${ todo.id}</li>`
        template.innerHTML = li;
        ul.appendChild(template.content.firstElementChild)
      })
      return ul;
    }
    // 配列 -> htmlエレメント
    const todosElement = htmlElement(todos);

    jsTodoList.textContent = '';
    jsTodoList.appendChild(todosElement);

  }
  main() {
    console.log("App ...");

    this.render();

  }
}

input 処理

App.ts

const todos = [
  { id: 0, title: "task0", isDone: false },
  { id: 1, title: "task1", isDone: true },
  { id: 2, title: "task2", isDone: false },
]

export class App {
  constructor() {
    console.log("App init ...");
  }
  render() {
    const jsTodoList = document.querySelector('#js-todo-list');

    function htmlElement(todos) {
      const ul = document.createElement('ul');
      const template = document.createElement('template');

      todos.forEach( todo => {
        const li = `<li>${ todo.title } : ${ todo.isDone } : ${ todo.id}</li>`
        template.innerHTML = li;
        ul.appendChild(template.content.firstElementChild)
      })
      return ul;
    }
    // 配列 -> htmlエレメント
    const todosElement = htmlElement(todos);

    jsTodoList.textContent = '';
    jsTodoList.appendChild(todosElement);

  }
  main() {
    // input 処理
    const jsForm = document.querySelector('#js-form');

    jsForm.addEventListener('submit', (event) => {
      event.preventDefault();
      const jsFormInput: any = document.querySelector('#js-form-input');

      interface Item {
        id: number;
        title: string;
        isDone: boolean;
      }

      const item: Item = {
        id: new Date().getTime(),
        title: jsFormInput.value,
        isDone: false,
      }

      todos.push(item);
      jsFormInput.value = '';
      this.render()
    })


    this.render();

  }
}

HTMLエレメント処理を、外部ファイルにする

javascript の　html 処理は、実に面倒くさいのですが、JavaScript Primerさんのhtml-utilをそのまま使わせていただきます。

タグ付きテンプレート文字列を使って、スマートに変換してくれます。
おまけにエスケープ処理までしてくれますので、これを使わない理由がありません。
詳しい使い方、JavaScript Primerさんをチェックしてください。
* element<li>${ todo.id }</li> この文字列タグをhtmlエレメントタグに変換してくれます。

これを使って書き換えます

html-util.ts

function escapeSpecialChars(str: string) {
  return str
    .replace(/&/g, "&apm:")
    .replace(/</g, "&lt;")
    .replace(/>/g, "%gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

// htmlString -> htmlElement DOM Node
function htmlToElement(html: string): any {
  const template = document.createElement('template') ;
  template.innerHTML = html;
  return template.content.firstElementChild;
}

// escape + DOM Node
export function element(strings, ...values) {
  const htmlString = strings.reduce((result, str, i) => {
    const value = values[i - 1];
    if (typeof value === "string") {
      return result + escapeSpecialChars(value) + str;
    } else {
      return result + String(value) + str;
    }
  })
  return htmlToElement(htmlString);
}

// Add child Element
export function render(bodyElement, containerElement) {
  containerElement.innerHTML = ''; // 一旦全削除
  containerElement.appendChild(bodyElement);
}

• コード量は、今はあまり変わりませんが、エスケープ処理もしてくれていますし、htmlエレメントを意識しなくてよくなるので書きやすくなります。

App.ts

import { element, render } from './html-util';

const todos = [
  { id: 0, title: "task0", isDone: false },
  { id: 1, title: "task1", isDone: true },
  { id: 2, title: "task2", isDone: false },
]

export class App {
  constructor() {
    console.log("App init ...");
  }
  render() {
    const jsTodoList = document.querySelector('#js-todo-list');
    const ul = element`<ul />`

    todos.forEach( todo => {
      const li = element`<li>${ todo.title } : ${ todo.isDone } : ${ todo.id}</li>`
      ul.appendChild(li)
    })

    render(ul, jsTodoList);
    // jsTodoList.textContent = '';
    // jsTodoList.appendChild(ul);

  }
  main() {
    // input 処理
    const jsForm = document.querySelector('#js-form');

    jsForm.addEventListener('submit', (event) => {
      event.preventDefault();
      const jsFormInput: any = document.querySelector('#js-form-input');

      interface Item {
        id: number;
        title: string;
        isDone: boolean;
      }

      const item: Item = {
        id: new Date().getTime(),
        title: jsFormInput.value,
        isDone: false,
      }

      todos.push(item);
      jsFormInput.value = '';
      this.render()
    })


    this.render();

  }
}

data 処理用クラスを作る todoLiseModel

todo データを切ったり貼ったりするメソッドは、すべてtodoListModel に集約させたいと思います。

App.ts

import { element, render } from './html-util';

const todos = [
  { id: 0, title: "task0", isDone: false },
  { id: 1, title: "task1", isDone: true },
  { id: 2, title: "task2", isDone: false },
]
class TodoListModel {  // todo data 処理用
  private todos: any;
  constructor(todos = []) {
    this.todos = todos // 初期化
  }
  getTodos() {
    return this.todos;
  }
  setTodos(todos) {
    this.todos = todos;
  }
  getTotalCount() {
    return this.todos.length;
  }
  addTodo({ title }) {
    interface Item {
      id: number;
      title: string;
      isDone: boolean;
    }
    const item: Item = {
      id: new Date().getTime(),
      title: title,
      isDone: false,
    }
    this.todos.push(item);
  }
}

export class App {
  private todoListModel: any;
  constructor() {
    this.todoListModel = new TodoListModel(todos) // インスタンス作成 仮データセット
  }

  render() {
    const jsTodoList = document.querySelector('#js-todo-list');
    const ul = element`<ul />`
    todos.forEach( todo => {
      const li = element`<li>${ todo.title } : ${ todo.isDone } : ${ todo.id}</li>`
      ul.appendChild(li)
    })
    render(ul,jsTodoList);
  }

  main() {
    const jsForm = document.querySelector('#js-form');

    // input 処理
    jsForm.addEventListener('submit', (event) => {
      event.preventDefault();
      const jsFormInput: any = document.querySelector('#js-form-input');
      if(!jsFormInput.value.trim()) return

      this.todoListModel.addTodo({
        title: jsFormInput.value,
      })
      jsFormInput.value = '';
      this.render()
    })

    this.render();
  }
}

データの定義クラスを作る todoItemModel

todoListModel で　todoデータの処理を担当してもらいましたが、定義もそのなかに含まれています。
それを新たなクラスで管理したいと思います
これで、機能の分担化ができました。

App.ts

import { element, render } from './html-util';

const todos = [
  { id: 0, title: "task0", isDone: false },
  { id: 1, title: "task1", isDone: true },
  { id: 2, title: "task2", isDone: false },
]

class TodoItemModel { // item 定義用
  private id: number;
  private title: string;
  private isDone: boolean;
  constructor({ title }) {
    this.id = new Date().getTime()
    this.title = title
    this.isDone = false
  }
}

class TodoListModel {  // todo data 処理用
  private todos: any;
  constructor(todos = []) {
    this.todos = todos // 初期化
  }
  getTodos() {
    return this.todos;
  }
  setTodos(todos) {
    this.todos = todos;
  }
  getTotalCoount() {
    this.todos.length;
  }
  addTodo( item ) {
    this.todos.push(item);
  }
  // addTodo({ title }) {
  //   interface Item {
  //     id: number;
  //     title: string;
  //     isDone: boolean;
  //   }
  //   const item: Item = {
  //     id: new Date().getTime(),
  //     title: title,
  //     isDone: false,
  //   }
  //   this.todos.push(item);
  // }
}

export class App {
  private todoListModel: any;
  constructor() {
    this.todoListModel = new TodoListModel(todos) // インスタンス作成 仮データセット
    // this.todoListModel_2 = new TodoListModel() // インスタンスなのでいくつでも必要個数作成できる
  }

  render() {
    const jsTodoList = document.querySelector('#js-todo-list');
    const ul = element`<ul />`
    todos.forEach( todo => {
      const li = element`<li>${ todo.title } : ${ todo.isDone } : ${ todo.id}</li>`
      ul.appendChild(li)
    })
    render(ul,jsTodoList);
  }

  main() {
    const jsForm = document.querySelector('#js-form');

    // input 処理
    jsForm.addEventListener('submit', (event) => {
      event.preventDefault();
      const jsFormInput: any = document.querySelector('#js-form-input');
      if(!jsFormInput.value.trim()) return

      this.todoListModel.addTodo( new TodoItemModel({ // インスタンス作成　使い捨てです。
        title: jsFormInput.value,
      }))
      // this.todoListModel.addTodo({
      //   title: jsFormInput.value,
      // })
      jsFormInput.value = '';
      this.render()
    })

    this.render();
  }
}

独自イベント　を作る

これは、予め用意されたイベント以外に、独自にイベントの発行とリスナーを作ります。
用意されたイベントというのは、ボタンをクリックしたらとか、チェックボックスの状態が変わったらなど条件検知で命令を実行するイベントリスナーを自分で作ってしまいます。
今回は、todo データの状態が変わったら、実行するというイベント用になります。
差し替えるメソッドは、this.render() と差し替える形をとりますが、このイベントリスナーは、今回でいうとそんなに恩恵があるわけではありません。　this.render() で特に不便はないのですがイベント検知の考え方は、より汎用性の高い使い方ができそうです。　イメージで言えば、ライトが着いたらとか、温度が規定温度になったら実行するというようなイベントを検知した時点で実行されるものなので、応用が効くと思われます。

これも、拝借してきたものをそのまま使います。
中身をみると、Map関数にイベント用のキーと関数を入れる器が用意されているだけです。
これを、TodoLiistModel の親要素のして継承させます。
そうすることによって、TodoListModel にはメソッドを書かなくても使えるようになります。

src/EventEmitter.ts

export class EventEmitter {
  private _listeners: any;
  constructor() {
    // イベント名、リスナー関数が入る
    this._listeners = new Map();
  }
  addEventListener(type:string, listener:any) {
    if (!this._listeners.has(type)) {
      this._listeners.set(type, new Set());
    }
    const listenerSet = this._listeners.get(type);
    listenerSet.add(listener);
  }
  emit(type:string) {
    const listenerSet = this._listeners.get(type)
    if (!listenerSet) {
      return;
    }
    listenerSet.forEach(listener => {
      listener.call(this);
    })
  }
  removeEventListener(type:string, listener:any) {
    const listenerSet = this._listeners.get(type);
    if (!listenerSet) {
      return;
    }
    listenerSet.forEach(ownListener => {
      if (ownListener === listener) {
        listenerSet.delete(listener);
      }
    })
  }
}

src/App.ts

import { element, render } from './html-util';
import { TodoItemModel } from './TodoItemModel';
import { EventEmitter } from './EventEmitter';

const todos = [
  { id: 0, title: "task0", isDone: false },
  { id: 1, title: "task1", isDone: true },
  { id: 2, title: "task2", isDone: false },
]

// EventEmitter を　追加
class TodoListModel extends EventEmitter {  // todo data 処理用
  private todos: any[];
  constructor(todos = []) {
    super();
    this.todos = todos // 初期化
  }
  getTodos() {
    return this.todos;
  }
  setTodos(todos) {
    this.todos = todos;
  }
  getTotalCoount() {
    this.todos.length;
  }
  addTodo( item ) {
    this.todos.push(item);
  }
}

export class App {
  private todoListModel: any;
  constructor() {
    this.todoListModel = new TodoListModel(todos) // インスタンス作成 仮データセット
  }

  render() {
    const jsTodoList = document.querySelector('#js-todo-list');
    const ul = element`<ul />`
    todos.forEach( todo => {
      const li = element`<li>${ todo.title } : ${ todo.isDone } : ${ todo.id}</li>`
      ul.appendChild(li)
    })
    render(ul,jsTodoList);
  }

  main() {
    const jsForm = document.querySelector('#js-form');

    // change イベントリスナー関数
    this.todoListModel.addEventListener('change', this.render)

    // input 処理
    jsForm.addEventListener('submit', (event) => {
      event.preventDefault();
      const jsFormInput: any = document.querySelector('#js-form-input');
      if(!jsFormInput.value.trim()) return

      this.todoListModel.addTodo( new TodoItemModel({ // インスタンス作成
        title: jsFormInput.value,
      }))
      jsFormInput.value = '';
      this.todoListModel.emit('change'); // changeイベントエミッター
      // this.render()
    })
    this.todoListModel.emit('change'); // changeイベントエミッター
    // this.render();
  }
}

• これは、もう動きがないので別ファイルにして置きます。

src/TodoItemModel.ts

export class TodoItemModel { // item 定義用
  private id: number;
  private title: string;
  private isDone: boolean;
  constructor({ title }) {
    this.id = new Date().getTime()
    this.title = title
    this.isDone = false
  }
}

App.ts をリファクタリングしてmain関数を整理しておきます

import { element, render } from './html-util';
import { TodoItemModel } from './TodoItemModel';
import { EventEmitter } from './EventEmitter';

const todos = [
  { id: 0, title: "task0", isDone: false },
  { id: 1, title: "task1", isDone: true },
  { id: 2, title: "task2", isDone: false },
]

class TodoListModel extends EventEmitter {  
  private todos: any[];
  constructor(todos = []) {
    super();
    this.todos = todos
  }
  getTodos() {
    return this.todos;
  }
  setTodos(todos) {
    this.todos = todos;
  }
  getTotalCount() {
    return this.todos.length;
  }
  addTodo( item ) {
    this.todos.push(item);
  }
}

export class App {
  private todoListModel: any;
  constructor() {
    this.todoListModel = new TodoListModel(todos)
  }
  totalCount(totalCount) {
    const jsTodoCount = document.querySelector('#js-todo-count');
    jsTodoCount.textContent = `TodoItems: ${ totalCount }`
  }
  inputTodo() {
      const jsFormInput: any = document.querySelector('#js-form-input');
      if(!jsFormInput.value.trim()) return

      this.todoListModel.addTodo( new TodoItemModel({
        title: jsFormInput.value,
      }))
      jsFormInput.value = '';
      this.todoListModel.emit('change');
  }
  render() {
    const jsTodoList = document.querySelector('#js-todo-list');
    const ul = element`<ul />`
    todos.forEach( todo => {
      const li = element`<li>${ todo.title } : ${ todo.isDone } : ${ todo.id}</li>`
      ul.appendChild(li)
    })
    render(ul,jsTodoList);
  }

  main() {
    const jsForm = document.querySelector('#js-form');

    this.todoListModel.addEventListener('change', this.render)  // リスナーは複数立てれる
    this.todoListModel.addEventListener('change', () => {
      const totalCount = this.todoListModel.getTotalCount();
      this.totalCount(totalCount)
    })

    jsForm.addEventListener('submit', (event) => {
      event.preventDefault();
      this.inputTodo();
    });
    this.todoListModel.emit('change');
  }
}

後は、削除や、チェックボックス, パージ処理を書いていきます

App.ts

import { element, render } from './html-util';
import { TodoItemModel } from './TodoItemModel';
import { EventEmitter } from './EventEmitter';

const todos = [
  { id: 0, title: "task0", isDone: false },
  { id: 1, title: "task1", isDone: true },
  { id: 2, title: "task2", isDone: false },
]

class TodoListModel extends EventEmitter {  
  private todos: any[];
  constructor(todos = []) {
    super();
    this.todos = todos
  }
  getTodos() {
    return this.todos;
  }
  setTodos(todos) {
    this.todos = todos;
  }
  getTotalCount() {
    return this.todos.length;
  }
  addTodo( item ) {
    this.todos.push(item);
  }
}

export class App {
  private todoListModel: any;
  constructor() {
    this.todoListModel = new TodoListModel(todos)
  }
  purge() { // 完了分全削除
    const todos = this.todoListModel.getTodos();
    const newTodos = todos.filter( todo => {
      return !todo.isDone
    });
    this.todoListModel.setTodos(newTodos);
    this.todoListModel.emit('change');
  }
  totalCount() {
    const jsTodoCount = document.querySelector('#js-todo-count');
    const totalCount = this.todoListModel.getTotalCount()
    jsTodoCount.textContent = `TodoItems: ${ totalCount }`
  }
  inputTodo() {
      const jsFormInput: any = document.querySelector('#js-form-input');
      if(!jsFormInput.value.trim()) return

      this.todoListModel.addTodo( new TodoItemModel({
        title: jsFormInput.value,
      }))
      jsFormInput.value = '';
      this.todoListModel.emit('change');
  }
  render() {
    const jsTodoList = document.querySelector('#js-todo-list');
    const todos = this.todoListModel.getTodos()

    const ul = element`<ul />`
    todos.forEach( todo => {
      const li = todo.isDone
        ? element`<li><input type="checkbox" class="checkbox" checked/><del>${ todo.title } : ${ todo.isDone } : ${ todo.id}</del><button class="delete">[x]</button></li>`
        : element`<li><input type="checkbox" class="checkbox" />${ todo.title } : ${ todo.isDone } : ${ todo.id}<button class="delete">[x]</button></li>`

      // チェックボックス状態
      const checkboxState = li.querySelector('.checkbox');
      checkboxState.addEventListener('change', () => {
       const todos = this.todoListModel.getTodos();
       const item = todos.find( item => {
         return item.id === todo.id;
       })
       item.isDone = !item.isDone
       this.todoListModel.emit('change');
      })

      // 削除処理
      const deleteBtn = li.querySelector('.delete');
      deleteBtn.addEventListener('click', () => {
       const todos = this.todoListModel.getTodos();
       const pos = todos.map( todo => {
         return todo.id
       }).indexOf(todo.id);
       todos.splice(pos, 1)
       this.todoListModel.emit('change');
      })

      ul.appendChild(li)
    })
    render(ul,jsTodoList);
  }

  main() {
    const jsForm = document.querySelector('#js-form');
    const purge = document.querySelector('#purge');

    purge.addEventListener('click', () => {
      this.purge();
    })
    // changeリスナー関数
    this.todoListModel.addEventListener('change', () => {
      this.render();
    })  
    this.todoListModel.addEventListener('change', () => { // 分ける必要は無いが、説明の為分けている
      this.totalCount()
    })

    jsForm.addEventListener('submit', (event) => {
      event.preventDefault();
      this.inputTodo();
    });
    this.todoListModel.emit('change');
  }
}

FireStore

このままでは、リロードでデータが消えてしまうので、FireStoreに接続させます

詳しくは、vue.js編のデータの永続化の投稿を参照ください。

firebase関係のエラーがでていたら、コンテナに入って

---

uname
cd src
yarn add Firebase
npx parcel --hmr-port 1235 --hmr-hostname localhost index.pug

---

ポートマッピングで二重起動していると失敗しますので、注意してください。

App.ts

import { element, render } from './html-util';
import { TodoItemModel } from './TodoItemModel';
import { EventEmitter } from './EventEmitter';
import * as firebase from 'firebase/app';
import 'firebase/firestore';
import { config } from '../firebase';

firebase.initializeApp(config);
const db = firebase.firestore()
const collection = db.collection('todos')


class TodoListModel extends EventEmitter {  
  private todos: any[];
  constructor(todos = []) {
    super();
    this.todos = todos
  }
  getTodos() {
    return this.todos;
  }
  setTodos(todos) {
    this.todos = todos;
  }
  getTotalCount() {
    return this.todos.length;
  }
  async addTodo({ title }) {
    interface Item  {
      id: number;
      titel: string;
      isDone: boolean;
      created_at: any;
    }
    const item = {
      id: new Date().getTime(),
      title: title,
      isDone: false,
      created_at: firebase.firestore.FieldValue.serverTimestamp(),
    }
    await collection.add(item)
      .then(result => {
        console.log(result);
      })
      .catch(err => console.log(err)
      )
  }
  // addTodo( item ) {
  //   this.todos.push(item);
  // }
}

export class App {
  private todoListModel: any;
  constructor() {
    this.todoListModel = new TodoListModel()
  }
  async purge() { // 完了分全削除

    // const todos = this.todoListModel.getTodos();
    // const newTodos = todos.filter( todo => {
    //   return !todo.isDone
    // });
    // this.todoListModel.setTodos(newTodos);
    await collection.where('isDone', '==', true)
      .get()
      .then(snapshot => {
        snapshot.forEach( doc => {
          collection.doc(doc.id).delete();
        })
      })
      .catch(err => console.log(err))
    this.todoListModel.emit('change');
  }
  totalCount() {
    const jsTodoCount = document.querySelector('#js-todo-count');
    const totalCount = this.todoListModel.getTotalCount()
    jsTodoCount.textContent = `TodoItems: ${ totalCount }`
  }
  inputTodo() {
      const jsFormInput: any = document.querySelector('#js-form-input');
      if(!jsFormInput.value.trim()) return

      this.todoListModel.addTodo({
        title: jsFormInput.value,
      });
      // this.todoListModel.addTodo( new TodoItemModel({
      //   title: jsFormInput.value,
      // }))
      jsFormInput.value = '';
      this.todoListModel.emit('change');
  }
  async render() {
    const fs_data = await collection.orderBy("created_at", "desc").get();
    const fs_dataItems = fs_data.docs.map( items => {
      return({
        dbId: items.id,
        id: items.data().id,
        title: items.data().title,
        isDone: items.data().isDone,
        created_at: items.data().created_at,
      })
    })
    this.todoListModel.setTodos(fs_dataItems);

    const jsTodoList = document.querySelector('#js-todo-list');
    const jsTodoCount = document.querySelector('#js-todo-count');
    const todos = this.todoListModel.getTodos()
    const totalCount = this.todoListModel.getTotalCount()
    jsTodoCount.textContent = `TodoItems: ${ totalCount }`

    const ul = element`<ul />`
    todos.forEach( todo => {
      const li = todo.isDone
        ? element`<li><input type="checkbox" class="checkbox" checked/><del>${ todo.title } : ${ todo.isDone } : ${ todo.id}</del><button class="delete">[x]</button></li>`
        : element`<li><input type="checkbox" class="checkbox" />${ todo.title } : ${ todo.isDone } : ${ todo.id}<button class="delete">[x]</button></li>`

      // チェックボックス状態
      const checkboxState = li.querySelector('.checkbox');
      checkboxState.addEventListener('change', async() => {
      //  const todos = this.todoListModel.getTodos();
      //  const item = todos.find( item => {
      //    return item.id === todo.id;
      //  })
      //  item.isDone = !item.isDone
        await collection.doc(todo.dbId).update({
          isDone: !todo.isDone
        })
       this.todoListModel.emit('change');
      })

      // 削除処理
      const deleteBtn = li.querySelector('.delete');
      deleteBtn.addEventListener('click', async() => {

      //  const todos = this.todoListModel.getTodos();
      //  const pos = todos.map( todo => {
      //    return todo.id
      //  }).indexOf(todo.id);
      //  todos.splice(pos, 1)

       await collection.doc(todo.dbId).delete();
       this.todoListModel.emit('change');
      })

      ul.appendChild(li)
    })
    render(ul,jsTodoList);
  }

  main() {
    const jsForm = document.querySelector('#js-form');
    const purge = document.querySelector('#purge');

    purge.addEventListener('click', () => {
      this.purge();
    })
    // changeリスナー関数
    this.todoListModel.addEventListener('change', () => {
      this.render();
    })  

    jsForm.addEventListener('submit', (event) => {
      event.preventDefault();
      this.inputTodo();
    });
    this.todoListModel.emit('change');
  }
}

Vue.js や　React.js を使わないとどれだけ苦労するのかを、試してみましたが　確かに記述は増えてhtmlの処理は面倒くさくなるものの。
書いているのは、一番楽しいという結果になりました。(笑)
生JS が一番練習になると思いますので、ツールを使わないとどうなるかの検証もいいかなと思います。

見てくれた方ありがとうございました。m(_ _)m

以上、Docker　+ 終了です。

一応、git hub に UP しておきます。
https://github.com/atoris1192/docker-todos-vanilla

リンクをクリックした時、別タブで開く処理をjQueryを使って
書きたいことがあったので書き留めておきます。

script.js

$('.hogehoge').click(function(){
   $url = $(this).attr('href');
   window.open($url,'_blank');
});

100日チャレンジの137日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

137日目は、

おはようございます
137日目

Udemyでjavascript学習

英語の教材だったけど、海外のほうが良質な気がする。
何いってるかわからないけど、コードみればやりたいことはわかる#早起きチャレンジ#駆け出しエンジニアと繋がりたい #100DaysOfCode #javascript

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) October 21, 2019

とりあえず、Udemyでお試しで英語教材をやってみた感じ。
翻訳機能がないとなにいっているかわかりませんが、コードはなにやりたいか読めますので、特に不便はありませんでした。

javascriptでだいじょうぶなら、他の言語でも英語教材やってみるのもいいかもしれません。

前回の記事 で作成したボイラープレートにJestを導入する。

各種設定

モジュールの追加

今回は Jest と Enzyme をインストールする。

$ npm install -D jest ts-jest enzyme enzyme-to-json enzyme-adapter-react-16

TypeScript を使用するので以下もインストールする。

$ npm install -D @types/jest @types/enzyme @types/enzyme-adapter-react-16

Jest設定ファイルの作成

Jestの設定ファイルを追加する。

// <プロジェクトルート>/jest.config.js

module.exports = {
  // 起点となるディレクトリを指定
  "roots": [
    "./src"
  ],
  // アセットの変換方法を指定
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
  // Jestで実行するテストコードの配置場所とテストコードの正規表現での指定
  // __tests__下の hoge.test.tsx または hoge.spec.tsx を対象とする
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
  // テスト対象となる拡張子を列挙
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
  ],
  // Enzymeの設定
  snapshotSerializers: ['enzyme-to-json/serializer'],
  // Enzymeの設定ファイル（自分で作成する）
  setupFilesAfterEnv: ['./test/setupEnzyme.ts'],
};

上記で設定した__tests__ディレクトリを作成しておく。

$ mkdir ./src/__tests__

Enzyme設定ファイルの作成

今回は、Enzymeを使用するので、こちらも設定ファイルを用意する。

// <プロジェクトルート>/test/setupEnzyme.ts

import { configure } from 'enzyme';
import * as EnzymeAdapter from 'enzyme-adapter-react-16';
configure({ adapter: new EnzymeAdapter() });

tsconfig.jsonを作成

TypeScriptの設定ファイルを用意する。

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "module": "es2015",  ← common.jsも設定できるが、静的解析の精度が落ちるのでes2015おすすめらしい
    "target": "es5",
    "jsx": "react",
    "esModuleInterop": true
  },
  "include": [
    "./src/**/*"
  ]
}

package.jsonにJest実行用設定を追加

package.jsonにJest実行用設定を追加する。

  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack",
    "build-prod": "webpack --mode=production",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "test": "jest"  ←ここ追加
  },

以上で、実行環境の構築は完了。

動作確認

確認用コンポーネント作成

前回作成したコンポーネントを使用する。

// <プロジェクトルート>/src/components/Button/index.tsx

import * as React from 'react';

export interface IButtonProps {
  text: string;
  flag?: boolean;
  action(): void;
}

const Button = (props: IButtonProps) => {
  const { text, flag, action } = props;
  return (
    <React.Fragment>
      { flag && <p>{text}</p> }
      <button onClick={ action }>Button</button>
    </React.Fragment>
  );
};

export default Button;

テストファイル作成

__tests__内にコンポーネントと同じディレクトリ構造を作成する。

$ mkdir ./src/__tests__/components/Button

テストコードを作成する。

// <プロジェクトルート>/src/__tests__/components/Button/index.test.tsx

import * as React from 'react';
import {shallow} from 'enzyme';
import Button from '../../../components/Button';

test('小コンポーネントが存在すること', () => {
  const wrapper = shallow(<Button text="ボタンです" flag={true} action={() => console.log("test")} />);

  expect(wrapper.find("button").length).toBe(1);
  expect(wrapper.find("p").length).toBe(1);

  expect(wrapper.find("p").text()).toEqual("ボタンです");

  expect(wrapper).toMatchSnapshot();
});

test('pコンポーネントが表示されないこと', () => {
  const wrapper = shallow(<Button text="ボタンです" flag={false} action={() => console.log("test")} />);

  expect(wrapper.find("button").length).toBe(1);
  expect(wrapper.find("p").length).toBe(0);

  expect(wrapper).toMatchSnapshot();
});

test('イベント発火時にコールバック関数が呼び出されること', () => {
  const Spy = jest.fn();
  const wrapper= shallow(
    <Button text="ボタンです" flag={true} action={Spy} />
  );

  wrapper.find('button').simulate('click');
  expect(Spy).toHaveBeenCalledWith();

  expect(wrapper).toMatchSnapshot();
});

実行

コンソールからテストコマンドを実行する。
実行すると、以下のようにテスト結果が出力される。

$ npm run test

> react-ts-webpack@1.0.0 test /Users/kento/Programing/VScodeProjects/ts-react-sass-simple-boiler-v4
> jest

 PASS  src/__tests__/components/Button/index.test.tsx
  ✓ 小コンポーネントが存在すること (33ms)
  ✓ pコンポーネントが表示されないこと (3ms)
  ✓ イベント発火時にコールバック関数が呼び出されること (6ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   3 passed, 3 total
Time:        2.182s, estimated 5s
Ran all test suites.

テスト実行後、__tests__ディレクトリ内に、__snapshots__ディレクトリが作成され、中にスナップショットファイルが作成される。

$ tree ./src/__tests__
./src/__tests__
└── components
    └── Button
        ├── __snapshots__
        │   └── index.test.tsx.snap
        └── index.test.tsx

index.test.tsx.snapの中身は以下の通り。

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`pコンポーネントが表示されないこと 1`] = `
<Fragment>
  <button
    onClick={[Function]}
  >
    Button
  </button>
</Fragment>
`;

exports[`イベント発火時にコールバック関数が呼び出されること 1`] = `
<Fragment>
  <p>
    ボタンです
  </p>
  <button
    onClick={
      [MockFunction] {
        "calls": Array [
          Array [],
        ],
        "results": Array [
          Object {
            "type": "return",
            "value": undefined,
          },
        ],
      }
    }
  >
    Button
  </button>
</Fragment>
`;

exports[`小コンポーネントが存在すること 1`] = `
<Fragment>
  <p>
    ボタンです
  </p>
  <button
    onClick={[Function]}
  >
    Button
  </button>
</Fragment>
`;

以上で、Jestの導入は完了。
作成したボイラープレートは こちら

はじめに

gitmoji文化というものがあります。

以下は私のプロジェクトにおけるコミット履歴です。

参照：https://github.com/SnO2WMaN/customizable-gitmoji-cli/commits/master

なぜ？

いろいろあると思いますが、私は以下の理由です。

コミットの粒度を上げる

特技はgit commit -a -m いろいろ修正です！
参照：横着で神経質な私とあなたに贈るgit add -p

私は放っておくとこれになっちゃうので、なんとなくカテゴライズしておくことで目標立てて開発をするようにしました。 ¹

Conventional Commitsの環境整えるの面倒になってきた

Conventional Commitsというものがあります。（こっちのほうがスタンダードだとは思います、少なくともJavascript / Node.js / フロントエンドサイドのプロジェクトではそうだと思います）

大体次のようなコミットメッセージです。

fix: Fix Something
chore(deps): Update dependencies.

これは自動でバージョン更新したりするときなどに有用なんですが、いかんせんCLIの整備やいろいろ付け加えた結果設定ファイルがモリモリ増えちゃって何が何なのかわからなくなっちゃいました。

gitmojiでは、同作者によるCLI(gitmoji-cli)が用意されていて、導入も簡単だったので良かったです。

参考

• GitHubのコミットメッセージに絵文字を入れて開発効率をあげる
• Emojiで楽しく綺麗なコミットを手に入れる
• atom/blob/master/CONTRIBUTING.md#git-commit-messages

一方

gitmoji-cliはたしかに便利だったんですが、本家のgitmojiのみしか使えなかったので、プロジェクト下において明らかに不必要な絵文字があったり、逆に痒い所の為の絵文字が無かったりしてそこはそこで不便でした。

そこで今回、カスタマイズ可能なcustomizable-gitmoji-cliを作成しました。

customizable-gitmoji-cli

オプションの詳細などはREADME-jp.mdを読んでもらえると助かります。

このCLIでは、.gitmojircなどの設定ファイル²によって自由に絵文字を追加することが出来ます。また、ESLint/Prettier/Stylelint/etc...の共有設定ファイルのようにプレセットを読み込む機能もあります。

.gitmojirc

{
  "emojiFormat": "emoji",
  "presets": ["@sno2wman/gitmoji-preset"],
  "rules": [
    {
      "emoji": "?",
      "description": "Everything must go!!",
      "name": "clown_face"
    }
  ],
}

この設定ファイルをプロジェクトに含んでおけば、CLIからコミットをする限り、全員が同じコミット規則に従ってコミットが行われるはずです。

emojiFormat

コミット時に添付される絵文字のフォーマットを選択できます。
emoji, codeのどちらかを設定することが出来ます。

• emoji
  • ?, ?, ?
  • ? Kill process
• code
  • :ok_hand:, :dog:, :knife:
  • :knife: Kill process (Github上などでは絵文字が表示されます)

私はemojiに設定しています。（たまに各種サービスやCI上では:knife:と表示されて見栄えが悪いので…）

rules

以下の形式でgitmojiを定義してください。

{
  "emoji": "?",
  "description": "Feel good.",
  "name": "gorilla"
}

ikatyang/emoji-cheat-sheetが役に立つはずです。

presets

まだ本家のgitmojiに対応するプレセットのgitmoji-preset-baseと、私個人の@sno2wman/gitmoji-presetしかありません…
名前解決の方法は以下のとおりです。

• @username/gitmoji-preset
  • そのまま読み込みます
• gitmoji-preset-foo
  • そのまま読み込みます
• bar
  • gitmoji-preset-barの形にして読み込みます。

gitmoji-preset-baseを除く全てのプレセットは、プロジェクト直下にnpm i/yarn addしてインストールされている必要があります。

展望

• #3
  • プレセット側で設定することで、コミット履歴より自動でバージョン更新の判断などが出来るようにしたい。

おわりに ³

gitmojiが様々な場面で使われることを祈っています。

よかったらプロジェクトにスターをしてください。励みになります。

貢献をしてくれるともっと喜びます。

---

1. 個人の感想です。 ↩

2. 設定ファイルはcosmiconfigに対応しています。つまり.gitmojirc, .gitmojirc.jsonなどの形式が対応しています。 ↩

3. 記事内で絵文字を使わない所が良くないと思う。 ↩

この記事の対象者

JSON形式のレスポンスをJavaSciptで処理する際に、

• どういう書き方で書けば欲しい情報が取り出せるのか知りたい
• JSONレスポンスが大きすぎて構造がよくわからない
• APIリクエスト制限が厳しくて何度もリクエストを投げられない
• 参考記事には結果のコードしか載ってなくて初見のAPIをどうやればいいのか

ということがある場合。JSON形式のAPIの扱いに慣れていない人向けです。

どうやって理解するのか

一旦APIレスポンスをJSONファイルとして出力した後にNode.jsのREPLで読み込んで、対話形式で解析します。
一度JSONファイルとして書き込むことで何度もAPIリクエストを投げる必要がないのでAPIリクエスト制限に引っかかる心配がありません。

やり方

例としてGitHub APIにて react で検索した時の結果をAPIで取得します。
https://developer.github.com/v3/search/#search-repositories

ターミナルで下記のコマンドを入力します。
JSON形式のデータ整形に jq というツールを使っているので無い場合はコマンド brew install jq で入れてください。

$ curl https://api.github.com/search/repositories?q=react | jq .

ターミナルを埋め尽くすほどのAPIレスポンスが帰ってきました。
この状態だと何が何だか分からないので一回JSONファイルに出力します。

$ curl https://api.github.com/search/repositories?q=react | jq . > result.json

result.json

{
  "total_count": 1054700,
  "incomplete_results": false,
  "items": [
    {
      "id": 10270250,
      "node_id": "MDEwOlJlcG9zaXRvcnkxMDI3MDI1MA==",
      "name": "react",
      "full_name": "facebook/react",
      "private": false,
      "owner": {
        "login": "facebook",
        "id": 69631,
        ...
      }
      ...
    }
  ]
}

ざっくり構造が見えてきました。まずトップ階層に検索件数が表示され、具体的な中身は items の中に Object[] として格納されているので、items[n] または map 関数で取り出せそうだなという目安がつきます。

これからNode.jsのREPLでデータを取り出してみます。

$ node
Welcome to Node.js v12.3.0.
Type ".help" for more information.
> const data = require("./result")
> data
... // Object形式で出力

JSONファイルは require で読み込むことでJavaScriptの Object として読み込まれます。

Object形式なので下記のように入力するとデータを取り出すことができます。

> data.total_count
1054700

ここで items の中から full_name のみ取り出してみます。

> data.items.map(item => item.full_name)
[
  'facebook/react',
  'duxianwei520/react',
  'reactphp/react',
  ...
  'reduxjs/react-redux'
]

条件を絞ってみます。 獲得スターが30k以上 のリポジトリの full_name のみ取り出してみます。

> data.items.filter(item => item.stargazers_count >= 30000).map(item => item.full_name)
[
  'facebook/react',
  'facebook/react-native',
  'ReactTraining/react-router',
  'zeit/next.js',
  'facebook/create-react-app',
  'enaqx/awesome-react'
]

data.items.filter(item => item.stargazers_count >= 30000) では条件に合致する Object[] が帰ってくるのでそれを map 関数で取り出しました。

これを実際のAPIレスポンスを扱うスクリプトに適応するとこんな感じです。

const axios = require("axios");

const http = axios.create({
  baseURL: "https://api.github.com"
});

async function main() {
  try {
    const response = await http.get("/search/repositories", {
      params: {
        q: "react"
      }
    });
    const data = await response.data
    const result = await data.items.filter(item => item.stargazers_count >= 30000)
    console.log(`30000 over stars Repository search by 'react'`);
    result.map(item => console.log(item.full_name))
  } catch (error) {
    console.log(error)
  }
}

main();

$ node index.js 
30000 over stars Repository search by 'react'
facebook/react
facebook/react-native
ReactTraining/react-router
zeit/next.js
facebook/create-react-app
enaqx/awesome-react

まとめ

これで初見のJSON形式のAPIでも対応できると思います。
REPLはレスポンス構造を解析するだけでなく構文のチェックも簡単にできるのでド忘れしやすい僕は多用してます。

javascript1

<!doctype html>
<html lang="ja">
<head>
　<meta charset="utf-8">
</head>

<div id="id1">新宿</div>
<div id="id2"></div>

<script>
// alert(1);

// 変数 可変の値の入れ物
const value = '東京';
console.log(value);

// 配列 変数に複数の値を設置できる。前から順に0、1、2･･･とインデックスがつけられる
const items = ['東京', '埼玉', '神奈川'];

// for文。配列をループし展開できる
for (let i = 0; i < items.length; i++) {
  console.log(i, items[i]);
}

// for文の別の書き方　値を取得
for (const item of items) {
  console.log(item);
}

// for文の別の書き方　インデックスを取得
for (const i in items) {
  console.log(i);
}

// if文 
for (const i in items) {
  if (i == 1) {
   console.log('if', items[i]);
  } else if (i == 2){
   console.log('else if', items[i]);
  } else {
   console.log('else', items[i]);
  }
}

// オブジェクト
const obj = {prefectureId: 1, city: [{1: '新宿'}, {2: '池袋'}]};
const prefecture = {1: '東京'};

console.log(obj);

for (const i in obj) {
  // 配列かどうか
  if (Array.isArray(obj[i])) {
    for (const city of obj[i]) {
      // オブジェクトのキーを取得
      const cityId = Object.keys(city);
      console.log(city[cityId]);
    }
  } else {
    console.log(prefecture[obj[i]]);
  }
}

const id1 = document.getElementById('id1').innerHTML;
document.getElementById('id2').innerHTML = id1 + '-池袋';

</script>

</body>
</html>

結論

// https://qiita.com/suin/items/93eb9c328ee404fdfabc
type UnionToIntersection<U> =
  (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;

declare const boxedBrand: unique symbol;
type Boxed<T> = { [boxedBrand]: T };
type BoxedValueOf<T> = T extends Boxed<infer U> ? U : never;

type TupleToBoxedTuple<T> = { [K in keyof T]: Boxed<T[K]> };
type TupleToBoxedUnion<T> = TupleToBoxedTuple<T>[keyof T];
type TupleToIntersection<T> = BoxedValueOf<UnionToIntersection<TupleToBoxedUnion<T>>>;

type A = TupleToIntersection<['hoge', string]>;
// A = "hoge"

解説

型変換は、調べると「タプルからユニオン」とか「ユニオンからインターセクション」は出てくるのですが、「タプルからインターセクション」に変換する方法はなかなか見つかりません。
（ググラビリティの問題？）

いやでも待てよと、「タプルからユニオン」「ユニオンからインターセクション」に連続して変換すればタプルからインターセクションが出てくるじゃん！と思った私は騙されました。
次のような場合に想定しないことになってしまいます。

type A = UnionToIntersection<TupleToUnion<[string, 'hoge']>>;
// A = string
// 実際に得られる型

type B = string & 'hoge';
// B = "hoge"
// 本来ほしいのはこの型

なぜならば、一度'hoge' | stringというユニオンに変換された時点でstringという型になってしまうからです。
'hoge'や0といったリテラル型は、string型やnumber型のようなより広い型に吸収されてしまうようです。

そこでなんとかリテラル型が吸収されないようにしながらユニオンに変換し、そのあとにインターセクションに変換するという手順を踏みます。

まずは、次のような型を用意します。

declare const boxedBrand: unique symbol;
type Boxed<T> = { [boxedBrand]: T };

これは型をラップするための型で、こいつを使うとユニオンを用いても型が吸収されるのを防げます。

type A = Boxed<'hoge'> | Boxed<string>;
// A = Boxed<"hoge"> | Boxed<string>

Boxed<T>型からT型を取り出すための型も用意しておきます。

type BoxedValueOf<T> = T extends Boxed<infer U> ? U : never;

type A = BoxedValueOf<Boxed<'hoge'>>;
// A = "hoge"

ポイントはこのBoxedValueOf<T>で、もはやネタバラシではありますが次のような型の取り出しが可能です。

type A = BoxedValueOf<Boxed<{ hoge: true }> & Boxed<{ fuga: true }>>
// A = {
//   hoge: true;
// } & {
//   fuga: true;
// }

Boxed<A> & Boxed<B>という型に対してBoxedValueOf<T>を適用すると、A & Bというインターセクションが得られます。

すなわち、

「タプルからユニオン」「ユニオンからインターセクション」

このフローではなく「タプルからBoxedユニオン」「BoxedユニオンからBoxedインターセクション」「Boxedインターセクションから生のインターセクション」という流れで型を変換することで、求めていた「タプルからインターセクション」の型変換を行うことができます。

まとめると、次のようなコードで「タプルからインターセクション」の型変換が可能です。

// https://qiita.com/suin/items/93eb9c328ee404fdfabc
type UnionToIntersection<U> =
  (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;

declare const boxedBrand: unique symbol;
type Boxed<T> = { [boxedBrand]: T };
type BoxedValueOf<T> = T extends Boxed<infer U> ? U : never;

type TupleToBoxedTuple<T> = { [K in keyof T]: Boxed<T[K]> };
type TupleToBoxedUnion<T> = TupleToBoxedTuple<T>[keyof T];
type TupleToIntersection<T> = BoxedValueOf<UnionToIntersection<TupleToBoxedUnion<T>>>;

type A = TupleToIntersection<['hoge', string]>;
// A = "hoge"