100日チャレンジの123日目

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

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

123日目は、

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

・メンターさんのjavascriptの課題
・ドットインストールで三択クイズ

仕事終わってから他にもやることができてしまい、あまり学習できなかったです#100DaysOfCode #早起きチャレンジ#駆け出しエンジニアと繋がりたい

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

本業が忙しいのでよくよく学習できませんでした。

バカみたいな話ですが、今まで、

const hoge = { ...hoge }

みたいなコードを書いてシャローコピーしたつもりになってたんですが、全然そんなことなかったって話です。黒歴史だ・・・

例えば、以下のようなクラスAを作ったとして、

class A {
    constructor() {
        this.aaa = 'aaa';
        this.bbb = {
            ccc: 'ccc'
        };
    }
    afunc() {
        console.log('クラスAの関数だよ');
    }
    get aGetter() {
        return this.aaa;
    }
}

そのインスタンスを以下のように作り、スプレッド演算子でシャローコピー（のつもり）を取ると、

const a = new A()
const _a = { ...a }

_a.aaa や _b.bbb.ccc にはアクセスできるんですが、_a.afunc() や _a.aGetter にはアクセスできません。

また、instanceof の結果も変わります。

// Aクラスのインスタンスかどうか
console.log(a instanceof A) // => true
console.log(_a instanceof A) // => false

まあ空オブジェクトにプロパティを詰め直しているイメージだと思うので、 instanceof が変わるのはまあそうだよねって感じですが、メソッドやGetterも取れなくなるのはちょっと予想外でした。

と思ったら以下のコードは動くんですよね

const c = {
  d() {
    console.log('d')
  },
}

const _c = { ...c }

_c.d() // => メソッドだけどアクセスできる！！

オブジェクトリテラルだといけるのかよどういうことなんだ・・・

ReactのpropやStore周りを書いていると、スプレッド演算子を使ったこんな感じのコードをよく書いているので、気をつけたいです。

シャローコピーを取る方法

以下のように書くとちゃんとシャローコピーを取れるっぽいです。 instanceof の結果もtrueになります

const _a = Object.assign(Object.create(Object.getPrototypeOf(a)),a)

以上。

以下は検証コードです。暇な人はコピペして実行してみてください

"use strict";
class A {
    constructor() {
        this.aaa = 'aaa';
        this.bbb = {
            ccc: 'ccc'
        };
    }
    afunc() {
        console.log('クラスAの関数だよ');
    }
    get aGetter() {
        return this.aaa;
    }
}

class B extends A {
    constructor() {
        super(...arguments);
        this.ddd = 'ddd';
        this.eee = {
            fff: 'fff'
        };
    }
    bfunc() {
        console.log('クラスBの関数だよ');
    }
    get bGetter() {
        return this.ddd;
    }
}

const b = new B();
const _b = { ...b };
const __b = { ...Object.create(Object.getPrototypeOf(b)), ...b };
const ___b = Object.assign(Object.create(Object.getPrototypeOf(b)), b);

console.log(b);
console.log(_b);
console.log(__b);
console.log(___b);

// Bクラスのインスタンスかどうか
console.log(b instanceof B); // => true
console.log(_b instanceof B); // => false
console.log(__b instanceof B); // => false
console.log(___b instanceof B); // => true

// Aクラスのインスタンスかどうか
console.log(b instanceof A); // => true
console.log(_b instanceof A); // => false
console.log(__b instanceof A); // => false
console.log(___b instanceof A); // => true

// Bクラスメソッドへのアクセス
console.log(b.bfunc); // => 返ってくる
console.log(_b.bfunc); // => undefined
console.log(__b.bfunc); // => undefined
console.log(___b.bfunc); // => 返ってくる

// Aクラスメソッドへのアクセス
console.log(b.afunc); // => 返ってくる
console.log(_b.afunc); // => undefined
console.log(__b.afunc); // => undefined
console.log(___b.afunc); // => 返ってくる

// Bクラスのgetプロパティへのアクセス
console.log(b.bGetter); // => ddd
console.log(_b.bGetter); // => undefined
console.log(__b.bGetter); // => undefined
console.log(___b.bGetter); // => ddd

// Aクラスのgetプロパティへのアクセス
console.log(b.aGetter); // => aaa
console.log(_b.aGetter); // => undefined
console.log(__b.aGetter); // => undefined
console.log(___b.aGetter); // => aaa

Google Apps Scriptでスクレイピングをし易くするために、フロントエンドの方にお馴染みのDOM機能の一部のようなプログラムを作成。

// XmlServiceを前提としたScrapingお助けProgram

/*
* Method: getElementById
* @param {XmlService.Element} element
* @param {string} idToFind
* @return {XmlService.Element} 
* Description: if id does not exist, null will return.
*/
function getElementById(element, idToFind) { 
  var descendants = element.getDescendants();
  for (i in descendants) {
    var elmt = descendants[i].asElement();
    if (elmt != null){
      var id = elmt.getAttribute('id')
      if (id != null) {
        if (idToFind === id.getValue()){
          return elmt;
        }
      }
    }
  }
}

/*
* Method: getElementsByClassName
* @param {XmlService.Element} element
* @param {string} classToFind
* @return {Array XmlService.Element[]}
* Description: if id does not exist, empty Array will return.
*/
function getElementsByClass(element, classToFind){
  var classes = [];
  var descendants = element.getDescendants();
  for (i in descendants) {
    var elmt = descendants[i].asElement();
    if (elmt != null){
      var class = elmt.getAttribute('class');
      if (class != null) {
        if (classToFind === class.getValue()){
          classes.push(elmt.asElement());
        }
      }
    }
  }
  return classes;
}

/*
* Method: getElementsByTagName
* @param {XmlService.Element} element
* @param {string} tagToFind
* @return {Array XmlService.Element[]}
* Description: if id does not exist, empty Array will return.
*/
function getElementsByTagName(element, tagToFind){
  var tags = []
  var descendants = element.getDescendants();
  for (i in descendants) {
    var elmt = descendants[i].asElement();
    if (elmt != null) {
      var tag = elmt.getName();
      if (tag != null) {
        if (tagToFind === tag) {
          tags.push(elmt);
        }
      }
    }
  }
  return tags;
}

はじめに

以前、html+css+jsで作ったマインスイーパーの記事を書いたのだが200行のVue.jsでスネークゲームを作ったや100行のHaskellでスネークゲームを作ったの記事がトレンドに上がっているのを見つけ、自分もより短いプログラムでマインスイーパーを実装したくなった。
まずは100行を目指してプログラムを書いていたのだが、どうせならもっと短くしようと思いたった7行でテトリスを実装「七行プログラミング」とは、JavaScript ショートコードテクニック集（ES6含む）を参考にしてコードを圧縮した。
その結果、当初の目標を大幅に超える23行でマインスイーパーを実装できた。

さあ、マインスイーパーで遊ぶのだ!

See the Pen HTML_Minesweeper_Min by T.D (@td12734) on CodePen.

大きい画面で遊びたい人はこちら
Qiitaだと横が30行ぐらいでゲームの盤面が潰れ始めるので大画面推奨。

操作説明

• 左クリック：マスを開ける
• 右クリック：空いていないマスの上に旗を立てる
• キーボード：盤面の縦横サイズ、地雷の数を入力する

遊び方

マスをクリックして、地雷が無いマスを全て開けるゲームです。地雷のマスをクリックしたら負け。
開けたマスに書いてある数字はそのマス周囲8マスのうち、地雷があるマスの個数です。
やり直しは「Start」ボタンを押してください。
上の入力フィールドに数値を入力し、ゲームの難易度を変更することも可能です。

参考：Windows版における難易度

• 難易度：横×縦(地雷数)
• 初級：9×9(10)
• 中級：16×16(40)
• 上級：30×16(99)

プログラム

コード

ゲームは以下のコードで実装した。七行プログラミングのルールに従い、1行は79文字以下としている。

<body>w<input id=W type=number required value=9 min=8 max=70>h<input id=H type=
number required value=9 min=8 max=25>*<input id=M type=number required value=9
min=9><input type=button value=Start onclick=S()><p id=p><table id=t style=
"border:solid;border-collapse:collapse"><script>window.onload=S=function(){if(R
(W))W.value=9;if(R(H))H.value=9;M.max=((w=W.value)-1)*((h=H.value)-1);if(R(M))M
.value=10;m=f=z=M.value;s=performance.now();T();for(i=t.rows.length;i-->0;t.
deleteRow(0));a=new Array(h);for(i=h;i-->0;){a[i]=new Array(w);r=t.insertRow(0)
;for(j=w;j-->0;){d=r.insertCell(o=a[i][j]=0);[d.w,d.h,d.style]=[j,i,"width:24"+
"px;height:24px;border:solid;text-align:center;cursor:default"];d.onclick=
function(){if(!V()||this[v].match("[#-8]"))return;if(!o)do if(a[y=(Math.random(
)*h)|0][x=(Math.random()*w)|0]<1&&(Math.abs(this.w-x)>1||Math.abs(this.h-y)>1)
&&z--)a[y][x]=1;while(z);if(!a[this.h][this.w])N(this);else if(f="Lose")for(i=h
;i-->0;)for(j=w;j-->0;)if(a[i][j])t.rows[i].cells[j][v]="※"};d.oncontextmenu=
function(){if(V()&&!this[v].match("[*-8]"))if(!this[v]&&f-->0)this[v]="#";else
if(++f)this[v]="";return !1}}}};T=()=>((p[v="innerHTML"]=((k=((e=((performance.
now()-s)/1e3)|0)/60)|0)<10?"0":"")+k+((l=e%60)<10?":0":":")+l+(+f>=f?" #":" ")+
f)&&V())?setTimeout(T):0;V=()=>+f>=f;R=r=>!r.reportValidity();function N(c){if(
!c||c[v].match("[*-8]"))return;c.style.background="gray";if(~c[v].indexOf("#")
&&f++)T();if(!(c[v]=(a[y=c.h][(x=c.w)-1]>0)+(a[y][x+1]>0)+(y>0&&a[y-1][x-1]>0)+
(y>0&&a[y-1][x]>0)+(y>0&&a[y-1][x+1]>0)+(y<h-1&&a[y+1][x-1]>0)+(y<h-1&&a[y+1][x
]>0)+(y<h-1&&a[y+1][x+1]>0))&&(c[v]="-"))for(c.i=9;c.i-->0;)if(c.i!=4)N(((X=c.w
+1-(c.i/3|0))>=0)*((Y=c.h+1-c.i%3)>=0)*(X<w)*(Y<h)>0?t.rows[Y].cells[X]:0);if(
++o>=w*h-m)f="Win"}</script>

