はじめに

業務上でブラウザ状にちょっとした動きをつけるようなことはよくあるのですが最近珍しくjsonを使った非同期通信をやらせてもらえる機会があったので業務の内容とは別でjsonから取得したオブジェクト配列を地方ごとにまとめてみる処理をしてみました。
画面状には地域別で分けた各オブジェクトのタイトルを出力する仕様です。

area.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/style.css">
  <title>都道府県ごとにタイトルを表示する</title>
</head>
<body>
  <header>
  </header>
  <div class="container">
    <section>
      <h3>北海道</h3>
      <ul id="hokkaido">
        <li></li>
      </ul>
    </section>

    <section>
      <h3>東北地方</h3>
      <ul id="tohoku">
        <li></li>
      </ul>
    </section>

    <section>
      <h3>関東地方</h3>
      <ul id="kanto">
        <li></li>
      </ul>

    </section>

    <section>
      <h3>中部地方</h3>
      <ul id="chubu">
        <li></li>
      </ul>

    </section>

    <section>
      <h3>近畿地方</h3>
      <ul id="kinki">
        <li></li>
      </ul>
    </section>

    <section>
      <h3>中地地方</h3>
      <ul id="chugoku">
        <li></li>
      </ul>
    </section>

    <section id="shikoku">
      <h3>四国地方</h3>
      <ul id="chugoku">
        <li></li>
      </ul>
    </section>

    <section>
      <h3>九州地方</h3>
      <ul id="kyushu">
        <li></li>
      </ul>
    </section>

  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="/js/area.js"></script>
</body>
</html>

area.js

$(function(){
  const hokkaido_area = [];
  const hokkaido_pref = ["北海道"];
  const tohoku_area = [];
  const tohoku_pref = ["青森県", "岩手県", "宮城県", "秋田県", "山形県", "福島県"];
  const kanto_area = [];
  const kanto_pref = ["茨城県","栃木県","群馬県","埼玉県","千葉県","神奈川県","東京都"];
  const chubu_area = [];
  const chubu_pref = ["新潟県", "富山県", "石川県", "福井県", "山梨県", "長野県", "岐阜県", "静岡県", "愛知県"];
  const kinki_area = [];
  const kinki_pref= ["三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県"];
  const chugoku_area = [];
  const chugoku_pref = ["鳥取県","島根県","岡山県","広島県","山口県"];
  const shikoku_area = [];
  const shikoku_pref = ["徳島県","香川県","愛媛県","高知県"];
  const kyushu_area = [];
  const kyushu_pref = ["福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"];

  $.ajax({
    type: "GET",        
    url: "/json/area.json", 
    dataType: "json", 
  })
  .done(function (data) {
    $.each(data, function(index, value){
      if (hokkaido_pref.includes(value.address)){
        hokkaido_area.push(value);
        $("#hokkaido").append(
          `<li>${value.title}</li>`
        );
      } else if (tohoku_pref.includes(value.address)){
        tohoku_area.push(value);
        $("#tohoku").append(
          `<li>${value.title}</li>`
        );
      } else if (kanto_pref.includes(value.address)){
        kanto_area.push(value);
        $("#kanto").append(
          `<li>${value.title}</li>`
        );
      } else if (chubu_pref.includes(value.address)){
        chubu_area.push(value);
        $("#chubu").append(
          `<li>${value.title}</li>`
        );
      } else if (kinki_pref.includes(value.address)){
        kinki_area.push(value);
        $("#kinki").append(
          `<li>${value.title}</li>`
        );
      } else if (chugoku_pref.includes(value.address)){
        chugoku_area.push(value);
        $("#chugoku").append(
          `<li>${value.title}</li>`
        );
      } else if (shikoku_pref.includes(value.address)){
        shikoku_area.push(value);
        $("#shikoku").append(
          `<li>${value.title}</li>`
        );
      } else if (kyushu_pref.includes(value.address)){
        kyushu_area.push(value);
        $("#kyushu").append(
          `<li>${value.title}</li>`
        );
      } 
    });
  }).
  fail(function () {
    window.alert("通信に失敗しました")
  });
}) 

area.json

[
  {
    "title": "建築のオフィス",
    "parent_category": "architecture",
    "category_slug": "production",
    "address": "北海道",
  },
  {
    "title": "東名高速道路横浜町田インターチェンジPCトールゲート(改修)",
    "image": "http://192.168.11.26:10000/works/works_yokohamamachida.jpg",
    "parent_category": "civil",
    "category_slug": "train",
    "address": "北海道",
  },
  {
    "title": "岡崎市民会館(改修)",
    "parent_category": "",
    "category_slug": "architecture",
    "address": "北海道",
  },
  {
    "title": "法音寺三原支院",
    "parent_category": "",
    "category_slug": "civil",
    "address": "広島県",
  }

{~}
{~}
{~}
{~}

];

これで一応出力は出来ました。都道府県をeachさせながらincludes関数で一致するオブジェクトを地方ごとの配列に組み直す処理です。
配列の初期化等の記述だけで記述量が多くなったんですがもっとこうすればみたいなことがありましたら優しく教えてくださいませ。
よろしくお願いいたします。

はじめに

業務上でブラウザ状にちょっとした動きをつけるようなことはよくあるのですが最近珍しくjsonを使った非同期通信をやらせてもらえる機会があったので業務の内容とは別でjsonから取得したオブジェクト配列を地方ごとにまとめてみる処理をしてみました。
画面状には地域別で分けた各オブジェクトのタイトルを出力する仕様です。

area.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/style.css">
  <title>都道府県ごとにタイトルを表示する</title>
</head>
<body>
  <header>
  </header>
  <div class="container">
    <section>
      <h3>北海道</h3>
      <ul id="hokkaido">

      </ul>
    </section>

    <section>
      <h3>東北地方</h3>
      <ul id="tohoku">

      </ul>
    </section>

    <section>
      <h3>関東地方</h3>
      <ul id="kanto">

      </ul>

    </section>

    <section>
      <h3>中部地方</h3>
      <ul id="chubu">

      </ul>

    </section>

    <section>
      <h3>近畿地方</h3>
      <ul id="kinki">

      </ul>
    </section>

    <section>
      <h3>中地地方</h3>
      <ul id="chugoku">

      </ul>
    </section>

    <section id="shikoku">
      <h3>四国地方</h3>
      <ul id="chugoku">

      </ul>
    </section>

    <section>
      <h3>九州地方</h3>
      <ul id="kyushu">

      </ul>
    </section>

  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="/js/area.js"></script>
</body>
</html>

area.json

[
  {
    "title": "タイトル１",
    "parent_category": "architecture",
    "category_slug": "production",
    "address": "北海道",
  },
  {
    "title": "タイトル２",
    "parent_category": "civil",
    "category_slug": "train",
    "address": "北海道",
  },
  {
    "title": "タイトル3",
    "parent_category": "civil",
    "category_slug": "architecture",
    "address": "北海道",
  },
  {
    "title": "タイトル4",
    "parent_category": "car",
    "category_slug": "bus",
    "address": "広島県",
  }

{~}
{~}
{~}
{~}

];

area.js

$(function(){
  const hokkaido_area = [];
  const hokkaido_pref = ["北海道"];
  const tohoku_area = [];
  const tohoku_pref = ["青森県", "岩手県", "宮城県", "秋田県", "山形県", "福島県"];
  const kanto_area = [];
  const kanto_pref = ["茨城県","栃木県","群馬県","埼玉県","千葉県","神奈川県","東京都"];
  const chubu_area = [];
  const chubu_pref = ["新潟県", "富山県", "石川県", "福井県", "山梨県", "長野県", "岐阜県", "静岡県", "愛知県"];
  const kinki_area = [];
  const kinki_pref= ["三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県"];
  const chugoku_area = [];
  const chugoku_pref = ["鳥取県","島根県","岡山県","広島県","山口県"];
  const shikoku_area = [];
  const shikoku_pref = ["徳島県","香川県","愛媛県","高知県"];
  const kyushu_area = [];
  const kyushu_pref = ["福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"];

  $.ajax({
    type: "GET",        
    url: "/json/area.json", 
    dataType: "json", 
  })
  .done(function (data) {
    $.each(data, function(index, value){
      if (hokkaido_pref.includes(value.address)){
        hokkaido_area.push(value);
        $("#hokkaido").append(
          `<li>${value.title}</li>`
        );
      } else if (tohoku_pref.includes(value.address)){
        tohoku_area.push(value);
        $("#tohoku").append(
          `<li>${value.title}</li>`
        );
      } else if (kanto_pref.includes(value.address)){
        kanto_area.push(value);
        $("#kanto").append(
          `<li>${value.title}</li>`
        );
      } else if (chubu_pref.includes(value.address)){
        chubu_area.push(value);
        $("#chubu").append(
          `<li>${value.title}</li>`
        );
      } else if (kinki_pref.includes(value.address)){
        kinki_area.push(value);
        $("#kinki").append(
          `<li>${value.title}</li>`
        );
      } else if (chugoku_pref.includes(value.address)){
        chugoku_area.push(value);
        $("#chugoku").append(
          `<li>${value.title}</li>`
        );
      } else if (shikoku_pref.includes(value.address)){
        shikoku_area.push(value);
        $("#shikoku").append(
          `<li>${value.title}</li>`
        );
      } else if (kyushu_pref.includes(value.address)){
        kyushu_area.push(value);
        $("#kyushu").append(
          `<li>${value.title}</li>`
        );
      } 
    });
  }).
  fail(function () {
    window.alert("通信に失敗しました")
  });
}) 