何書いてあるか分からないと思うので書き下したコードを以下に貼る。

<body>
  w<input id=W type=number required value=9 min=8 max=70>
  h<input id=H type=number required value=9 min=8 max=25>
  *<input id=M type=number required value=9 min=9>
  <input type=button value=Start onclick=S()>
  <p id=p>
  <table id=t style="border:solid;border-collapse:collapse">
  <script>
    window.onload = S = function () {
      if (R(W)) W.value = 9;
      if (R(H)) H.value = 9;
      M.max = ((w = W.value) - 1) * ((h = H.value) - 1);
      if (R(M)) M.value = 10;
      m = f = z = M.value;
      s = performance.now();
      T();
      for (i = t.rows.length; i-- > 0; t.deleteRow(0));
      a = new Array(h);
      for (i = h; i-- > 0;) {
        a[i] = new Array(w);
        r = t.insertRow(0);
        for (j = w; j-- > 0;) {
          d = r.insertCell(o = a[i][j] = 0);
          [d.w, d.h, d.style] = [j, i, "width:24px;height:24px;border:solid;text-align:center;cursor:default"];
          d.onclick = function () {
            if (!V() || this[v].match("[#-8]")) return;
            if (!o) do if (a[y = (Math.random() * h) | 0][x = (Math.random() * w) | 0] < 1 && (Math.abs(this.w - x) > 1 || Math.abs(this.h - y) > 1) && z--) a[y][x] = 1; while (z);
            if (!a[this.h][this.w]) N(this);
            else if (f = "Lose") for (i = h; i-- > 0;)for (j = w; j-- > 0;)if (a[i][j]) t.rows[i].cells[j][v] = "※"
          };
          d.oncontextmenu = function () {
            if (V() && !this[v].match("[*-8]")) if (!this[v] && f-- > 0) this[v] = "#";
            else if (++f) this[v] = "";
            return !1
          }
        }
      }
    };
    T = () => ((p[v = "innerHTML"] = ((k = ((e = ((performance.now() - s) / 1e3) | 0) / 60) | 0) < 10 ? "0" : "") + k + ((l = e % 60) < 10 ? ":0" : ":") + l + (+f >= f ? " #" : " ") + f) && V()) ? setTimeout(T) : 0;
    V = () => +f >= f;
    R = r => !r.reportValidity();
    function N(c) {
      if (!c || c[v].match("[*-8]")) return;
      c.style.background = "gray";
      if (~c[v].indexOf("#") && f++) T();
      if (!(c[v] = (a[y = c.h][(x = c.w) - 1] > 0) + (a[y][x + 1] > 0) + (y > 0 && a[y - 1][x - 1] > 0) + (y > 0 && a[y - 1][x] > 0) + (y > 0 && a[y - 1][x + 1] > 0) + (y < h - 1 && a[y + 1][x - 1] > 0) + (y < h - 1 && a[y + 1][x] > 0) + (y < h - 1 && a[y + 1][x + 1] > 0)) && (c[v] = "-")) for (c.i = 9; c.i-- > 0;)if (c.i != 4) N(((X = c.w + 1 - (c.i / 3 | 0)) >= 0) * ((Y = c.h + 1 - c.i % 3) >= 0) * (X < w) * (Y < h) > 0 ? t.rows[Y].cells[X] : 0);
      if (++o >= w * h - m) f = "Win"
    }
  </script>

結構長くなったように見えるがこれでも49行しかない。
ただ、コードの解読はまだ困難だと思うので以下で説明を行う。

変数、関数の説明

コード圧縮の都合上、全ての変数名と関数名は1文字になっている。
その結果、可読性が大幅に失われたのでここでは変数名、関数名について説明する。

• 変数、関数名
  • 1文字に圧縮する前に付けたであろう名前
  • この行以降は動作説明など

グローバル変数

• a
  • mineArray
  • 地雷があるか否かを格納した配列
  • 0なら空きマス、1なら地雷
• d
  • td
  • テーブルのセル
• e
  • elapsedTime
  • ゲーム開始から経過秒
• f
  • flags,finishString
  • 持っている旗(残りの地雷)の数
  • 地雷を踏んだ時、地雷以外のマスを全て開けた時はゲーム結果の文字列を格納する
• h
  • height
  • 盤面の縦サイズ
• i,j
  • お馴染みのループ調整変数
• k
  • 特に無し
  • 経過分数
• l
  • 特に無し
  • 経過秒数
• m
  • mines
  • 地雷の数
• o
  • opendCells
  • 既にクリックして開けたマスの数
• p
  • pElement
  • 経過時間、残りの旗の数、勝敗を表示するpタグの要素
• r
  • tr
  • reportValidity
  • 初期化時はRの引数の役割を果たす
  • その後、テーブルの行を格納する
• s
  • startTime
  • ゲーム開始時間
• t
  • tableElement
  • ゲームの盤面
• v
  • innerHTMLValue
  • 文字列の"innerHTML"
• w
  • width
  • 盤面の横サイズ
• x
  • xRandom
  • 地雷敷設時に使用する、ランダムな横の座標
  • 周囲の地雷の数を数える時、横の座標を格納する
• y
  • yRandom
  • 地雷敷設時に使用する、ランダムな縦の座標
  • 周囲の地雷の数を数える時、縦の座標を格納する
• z
  • 特に無し
  • 地雷敷設時に使用する、敷設すべき残りの地雷数
• H
  • HeightInput
  • 縦サイズの入力フィールド
• M
  • MineInput
  • 地雷の入力フィールド
• W
  • WidthInput
  • 横サイズの入力フィールド
• X
  • 特に無し
  • 周囲のマスを開ける時、横の座標を格納する
• Y
  • 特に無し
  • 周囲のマスを開ける時、縦の座標を格納する

ローカル変数

• c
  • cell
  • セル
• h
  • height
  • セルの縦座標
• i
  • お馴染みのループ調整変数
• w
  • width
  • セルの横座標

関数

• N
  • NoMineCellClick
  • 地雷が無いマスをクリックしたときの処理を行う
• R
  • ReportInValidity
  • 入力フィールドの数値が不正か
  • 不正ならtrue
• S
  • Start
  • Startボタンを押した時やページを開いた時に初期化処理を行う
• T
  • TextChange
  • タイマー,旗の数のテキストを変更する
• V
  • isValidGame
  • ゲームが有効か(終了していないか)
  • fが数値(旗の数)ならtrue

動作説明、工夫点

全部解説が必要そうだが、面倒なので一部だけ解説を行う。
気が向けば全部解説するかも。

html部分

<script>タグ以外は閉じタグが無くても動作するので、閉じタグを消して文字を削減している。
属性値の"もstyle以外は無くても動くので省略している。
また、idを設定しているが、idと同じ名前の変数を宣言していなければgetElementByIdをしていなくてもそのidを持つ要素にアクセス可能。

小数点以下を切り捨てる

切り捨ては通常Math.floor()を使うがこれは長すぎる。
なのでビット演算を利用して{数値}|0で小数点以下を切り捨てている。

ゲームが終了していないかどうか

V = () => +f >= f;

上のようにゲームが終了していないかどうかを判断しているが、分かりやすく書くと下と同じことをやっている。

function V () {
  return isNumber(f);
}

fには周囲の地雷の個数、つまり1から8までの数字と勝敗、つまりWinとLoseの文字列が入り得るがfが数字ならゲームが終わっていない(true)を返す。
ただ、isNumberは長いのでfの前に+を付けて数字に変換し、変換前後で値が変わっていないかで数字かどうかを判断している。
仮にfが1なら1 >= 1 → true、fがLoseならNaN >= Lose → falseのように判断される。

はじめに

この記事はもう一つの記事、
Vue + Canvas で作るグラフィックアプリの骨格
の SVG 版です。

Canvas や SVG のおかげでブラウザ上でもインタラクティブにグラフィックを簡単に扱えるようになりました。

おまけに Vue を使うとまるでパソコン上のアプリを作るかのように Web 上にグラフィックアプリを作ることができます。

この記事では Vue + SVG でマウスで四角を書いていくような 80 行程度の簡単なサンプルを作ることで、Web 上のグラフィックアプリの骨格を示したいと思います。

できあがったものは、以下のような感じです。

準備

• node, npm をダウンロードします

https://nodejs.org
この記事では node v12.4.0 で検証しています

• vue-cli をダウンロードして、とりあえず qvs という名前でアプリを作ります。

$ npm i @vue/cli -g
$ vue create qvs
$ cd qvs
$ yarn serve

この記事では vue 3.12.0 で検証しています。yarn を使ってない人は最後の行は

$ npm run serve

になると思います。

なお、以下のコードは ESLint の掟に従ってないので、vue create qvs の時に ESLint をはずさないと多分エラーになると思われます。
また、セパレータを前に書いたり、引数とか変数の名前が _ だったりするのは単なる趣味ですので、気に入らなくても怒らないでください。

コード

src/App.vue を以下のようにしてみます。

App.vue

<template>
    <div id=app style="overflow: scroll">
        <div id=menu style="position: fixed; top: 0; left: 0">
            <button @click="mode='select'"  >select </button>
            <button @click="mode='rect'"    >rect   </button>
        </div>
        <svg
            style       = "margin: 24px 4px 4px 4px; background: aliceblue"
            :class      = "{ drawRect: mode == 'rect' }"
            :width      = "extent[ 0 ]"
            :height     = "extent[ 1 ]"
            @mousedown  = "mouseDown"
            @mousemove  = "mouseMove"
            @mouseup    = "mouseUp"
            @keyup.esc  = "keyUpESC"
        >
            <template v-for="_ in elements">
                <rect v-bind="_" stroke=black fill=none />
            </template>

            <rect v-bind=dragRect stroke=blue fill=none />
        </svg>
    </div>
</template>

<script>
export default {
    data    : () => (
        {   b           : null
        ,   c           : null
        ,   mode        : 'select'
        ,   elements    : []
        }
    )
,   computed: {
        extent  () {
            return [ 700, 500 ]
        }
    ,   svg     () {
            return this.$el.getElementsByTagName( 'svg' )[ 0 ]
        }
    ,   dragRect() {
            return ( ! this.b || ! this.c )
            ?   null
            :   {   x       : this.b.offsetX
                ,   y       : this.b.offsetY
                ,   width   : this.c.offsetX - this.b.offsetX
                ,   height  : this.c.offsetY - this.b.offsetY
                }
        }
    }
,   methods : {
        mouseDown( _ ) {
            this.b = _
        }
    ,   mouseMove( _ ) {
            this.c = _
        }
    ,   mouseUp( _ ) {
            this.c = _
            switch ( this.mode ) {
            case 'rect':
                this.elements.push( this.dragRect )
                break
            }
            this.b = null
        }
    ,   keyUpESC( _ ) {
            this.mode = 'select'
        }
    }
,   mounted() {
        this.svg.setAttribute( 'tabindex', 0 )
    }
}
</script>

<style>
.drawRect {
    cursor: crosshair
}
</style>

勘所

キーイベントの取得

svg に tabindex 属性をつけると、キーイベントを取得できるようになります。

    this.svg.setAttribute( 'tabindex', 0 )

カーソルの切り替え

mode が 'select' と 'rect' の2つの状態が存在します。
'rect' の状態の時にクロスヘアカーソルを表示するために
クラスとスタイルのバインディングを動的に使っています。

    :class = "{ drawRect: mode == 'rect' }"


<style>
.drawRect {
    cursor: crosshair
}
</style>

v-bind でプロパティを一括設定

プロパティ名と同じキーを持つ辞書を用意して

dragRect = {
    x       : 100
,   y       : 200
,   width   : 300
,   height  : 400
}

<rect v-bind=dragRect />

とやると、

<rect x=100 y=200 width=300 height=400 />

と展開されます。

最後に

この記事が何かの役にたてたら幸いです。わからないことがあればコメントください！

これは2019年10月11日に開催したTypeScriptイベントYYTypeScript#4のイベントレポートです。

YYTypeScriptは一言で「TypeScripterの部室」です。発表者の話を聞く「一方向的な勉強会」とは真逆で、TypeScriptについて、雑に・ゆるく・ワイワイ話しながらTypeScripter同士の交流を深める「双方向的な座談会」の形式になります。集まった人たちで「今日話たいこと」「聞きたいこと」をいくつか挙げていき、それをテーマに雑談していきます。

今回の配信動画

YYTypeScript#4の収録がアップされました！https://t.co/EawzgbM4mW

— suin❄️TypeScriptが好き (@suin) October 11, 2019

過去回の配信動画 → YouTubeプレイリスト「YYTypeScript」
前回 → YYTypeScript#3「VueをTSで書いて良かったこと、大変だったことを教えて！」「React Hooksの最適な粒度って？」「クライアントサイドDDD」「皆さん、decorator自作してますか？」「Node.jsゼロインストールのメリットって何？」 - Qiita

雑談

axiosとfetchの違いが知りたい (じゅり)

esa.ioのお引越しツールを開発していて気になった。

・・・

• superagentというのもありますね（火種）
• axios → HTTPクライアントライブラリ
• fetch → HTTPクライアントライブラリ (ブラウザのネイティブ)
• サーバサイドは？
  • Node.jsにはもともとないので、ライブラリが必要
• Fetch API - Web API | MDN
• axiosだと、リクエスト送信時やレスポンス受信時全般のフックを設定できたりとかします
  • 「特定のURLへリクエストする時は、cookieからuser tokenを取り出してheaderにセットしてから送る」とか設定すると、利用側は意識しなくても勝手にやってくれる
• axiosだと、JSONの取り回しが便利な感がある。
• Vue使ってる人はaxios馴染みあるよね
  • Vue公式にもfetch APIに対応できますって書いてある
  • メリットとしては外部リソースを必要としないこと
• polyfill
  • ブラウザによっては未サポートの機能が有るので、どのブラウザでも動かせるようにするために入れる
    • ブラウザがサポートしてる → ネイティブの機能を使う
    • ブラウザがサポートしてない → polyfillが動く
    • PromiseなんかはIEがサポートしてないので、IEで動かすならpolyfill必要だった記憶
• nuxt.js は axios を捨てて ky になる様子 - Qiita

JSを学んでいるTS(JS)初心者がコマンドで実行するアプリケーションを作ってみようとした場合、どう始めるのが良いか (ぬーたけ)

• PHP歴23日
• nouphet/get-connpass-member-list: コンパスの参加者リストを一撃で取得するスクリプト を作ったことがある
  • コマンド(cli)で実行するツール
  • このツールと同じ様なやつをつくってみるのはどうか

これをTSで書き直したい。

・・・

• PHPQueryを使っていたが、TSでは？
  • cheerio - npm
    • jQueryのインターフェイスとほぼ同じ。
    • $でDOM操作できる。
      • PHPでいうところのGoutte
• ここでなぜNode.jsが出てくるのか？
  • JavaScript(ECMAScript)の実行環境
  • 現状、サーバー上でのjs実行環境はNode.jsしかなかったと思う
• cheerioで取ってきて、パースすればできそう
• 開発にはts-nodeを使うと便利
  • 最初はts-node使わないのも楽しい
    • ちゃんとJSに書き換わっているのが分かるので
    • ts-nodeを使わないってどうやるの？
      • ts-node src/index.ts = tsc && node dist/index.js
    • PlayGroundとかはリアルタイムにコンパイルされて結果が見えるので、勉強にはおすすめですよ〜
      • http://www.typescriptlang.org/play/

サーバサイドで重いバッチ書くとき気を付けてることとかあれば知りたいです！ (matmau5)

巨大なテキストファイルを読み込んでDBに突っ込むとか

・・・

• メモリがボトルネックになることがあるから
  • ストリーム処理する
    • 例1行ずつ読む
  • Node.js中級者を目指す - このすみ堂 - BOOTH
    • 第7章がストリーム処理について
• DBに突っ込むならtransaction begin しておいてコケてもやり直しがしやすいようにした方が良さそう

Vue 3.0で何が変わるのか？ (すいん)

• TypeScriptで書き直してると聞いたが。

・・・

• Reactのhookみたいなのが追加されるっぽい
• 結構がっつり書き方変わるイメージあります
• Evan You氏がVue.js 3.0をプレビュー
  • 新しいコアは、圧縮時のサイズが20KBから10KBに削減される見込み
  • Vueは，バージョン3をTSXサポートを備えたTypeScriptで書き直すことで，開発者エクスペリエンスのさらなる向上を目指している。
• tsx
  • TS XML
  • JSXのTypeScript版
  • JSの中にXMLが書けるJSのサブセット
    • XMLリテラルというXMLがそのまま書けるのが特徴の言語
• TSXは型の恩恵を受けやすい
• もともとVueのエンジニアってJSXが嫌でVueを選んだ人もいるはずなので、どうなんだろう？
  • TSX書くならReactでいいじゃんみたいなことは言われそうな気はちょっとしますね・・・
• Vue2のテンプレートも今までどおり使えるのかな？
• デザイナーってJSX扱えるの？
  • vueテンプレートの場合は多少勉強してもらう必要があるが、そこまで難しくはないかも。
  • Reactの場合は、デザイナーさんにもTSX(のロジック以外)とCSS(styled-components)も書いてもらっています
    • コンポーネント分け方論争になったりします
    • CSSの中の条件分岐ロジックとか、変数とかも適宜やってもらってたりしています

デメテルの法則 (かきうち)

これがだめな理由を知りたい。

getAnimal()->getCat()->getAmericanShortHair()

• 元ネタ: jurifulさんはTwitterを使っています: 「getAnimal()->getCat()->getAmericanShortHair()はあんまよくないってことだよね？どうすればよいの？? #phper_oop」 / Twitter

・・・

• この例はあんまり良くなかったと思う (じゅり)
• 実務でEC周りでgetを連鎖するコードを書いていて疑問だった。
• デメテルに反するとどういう問題があるのですか？
  • テストが大変になる
  • getの連鎖を解決できる、巨大なオブジェクトを用意しないといけなくなるので・・・

describe('Hoge', () => {
    // Hoge#getXxx內部で return this.aaa.bbb.ccc.ddd.value とかやってると・・・
    const hoge = new Hoge({
        aaa: {
            bbb: {
                ccc: {
                    ddd: {
                        value: 1
                    }
                }
            }
        }
    })

    it('should return xxx', () => {
        expect(hoge.getXxx).toBe(1)
    })
})

• Viewにコードが散らばるよりは、モデルにgetterがあった方がテストの面でも、仕様追加変更の面でも便利に感じました
• そのクラスを見れば、何ができるのかがわかるようにするのが良さそう

// リファクタリング後
class Item {
    getItemPriceBySku(sku) {
        ...
    }
}

item.getItemPriceBySku('sku-XXXXX')

• 呼び出し元が、隣の隣のオブジェクトを知らなくても良くなるようにする
• Item *-> "0..n" SKU みたいな関係だと、#findXxx とか #filterXxx みたいなメソッド生やすことあります
  • 詳しい抽出条件は利用側で任意に設定できるので、これなら肥大化せずにすむんじゃないかなーと
  • 頻繁に使われる抽出条件が有るなら、それ自体独立した関数として定義するとか、固定のメソッドとして生やしちゃっても良いんじゃないかなと

class Item {
    findPriceBy(finder) {
        return this.skuList.find(finder)
    }
}

// 特定のSKUに紐づく価格がほしい
item.findPriceBy(sku => sku.id === targetSku.id)


// 特定の日に発売された商品の価格がほしい
item.findPriceBy(sku => sku.publishedAt === 'xxxx-xx-xxTxx:xx:xx')