これで一応出力は出来ました。都道府県をeachさせながらincludes関数で一致するオブジェクトを地方ごとの配列に組み直す処理です。
配列の初期化等の記述だけで記述量が多くなったんですがもっとこうすればみたいなことがありましたら優しく教えてくださいませ。
よろしくお願いいたします。

書籍にあるcss,javascriptのサンプルコードを書いてみたのですが反映されません・・・
どうすればよいのでしょうか？？

概要

webサービスを公開するにあったて必ず使われることになるのがブラウザです。ブラウザがユーザーにwebページを表示する仕組みを理解することで、フロントエンド開発に役立てたり、ページ表示までのレスポンスの改善などに役立てていきたいと思い、今回ブラウザのレンダリングの仕組みの基本事項についてまとめました。

レンダリングの流れ

ブラウザがWebページをレンダリングする仕組みは上のような一連の流れになっています。以下でその一つ一つの工程の内容をみていきます。

レンダリングエンジンとJavaScriptエンジン

各工程をみる前に、ブラウザの構成要素をみていきます。
ブラウザにはレンダリングエンジンとJavaScriptエンジンという２つのエンジンが動作しています。

レンダリングエンジン
HTMLやCSSなどを解析し、実際の画面に描画するためのもの。
レンダリングエンジンによってHTMLやCSSの解釈に差があるためデザインがブラウザによって崩れるという問題があります。

JavaScriptエンジン
JavaScriptを実行するためのエンジン。

【主なブラウザと各種エンジン】

ブラウザ	レンダリングエンジン	JavaScriptエンジン
Google Chrome	Blink	V8
Safari	Webkit	Nitro
IE	Trident	Chakra
Microsoft Edge	EdgeHTML	Chakra
Mozilla Firefox	Gecko	SpiderMonkey
Opera	Blink	V8

リソースのダウンロード

ブラウザにURLが与えられると、ブラウザは画面のレンダリングに必要なリソース(HTMLやCSSファイル、JavaScriptファイルや画像ファイルなど)を読み込み始めます。

リソースは通常サーバ上に保存されていて、TCP/IPプロトコルを用いてブラウザはサーバーにリクエストしてレスポンスとしてリソースを受け取ります。

オブジェクトモデルの構築

ブラウザではレンダリングを行うために取得したリソースから「オブジェクトモデル」と呼ばれるものを構築します。この時、HTMLはDOMに、CSSはCSSOMに変換されます。
以下の図のように、

バイト→文字列→トークン→ノード→オブジェクトモデル(DOM/CSSOM)

という流れでオブジェクトモデルは構築されます。

参考:https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model

DOMツリーの構築

変換

ブラウザはディスクやネットワークからHTMLのバイトを読み取り、utf8などの文字コードに応じてや

のような文字列に変換します

トークン化

文字列をStartTag:htmlやEndTag:headといったトークンに変換します(W3C HTML5 standardによって決められています)。

字句解析

トークンはプロパティとルールを定義するオブジェクトに変換されます。

DOMの構築

オブジェクトはツリー構造にリンクされます。このツリー構造はオリジナルのマークアップの親子関係をそのまま保持します。つまり、HTMLオブジェクトはbodyオブジェクトの親であり、bodyは

オブジェクトの親であるという関係になります。ブラウザでは以降このページを処理する際に必ずこのDOMを使用します。
ブラウザはHTMLを処理する度に上のDOM構築の一連の流れを全て行うため処理するHTMLが多い場合は一連のプロセスに時間がかかりボトルネックになってしまいます。

ページのライフサイクルイベントのDOMContentLoadedはDOMツリーの構築が完了した時点でレンダリングエンジンにより発火されます。そのためDOMContentLoadedイベントの時点では画像やCSSは読み込まれていない可能性があります。同じライサイクルであるloadイベントは画像やCSSなどを含む全てのリソースを読み込んだ時点で発火します。

CSSOMツリーの構築

ブラウザでDOMを構築している際にドキュメントのheadタグで外部のcssスタイルシートを参照しているlinkタグに遭遇すると、ブラウザはページのレンダリングにこのリソースが必要であると想定してこのリソースに対するリクエストを即座にディスパッチし、CSSのパースを行います。HTMLと同様にバイトが文字列、トークン、ノードに変換され最終的にCSSOMツリーを構築します。

DOMツリーとCSSOMツリーはそれぞれ独立しており後の工程で出てくるレンダリングツリーによってリンクされます。

JavaScriptの実行

各種リソースを読み込んだ後は、JavaScriptエンジンによってJavaScriptのコードが解析、実行されます。
まずJavaScriptのコードが字句解析されトークンとなり、次に構文解析され抽象構文木となり、最後にコンパイルされて実行可能なファイルとなり実行されます。

レンダリングツリーの構築

コンテンツを記述したDOMツリーととドキュメントに適用するスタイルルールを記述したCSSOMツリーを結合することでレンダリングツリーを構築する必要があります。レンダリングツリーは各表示要素のレイアウトを計算するために使用され、画面にピクセルをレンダリングするペイント処理の入力となります。

レンダリングツリー構築の手順として、DOMツリーの各要素に対してどのCSSプロパティがマッチするかを計算します。CSSのルールセットにはh1やpのようなCSSセレクタと、widthやcolorのようなCSSプロパティがあり、最初にCSSセレクタによってDOMツリーの要素とCSSルールのマッチングを行います。その後、各DOM要素にどのCSSプロパティがマッチングするかを計算します。

CSSセレクタのマッチンング

レンダリングエンジンはCSSセレクタを右側から順に評価していきます。

ex)

.name > ul > li > p {
    color: red;
}

上のような場合、レンダリングエンジンはページ内の全ての要素に対して次のように判定します

1. DOMがpである
2. pの親要素がliである
3. liの親要素がulである
4. ulの親要素のclass名にnameが含まれている

CSSプロパティのマッチング

どのCSSプロパティがDOM要素に適用されるかをレンダリングエンジンが決定するための詳細度という仕組みがあります。詳細度には３つのレベルがあり、各CSSセレクタとの関連は次のようになっています

A. IDセレクタ
B. クラスセレクタ、擬似クラスセレクタ(:first-child)、属性セレクタ([type=input])
C. 要素セレクタ(div)、擬似要素セレクタ(::before)

各レベルの優先度は A > B > Cとなっていて１つでも上位レベルが含まれる場合はそれが優先され、同じレベルでは値が大きい方が優先されます。

ex)

// A=0, B=2,C=0
.wrapper > .container {
 color: red;
}

// A=0, B=1, C=1
div > .container {
 color: white;
}

// A=1, B=0,C=0
#id {
  font-size: 20px;
}

// A=1, B=0,C=0
#id {
  font-size: 30px;
}

// A=1, B=0, C=1
#id::before {
  content: 'user';
}

上の例で２つのcontainerクラスが同じ要素に対して修飾されている場合、詳細度から color:redの方が優先されます。また詳細度が同じ場合は後に定義されたCSSルールセットが適用されますそのため上の例の#idの要素にはfont-size:30pxが適用されます。

レンダリングツリーのレイアウト

レイアウトの工程では端末ビューボード内での各ノードのレイアウト情報を算出しますレイアウト情報には要素の大きさやmargin/padding、x/y/z軸の位置などが含まれます。
レンダリングエンジンはレンダリングツリーのルート要素から順番に各要素が持つCSSプロパティを元にレイアウト情報を決めていきます。

ex)

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Critial Path: Hello world!</title>
  </head>
  <body>
    <div style="width: 50%">
      <div style="width: 50%">Hello world!</div>
    </div>
  </body>
</html>

上のようなHTMLの場合、viewportがデバイスのサイズで倍率が1倍ということに決まります。
ネストされた２つのdivがあり、１つ目のdivがviewportの幅の50%になり、２つ目のネストしたdivの幅は親のdivの50%(全体の25%)になります。

レンダリングツリーの描画

webページの描画にはペイントとコンポジットの２つの工程があります。

ペイント

各レイヤごとにテキストや色、画像などをピクセルに書き込みます。
1. 命令リストの作成
2. ピクセルへの書き込み

の２つの工程からなります。