• 確かに、人が書いたコードで隣の隣の隣のオブジェクトとかを参照していると、テストがわかりずらかった経験があります

サーバーサイドTypeScriptやったことないので、どういうフレームワークとかライブラリがあるのか知りたいです！ (KuuK)

何をやりたいかによる
ウェブアプリケーションを作りたい？

・・・

• TS純正 → Nest.js (フルスタックフレームワーク)
• express.js (マイクロフレームワーク)
• koa.js (マイクロフレームワーク)
  • rubyのsinatraみたいなイメージ
  • 薄くて良かった
  • expressを良くしたいというモチベーションで作った
  • 数百行でできている
  • ミドルウェアというプラグインを追加して使う
• 型定義がちゃんとしたものでないとTSの恩恵を受けづらいので、選ぶときはそこを注意したほうが良い
• DBだとTypeORM
  • Nest.jsだとバンドルされてる
  • Sequelize というのもある
• テンプレートエンジンは何がある？
  • ejx?
  • pug?
  • tsx を SSRする感じとか
    • クライアント側の見た目とサーバー側の見た目で合わせた内容でpdfを吐きたかった時にwkhtmltopdf使ってやりました
  • Gatsby
  • node.js で使えるテンプレートエンジン - Qiita

ライブラリの型定義が残念なときのワークアラウンドを知りたい (すいん)

作者に直してもらうのではなくて、自分で使うときに工夫するためのワークアラウンドが知りたい

・・・

• hoge.d.ts みたいの作ってinterface上書きしてる
• tsignoreを書いて回避
• tsconfigにtypeRootでも何でもいいので型定義を上書きをする
  • anyとかobjectを使っちゃってるようなところを、より厳密にする感じです？
    • methodが足りなかったりするのを生やしたり
    • 型定義だけ上書きしても実装は変わらないと思うのですが、型定義不備を補うって感じでしょうか
      • ですね
        • なるほど！
• PR送り先が無かったりするやつがあったり。。。

Null Object PatternはTypeScript的にどうなのか？ (すいん)

https://dev.to/jamesmh/unhealthy-code-null-checks-everywhere-2720 を読んで感じた疑問。

・・・

• nullガードを書く
• union型でもいいんじゃない？という感想もある

function doSomething(): null | Foo {}

• TS3.7からのオプショナルチェイニングで代替できる？
  • ?だらけになるのではー？
  • かなしい・・・
• 「nullかどうか」を考慮から追い出せるのがNullObjectPatternの旨味だと思ってます
  • オプショナルだとまさに?だらけになりそう、nullガードは分岐だらけになる
    • 結局「nullかどうか」を考慮することは変わらず要求されてる感
    • 安全にはなるけれど、考えるべきことは減ってない
  • 「存在しない」という状態が有るなら、それをNullObjectという形で一つの状態として明示的に定義した方が良さそうな気がします
• ちゃんと型が定義されていれば、Null Objectパターンじゃなくて良さそう
• コンパイル時に頑張るのが型で、実行時に落とさなようにするのがNull Object Patternって解釈であっていますかね
  • あってそう

参加してよかったこと(参加者の感想)

• 初耳なワードを色々しれてよかった
• 「デメテルの法則」という言葉を知れた。
• 初心者向けの質問から中、上級者向けの質問まで幅広く楽しめました。
• サーバーサイドTypeScriptの話や、デメテルの法則の話が聞けて非常に勉強になりました

YYTypeScriptは毎週やってます

YYTypeScriptについてワイワイ話したい方は、YYTypeScriptのイベント情報をチェックしてみて下さい。

以上、YYTypeScriptのレポートでした。次回もワイワイやっていきたいと思います！ では、また来週！

これは2019年10月11日に開催したTypeScriptイベントYYTypeScript#4のイベントレポートです。

YYTypeScriptは一言で「TypeScripterの部室」です。発表者の話を聞く「一方向的な勉強会」とは真逆で、TypeScriptについて、雑に・ゆるく・ワイワイ話しながらTypeScripter同士の交流を深める「双方向的な座談会」の形式になります。集まった人たちで「今日話たいこと」「聞きたいこと」をいくつか挙げていき、それをテーマに雑談していきます。

今回の配信動画

YYTypeScript#4の収録がアップされました！https://t.co/EawzgbM4mW

— suin❄️TypeScriptが好き (@suin) October 11, 2019

過去回の配信動画 → YouTubeプレイリスト「YYTypeScript」
前回 → YYTypeScript#3「VueをTSで書いて良かったこと、大変だったことを教えて！」「React Hooksの最適な粒度って？」「クライアントサイドDDD」「皆さん、decorator自作してますか？」「Node.jsゼロインストールのメリットって何？」 - Qiita

雑談

axiosとfetchの違いが知りたい (じゅり)

esa.ioのお引越しツールを開発していて気になった。

・・・

• superagentというのもありますね（火種）
• axios → HTTPクライアントライブラリ
• fetch → HTTPクライアントライブラリ (ブラウザのネイティブ)
• サーバサイドは？
  • Node.jsにはもともとないので、ライブラリが必要
• Fetch API - Web API | MDN
• axiosだと、リクエスト送信時やレスポンス受信時全般のフックを設定できたりとかします
  • 「特定のURLへリクエストする時は、cookieからuser tokenを取り出してheaderにセットしてから送る」とか設定すると、利用側は意識しなくても勝手にやってくれる
• axiosだと、JSONの取り回しが便利な感がある。
• Vue使ってる人はaxios馴染みあるよね
  • Vue公式にもfetch APIに対応できますって書いてある
  • メリットとしては外部リソースを必要としないこと
• polyfill
  • ブラウザによっては未サポートの機能が有るので、どのブラウザでも動かせるようにするために入れる
    • ブラウザがサポートしてる → ネイティブの機能を使う
    • ブラウザがサポートしてない → polyfillが動く
    • PromiseなんかはIEがサポートしてないので、IEで動かすならpolyfill必要だった記憶
• nuxt.js は axios を捨てて ky になる様子 - Qiita

JSを学んでいるTS(JS)初心者がコマンドで実行するアプリケーションを作ってみようとした場合、どう始めるのが良いか (ぬーたけ)

• PHP歴23日
• nouphet/get-connpass-member-list: コンパスの参加者リストを一撃で取得するスクリプト を作ったことがある
  • コマンド(cli)で実行するツール
  • このツールと同じ様なやつをつくってみるのはどうか

これをTSで書き直したい。

・・・

• PHPQueryを使っていたが、TSでは？
  • cheerio - npm
    • jQueryのインターフェイスとほぼ同じ。
    • $でDOM操作できる。
      • PHPでいうところのGoutte
• ここでなぜNode.jsが出てくるのか？
  • JavaScript(ECMAScript)の実行環境
  • 現状、サーバー上でのjs実行環境はNode.jsしかなかったと思う
• cheerioで取ってきて、パースすればできそう
• 開発にはts-nodeを使うと便利
  • 最初はts-node使わないのも楽しい
    • ちゃんとJSに書き換わっているのが分かるので
    • ts-nodeを使わないってどうやるの？
      • ts-node src/index.ts = tsc && node dist/index.js
    • PlayGroundとかはリアルタイムにコンパイルされて結果が見えるので、勉強にはおすすめですよ〜
      • http://www.typescriptlang.org/play/

サーバサイドで重いバッチ書くとき気を付けてることとかあれば知りたいです！ (matmau5)

巨大なテキストファイルを読み込んでDBに突っ込むとか

・・・

• メモリがボトルネックになることがあるから
  • ストリーム処理する
    • 例1行ずつ読む
  • Node.js中級者を目指す - このすみ堂 - BOOTH
    • 第7章がストリーム処理について
• DBに突っ込むならtransaction begin しておいてコケてもやり直しがしやすいようにした方が良さそう

Vue 3.0で何が変わるのか？ (すいん)

• TypeScriptで書き直してると聞いたが。

・・・

• Reactのhookみたいなのが追加されるっぽい
• 結構がっつり書き方変わるイメージあります
• Evan You氏がVue.js 3.0をプレビュー
  • 新しいコアは、圧縮時のサイズが20KBから10KBに削減される見込み
  • Vueは，バージョン3をTSXサポートを備えたTypeScriptで書き直すことで，開発者エクスペリエンスのさらなる向上を目指している。
• tsx
  • TS XML
  • JSXのTypeScript版
  • JSの中にXMLが書けるJSのサブセット
    • XMLリテラルというXMLがそのまま書けるのが特徴の言語
• TSXは型の恩恵を受けやすい
• もともとVueのエンジニアってJSXが嫌でVueを選んだ人もいるはずなので、どうなんだろう？
  • TSX書くならReactでいいじゃんみたいなことは言われそうな気はちょっとしますね・・・
• Vue2のテンプレートも今までどおり使えるのかな？
• デザイナーってJSX扱えるの？
  • vueテンプレートの場合は多少勉強してもらう必要があるが、そこまで難しくはないかも。
  • Reactの場合は、デザイナーさんにもTSX(のロジック以外)とCSS(styled-components)も書いてもらっています
    • コンポーネント分け方論争になったりします
    • CSSの中の条件分岐ロジックとか、変数とかも適宜やってもらってたりしています

デメテルの法則 (かきうち)

これがだめな理由を知りたい。

getAnimal()->getCat()->getAmericanShortHair()

• 元ネタ: jurifulさんはTwitterを使っています: 「getAnimal()->getCat()->getAmericanShortHair()はあんまよくないってことだよね？どうすればよいの？? #phper_oop」 / Twitter

・・・

• この例はあんまり良くなかったと思う (じゅり)
• 実務でEC周りでgetを連鎖するコードを書いていて疑問だった。
• デメテルに反するとどういう問題があるのですか？
  • テストが大変になる
  • getの連鎖を解決できる、巨大なオブジェクトを用意しないといけなくなるので・・・

describe('Hoge', () => {
    // Hoge#getXxx內部で return this.aaa.bbb.ccc.ddd.value とかやってると・・・
    const hoge = new Hoge({
        aaa: {
            bbb: {
                ccc: {
                    ddd: {
                        value: 1
                    }
                }
            }
        }
    })

    it('should return xxx', () => {
        expect(hoge.getXxx).toBe(1)
    })
})