まず前の手順で構築したレンダリングツリーを元にグラフィックエンジンのための命令リストを作成します。命令リストでは「どのピクセルに何色を入れるのか」という命令が入っているため、その命令を元にグラフィックエンジンがピクセルの描画を行います。
次にピクセルの書き込みを行います(ラスタライゼーション）。ピクセルの書き込みはレイヤ単位で行われ、position:abosolute;やopacityといったCSSプロパティなどz軸を考慮する必要のある要素が存在する場合は新しいレイヤが作成されます。

コンポジット

ピクセルを書き出したレイヤを合成してレンダリング結果を出力します。

まとめ

ブラウザレンダリングの仕組みを各工程ごとにみることで、ページライフサイクルのイベントがどの工程で発生するのかをきちんと理解できるようになりました。レンダリングの仕組みの知識を元に、ブラウザの開発ツールを駆使して開発時にデバッグやパフォーマンスのボトルネックの分析、改善に役立てていきたいと思います。

参考資料

• Constructing the Object Model
• Software Design 2019年10月号
• ブラウザレンダリング入門〜知ることで見える世界〜
• https://html.spec.whatwg.org/multipage/
• https://developers.google.com/web/fundamentals/performance/rendering?hl=ja

はじめに

この記事は Opt Technologies Advent Calendar 2019 1日目の記事です。
2日目の記事は @technicakidz さんによる 開発合宿で作ったもの です。

さて、皆さんテストは書いていますか？
今私が所属しているプロダクトでは日付を扱うコードが多く、それらをどうテストするかが悩みの種でした。
これを解決する手立てはないものかと調べたところ、有用っぽいライブラリを見つけたのでご紹介します。

悩ましい関数

先日私が書いたコードに、以下のような関数が含まれていました。

export const isStartOfThisMonth = () => {
  const today = new Date();
  return isSameDay(today, startOfMonth(today));
};

その名の通り、これは「今日が月初であるかどうかを判定する関数」です。
使用している isSameDay() やら startOfMonth() やらは date-fns の関数です。

この関数は、テストを実行するタイミングによって today の中身が変わってしまうので、全くテスタブルではありません。
多くの人は、以下のように書き換えるべきだと言うでしょう。

export const isStartOfThisMonth = (today = new Date()) => {
  return isSameDay(today, startOfMonth(today));
};

これで today を外部から注入できるようになりました。
ついでに変数名も date とかに変えておきましょうか。
外部から渡されるものが「今日」だとは限りませんので。

export const isStartOfThisMonth = (date = new Date()) => {
  return isSameDay(date, startOfMonth(date));
};

当然、この関数を呼び出す関数もあります。
そういった関数もテストをしたいので、それらも同様に書き換えます。

export const isStartOfThisMonth = (date = new Date()) => {
  return isSameDay(date, startOfMonth(date));
};

export const getInitialState = (date = new Date()): Period => {
  const yesterday = startOfYesterday();
  const type = isStartOfThisMonth(date) ? 'lastMonth' : 'thisMonth';
  return { type, from: startOfMonth(yesterday), to: yesterday };
};

getInitialState() は、Redux の初期 state を吐く関数です。
今日が月初であるか否かで戻り値が変わります。

ですが、この関数は「今日が」月初であるか否かで分岐できていません。
いやできていない訳ではないんですが、引数で「今日」以外の値が渡されるとまるで違う挙動をしてしまいます。
引数として存在している以上、いつ誰が想定と違う使い方をするかわかりません。

また、 date という一般的な単語を使っているために分岐の条件がわかりにくくなっています（これは引数の名前を today に戻せば回避できそうですが）。

更に、この調子だと isStartOfThisMonth() を使う関数全部に date = new Date() という引数を追加しなければなりません。

できることなら new Date() を引数で渡したくない。
でも、そうしないとテストができない。
悩みながら歩き続けた果てに、あるライブラリと出会いました。

Ultimate Solution

Jest の issue に Mocking current time for Date #2234 というものがあり、そこにこんなコメントがありました。

Ultimate Solution !!!
なんと力強い言葉でしょうか。
これはまさに私が求めていたものです、早速使ってみましょう。

jest-date-mock

Mock Date when run unit test cases with jest. Make tests of Date easier.

hustcc/jest-date-mock より引用

jest-date-mock を使うことで、JavaScript の new Date() や Date.now() をモックすることができます。

$ yarn add --dev jest-date-mock

インストールしたら advanceTo() で new Date() をモックできます。
date-fns の関数の戻り値も期待通りモックされます（Moment.js でどうなるかは試してないのでちょっとわからないです）。

import { advanceTo } from 'jest-date-mock';
import { addDays, startOfMonth } from '../common/app-date-fns';
import { isStartOfThisMonth } from '../services/CalendarQuery';

describe('isStartOfThisMonth', () => {
  describe('月初', () => {
    it('true を返す', () => {
      advanceTo(startOfMonth(new Date()));
      expect(isStartOfThisMonth()).toBeTruthy();
    });
  });
  describe('月初以外', () => {
    it('false を返す', () => {
      advanceTo(addDays(startOfMonth(new Date()), 1));
      expect(isStartOfThisMonth()).toBeFalsy();
    });
  });
});

これで、 isStartOfThisMonth() の引数を無用に増やすことなくテストできるようになりました。

ちなみに、jest-date-mock の中では global.Date の書き換えが行われているようです。

jest-date-mock/src/index.js

if (global.window) {
  // dom env
  global.window.Date = dateClass;
} else {
  // node / native env
  global.Date = dateClass;
}

最後に

テストは大事です、でもテストを書くのはつらいです（テストを書きたくてコードを書いている訳ではないので）。
あと JavaScript の Date class もつらいです（ new Date() の第二引数とか）。
生きているとつらいことが沢山ありますが、ちょっと探すと誰かが解決策を提示してたりします。
この記事も誰かの助けになれば幸いです。

自己紹介

今回がQiita初投稿となります。
普段はメーカーでC++を使った画像処理系のアプリ開発に携わってます。
もともとWEBには一切触れた事がなかったのですが、
世の中でReactやVueといったフレームワークが話題になった時から
徐々にWEB業界に興味を惹かれてきました。
そして本格的に勉強してみようと思い立ち、今回のアプリ制作に至りました。

サービス紹介

Mushiquiという虫食いクイズアプリを作成しました。

きっかけは社内の暗記試験で、解答を含む全文から手っ取り早く虫食い文章を作成するツールが欲しいなと思った経験からでした。
特定のタグで文字を囲うことで、手軽に虫食いクイズが作成できるようになります。
ブラウザ/モバイルから利用が可能で、PWA対応しているため、ホームに追加して利用が可能です。

制作期間

技術の理解を含めて一年半程になります。
WEBの仕組みからの理解で、一進一退の日々でした。
途中段階の出来を見てショックを受け、実際何度か投げだしましたが（汗）、
それでも地道に実装を続け、なんとか当初想定していた機能が一区切りついたため記事にする事に踏み切りました。

代表的な利用技術

フロントエンド

• react
• redux
• redux-first-router
• algoliasearch
• draft-js
• styled-components
• storybook
• react-responsive

redux-first-routerはルーティングに使用。
draft-jsはテキストエディタに使用。

バックエンド

• Firebase
  • Firestore
  • Cloud Function
  • Authentication
  • Hosting
  • Storage
• Algolia

システム構成

システム構成は以下のようになっています。

今回、バックエンドにはFirebaseを用いており、データベースにはCloud Firestore、認証にはAuthenticationを使っています。
またクイズの全文検索を実現するために、Algoliaを用いており、AlgoliaのインデックスとFirestoreのデータはCloud Functionを使って同期しています。

苦労した点

学ぶ量の多さ

WEBページを作ること自体が初めての自分にとって、
いきなりReactで物を作るというのは情報量との戦いでした。
QiitaやMediumなどを見れば、Reactの使い方はなんとなくわかるのですが、
自分で考えて使えるようになるまでは、
htmlやcssをはじめjsxなどの根底知識が必要で相当の時間を要しました。

そんな中で最後まで心の頼りだったのが、公式ドキュメントでした。
量がそれなりにあって、全部読むには相当時間がかかりますが、
最近では日本語ページも充実しています。
初期のチュートリアルはもちろんなのですが、アプリを作り始めてから暫くして構造が複雑になってきて悩み始めた時にも、render propsやHOCなどのテクニックが記載されているADVANCED GUIDESは個人的にとても助かりました。

コンポーネントの責務分割

サンプルを見よう見まねで作ったアプリの状態から色々な機能が盛り込まれていくと、
似たようなデザインのコンポーネントが散在し、ボタンの修正ひとつで複数のソースを修正しなくてはいけない非効率な状況に陥りました。

そうしたときに、デザインの変更を局所的に留める仕組みを考えておくことは重要で、自分の場合はAtomic Designを用いることでこの手間を大幅に改善することができました。

Atomic Designについて：
http://atomicdesign.bradfrost.com/chapter-2/

Mushiquiでは以下のようにcomponents下のフォルダ構成と責務を決めています。

components
|-atoms
|-moleculeus
|-organisms
|-templates
|-pages

全体のレイアウトや色合いを変えたいときはtemplates、
ボタンの振る舞いやデザインを変えたいときはatomsといったように
変更する目的に応じて、変更する場所を決めておけば
仮に第三者から見てもわかりやすいのではないかと思います。

コンポーネントの責務分割(2)

上記の責務の分割をしたうえでも、
WEBとモバイルは同じコンポーネントでもレイアウトが大きく変化する場合があるため、必要に応じて表示部分のみ責務を分割する必要がありました。
（特にtemplatesやorganisms層で発生）
今回、react-responsiveを用いてモバイル用PresenterとWEB用Presenterに振り分けています。

Component
 |-Container.js
 |-WebPresenter.js
 |-MobilePresenter.js
 |-index.js
 |-index.stories.js
 |-style.js

• Container.js・・・このコンポーネントにおけるStateを管理するClass Component
• WebPresenter.js・・・WEB向けの表示を行うFunctional Component
• MobilePresenter.js・・・Mobile向けの表示を行うFunctional Component
• index.js・・・ContinerとPresenterをrender propを使い接続。ウィンドウサイズに応じた振り分けも実施。

index.js

import React from 'react';
import Responsive from 'react-responsive';
import WebPresenter from './WebPresenter';
import MobilePresenter from './MobilePresenter';
import Container from './Container';

export const Mobile = props => <Responsive {...props} maxWidth={767} />;
export const Default = props => <Responsive {...props} minWidth={768} />;

const FavoriteList = (props) => {
    return <Container 
        {...props}
        render={(containerProps)=><React.Fragment>
            <Default>
                <WebPresenter {...containerProps} />
            </Default>
            <Mobile>
                <MobilePresenter {...containerProps} />
            </Mobile>
        </React.Fragment>}
    />;
};
export default FavoriteList;

Algoliaとの連携を考慮したFirestoreのデータ設計

クイズを全文検索可能にするために、
Firestoreのデータの一部をAlgoliaのインデックスに登録しています。
Firestoreのクイズ更新をCloud Functionでトリガし
更新の反映をAlgoliaのインデックスに対しても行います。
こうしたときに複雑になるのが、Firestoreのデータの持ち方でした。

検索にはクイズ名称やタグ、作成者などのメタ情報をインプットするために
これらの情報は、すべてAlgoliaのIndex内に持つ必要がありました。
一方で検索にはクイズ本体の情報は不要のため、
クイズ本体の変更はトリガしないようなFirestoreのデータ設計が必要となりました。

結果として、検索時に不要なクイズ本体はサブコレクションとして、他のメタ情報と分離することで上記を実現することができました。

（図中のrecipesはクイズ本体(quizzes)とメタ情報を集約する概念）

最後に

長くなりましたが、ここまで読んでいただきありがとうございます。
これから始めるという方や、Reactのアプリ制作で悩まれている方の少しでも参考になれば幸いです。
今後はHooksやContextなど今回のアプリでは取り入れられなかった要素を学習しつつ、随時アプリの更新や、今回書ききれなかった内容についても書いていきたいと思います。

10/14 に投稿したJavascript で diff (通信なし、ローカルで完結)の内部仕様についての補足、その６です。
Javascript で diff (内部仕様についての補足)
Javascript で diff (内部仕様についての補足２)
Javascript で diff (内部仕様についての補足３)
Javascript で diff (内部仕様についての補足４)
Javascript で diff (内部仕様についての補足５)

文字列を単語で区切る

単語単位の差分をとるためには、文を単語に区切る必要があります。
今回は、文を単語に区切る方法を検討することにします。

英数字のようにスペースと句読点で単語単位で区切られているものは、スペース・句読点・記号文字を目印に区切ればよさそうです。
UNICODEブロックを切り出したままの状態では、句読点と普通の文字が混じった状態ですので、句読点をひとつづつ除外していきます。

//ラテン１補助のところに U+00D7「×」、U+00F7「÷」があるので記号として除外
return ((n < 0x00C0) || (n == 0x00D7) || (n == 0x00F7)) ? CB.BREAK : CB.LATIN;  //×÷

//中略

//記号のところにある「々〆〇〻」(〇は漢数字のゼロ) を漢字として除外
if (0x2E80 <= n) { return ((n < 0x3000) || "々〆〇〻".includes(c)) ? CB.KANJI : CB.BREAK; }

//中略

//「・」中黒を記号として除外
if (n == 0x30FB) { return CB.BREAK; }

//etc.

//最後にいろいろな句読点をまとめて除外！
return c.match(/[\u055A-\u055F\u0589\u0700-\u070D\u07F7-\u07F9\u0830-\u083E\u085E\u0964\u0965\u0970\u0AF0\u0DF4\u0E4F\u0E5A\u0E5B\u0F04-\u0F12\u0F14\u0F85\u0FD0-\u0FD4\u0FD9\u0FDA\u104A-\u104F\u10FB\u1360-\u1368\u166D\u166E\u16EB-\u16ED\u1735\u1736\u17D4-\u17D6\u17D8-\u17DA\u1800-\u1805\u1807-\u180A\u1944\u1945\u1A1E\u1A1F\u1AA0-\u1AA6\u1AA8-\u1AAD\u1B5A-\u1B60\u1BFC-\u1BFF\u1C3B-\u1C3F\u1C7E\u1C7F\u1CC0-\u1CC7\u1CD3\uA4FE\uA4FF\uA60D-\uA60F\uA6F2-\uA6F7\uA874-\uA877\uA8CE\uA8CF\uA8F8-\uA8FA\uA92E\uA92F\uA95F\uA9C1-\uA9CD\uA9DE\uA9DF\uAA5C-\uAA5F\uAADE\uAADF\uAAF0\uAAF1\uABEB]/) ?
    CB.BREAK : CB.LETTER;

漢字、ひらがな、カタカナ、ハングルは、一続きのUNICODEブロックに収まっていないため、UNICODEの表を見ながらひとつづつ分類しました。というより、一続きのUNICODEブロックに収まっている言語がほとんどありません……
例えば、キリル文字の場合はロシア語で使用される以外にも周辺諸国で使用されている追加文字があるので、それも含めて分類する必要があります。
カタカナの場合は、U+30A0 - U+30FF の他にも、U+3100 - U+31FF の範囲などに追加文字があります。
「々」は「CJK用の記号および分音記号」に分類されていますが、文字列をパースする上では漢字として扱いたいわけです。
また、長音記号「ー」は、

• ひらがなの後ろにあればひらがな
• カタカナの後ろにあればカタカナ

とする必要があります。
それぞれの文字を分類しただけでは単語に区切れないため、先頭から順に直前の文字の分類を覚えている状態でスキャンしていきます。
なお、HTMLの差分をとるときのため、"</" は問答無用に一単語扱いとしています。

文字単位で区切る

単語単位で区切る

今のところ、漢字は、一文字づつ区切るようにしていますが、漢字もかたまり単位で認識させたい場合は、LineDiffEngine.SplitWord() 関数の該当部分をコメントアウトしてください。

LineDiffEngine.SplitWord = function(vChar) {
//中略
        if ((c == "/") && (sWord == "") && (vResult.length > 0) && (vResult[vResult.length - 1] == "<")) {
            vResult[vResult.length - 1] = "</";     //for html
        } else {
            switch (cb) {
                case CB.KANJI:  //漢字も一続きで認識したい場合はこの行をコメントアウト
                case CB.BREAK:
                case CB.WHITE:
                    vResult.push(c);
                    break;
                default:
                    sWord += c;
                    break;
            }
        }
//中略
};

漢字は１文字単位で区切る

漢字は一続きの単位で区切る

例文が変だというツッコミは禁止。

実際のコード

実際のコードは下記のようになりました。
LineDiffEngine.DetectCharBlock() 関数で文字の種別を判定、LineDiffEngine.SplitWord() 関数で単語単位に切り出すパースを行っています。
なお、少しでも判定回数を減らすため、

• 大雑把にUNICODEブロックの切りのいい範囲で文字コードの範囲を分けて分岐
• さらに詳細に調べる

というようにしています。
ラテン文字とCJK以外の言語で、LineDiffEngine.DetectCharBlock() 関数の終端まできた文字は LineDiffEngine.CHAR_BLOCK.LETTER に分類されます。
今のところ、絵文字は仕様を調べきれていないです……

LineDiffEngine.CHAR_BLOCK = {
      LETTER : 0            //分類しきれなかった文字はすべてここ
    , WHITE : 2             //空白
    , BREAK : 3             //記号、句読点
    , LATIN : 4             //ラテン文字
    , LEFT_BRACKET : 5      //左かっこ(行内差分の境界調整時に使用)
    , HIRAGANA : 11         //ひらがな
    , KATAKANA : 12         //カタカナ
    , INHERITED_KANA : 13   //ー゛゜ 直前の文字に依存
    , KANJI : 15            //漢字
    , HANKANA : 16          //半角カナ
    , HANGUL : 20           //ハングル
    , GREEK : 21            //ギリシャ文字
    , CYRILLIC : 22         //キリル文字
    , HEBREW : 23           //ヘブライ文字
    , ARABIC : 24           //アラビア文字
    , VARIATION : 999       //異体字セレクタ
};
LineDiffEngine.DetectCharBlock = function(c) {
    const n = c.charCodeAt(0), CB = this.CHAR_BLOCK;
    if (n < 0x0250) {
        if ((0x0061 <= n && n < 0x007B) || (0x0041 <= n && n < 0x005B) || (0x0030 <= n && n < 0x003A) || (n == 0x005F)) {
            return CB.LATIN;    //[a-zA-Z0-9_]
        }
        if (n == 0x0009 || n == 0x0020) { return CB.WHITE; }
        //if ((n == 0x00AA) || (n == 0x00B5) || (n == 0x00BA)) { return CB.LATIN; }
        return ((n < 0x00C0) || (n == 0x00D7) || (n == 0x00F7)) ? CB.BREAK : CB.LATIN;  //×÷
    } else if (0x2000 <= n && n < 0x3040) {
        if (0x2E80 <= n) { return ((n < 0x3000) || "々〆〇〻".includes(c)) ? CB.KANJI : CB.BREAK; }
        if (0x2C60 <= n && n < 0x2C80) { return CB.LATIN; } //2C60-2C7F Latin Extended-C
        if (0x2DE0 <= n && n < 0x2E00) { return CB.CYRILLIC; }  //2DE0-2DFF Cyrillic Extended-A
        if ((0x2800 <= n && n < 0x2900) || ((0x2C00 <= n && n < 0x2DE0) && !c.match(/[\u2cf9-\u2cfc\u2cfe\u2cff\u2d70]/))) {
            return CB.LETTER;
        }
        return CB.BREAK;    //General Punctuation etc.
    } else if (0x3040 <= n && n < 0x3200) {
        if (n < 0x3100 || 0x31F0 <= n) {
            if (n == 0x30FB) { return CB.BREAK; }   //・
            if ((n == 0x30FC) || (n == 0x309B) || (n == 0x309C)) { return CB.INHERITED_KANA; }  //ー゛゜
            return ((n >= 0x30A0) ? CB.KATAKANA : CB.HIRAGANA);
        }
        if (0x3130 <= n && n < 0x3190) { return CB.HANGUL; }    //3130-318F Hangle Compatibility Jamo
        return ((0x3190 <= n && n < 0x31A0) || (0x31C0 <= n)) ? CB.KANJI : CB.BREAK;
    } else if ((0x3200 <= n && n < 0xA000) || (0xF900 <= n && n < 0xFB00)) {
        //3400-9FFF CJK Unified Ideographs Extension A, Yijing Hexagram Symbols, CJK Unified Ideographs
        if (0x3400 <= n) { return CB.KANJI; }
        return (((0x3280 <= n) || (0x3220 <= n && n < 0x3260)) ? CB.BREAK : CB.HANGUL);
    } else if (0xFF00 <= n && n < 0xFFF0) {     //Halfwidth and Fullwidth Forms
        if (0xFF61 <= n && n < 0xFFA0) { return CB.HANKANA; }
        if ((0xFF10 <= n && n < 0xFF1A) || (0xFF21 <= n && n < 0xFF3B) || (0xFF41 <= n && n < 0xFF5B)) {
            return CB.KANJI;    //０-９Ａ-Ｚａ-ｚ
        }
        return (0xFFA0 < n && n < 0xFFE0) ? CB.HANGUL : CB.BREAK;   //FFA0 hungul space
    } else if (0xD800 <= n && n < 0xDC00) {     //surrogate pair
        const trail = c.charCodeAt(1);
        if (trail < 0xDC00 || 0xDFFF < trail) { return CB.LETTER; } //illegal
        if (0xD840 <= n && n < 0xD880) {
            return CB.KANJI;    //20000-2FFFF CJK Unified Ideographs Extension B-F, CJK Compatibility Ideographs Supplement
        } else if ((n == 0xDB40) && (0xDD00 <= trail && trail < 0xDDF0)) {
            return CB.VARIATION;    //E0100-E01EF Variaion Selectors Supplement
        } else if ((n == 0xD82C) && (trail < 0xDD30)) {
            return (trail == 0xDC00) ? CB.KATAKANA : CB.HIRAGANA
        }
        const cp = (((c - 0xD800) << 10) + (trail - 0xDC00) + 0x10000);
        return ((0x1F000 <= cp && cp < 0x1FA70) ? CB.BREAK : CB.LETTER);    //0x1F000-0x1FA6F Pictographs etc.
    } else if ((0x1100 <= n && n < 0x1200) || (0xA960 <= n && n < 0xD800 && (n < 0xA980 || 0xAC00 <= n))) {
        return CB.HANGUL;
    } else if ((0x0400 <= n && n < 0x0530) || (0xA640 <= n && n < 0xA6A0) || (0x1C80 <= n && n < 0x1C90)) {
        return ((n == 0xA673) || (n == 0xA67E)) ? CB.BREAK : CB.CYRILLIC;
    } else if ((0x0370 <= n && n < 0x0400) || (0x1F00 <= n && n < 0x2000)) {
        return ((n == 0x037E) || (n == 0x0387)) ? CB.BREAK : CB.GREEK;
    } else if ((0x0590 <= n && n < 0x0600) || (0xFB1D <= n && n < 0xFB50)) {
        return ((n == 0x05C0) || (n == 0x05C3) || (n == 0x05C6) || (n == 0x05F3) || (n == 0x05F4)) ? CB.BREAK : CB.HEBREW;
    } else if (0xFE00 <= n && n < 0xFE70) {
        return ((n < 0xFE10) ? CB.VARIATION : CB.BREAK);
    } else if ((0x0600 <= n && n < 0x0780 && (n < 0x0700 || 0x074F < n)) || (0x08A0 <= n && n < 0x0900) || (0xFB50 <= n && n < 0xFF00)) {
        return ((n == 0x060C) || (n == 0x060D) || (n == 0x061B) || (n == 0x061E) || (n == 0x061F) || (0x066A <= n && n < 0x066D) || (n == 0x06D4)) ?
            CB.BREAK : CB.ARABIC;
    } else if ((0x1E00 <= n && n < 0x1F00) || (0xA720 <= n && n < 0xAB70 && (n < 0xA800 || 0xAB30 <= n)) || (0xFB00 <= n && n < 0xFB07)
    || (0x0300 <= n && n < 0x0370)) {
        return CB.LATIN;
    } else if (0x1D00 <= n && n < 0x1D80) { //1D00-1D7F Phonetic Extensions
        if ((0x1D26 <= n && n <= 0x1D2A) || (0x1D5D <= n && n <= 0x1D61) || (0x1D66 <= n && n <= 0x1D6A)) {
            return CB.GREEK;
        }
        return (n == 0x1D2B) ? CB.CYRILLIC : CB.LATIN;  //1D2B Cyrillic Letter Small Capital El
    }
    //return CB.LETTER;
    return c.match(/[\u055A-\u055F\u0589\u0700-\u070D\u07F7-\u07F9\u0830-\u083E\u085E\u0964\u0965\u0970\u0AF0\u0DF4\u0E4F\u0E5A\u0E5B\u0F04-\u0F12\u0F14\u0F85\u0FD0-\u0FD4\u0FD9\u0FDA\u104A-\u104F\u10FB\u1360-\u1368\u166D\u166E\u16EB-\u16ED\u1735\u1736\u17D4-\u17D6\u17D8-\u17DA\u1800-\u1805\u1807-\u180A\u1944\u1945\u1A1E\u1A1F\u1AA0-\u1AA6\u1AA8-\u1AAD\u1B5A-\u1B60\u1BFC-\u1BFF\u1C3B-\u1C3F\u1C7E\u1C7F\u1CC0-\u1CC7\u1CD3\uA4FE\uA4FF\uA60D-\uA60F\uA6F2-\uA6F7\uA874-\uA877\uA8CE\uA8CF\uA8F8-\uA8FA\uA92E\uA92F\uA95F\uA9C1-\uA9CD\uA9DE\uA9DF\uAA5C-\uAA5F\uAADE\uAADF\uAAF0\uAAF1\uABEB]/) ?
        CB.BREAK : CB.LETTER;
};
LineDiffEngine.SplitWord = function(vChar) {
    let vResult = [], sWord = "", bDifferent, CB = this.CHAR_BLOCK, cb_prev = CB.LETTER;
    for (let c of vChar) {
        let cb = this.DetectCharBlock(c);
        switch (cb) {
            case CB.HIRAGANA:
            case CB.KATAKANA:
                bDifferent = ((cb_prev != cb) && (cb_prev != CB.INHERITED_KANA));
                break;
            case CB.INHERITED_KANA:
                bDifferent = ((cb_prev != CB.HIRAGANA) && (cb_prev != CB.KATAKANA) && (cb_prev != cb));
                if (!bDifferent) { cb = cb_prev; }
                break;
            case CB.VARIATION:
                bDifferent = false;
                cb = cb_prev;
                break;
            default:
                bDifferent = (cb != cb_prev);
                break;
        }
        if (bDifferent) {
            if (sWord != "") {
                vResult.push(sWord);
                sWord = "";
            }
            cb_prev = cb;
        }
        if ((c == "/") && (sWord == "") && (vResult.length > 0) && (vResult[vResult.length - 1] == "<")) {
            vResult[vResult.length - 1] = "</";     //for html
        } else {
            switch (cb) {
                case CB.KANJI:
                case CB.BREAK:
                case CB.WHITE:
                    vResult.push(c);
                    break;
                default:
                    sWord += c;
                    break;
            }
        }
    }
    if (sWord != "") { vResult.push(sWord); }
    return vResult;
};

JavaScript

文字列の長さを調べる

qiita.js

"abc".length

文字列の置換

qiita.js

//該当文字列が複数の場合、最初の文字列が置換される
"abcdeabcde".replace("abc", "ABC")
//すべての該当文字列を置換したい場合
"abcdeabcde".split("abc").join("ABC")

エンコードとデコード

qiita.js

//エンコード
encodeURI("あいうえお")
encodeURIComponent("あいうえお")
//デコード
decodeURI("%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A")
decodeURIComponent("%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A")

JavaScript

文字列の長さを調べる

qiita.js

"abc".length

文字列の置換

qiita.js

//該当文字列が複数の場合、最初の文字列が置換される
"abcdeabcde".replace("abc", "ABC")
//すべての該当文字列を置換したい場合
"abcdeabcde".split("abc").join("ABC")

エンコードとデコード

qiita.js

//エンコード
encodeURI("あいうえお")
encodeURIComponent("あいうえお")
//デコード
decodeURI("%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A")
decodeURIComponent("%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A")

はじめに

昨今、とてもはやっているそうなjavascriptを学んでみたかったのです。
何かできないかなぁと調べていたらM5stackがModdable + JavaScriptで動くという記事があったため、試してみようということで始めました。

調べて出てきた記事が以下です。
著者のJavaScript視点からの説明は勉強になりました。ありがとうございます！

JavaScript x IoTの大本命「ModdableSDK」をM5Stackで動かしてみた

本記事では、windowsで構成を作ってみたいと思います。

やりたいこと

• windowsでのModdableの構成
• JavaScriptでのプログラミング
• Moddableで定周期制御やタイマ割込みの周期調べ

開発環境

• windows 10 Home 64bit
• Moddable
  • 使用言語はJavaScript

M5stackについて

M5stackはESP32を使用しているLCDディスプレイ付きのマイコンキットです。
ESP32はFree RTOSを基にArudiono(C,C++)を使ってプログラミング可能です。
開発環境では、PlatformIOなどがあります。

m5stackについては以下の記事に中身を調べたことを記載しています。

m5stackで遊ぼう

Moddableについて

ModdableはJavaScriptでマイコンプログラミングするためのSDKだそうです。
公式は以下になります。英語なので中学生以下の英語力しかない自分では読むのが大変です。
Google翻訳を駆使して自分なりの解釈で構成を進めていきます。

Moddable-OpenSource/moddable

対応マイコンは以下だそうです。

• ESP8266(Xtensa)
• ESP32(Xtensa)
• Gecko(Arm)
• QCA4020(Arm)

GeckoとQCA4020は初めて知りました。
wifi付きマイコンは今すごい増えてるんですね。

ゲッティングスタート

ここから本題です。
頑張って英語を翻訳にぶち込みながら進めていきます。

あなたの環境でセットアップしよう！

今回の自分の環境はwindowsです。セットアップのドキュメントが別にあるのでそれを進めろと言われてます。
ESPシリーズ、Geckoシリーズ、QCA4020はそれぞれでドキュメントはあるようです。
今回はESPシリーズしか使わないので素直に進めていきます。

手順としては先にPC側の設定、次にマイコンとの接続設定となっているようです。マイコンはESP32のセットアップを進めます。
基本的には公式ドキュメントに記載があるフォルダ構成を作ってコマンドを入力していけば問題ないです。
以下の手順は自分がざっくり行った手順を記載しています。詳細は公式ドキュメントを読んでください

PC側の設定の手順

PC側はGitのインストールしているとコマンドですべてできます。

1. Microsoft Visual Studio 2019 Community EditionのDesktop development for C++インストールする
2. GitでModdableのダウンロード
3. xsbugとmcconfigを使い為の環境変数設定の設定
4. xsbugの起動とmcconfigでサンプルのハローワールドのコンパイルと起動

PC側の設定では、x86 Native Tools Command Prompt for VS 2019を使ってビルドのみではなく環境変数設定とPATHの設定もできます。
なので、手順1.のインストールが終わったらすべてをx86 Native Tools Command Prompt for VS 2019でコマンドを打ち込んで問題なかったです。

常識かもしれませんが・・・環境変数のPATH設定の時にPATHを追加する形で書いてください。
自分はこの辺りが疎すぎてPATHを上書きですべて消してしまって再インストールすることになりました・・・

ESP32の接続設定の手順

1. USB-UART変換ドライバのインストール(これはUSBさすと自動でインストールされます)
2. tool chain (all-in-one Windows toolchain and MSYS2) のダウンロード
3. 'MinGW32を起動してESP-IDFのダウンロード(git clone`でダウンロード)
4. シェルファイルの作成、中身はコマンドのみを記載(ここだけコマンドラインを使わずにやりました)
5. m5stackとPCをUSBでつないでCOM PORT番号を確認
6. 環境変数の設定を行ってコンパイルとダウンロードを実施(最後のコマンドはmcconfig -d -m -p esp32/m5stackにする必要があります)

ここも手順の2.3以外はすべてx86 Native Tools Command Prompt for VS 2019で文章通りのコマンドを打つだけでした。
一か所引っかかったところは6.の環境変数の設定で、\ではなく、/で階層を表せってところでした。
ちゃんと英語で注意書きに書かれていたので見逃していました・・・

やってみた感想

基本的には公式ドキュメントのコマンドを次々打っていく感じでした。
途中、シェルファイルの作成があったり、MinGW32の操作がありましたが、基本的にはフォルダ構成の作成と環境変数の設定だけだったので特に考えないで実行する分には簡単でした。

ですが、今回のハローワールドのサンプルだと特にシリアル通信で返答するわけでもなく一瞬でターミナルが終了するので書き込めてるのかどうか確認しにくかったです。
今回は自分が前もって入れていたテストのファームが入っていたので書き換わっていると確認取れましたが、実際何が起きてるか全くわからなかったです。唯一変わったのはm5stackから音が出ることですが、それで正しいのかわからないです。

この手順をやってみて気づいたのですが、xsbugは基本的にwindowsのみの場合のみデバッグ機能なのか、自分の設定が悪くて使えてないだけなのかわからなかったです。
後は、x86 Native Tools Command Prompt for VS 2019だけで完結しているのでうまくいけばVSCodeでも動かせそうかもしれないですが、自分の技量だとわからないですね・・・。

最後に

今回は環境セットアップのみでしたが、これだけで1日かかりました。
やっぱり環境を作るのが一番時間がかかります・・・
開発環境の設定が自分にとって一番大変な作業なのでどなたかできたら教えてほしいです。

次回はjavascriptでm5stackを動かしてみようと思います。

Retryについて

「Not every command is retried 」とあったので調べてみた

結果

以下の結果から
概ねretry(or wait)されると思っていてよいのではないでしょうか

Command

API	Retry(Wait)	Link
and	-	link
as	.as() is a utility command.	link
blur	〇	link
check	〇	link
children	〇	link
clear	〇	link
clearCookie	-	link
clearCookies	-	link
clearLocalStorage	-	link
click	〇	link
clock	cy.clock() is a utility command.	link
closest	〇	link
contains	〇	link
dblclick	〇	link
debug	.debug() is a utility command.	link
document	〇	link
each	.each() will only run assertions you've chained once	link
end	-	link
eq	〇	link
exec	cy.exec() will only run assertions you've chained once	link
filter	〇	link
find	〇	link
first	〇	link
fixture	cy.fixture() will only run assertions you've chained once	link
focus	〇	link
focused	〇	link
get	〇	link
getCookie	cy.getCookie() will only run assertions you've chained once,	link
getCookies	cy.getCookies() will only run assertions you've chained once	link
go	〇	link
hash	〇	link
invoke	〇	link
its	〇	link
last	〇	link
location	〇	link
log	-	link
next	〇	link
nextAll	〇	link
nextUntil	〇	link
not	〇	link
parent	〇	link
parents	〇	link
parentsUntil	〇	link
pause	.pause() is a utility command.	link
prev	〇	link
prevAll	〇	link
prevUntil	〇	link
readFile	〇	link
reload	〇 cy.reload() will automatically wait	link
request	cy.request() will only run assertions you've chained once	link
rightclick	〇 .rightclick() will automatically wait	link
root	〇	link
route	-	link
screenshot	cy.screenshot() will only run assertions you've chained once	link
scrollIntoView	〇 .scrollIntoView() will automatically wait	link
scrollTo	-	link
select	〇 .select() will automatically wait	link
server	-	link
setCookie	cy.setCookie() will only run assertions you've chained once	link
should	〇 .should() will continue to retry its specified assertions until it times out.	link
siblings	〇	link
spread	.spread() will only run assertions you've chained once,	link
spy	-	link
stub	-	link
submit	〇 .submit() will automatically wait for assertions	link
task	cy.task() will only run assertions you've chained once	link
then	.then() will only run assertions you've chained once	link
tick	cy.tick() is a utility command.	link
title	〇	link
trigger	〇 .trigger() will automatically wait	link
type	〇 .type() will automatically wait	link
uncheck	〇 .uncheck() will automatically wait	link
url	〇	link
viewport	-	link
visit	〇 cy.visit() will automatically wait	link
wait	cy.wait() will only run assertions you've chained once,	link
window	〇	link
within	.within() will only run assertions you've chained once,	link
wrap	〇	link
writeFile	cy.writeFile() will only run assertions you've chained once,	link

API

integration/sample_spec.js

describe('request test', function() {
  it('', function() {
    cy.server()
    cy.route('GET','**/getUsers').as('getUsers')
    cy.wait('@getUsers')

    cy.get('#results').should('contain', 'user1')
  })
})

Stub

integration/sample_spec.js

describe('request test', function() {
  it('', function() {
    cy.server()
    cy.route('GET', '**/getUsers',
    {data: [
      {id: '1',name: 'user1'},
      {id: '2',name: 'user2'}
    ]}).as('getUsers')

    cy.wait('@getUsers')

    cy.get('#results').should('contain', 'user1')
  })
})

Fixtures

integration/sample_spec.js

describe('request test', function() {
  it('', function() {
    cy.server()
    cy.route('GET', '**/getUsers', 'fixture:getUsers').as('getUsers')

    cy.wait('@getUsers')

    cy.get('#results').should('contain', 'user1')
  })
})

fixtures/getUsers.json

{
  "data": [{
      "id": "1",
      "name": "user1"
    },
    {
      "id": "2",
      "name": "user2"
    }
  ]
}

階層が深くてもいい

integration/sample_spec.js

describe('request test', function() {
  it('', function() {
    cy.server()
    cy.route('GET', '**/getUsers', 'fixture:test/getUsers').as('getUsers')

    cy.wait('@getUsers')

    cy.get('#results').should('contain', 'user1')
  })
})

fixtures/test/getUsers.json

{
  "data": [{
      "id": "1",
      "name": "user1"
    },
    {
      "id": "2",
      "name": "user2"
    }
  ]
}

複数Wait

integration/sample_spec.js

cy.server()
cy.route('activities/*', 'fixture:activities').as('getActivities')
cy.route('messages/*', 'fixture:messages').as('getMessages')

cy.visit('http://localhost:8888/dashboard')

cy.wait(['@getActivities', '@getMessages'])

cy.get('h1').should('contain', 'Dashboard')

はまったこと

var profile='[なまえ] hoge\n[あぴーるぽいんと] 文字列連結がとくい。("a"+"b")';
var url="https://hogehoge.com/user&profile="+profile;

このままだと叩けないけど、こんな感じの文字列をurlに乗せて叩きたい

かいけつ

encodeURIComponent使う

var url="https://hogehoge.com/user&profile="+encodeURIComponent(profile);

こことか使っても良さそう

今回の学習のゴール

1. Node.jsについて知る
2. 基本文法を学ぶ
3. ライブラリを把握する

目次

1. Node.jsとは
2. そもそもJavaScriptとは
3. JavaScriptの基本知識
4. Node.jsの基本知識
5. ライブラリの把握
6. 今後の課題

1. Node.jsとは

スケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動のJavaScript環境
Node.js

• それぞれの意味
  • スケーラブル : 拡張性が高い
  • 非同期 : 各要求(request)の処理が完了するのを待たずに、それ以降の処理を行う方式
  • イベント駆動 : イベントと呼ばれるアプリや端末上で起きた出来事に対して処理を行うプログラムの実行形式
• 特徴
  • サーバーサイドで使用できる
  • ノンブロッキングI/Oモデルを採用しており、I/Oの処理を待たずに次の処理を始めることができるので、大量のデータ処理が可能
    • ノンブロッキング : ある処理を行いながら、ほかの処理も同時進行で行えること
    • I/O : Input/Outputの略で、入出力の意

2. そもそもJavaScriptとは

• ブラウザに実行エンジンが搭載されたプログラミング言語
• Netscape Navigatorというブラウザ向けに開発され、その後Internet Explorer, Firefox, Chromeなどの主要ブラウザに採用された

• 特徴

  • ブラウザで動作する
  • 実行エンジンの内部で動的にコンパイルが行われるので、コンパイルしなくとも実行できる
  • 動的型付け言語

• JavaScript - Wikipedia によると

JavaScriptはプロトタイプベースのオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる

• それぞれの意味
  • オブジェクト指向スクリプト言語
    • オブジェクトを組み立てるように表現して、コンピュータに動作をさせ、script（台本、原稿）のようにプログラムを記述できるプログラミング言語
  • プロトタイプベース
    • 全てのオブジェクトがプロトタイプ（試作品）をベースにして作られているもの
    • プロトタイプと呼ばれるテンプレートをコピーして、新しいオブジェクトが作られるイメージ
  • クラスベース
    • 全てのオブジェクトがクラスをベーシにして作られているもの
    • クラスはオブジェクトを作る設計書のことで、クラスそのものの名前、属性、処理の3つの要素を持つオブジェクトをまとめて定義したもの

3. JavaScriptの基本知識

データ型

• String : 文字列
• Number : 数
• Boolean : 真偽値
• Null : 値が存在しないまたは無効なオブジェクト
• Undefined : 値を代入していない変数の値
• Array : 複数の値を格納可能
• Object : 基本的に何でも格納可能

// 文字列を整数に変換するメソッド
parseInt('030', 10);    // 第2引数には変換の基数, 30が返される
parseInt('hello', 10);    // NaN(非数  "Not a Number" の略)が返される

// 文字列の操作方法
'hello'.charAt(0); // "h"を返す
'hello, world'.replace('hello', 'goodbye'); // "goodbye, world"を返す
'hello'.toUpperCase(); // "HELLO"を返す

演算子

1 + 1;                          // 数字を加える
'Hello' + 'world';              // 文字列の結合
10 - 1;                         // 減算
2 * 3;                          // 乗算
10 / 2;                         // 除算

var myVariable = 'value';       // 代入
myVariable === 'value';         // 等価 値と型が等しいか真偽値で返す 変数myVariableにvalueが代入されている場合は、trueが返される
!(myVariable === 'value');      // 否定 値と型が等しくないか真偽値で返す
myVariable !== 'value';_        //非等価 値と型が等しくないか真偽値で返す
weather === 'sunny' && temperature < 25    // AND 2つ以上の式を1つに繋げそれぞれの式を個別に評価、全てtrueになった場合その式全体がtrueを返す
weather === 'sunny' || temperature < 25    // OR 2つ以上の式を1つに繋げそれぞれの式を個別に評価し、最初にtrueになったところでその式全体をtrueとして返す

x += 5;    // x = x + 5;の意 複合代入文という

変数

• varを用いた変数の宣言

var <変数名>;    // 変数の宣言
<変数名> = '値';    // 変数に値を割り当て, 変数の値を変更する
var <変数名> = '値';
<変数名>;    // 変数の値を取得

• 変数のスコープは関数単位

function f() {
    var num = 123;
    console.log(num);
    {
    var num = 456;
    console.log(num);
    }
    console.log(num);
}
f();

// 実行結果
123
456
456

• letを用いた変数の宣言

let <変数名> = '値';    // ブロックレベルの変数を宣言

• 変数のスコープがブロックに限定される

function f() {
    let num = 123;
    console.log(num);
    {
    let num = 456;
    console.log(num);
    }
    console.log(num);
}
f();

// 実行結果
123
456
123

定数

const number = '10';    // 定数の宣言 一度宣言された値は変更不可

配列

// 配列を生成する①
var person = new Array();
person[0] = 'たなか';
person[1] = 'なかむら';
person[2] = 'しぶや';

// 配列を生成する②
var person = ['たなか', 'なかむら', 'さいとう']

// 配列に要素を追加する
person.push(いとう);

条件文 if

var color = 'red'
if (color === 'red') {         // (条件式)がtrueを返した場合、以下の処理が実行される
    alert('好きな色は赤です');    // アラートを使って表示
} else if (color === blue) {
    alert('好きな色は青です');
} else {                       // 2つの(条件式)がfalseを返した場合、elseの後の処理が実行される
    alert('好きな色は黄色です');
}

switchステートメント

var color = 'red'
switch (color) {
  case 'red':
    alert('好きな色は赤です');
    break;    // 値がcaseにマッチした時ループを抜ける

  case 'blue':
    alert('好きな色は青です');
    break;

  // 以下に選択肢を好きなだけ並べることが可能

  default:
    alert('選択肢に好きな色がありません');
}

ループ

• カウンター : ループの開始地点で、初期化される値
• 終了条件 : ループが終了する条件
• イテレーター : 終了条件を満たすまで、カウンターの値をループごとに少量ずつ増加（減少）させる

// forを使ったループ
var sequence = [1, 2, 4, 7, 11, 16, 22];
for (var i = 0; i < sequence.length; i++) {    // カウンター変数を宣言 lengthプロパティを使用して配列の長さを取得し、ループを配列の長さと同じ数になったら、繰り返しを終了
  console.log(sequence[i]);
}

// whileを使ったループ
var sequence = [1, 2, 4, 7, 11, 16, 22];
var i = 0;    // 初期化処理
while (i < sequence.length) {
    console.log(sequence[i]);

    i++;
}

// do...whileを使ったループ
var sequence = [1, 2, 4, 7, 11, 16, 22];
var i = 0;
do {
    console.log(sequence[i]);

    i++;
} while (i < sequence.length)

関数

• 再利用したい機能をパッケージ化する方法

function sayHello() {
  alert('hello');
}

myFunction();    // functionの呼び出し helloのアラートが表示される

function sum(num1, num2) {    //関数の定義 関数に複数の引数がある場合はカンマで区切る
    var result = num1 + num2;
    return result;
}

sum(1, 2);    # コンソールで実行すると3が返ってくる

イベント

• ブラウザの中で起きていることを検出し、その応答としてコードを実行する
• 動作や操作（以下の例ではクリック）に対して特定の処理を与えるための命令のことをイベントハンドラという
• ブラウザに組み込まれたJavaScript APIの一部として定義されたもの

var page = document.selector('html');    // 関数を定義し変数に代入
page.onclick = function() {    // 無名関数は主にイベント発火のレスポンスとして、一連のコードを走らせるだけのような場合に、イベントハンドラとして使われる
    alert('ページがクリックされた');
};

オブジェクト

• 関連のあるデータと機能をひとまとめにしたモノ
• 機能はたいてい変数と関数で構成され、オブジェクトの中ではそれぞれプロパティとメソッドと呼ばれる

var obj = new Object();    // 空のオブジェクトを作成する方法①
var obj = {};    // 空のオブジェクトを作成する方法②オブジェクトリテラル構文

• オブジェクトリテラル使用してオブジェクトを生成する例

var person = {
  name: ['たかはし', 'なかむら'],
  age: 20,
  gender: 'female',
  greeting: function() {    // オブジェクトのメソッド
    alert('こんにちは、' + this.name[1] + 'と申します。' + this.age + '歳です。');    // thisは現在のオブジェクトを参照しているので、personを指す
  }
};

# コンソールで実行

person    # {name: Array(2), age: 20, gender: "female", greeting: ƒ} と返ってくる
person.name[1]    # "なかむら" と返ってくる
person.greeting()    # こんにちはなかむらと申します。20歳です。 とアラートが返ってくる
person.age = 30;    # 値を上書きすることができる

// サブ名前空間でオブジェクト生成するときの記載方法

name: {
  first: 'たかはし',    // name.firstで"たかはし"が返ってくる
  second: 'なかむら'    // name.secondで"なかむら"が返ってくる
}

継承

• ”親”クラスからの機能を継承する”子供”のオブジェクトクラス (コンストラクタ) の生成方法について

// コンストラクタ内部にプロパティのみを定義
function Person(first, second, age, gender) {
  this.name = {
    first,
    last
  };
  this.age = age;
  this.gender = gender;
};

// メソッドはすべてコンストラクタのプロトタイプとして定義する
Person.prototype.greeting = function() {
  alert('こんにちは、' + this.name.first + 'と申します。' + this.age + '歳です。');
};

// Personコンストラクタの子であるTeacherコンストラクタを作成
function Teacher(first, second, age, gender, subject) {
  Person.call(this, first, second, age, gender);    // call()関数 その他の場所で定義された関数から呼ぶことができる

  this.subject = subject;    // Teacherだけが持つプロパティを定義
}

prototype弄るのは基本しないらしいby先生

JSON（JavaScript Object Notation）

• JavaScript オブジェクトの構文に従ったテキストベースのフォーマット
• ウェブアプリケーションでデータを転送する場合に使われる
• MIME type（メディアタイプ）がapplication/jsonで、「.json」という拡張子の付いたテキストファイルとしてJSON自身を格納することもできる（以下その例）

{
  "companyName": "Super heroes",
  "homeTown": "Central City",
  "formed": 2005,
  "active": true,
  "members": [
    {
      "name": "Takahashi",
      "age": 28,
      "business description": [
        "labor management",
        "Payroll"
      ]
    },
    {
      "name": "Nakamura",
      "age": 35,
      "business description": [
        "Disclosure",
        "Payment",
        "Sales recording"
      ]
    }
  ]
}

• このオブジェクトをJavaScriptのプログラムへ読み込む（excellenceという変数に代入したとすると）と、ドットや角括弧を使ってデータへアクセスすることができる ※JSONでは文字列とプロパティ名をシングルクォートではなく、ダブルクォートで括る

excellence.companyName
excellence['members'][1]['business description'][0]    // 2番目のメンバーの1番目の業務内容を参照

Web API

• Application Programming Interfacesの略
• 開発者が複雑な機能を簡単に作成できるように、プログラミング言語から提供される構造のこと
• ブラウザやサイトが動作しているOSの様々な面を操作したり、他のWebサイト、サービスから取得したデータを操作するためのプログラムされた機能である
• APIのカテゴリ
  • ブラウザAPI : Webブラウザに組込まれているAPIで、ブラウザやコンピュータの環境の情報を取得して複雑な機能を簡単に実装できる（ex. Geolocation API）
    • ブラウザで読み込んだ文書を操作するためのAPI, サーバからデータ取得をするAPI, クライアント側でのデータ保持APIなどがある
  • サードパーティAPI : サードパーティのプラットフォーム（TwitterやFacebook）上に作られた構造で、それらの機能をWebページで利用できるようにする（ex. Twitter API, Google Maps API, YouTube API）

クロージャ

• 関数とその関数が作られた環境が一体となった特殊なオブジェクトのこと
• あるコードブロック内で定義された関数などが、そのブロックをスコープとする変数などを参照できる
• クロージャが用意されていないと、ある関数内で参照できる変数は引数とその関数内で定義されたローカル変数およグローバル変数のみである
• オブジェクト内部で使用している変数やメソッドを他のプログラムから容易に変更できないようになる（カプセル化）
• ex. 関数createStopwatchのスコープ内で定義された変数timeと関数の結果が一体となったオブジェクトを変数stopwatchへ代入しているため、変数stopwatchが呼び出される都度、変数timeは0に初期化されることなく、下記のような結果が返ってくる

var createStopwatch = function() {
    var time = 0;
    return function() {
        time += 1;
        console.log(time);
    };
};
var stopwatch = createStopwatch();
stopwatch();    // 1が返ってくる
stopwatch();    // 2が返ってくる
stopwatch();    // 3が返ってくる

4. Node.jsの基本知識

Hello, Nodeを出力

hello.js

console.log('Hello, Node')

• プログラムを実行

$ node hello.js

• 実行結果

Hello, Node

• 'use strict';を宣言するとstrict（厳格）モードで実行できる
  • strictモード : javascriptのコードをより厳しくエラーチェックすることができる仕組み

hello.js

'use strict';    
console.log('Hello, Node')

• Webサーバとして動作させる場合

hello2.js

var http = require("http");    // HTTPモジュールの読み込み

http.createServer(function(request, response) {    //  HTTPサーバを作成
   response.writeHead(200, {'Content-Type': 'text/plain'});    // レスポンスHTTPヘッダーを設定
   response.end('Hello, Node\n');    // レスポンスボディを送信
}).listen(8000);    // ポート8000でリクエストを行う

//  サーバにアクセスするためのURLを出力 
console.log('Server running at http://127.0.0.1:8000/');

• プログラムを実行

$ node hello.js    // ブラウザで"http://localhost:8000"にアクセス Hello, Nodeと表示される

非同期処理

• 処理を実行したら結果を待たずに他の処理を実行できる（複数の処理を平行して実行できる）
  • 同期処理は、上から下へ1行ずつ順番にプログラムが実行されていく（サーバーへアクセスをして値を取得する間プログラムはストップしている）、
• JavaScriptでは基本的に非同期APIが使用される

// 操作が完了する前に次の処理を実行する 以下は "Second, First"と出力される
setTime(function() {
   console.log('First');
   }, 3000);    // 処理に3秒間かかる
console.log('Second');

• Node.js ではPromiseという仕組みを使って非同期を実現
  • Promiseとは非同期処理を実現するために用意されたオブジェクト

var promise = new Promise(function(resolve, reject) {    // Promiseオブジェクトを変数に代入　引数にはresolve, reject
  setTimeout(function() {
    resolve('hoge');    // 引数に返したい結果となる値を指定
  }, 3000);
});

promise.then(function(value) {    // then()の中の関数の引数valueにPromiseの結果が格納されいる
  console.log(value);    // 3秒待ってhogeが返されることが約束されている
});

console.log(promise);    // [object Promise]が返される

実行結果

[object Promise]
"hoge"

5. ライブラリの把握

• axios
  • HTTP通信を簡単に行うことができるJavascriptのライブラリ
• request
  • 標準のhttpライブラリを使うより簡単で理解しやすい記述でHTTP通信を行うことができるライブラリ
• Moment.js
  • JavaScriptで日付を扱うためのライブラリ
  • 日時の加算減算や2つの日付の差の計算などができる
• facebook/jest
  • JavaScriptのテストフレームワーク

6. 今後の課題

• npm（Node.jsのパッケージを管理するもの）を学習する際に、Node.jsについての理解を深める

参照

• オブジェクト指向とは何か？わかりやすい例で説明してみた。
• オブジェクト指向がわからない！ そんなあなたの脳味噌をオブジェクト脳にする準備体操
• イメージで理解する「プログラミング初心者が確実に意味不明になる”オブジェクト指向プログラミング”ってなんなのさ」
• クラスベースとプロトタイプベース
• 【Node.js入門】JavaScriptとの違いや特徴・使い方を比較してみた！
• MDN web docs - JavaScripyの基本
• MDN web docs - Express/Node のイントロダクション