• Viewにコードが散らばるよりは、モデルにgetterがあった方がテストの面でも、仕様追加変更の面でも便利に感じました
• そのクラスを見れば、何ができるのかがわかるようにするのが良さそう

// リファクタリング後
class Item {
    getItemPriceBySku(sku) {
        ...
    }
}

item.getItemPriceBySku('sku-XXXXX')

• 呼び出し元が、隣の隣のオブジェクトを知らなくても良くなるようにする
• Item *-> "0..n" SKU みたいな関係だと、#findXxx とか #filterXxx みたいなメソッド生やすことあります
  • 詳しい抽出条件は利用側で任意に設定できるので、これなら肥大化せずにすむんじゃないかなーと
  • 頻繁に使われる抽出条件が有るなら、それ自体独立した関数として定義するとか、固定のメソッドとして生やしちゃっても良いんじゃないかなと

class Item {
    findPriceBy(finder) {
        return this.skuList.find(finder)
    }
}

// 特定のSKUに紐づく価格がほしい
item.findPriceBy(sku => sku.id === targetSku.id)


// 特定の日に発売された商品の価格がほしい
item.findPriceBy(sku => sku.publishedAt === 'xxxx-xx-xxTxx:xx:xx')

• 確かに、人が書いたコードで隣の隣の隣のオブジェクトとかを参照していると、テストがわかりずらかった経験があります

サーバーサイドTypeScriptやったことないので、どういうフレームワークとかライブラリがあるのか知りたいです！ (KuuK)

何をやりたいかによる
ウェブアプリケーションを作りたい？

・・・

• TS純正 → Nest.js (フルスタックフレームワーク)
• express.js (マイクロフレームワーク)
• koa.js (マイクロフレームワーク)
  • rubyのsinatraみたいなイメージ
  • 薄くて良かった
  • expressを良くしたいというモチベーションで作った
  • 数百行でできている
  • ミドルウェアというプラグインを追加して使う
• 型定義がちゃんとしたものでないとTSの恩恵を受けづらいので、選ぶときはそこを注意したほうが良い
• DBだとTypeORM
  • Nest.jsだとバンドルされてる
  • Sequelize というのもある
• テンプレートエンジンは何がある？
  • ejx?
  • pug?
  • tsx を SSRする感じとか
    • クライアント側の見た目とサーバー側の見た目で合わせた内容でpdfを吐きたかった時にwkhtmltopdf使ってやりました
  • Gatsby
  • node.js で使えるテンプレートエンジン - Qiita

ライブラリの型定義が残念なときのワークアラウンドを知りたい (すいん)

作者に直してもらうのではなくて、自分で使うときに工夫するためのワークアラウンドが知りたい

・・・

• hoge.d.ts みたいの作ってinterface上書きしてる
• tsignoreを書いて回避
• tsconfigにtypeRootでも何でもいいので型定義を上書きをする
  • anyとかobjectを使っちゃってるようなところを、より厳密にする感じです？
    • methodが足りなかったりするのを生やしたり
    • 型定義だけ上書きしても実装は変わらないと思うのですが、型定義不備を補うって感じでしょうか
      • ですね
        • なるほど！
• PR送り先が無かったりするやつがあったり。。。

Null Object PatternはTypeScript的にどうなのか？ (すいん)

https://dev.to/jamesmh/unhealthy-code-null-checks-everywhere-2720 を読んで感じた疑問。

・・・

• nullガードを書く
• union型でもいいんじゃない？という感想もある

function doSomething(): null | Foo {}

• TS3.7からのオプショナルチェイニングで代替できる？
  • ?だらけになるのではー？
  • かなしい・・・
• 「nullかどうか」を考慮から追い出せるのがNullObjectPatternの旨味だと思ってます
  • オプショナルだとまさに?だらけになりそう、nullガードは分岐だらけになる
    • 結局「nullかどうか」を考慮することは変わらず要求されてる感
    • 安全にはなるけれど、考えるべきことは減ってない
  • 「存在しない」という状態が有るなら、それをNullObjectという形で一つの状態として明示的に定義した方が良さそうな気がします
• ちゃんと型が定義されていれば、Null Objectパターンじゃなくて良さそう
• コンパイル時に頑張るのが型で、実行時に落とさなようにするのがNull Object Patternって解釈であっていますかね
  • あってそう

参加してよかったこと(参加者の感想)

• 初耳なワードを色々しれてよかった
• 「デメテルの法則」という言葉を知れた。
• 初心者向けの質問から中、上級者向けの質問まで幅広く楽しめました。
• サーバーサイドTypeScriptの話や、デメテルの法則の話が聞けて非常に勉強になりました

YYTypeScriptは毎週やってます

YYTypeScriptについてワイワイ話したい方は、YYTypeScriptのイベント情報をチェックしてみて下さい。

以上、YYTypeScriptのレポートでした。次回もワイワイやっていきたいと思います！ では、また来週！

本内容を利用した場合の一切の責任を私は負いません。

バージョン

• OS
  OS 名: Microsoft Windows 10 Home
  OS バージョン: 10.0.18362 N/A ビルド 18362
  システムの種類: x64-based PC
  
• Chrome
  バージョン: 77.0.3865.90（Official Build） （64 ビット）
• node.js
  node-v10.16.0-win-x64
  ejs@2.6.2
  express@4.17.1
  

本題

ejsが古いためかもしれないが、文字列の配列(?)をテンプレートに渡すと、文字列の「"」(ダブルクォーテーション)括りが削られてエラーになってしまう。
その回避方法。

server.js

const express = require('express');
const ejs = require('ejs');

const App = express();

App.engine('ejs', ejs.renderFile);
App.get('/',
    function(req, res)
    {
        res.render('client.ejs',
            {
                ToTemplate: ["ab", "cd", "ef"]
            });
    });
App.listen(8080);

views/client.ejs

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>double quotation into array by ejs</title>
<script id="script_1">
var no_good_1 = <%= ToTemplate %>;
var no_good_2 = [<%= ToTemplate %>];
<%
var no_good_3 = [];
var good = [];

for (var i = 0; i < ToTemplate.length; i++)
{
    no_good_3.push(ToTemplate[i].toString());
    good.push("\"" + ToTemplate[i].toString() + "\"");
}
%>
var no_good_3 = [<%- no_good_3 %>];
var good = [<%- good %>];
</script>
</head>
<body>
「&lt;script id="script_1"&gt;」タグ内<br>
<br>
<script>
var content = document.getElementById("script_1");
document.write(content.text);
</script>
</body>
</html>

上記の結果。

out.htm

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>double quotation into array by ejs</title>
<script id="script_1">
var no_good_1 = ab,cd,ef;
var no_good_2 = [ab,cd,ef];

var no_good_3 = [ab,cd,ef];
var good = ["ab","cd","ef"];
</script>
</head>
<body>
「&lt;script id="script_1"&gt;」タグ内<br>
<br>
<script>
var content = document.getElementById("script_1");
document.write(content.text);
</script>
</body>
</html>

display.txt

「<script id="script_1">」タグ内

var no_good_1 = ab,cd,ef; var no_good_2 = [ab,cd,ef]; var no_good_3 = [ab,cd,ef]; var good = ["ab","cd","ef"];

上記は下記のgithubに。
https://github.com/github895439/other_qiita/tree/master/double_quotation_into_array_by_ejs

目指すこと

前回に引き続き、中学校における「ネットワークを活用した双方向性のあるコンテンツのプログラミング」の教材を目指します。今回のプロトタイプはここからアクセスできます（出席番号は今は使用しないため、送信ボタンを押すだけでエディタが起動します）。

前回からの変更点

前回、WebSocket を使ったデータの送受信機能を実装しましたが、今回は GUI アプリを制作するための環境を構築します。プロトタイプなので、いい加減なところもありますが、以下のような環境を実装しました。

• 基本的なビジュアル要素（Button, Label, TextBox）が使える
• イベントハンドラを定義できる
• ブレークポイントを設定できる

上２つについては Blockly 上からコードを編集できるようにします。ブレークポイントについては generator によるコード生成を行ったあと、Barista言語の runtime が持つ setBreakpoint() 等のメソッドを利用します。

基本的なビジュアル要素を使う

まず GUI アプリの見た目を Blockly で編集します。

Button クラスや、TextBox クラスをインスタンス化して、変数に格納するところから始まりますが、中学校ではこの表現は難しいかもしれません。また、ウィンドウに追加しないと何も表示されません。

イベントハンドラを定義する

見た目を編集した時に使った変数に対して、イベントハンドラを定義します（画像の上部分「ボタンがクリックされたら〜」のブロック）。「サーバーへ送信する」ブロックの中身は本来 WebSocket を用いた通信ですが、今回はページ内で完結するようにして Barista の runtime を使いました。通信は行われず、別の仮想マシン内で実行されます。
次のデータを処理するブロックで、受け取ったデータを加工して返します。

繰り返しますが、今回はまだ WebSocket を使っていません。ここはサーバ側で行う処理を記述しますが、「全員に送信する」とは、WebSocket で接続された全てのクライアントにメッセージを送信するブロックです。ここまで編集したら、プログラムを実行します。

画像下部分がウィンドウに相当します。今はボタンが１つと、テキストボックスが１つあります。試しにテキストボックスに名前を入力して、送信するボタンを押してみます。

テキストボックスの内容が更新されました。

ブレークポイントを設定する

中学校のプログラミング教育では、デバッグのできる学習環境が求められているようです。例えば Scratch にはそのような機能はありません。そこで試作段階ですが、ブレークポイントを設定して変数の中身を確認できるようにしました。

コードをクリックすると、オレンジ色に反転します。送信ボタンを押すとブレークポイントで止まり、message 変数の中身を表示することができます。しかし、続けて送信ボタンが押された時など不完全な部分が残っています。

Blockly エディタにブロックを追加する

本環境に新しくブロックを定義するには、次のような手順が必要です。

1. barista_blocks.js に、ブロックの構造を記述する
2. generator を編集して、build.py generators を実行、生成した barista_compressed.js をプロジェクトにコピー
3. barista_sns.html に必要ならば、built-in function を追加する（runtime.addBuiltinFunction()）
4. toolbox にブロックを追加する

今回のプロトタイプに興味を持たれた方は GitHub よりご連絡お願い致します。

今後の課題

次は編集したプログラムを Flutter サーバに置いて、全ての生徒からアクセスできるようにする必要があります。前回の WebSocket を使った環境と組み合わせれば可能です。
あとはコードの表現を英語ではなく日本語にしたいです。識別子には日本語が使えるので、メソッド名も日本語で記述できるはずです。
全体的には、今のままでは中学校よりも高校レベルになってしまったように思いますので、よりわかりやすく取り組める教材に仕上げていきたいと考えています。

はじめに

この記事はもう一つの記事、
Vue + SVG で作るグラフィックアプリの骨格
の Canvas 版です。

Canvas や SVG のおかげでブラウザ上でもインタラクティブにグラフィックを簡単に扱えるようになりました。

おまけに Vue を使うとまるでパソコン上のアプリを作るかのように Web 上にグラフィックアプリを作ることができます。

この記事では Vue + Canvas でマウスで四角を書いていくような 100 行程度の簡単なサンプルを作ることで、Web 上のグラフィックアプリの骨格を示したいと思います。

できあがったものは、以下のような感じです。

準備

• node, npm をダウンロードします

https://nodejs.org
この記事では node v12.4.0 で検証しています

• vue-cli をダウンロードして、とりあえず qvc という名前でアプリを作ります。

$ npm i @vue/cli -g
$ vue create qvc
$ cd qvc
$ yarn serve

この記事では vue 3.12.0 で検証しています。yarn を使ってない人は最後の行は

$ npm run serve

になると思います。

なお、以下のコードは ESLint の掟に従ってないので、vue create qvc の時に ESLint をはずさないと多分エラーになると思われます。
また、セパレータを前に書いたり、引数とか変数の名前が _ だったりするのは単なる趣味ですので、気に入らなくても怒らないでください。

コード

src/App.vue を以下のようにしてみます。

App.vue

<template>
    <div id=app style="overflow: scroll">
        <div id=menu style="position: fixed; top: 0; left: 0">
            <button @click="mode='select'"  >select </button>
            <button @click="mode='rect'"    >rect   </button>
        </div>
        <canvas
            style       = "margin: 24px 4px 4px 4px; background: aliceblue"
            :class      = "{ drawRect: mode == 'rect' }"
            :width      = "extent[ 0 ]"
            :height     = "extent[ 1 ]"
            @mousedown  = "mouseDown"
            @mousemove  = "mouseMove"
            @mouseup    = "mouseUp"
            @keyup.esc  = "keyUpESC"
        />
    </div>
</template>

<script>
export default {
    data    : () => (
        {   b           : null
        ,   c           : null
        ,   mode        : 'select'
        ,   elements    : []
        }
    )
,   computed: {
        extent  () {
            return [ 700, 500 ]
        }
    ,   canvas  () {
            return this.$el.getElementsByTagName( 'canvas' )[ 0 ]
        }
    ,   ctx     () {
            return this.canvas.getContext( '2d' )
        }
    ,   dragRect() {
            return ( ! this.b || ! this.c )
            ?   null
            :   [   this.b.offsetX
                ,   this.b.offsetY
                ,   this.c.offsetX - this.b.offsetX
                ,   this.c.offsetY - this.b.offsetY
                ]
        }
    }
,   methods : {
        draw() {
            this.ctx.clearRect( 0, 0, ...this.extent )

            for ( let _ of this.elements ) this.ctx.strokeRect( ..._ )

            if ( ! this.dragRect ) return
            switch ( this.mode ) {
            case 'rect':
                this.ctx.setLineDash( [ 1 ] )
                this.ctx.strokeRect( ...this.dragRect )
                this.ctx.setLineDash( [] )
                break
            }
        }
    ,   mouseDown( _ ) {
            this.b = _
            this.draw()
        }
    ,   mouseMove( _ ) {
            this.c = _
            this.draw()
        }
    ,   mouseUp( _ ) {
            this.c = _
            switch ( this.mode ) {
            case 'rect':
                this.elements.push( this.dragRect )
                break
            }
            this.b = null
            this.draw()
        }
    ,   keyUpESC( _ ) {
            this.mode = 'select'
            this.draw()
        }
    }
,   mounted() {
        this.canvas.setAttribute( 'tabindex', 0 )
        this.draw()
    }
}
</script>

<style>
.drawRect {
    cursor: crosshair
}
</style>

勘所

キーイベントの取得

canvas に tabindex 属性をつけると、キーイベントを取得できるようになります。

    this.canvas.setAttribute( 'tabindex', 0 )

カーソルの切り替え

mode が 'select' と 'rect' の2つの状態が存在します。
'rect' の状態の時にクロスヘアカーソルを表示するために
クラスとスタイルのバインディングを動的に使っています。

        :class = "{ drawRect: mode == 'rect' }"
<style>
.drawRect {
    cursor: crosshair
}
</style>

最後に

この記事が何かの役にたてたら幸いです。わからないことがあればコメントください！

はじめに

Canvas や SVG のおかげでブラウザ上でもインタラクティブにグラフィックを簡単に扱えるようになりました。

おまけに Vue を使うとまるでパソコン上のアプリを作るかのように Web 上にグラフィックアプリを作ることができます。

この記事では Vue + SVG でマウスで四角を書いていくような 80 行程度の簡単なサンプルを作ることで、Web 上のグラフィックアプリの骨格を示したいと思います。

できあがったものは、以下のような感じです。

準備

• node, npm をダウンロードします

https://nodejs.org
この記事では node v12.4.0 で検証しています

• vue-cli をダウンロードして、とりあえず qvc という名前でアプリを作ります。

$ npm i @vue/cli -g
$ vue create qvc
$ cd qvc
$ yarn serve

この記事では vue 3.12.0 で検証しています。yarn を使ってない人は最後の行は

$ npm run serve

になると思います。

なお、以下のコードは ESLint の掟に従ってないので、vue create qvc の時に ESLint をはずさないと多分エラーになると思われます。
また、セパレータを前に書いたり、引数とか変数の名前が _ だったりするのは単なる趣味ですので、気に入らなくても怒らないでください。

コード

src/App.vue を以下のようにしてみます。

App.vue

<template>
    <div id=app style="overflow: scroll">
        <div id=menu style="position: fixed; top: 0; left: 0">
            <button @click="mode='select'"  >select </button>
            <button @click="mode='rect'"    >rect   </button>
        </div>
        <svg
            style       = "margin: 24px 4px 4px 4px; background: aliceblue"
            :class      = "{ drawRect: mode == 'rect' }"
            :width      = "extent[ 0 ]"
            :height     = "extent[ 1 ]"
            @mousedown  = "mouseDown"
            @mousemove  = "mouseMove"
            @mouseup    = "mouseUp"
            @keyup.esc  = "keyUpESC"
        >
            <template v-for="_ in elements">
                <rect v-bind="_" stroke=black fill=none />
            </template>

            <rect v-bind=dragRect stroke=blue fill=none />
        </svg>
    </div>
</template>

<script>
export default {
    data    : () => (
        {   b           : null
        ,   c           : null
        ,   mode        : 'select'
        ,   elements    : []
        }
    )
,   computed: {
        extent  () {
            return [ 700, 500 ]
        }
    ,   svg     () {
            return this.$el.getElementsByTagName( 'svg' )[ 0 ]
        }
    ,   dragRect() {
            return ( ! this.b || ! this.c )
            ?   null
            :   {   x       : this.b.offsetX
                ,   y       : this.b.offsetY
                ,   width   : this.c.offsetX - this.b.offsetX
                ,   height  : this.c.offsetY - this.b.offsetY
                }
        }
    }
,   methods : {
        mouseDown( _ ) {
            this.b = _
        }
    ,   mouseMove( _ ) {
            this.c = _
        }
    ,   mouseUp( _ ) {
            this.c = _
            switch ( this.mode ) {
            case 'rect':
                this.elements.push( this.dragRect )
                break
            }
            this.b = null
        }
    ,   keyUpESC( _ ) {
            this.mode = 'select'
        }
    }
,   mounted() {
        this.svg.setAttribute( 'tabindex', 0 )
    }
}
</script>

<style>
.drawRect {
    cursor: crosshair
}
</style>

勘所

キーイベントの取得

svg に tabindex 属性をつけると、キーイベントを取得できるようになります。

        this.svg.setAttribute( 'tabindex', 0 )

カーソルの切り替え

mode が 'select' と 'rect' の2つの状態が存在します。
'rect' の状態の時にクロスヘアカーソルを表示するために
クラスとスタイルのバインディングを動的に使っています。

            :class      = "{ drawRect: mode == 'rect' }"

<style>
.drawRect {
    cursor: crosshair
}
</style>

最後に

この記事が何かの役にたてたら幸いです。わからないことがあればコメントください！

関数

「いくつかの処理をまとめたもの」

関数の定義

以下のように関数の用意をすることを「関数を定義する」と呼ぶ

//関数の書き方
const 定数名 = function(){
    まとめたい処理
} 

//例
const introduce = function(){
    console.log(“こんにちは”);
    console.log(“私は山田太郎です”);
} ;

関数の呼び出し

関数を定義しただけでは処理は実行されない

「定数名()」で関数の処理を実行できる

//例
const introduce = function(){
    console.log(“こんにちは”);
    console.log(“私は山田太郎です”);
} ;
introduce();

アロー関数

「function()」の部分を「() =>」と書く
この書き方のことをアロー関数と呼ぶ

//例
const introduce = function(){
    console.log(“こんにちは”);
    console.log(“私は山田太郎です”);
} ;

↓↓↓

const introduce = ()=>{
    console.log(“こんにちは”);
    console.log(“私は山田太郎です”);
} ;

引数

関数に与える追加情報のようなもの

const 定数名 = (引数名)=>{
    ・
}

//例
const introduce  = (name)=>{
    ・
}

引数（追加情報）を受け取る、関数（処理）の呼び出し

「定数名(値)」
と書いて呼び出す
関数は指定した値を受け取り、その値は引数に代入される

（後から情報を設定できるってこと！）

複数の引数を、受け取る

（追加情報が増える）

const 定数名 = (第1引数 , 第2引数 , ・・・) => {
    処理
}
定数名(値);

//例
const introduce = (name, age) => {
    console.log(`私は${name}です。`)
    console.log(`私は${age}歳です。`)
}
introduce(“山田太郎” , 22);

//コンソール
私は山田太郎です。
私は22際です。

戻り値

呼び出し元で受けとる処理結果を戻り値と呼ぶ
関数が戻り値を返すと言う

呼び出し元
「定数名(2 ,5);」
引数
「const add = (number1,number2) =>」
戻り値
「7」

戻り値のある関数

関数の中で return を使うと、呼び出し元で値を受け取れるようになる
「return 値」と書くことで、関数はその値を戻り値として返す
関数の呼び出し部分を定数に代入することができる

returnは関数の処理を終了させる性質を持っている
returnをした後に処理を入れても実行されないので注意！

//例
const add = (a,b) => {
    return a + b ;
    console.log(“計算しました”);
} 
add(1,3);
//コンソール
4

//下線部分は表示されない！

スコープ

関数の引数や変数は、その関数内でしか使うことができない
それぞれの定数や変数の使用できる範囲のことを スコープ と呼ぶ

//関数内で定数を定義した場合

const introduce = () => {
    const name = “山田太郎”;
    ・
    ・
    //定数name使える（スコープ)
}
//定数nameが使えない

//関数外で定数を定義した場合
const name = “山田太郎”;
const introduce = () => {
    ・
    ・
    //定数name使える（スコープ)
}
//定数name使える（スコープ)

以前は

const newObject = Object.assign({newProp:'hoge'},oldObject);

とObject.assignを使って書いていたのですが、

const newObject2 = {newProp:'hoge',...oldObject};

とした方がスマートな気がしてこちらを最近は使っています。
スプレッド構文を使うと、

const newObject3 = {...oldObject,newProp:'hoge'};

とすることで、newPropがすでにoldObjectにあっても、oldObjectを汚さずに上書きできるのも良い感じです。
(Object.assignは第一引数のObjectを書き換えてしまう)

現在、実施される Breaking Changes について議論中です。Node.js 8.x が EOL になる頃にアルファ版が出始めると予想しています。

実施される可能性が高い Breaking Changes をちょっとだけ覗いてみましょう。

• Node.js 8.x のサポート終了。
• RFC20『設定ファイルによる追加の対象ファイル』 ディレクトリを指定してリントした場合、現在は*.jsファイルだけが対象になります。7.0.0 からは、overridesセクションのファイル指定にマッチするファイルも自動的に対象になります。TypeScript や Vue.js など、.js 以外のファイルを利用している場合に便利になります。
• RFC32『個人設定ファイルを非推奨にする』 ESLint は、CWD 配下に ESLint の設定ファイルが存在しなかった場合、自動的にホームディレクトリの設定ファイルを探して利用します。 7.0.0 ではこの動作が非推奨になります。8.0.0 で削除されると思います。
• RFC33『ディレクティブ コメントのコメント』 /* eslint-disable no-undef -- typeofで調べたから */ のように、各ディレクティブ コメントに説明を付与できるようになります。反面、-- が設定の中にあるとうまく動かなくなるかもしれません。
• RFC34『単一行ディレクティブ コメント』 /* eslint-disable */ のようなブロックコメントのみサポートしているディレクティブ コメントが、// eslint-disable のように行コメントでも利用可能になります。ディレクティブ コメントと同じ単語で始まる行コメントが誤動作するかもしれません。
• RFC37『overrides/ignorePatternsの基準パスを変更』 --config/--ignore-path オプションで指定した設定ファイルの overrides/ignorePatterns プロパティの基準パスが CWD に変更されます。検証スクリプト自体をパッケージ化して再利用している場合などは、新しい振る舞いで便利になります。
• RFC39『プラグインの読込元を変更』 ESLint 5.x までは ESLint がインストールされている場所を基準にプラグインを読み込んでいました。6.x では CWD を基準にプラグインを読み込んでいます。7.0.0 からはリント対象ファイルに最も近い設定ファイルを基準にプラグインを読み込むようになります。モノリポのように、node_modules が複数存在するようなリポジトリを利用している場合に便利になります。
• RFC40『非同期 API に移行する』 ESLint を Node.js から利用する場合は CLIEngine 等のクラスを利用します。これらがすべて同期 API を使っているため、できないことがたくさんありました。例えば進捗表示、並列化、そして ES Modules の利用等です。7.0.0 では新たに非同期 API を提供し、今の同期 API は非推奨になります。
• RFC42『並列化』 リント対象のファイル数に応じて、ファイルが多ければスレッドを作って並列処理するようになります。スレッドを使えない古い Node.js で実行されている場合は、代わりに子プロセスで並列化します。PoC では、20 秒程度かかっていた ESLint 自身のソースコードのリントが、7.5 秒程度で終わるようになりました。

---

※ これらが本当に実施される保証はありません。

はじめに

前回の記事ではA-Frameを使って色々なオブジェクトを配置しました。今回はこれらに動きを加えていきたいと思います。

準備

準備としてオブジェクトを配置します。前回と同様にデモからソースを引っ張ってきました。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello, WebVR! • A-Frame</title>
    <meta name="description" content="Hello, WebVR! • A-Frame">
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
  </head>
  <body>
    <a-scene background="color: #FAFAFA">
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
    </a-scene>
  </body>
</html>

オブジェクトの色を変える

それでは早速イベントを追加していきます。クリックをした時に、視点の中心にあるオブジェクトの色を変えてみたいです。

まずは今のままでは視点の中心が分かりにくいのでカーソルを表示します。<a-scene>タグ内に以下を挿入します。

<a-camera>
  <a-cursor></a-cursor>
</a-camera>

色を変更するイベントを追加します。クリックの度に変更する色を赤、緑、青と変化させるようにしました。
イベントの書き方は公式のドキュメントを参考にしています。
https://aframe.io/docs/0.9.0/introduction/javascript-events-dom-apis.html

<script>
  var i = -1;
  var COLORS = ['red', 'green', 'blue'];
  AFRAME.registerComponent('camera-listener', {
    init: function () {
      this.el.addEventListener('click', function (evt) {
        i = (i + 1) % COLORS.length;
        this.setAttribute('material', 'color', COLORS[i]);
      });
    }
  });
</script>

各オブジェクトにこのイベントを割り当てます。"camera-listener"を追記するだけです。

<a-box camera-listener position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere camera-listener position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder camera-listener position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>

簡単ですね。

オブジェクトを移動させる

次にオブジェクトを移動させてみましょう。動かしたいオブジェクトをクリック、持っていきたい位置にマウスを動かし再度クリックしたらそこに配置します。
動かしやすいように床を大きくし、オブジェクトを一つだけにしました。

<a-scene background="color: #FAFAFA">
  <a-box position="0 0.5 -3" height="1" color="#4CC3D9" shadow></a-box>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="10" height="10" color="#7BC8A4" shadow></a-plane>
</a-scene>

こちらの箱を動かしていきましょう。

<script>
  AFRAME.registerComponent('move', {
    init: function () {
      var isMove = false;
      this.el.addEventListener('click', function (evt) {
        var mode = document.getElementById("mode");
        isMove = !isMove;
        mode.setAttribute('visible', isMove);
      });

      var plane = document.getElementById('plane1');
      plane.addEventListener('mouseenter', function (evt) {
        var box = document.getElementById("box1");
        if(isMove) {
          evt.detail.intersection.point.y += box.getAttribute('height') / 2;
          box.setAttribute('position', evt.detail.intersection.point);
        }
      });
    }
  });
</script>

<a-camera cursor="rayOrigin: mouse;"></a-camera>
<a-box move id="box1" position="0 0.5 -3" height="1" color="#4CC3D9" shadow></a-box>
<a-plane id="plane1" position="0 0 -4" rotation="-90 0 0" width="10" height="10" color="#7BC8A4" shadow></a-plane>
<a-text id="mode" value="Move" color="#000" position="-0.9 2 -3" scale="1.5 1.5 1.5" visible="false"></a-text>

できました。

解説

var isMove = false;
this.el.addEventListener('click', function (evt) {
  var mode = document.getElementById("mode");
  isMove = !isMove;
  mode.setAttribute('visible', isMove);
});

これは箱をクリックした時のイベントです。クリックの度にisMoveを書き換えながら、"Move"の表示非表示を切り替えます。

var plane = document.getElementById('plane1');
  plane.addEventListener('mouseenter', function (evt) {
  var box = document.getElementById("box1");
  if(isMove) {
    evt.detail.intersection.point.y += box.getAttribute('height') / 2;
    box.setAttribute('position', evt.detail.intersection.point);
  }
});

これは地面にマウスカーソルが当たる度に呼ばれるイベントです。isMoveが真ならばマウスカーソルの位置に移動します。

<a-camera cursor="rayOrigin: mouse;"></a-camera>

これはマウスでオブジェクトを操作したかったので追加しています。詳細は公式のドキュメントをご確認ください。
https://aframe.io/docs/0.9.0/components/cursor.html

おわりに

今回はオブジェクトの色を変えたり、移動させたりしました。
次回はこれらを使った簡単なゲームを作ってみたいです。

解決したいこと

windows 環境でjavascript を使ってandroid アプリを開発しているとき、console.log の出力を確認したかった。
具体的には、cordova を使って開発していた。
デバック方法としては、chrome を使うやり方もあるがadbを使ったほうがアプリを再起動しても常に監視できるので楽。

$ adb logcat | grep CONSOLE

調べるとLinux環境では上記のようにgrep hogeを使ってフィルタしてあげればhogeが含まれる文章だけが表示される
でもwindowsではgrepは使えない...

解決方法

$ adb logcat -s chromium:I

logcat に関する公式の説明を見ると、普通にコマンドからフィルタできた。
上記のコマンドは実際にcordova のconsole.logをフィルタしたい場合の指定の仕方。
フィルタに関する説明は、

• https://developer.android.com/studio/command-line/logcat

の「ログ出力をフィルタリングする」から見ることができる。

指定の仕方だが、まずフィルタをかけずにlogcatしてフィルタしたい目的のconsole.logを見つける。

$ adb logcat
>  I/ActivityManager(  585): Starting activity: Intent { action=android.intent.action...}

I,ActivityManagerは任意に変わっているはずなので、それを確認して

$ adb logcat -s ActivityManager:I

とすれば目的のconsole.logだけ出力される

参考サイト

• https://maku77.github.io/android/filter-logcat.html

Promiseのメモ - その1: resolveとthen と Promiseのメモ - その2: チェーン、例外 の追記の小ネタです。

プロミスチェーンは、新しいPromiseオブジェクトを次々に作ってコールバック関数を登録していくものです。ところで、新しいPromiseではなく、同じPromiseに対して2回thenで関数を登録したらどうなるでしょう。

function makePromise(num) {
  return new Promise((resolve, reject) => {
    if(num % 2 == 0)
      resolve('OK');
    else
      reject('NG');
  });
}

let promise = makePromise(2);

promise.then((x) => {
  console.log(`then1 callback: ${x}`);
  return x + x;
});

setTimeout(() => {
  console.log(promise);
  promise.then((x) => {
    console.log(`then2 callback: ${x}`);
  });
}, 1000);

結果

then1 callback: OK
Promise {<resolved>: "OK"}
then2 callback: OK

履行済み、かつコールバック関数を1度実行したことのあるPromiseオブジェクトでも、あとからコールバック関数を追加すれば実行される、ということがわかります。結果の値（"OK"）はそのままです。

以上、特に実用性はない実験でした。

動機

暇なときになんとなくマインスイーパを作ってみたら楽しかったので、記録として。
（ゲーム終了判定などは割愛してます。。）

マインスイーパのルールと処理

遊び方はここに分かりやすく載っています。
http://dotpico.com/mine/ja/rule.php

左クリックの処理

• クリックすると、そのセルを開くことができる
  • そのセルに爆弾が入っていたら、その時点でゲームオーバー
  • そのセルに爆弾が入っていなければ、周囲に存在する爆弾の数が表示される
  • そのセルに爆弾が入っておらず、周囲に1つも爆弾が存在しないとき、周囲のセルが自動的に開かれる

右クリックの処理

• 1回右クリックすると、そのセルに「フラグ」をつけることができる
• 2回右クリックすると、そのセルに「？」をつけることができる
• 3回右クリックすると、元に戻る

ダブルクリックの処理

• 開いたセルに書いてある数字と、その周囲の「フラグ」の数が一致しているとき、そのセルをダブルクリックすると、「周囲の開かれていないセル」を一度に開くことができる

実装プログラム

index.html

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

<head>
    <meta charset="UTF-8">
    <style>
        td {
            padding: 0px;
            width: 40px;
            height: 40px !important;
            text-align: center;
            border: 1px solid rgb(60, 60, 60);
        }

        /**　未開封のクラス　*/
        .closed {
            background-color: lightgray;
            color: black;
            cursor: pointer;

        }

        /**　開封して爆弾だったときのクラス　*/
        .bombed {
            background: red;
            color: white;
            cursor: auto;
        }

        /**　開封して爆弾ではなかったときのクラス　*/
        .opened {
            background: white;
            color: black;
            cursor: auto;
        }
    </style>
</head>

<body>
    <div id="msg"></div>
    <table>
        <tbody id="target">
            <!-- 中身はJavaScriptでつくる -->
        </tbody>
    </table>

    <script src="main.js" type="text/javascript"></script>
</body>

</html>

main.js

'use strict';

//===================================
// マインスイーパ用のセルクラス
// セルはこのクラスのインスタンスとする
//===================================
class MSCell extends HTMLTableCellElement {

    //-----------------------------------
    // コンストラクタ
    //-----------------------------------
    constructor() {
        super();

        // イベント登録
        this.addEventListener('click', this.clickFunc);
        this.addEventListener('contextmenu', this.clickRightFunc);
        this.addEventListener('dblclick', this.clickDblFunc);
    }

    //-----------------------------------
    // マインスイーパ初期設定
    // x座業、y座標、爆弾かどうかをパラメータにとる
    //-----------------------------------
    init(x, y, bombFlg) {

        // 開封フラグ（未開封のときfalse/開封済みのときtrue）
        this.openedFlg = false;
        // x座標
        this.x = x;
        // y座標
        this.y = y;
        // 爆弾フラグ（爆弾のときtrue/爆弾でなければfalse）
        this.bombFlg = bombFlg;
        // 見た目のクラス
        this.classList.add('closed')

    }

    //-----------------------------------
    // 周辺セルを設定する
    // 周辺セルと、周辺セルの合計爆弾数を設定する
    //-----------------------------------
    setArounds(arounds) {
        // 周辺セル
        this.arounds = arounds;
        // 周辺セルの爆弾数
        this.aroundBombCount = this.arounds.filter(around => around.bombFlg).length;
    }

    //-----------------------------------
    // そのセルの中身を表示する
    //-----------------------------------
    show() {
        if (this.bombFlg) {
            // 爆弾のときは「爆」
            this.textContent = '爆';

            // 見た目の変更
            this.classList.remove('closed');
            this.classList.add('bombed');
        } else {
            // 爆弾ではないとき
            if (this.aroundBombCount > 0) {
                // 周辺の爆弾数が1個以上のときは数を表示
                this.textContent = this.aroundBombCount;
            }

            // 見た目の変更
            this.classList.remove('closed');
            this.classList.add('opened');
        }
    }

    //-----------------------------------
    // セルを左クリックしたときの関数
    //-----------------------------------
    clickFunc() {

        if (this.openedFlg) {
            // 開封済みのときは何もしない
            return;
        }

        if (this.textContent === '旗' || this.textContent === '？') {
            // 「旗」や「？」がついてるときも何もしない
            return;
        }

        // 開封済みにする
        this.openedFlg = true;

        // このセルを開く
        this.show();

        if (this.bombFlg) {
            // このセルが爆弾のときはゲームオーバーなので全セルを開く
            msCells.forEach(button => button.show());
        } else {
            // このセルが爆弾でないとき
            if (this.aroundBombCount === 0) {
                // 周囲に爆弾が無いときは周囲のセルを全部開く
                this.arounds.forEach(around => around.clickFunc());
            }
        }
    }

    //-----------------------------------
    // セルを右クリックしたときの関数
    //-----------------------------------
    clickRightFunc(e) {

        // 右クリックメニュー禁止
        e.preventDefault();

        if (this.openedFlg) {
            // 既に開かれている場合は何もしない
            return;
        }

        if (this.textContent === '') {
            // 旗を表示
            this.textContent = '旗';
        } else if (this.textContent === '旗') {
            // ？を表示
            this.textContent = '？';
        } else if (this.textContent === '？') {
            // 元に戻す
            this.textContent = '';
        }

    }

    //-----------------------------------
    // セルをダブルクリックしたときの関数
    //-----------------------------------
    clickDblFunc() {
        if (!this.openedFlg) {
            // 既に開かれている場合は何もしない
            return;
        }

        // 周囲の旗の数を取得
        let flgCount = this.arounds.filter(around => around.textContent === '旗').length;

        // 周囲の旗の数と、クリックしたセルに表示されている爆弾数が一致していれば
        // 周囲のセルをすべて開く
        if (this.aroundBombCount === flgCount) {
            this.arounds.forEach(around => around.clickFunc());
        }
    }

}

//===================================
// カスタム要素の定義
//===================================
customElements.define('ms-td', MSCell, { extends: 'td' });

//===================================
// 全セルを格納しておく変数
//===================================
let msCells = [];

//===================================
// ゲーム初期化用関数
//===================================
let initGame = function (xSize, ySize) {

    // ボタン配置
    for (let y = 0; y < ySize; y++) {
        let tr = document.createElement('tr');
        for (let x = 0; x < xSize; x++) {
            // セルを作る
            let msCell = document.createElement('td', { is: 'ms-td' });
            // セルの初期化
            msCell.init(x, y, Math.random() * 100 < 10);
            // セルをtrにいれておく
            tr.appendChild(msCell);
            // msCellsにも入れておく
            msCells.push(msCell);
        }
        document.getElementById('target').appendChild(tr);
    }

    // aroundsの設定
    msCells.forEach(msCell => {

        // 周囲8マスを取得
        let arounds = msCells.filter(otherCell => {

            if (msCell === otherCell) {
                return false;
            }

            let xArea = [msCell.x - 1, msCell.x, msCell.x + 1];
            let yArea = [msCell.y - 1, msCell.y, msCell.y + 1];

            if (xArea.indexOf(otherCell.x) >= 0) {
                if (yArea.indexOf(otherCell.y) >= 0) {
                    return true;
                }
            }
            return false;
        });

        // 周囲8マスをaroundsとして設定
        msCell.setArounds(arounds);
    });

}

//===================================
// ゲーム初期化
//===================================
initGame(15, 15);

実装のポイント

セルの作り方

JavaScriptのcreateElementでtableタグの中身をつくっていますが、
その中のtdタグは、独自に定義したカスタム要素「MsCell」です。（Msはマインスイーパの略）
MsCellはHTMLTableCellElementを継承しています。

そのため、見た目は普通のtdタグと同じですが、
マインスイーパに必要なopenedFlgなどのプロパティと、clickFuncなどの関数を持っています。

セルに対する動作

ポイントは二つです。

　開いたセルに爆弾が入っていなければ、そのセルの周囲に存在する爆弾の数が表示される

つまり、セルはその周囲のセルの中身を知っている必要があります。
そこで、セルにaroundsというプロパティを持たせ、周囲の8セルを参照させておくことにしました。

　開いたセルに爆弾が入っておらず、そのセルの周囲に1つも爆弾が存在しないとき、周囲のセルが自動的に開かれる

クリックされたセルの周囲の爆弾数で0であれば、そのセルのaroundsもすべて再帰的にクリックしていきます。
また、再帰処理を抜けるための条件として、openedFlg（未開封：false／開封済：true）を持たせています。

参考文献

Custom Elements v1で独自のHTML要素を定義する