要約

• beforeEach() は常に Promise が (then() まで含め) 全部満たされてから test() に移る。
• setTimeout() は呼ばれない。

実行例

test.js

describe('async test', () => {
  let called;

  function promise() {
    console.log(called = 'function');

    setTimeout(() => {
      console.log(called = 'setTimeout()');
    }, 0);

    return new Promise(resolve => {
      console.log(called = 'Promise()');
      resolve();
    }).then(() => {
      console.log(called = 'then()');
    });
  }

  describe('test() only', () => {
    test('without await', () => {
      promise();
      expect(called).toBe('Promise()');
    });
  });

  describe('test() only', () => {
    test('with await', async () => {
      await promise();
      expect(called).toBe('then()');
    });
  });

  describe('beforeEach() and test()', () => {
    beforeEach(() => {
      promise();
    });

    test('without await', () => {
      expect(called).toBe('then()');
    });
  });

  describe('beforeEach() and test()', () => {
    beforeEach(async () => {
      await promise();
    });

    test('with await', () => {
      expect(called).toBe('then()');
    });
  });
});

yarn run v1.22.10
$ jest --verbose
 PASS  ./test.js
  async test
    test() only
      ✓ without await (12 ms)
      ✓ with await (2 ms)
    beforeEach() and test()
      ✓ without await (1 ms)
      ✓ with await (7 ms)

  console.log
    function

      at promise (test.js:5:13)

  console.log
    Promise()

      at Promise.then.console.log.called (test.js:12:15)

  console.log
    then()

      at test.js:15:15

  console.log
    function

      at promise (test.js:5:13)

  console.log
    Promise()

      at Promise.then.console.log.called (test.js:12:15)

  console.log
    then()

      at test.js:15:15

  console.log
    function

      at promise (test.js:5:13)

  console.log
    Promise()

      at Promise.then.console.log.called (test.js:12:15)

  console.log
    then()

      at test.js:15:15

  console.log
    function

      at promise (test.js:5:13)

  console.log
    Promise()

      at Promise.then.console.log.called (test.js:12:15)

  console.log
    then()

      at test.js:15:15

Test Suites: 1 passed, 1 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        0.979 s, estimated 1 s
Ran all test suites.
✨  Done in 1.83s.

参考

• Microtasks

知り合いの JavaScript 経験者が、Java を学びたいと言ってましたので、簡単な入門前メモをまとめてみました。

想定している読者

Web ブラウザで動作する、もしくは NodeJS 環境で動作する JavaScript コードを学んだことがある、もしくは書いたことがある方を想定しています。

きちんと学ぶにはJava入門書を読んだり、良質なコードを多く参照して真似したりすることが有効だと思います。ただ現時点で JavaScript の知識があるのであれば、Java との差分を確認してから学んだほうが理解が早まるのではないか？と思い、このメモをまとめてみました。

このメモが簡単すぎる、冗長すぎると感じる方は、素晴らしいまとめサイトである Java コード入門 をお勧めします。

開発環境

いまの時代、何らかの統合開発環境を利用することを想定しています。とりあえず想定しているのは、昔ながらの Eclipse (統合開発環境) です。入門本や記事は多くありますが、例えば以下のような記事はどうでしょう。

• Java入門1 開発環境の準備/Eclipseのインストール
• Eclipse入門～初めてのインストールから起動、概要までを基礎から解説

ただし事前に自分で学習する場合はともかく、仕事用のコードを書く方は、仕事先の環境を聞いて開発環境や、Java のバージョンなど合わせたほうが良いでしょう。

より手軽に試してみる

ちょっと Java コードを試したいだけであれば、オンライン上のサービスを利用するのもお手軽で良いです。

• オンラインでプログラミングして実行できるサイト

また Docker 環境があれば、Java 環境を含んだ Docker Image を実行することで、Java 開発環境をインストールせずに試すこともできますね。私も今年 docker-lambda を使うネタ とか VSCode + Codewindネタ (NodeJSですがJavaも可) とか投稿しているので、興味があれば参照してみてください。

ポイントとなる差分

コンパイラ言語

Java はコンパイラ言語、JavaScript はスクリプト言語とされています。これは確かにそうなのですが、以下の理由であまり気にしなくても良いとおもいます。

• JavaScript は js ファイルを直接実行する実装が多い
• それに対して Java は class ファイルにいったん変換(コンパイル)してから実行する実装が多く、それにひと間かかる
• ただし今どきの統合開発環境はこの「ひと手間」を勝手に実行してくれるので、開発者はあまり意識する必要はない

Java の場合は *.class という中間ファイルが実行時に自動で作成される、ぐらいの知識で十分だと思います。

更に最近の Java では *.java ファイルをそのまま実行できる (ように裏でこっそりコンパイルしてくれる) ので、もはやコンパイル言語かどうかも怪しいかも？です。コンパイル言語という出自から派生した、次の静的型付けだけ理解できれば大丈夫。

静的型付けと動的型付け

Java は静的な型付け言語で、動的な JavaScript とは異なります。型についてチェックが厳しいので、それを意識して書かないとエラーや警告が頻発して驚かされるでしょう。

TypeScript のような静的型付けのできる JavaScript 系言語の経験者は、このセクションはスキップしてOK。

動的型付けのほうが気楽に書けるので、個人的には好きです。が、仕事でコードを管理する場合など、大規模だったり、実装とテストを気楽に繰り返せない状況では、静的型付け言語のほうが結果として楽な気がしますね。

以下の記事がお勧めです。

• 静的型付けと動的型付け～JavaとJavaScriptのJSON処理を比較～｜オブジェクト指向プログラミング(OOP)をおさらいしよう（５）

• Java、C、C#、VB.netなどは「静的な型付け」
• JavaScript、Python、Rubyなどは「動的な型付け」

「静的～」は構造をコンパイル時にチェックする。「動的～」は構造を実行時にチェックする。

• 自分が何故、静的型付が好きなのか少し考えてみた

静的型付けのメリットはなんと言ってもコンパイルエラーが出ること。これに付きます。
これによって実行して初めてわかる問題をかなり減らすことができます。C言語のようにしょぼい型システムだと嬉しさなんてありませんが、JavaやScala, OCaml, Haskellなどだとかなり有用です。

なお、紹介した記事を全部理解する必要はなく、ざっくり読んで「ふーん」とおおまかに感じるだけで良いとおもいます。学習が進んだ後で、もう一度読み返すことを前提として紹介しています。

オブジェクト指向

JavaScript にも オブジェクト指向 の概念は あります が、必須の知識ではなく、実はあまり意識しなくてもコードを書けたりします。

それに対して Java ではオブジェクト指向は根っことなる部分ですし、より複雑な仕組みがあります。

とりあえず入り口としては、継承、インターフェイス ぐらいを理解しておけば良さそうにおもわれます。特にインターフェイスは JavaScript にないもので、かつ、地味なところで、わりとお世話になっていたりします。

インターフェイスとは、ある特定の機能を実現するために必要なメソッドのシグニチャ（名前や引数、戻り値の型）だけを定義したものです。処理そのものは持ちません。

簡単に言えば、クラス定義から実行されるコード部分を省いたものです。つまりはそのクラスの外部仕様を定義するものの、実際の処理内容は記載されていません。C言語であればヘッダファイル(*.h)に相当するものです。

更に Java にはクラスとインターフェイスの中間のような抽象クラスもあり、「部分的にコードを省いた」クラスという感じです。

インターフェスや抽象クラスはそのままでは利用できず、継承(インターフェイスは実装)して、足りない処理コードを補ったクラスを定義する必要があります。と言うと難しそうですが、実は最初は、それほど気にしなくても大丈夫です。

例えば Eclipse では、クラス新規作成時に、以下のようにメソッドの自動生成がデフォルトでチェック済みなので、コード実装がされていない関数(メソッド)があれば、自動的に定義部分も作成しておいてくれます。間違って消したり、実装し忘れがあっても、警告やエラーがしっかり出ますので、すぐわかります。

メソッドのオーバーロード

Java コードを読んでいると、同じ名前の関数(メソッド)が幾つも定義されていて、どれを呼んでいるのか迷子になることがあります。これは メソッドのオーバーロード によるものです。

Javaでは、「同じ名前で、引数の型、並びだけが異なる」メソッドを複数定義することもできます。これをメソッドのオーバーロードと言います。

JavaScript だと、単に関数名だけみて探せば良いのですが。Java の場合は同じ名前の関数(メソッド)が複数定義されている場合、それらのなかから引数の数や型(継承関係も含む)が一致するものを探さないといけません。

まあ統合開発環境だと、このあたりもチェックしたうえで参照元に移動できますので、それほどは困らないのですが。例えば Eclipse だと、関数を呼び出しているところで F3 キーを押すと、それを定義したコードに移動できます。

文字列の比較

Java 初心者が最初にひっかかる点が「文字コードの比較」ミスです。以下のような例が有名ですね。

    String str1 = "123";
    String str2 = "123";
    String str3 = "12" + "3";
    String str4 = "12";
    str4 += "3";

    System.out.println(str1 == str2); // true (1
    System.out.println(str1 == str3); // true (2
    System.out.println(str1 == str4); // false (3
    System.out.println(str1.equals(str4)); // true (4

JavaScript だと文字列の == 演算は値の比較になるので、上記は全部 true になります。

Java だと基本的に == は「同じオブジェクトかどうか」の判定になり、値の比較には equals メソッドを使用します。

ここでやっかいなのが、(1 と (2 は多くの環境で true の結果になることで、バグ発生の原因となり得ます。これは Java コンパイル時の最適化による影響です。

Java で文字列は immutable (イミュータブル/不変)なもので、プログラム実行中にその値は変わりません。であれば "123" という同じ値の文字列であれば、内部的に「あれ、これ真面目に2個用意しなくても、1個用意して使いまわせばいいよね？」という最適化(手抜き)をします。その結果 (1 が true になります。

更に最近の Java コンパイラは賢いので、"12" + "3" という式がコード中に含まれると「あれ、これ結局 "123" という文字列を使いたいんだよね？」と察してしまい、勝手に式を "123" という結果に置き換えてしまいます。なのでその結果、(1 と同じ理由で (2 も true になります。

なおこの結果は Java8 でのコンパイル結果です。その後のバージョンのもっと賢い Java コンパイラは (3 も true になる最適化をしてくれるかもしれませんねw

というわけで、Java においては値の比較は equals という関数を使うこと、お忘れなく！

また JavaScript にもある概念ですが、Java の ラッパークラス についても、一応は確認しておくと良いでしょう。

言語の拡張について

Java 言語は古い、化石のような存在である、といった印象をもつ方も居ると思います。Java は最新の言語仕様をわりと積極的に取り入れており、特に、JavaScript にどんどん影響されてきています。以下、個人的な感想も含みます。

JavaScript は Java の影響も強く受けているので、Java の子供みたいなものです。そして Java は JavaScript の良いところを順に実装してきています。順に機能が追加されているため Java のバージョンには注意が必要で、詳細は Javaバージョン履歴 を参照してください。

ただし Java は過去との互換性も重視しており、抜本的な構造改革は難しいので、かなり強引な実装になっている部分もあります。新機能を単に使う分には良いのですが、その実装部分に踏み込むとかなり難解な部分もあるので、細かな部分が気になっても、探求は学習が進んだあとに取っておくのをお勧めします。

実装の工夫例

Java にも 無名クラス があり、例えば以下のように利用できますが、

Test02

import java.util.*;

public class Test02 {
    public static void main(String[] args) {
        new Thread(new Runnable() { // ココ
            public void run(){
                System.out.print("Runnable.run");
            }
        }).start();
    }
}

過去との互換性を維持するため、つまりは無名クラスなど知らない実行環境のため、コンパイル時には以下のような class ファイルが自動生成されています。コード上は無名クラスとして記述されていますが、実際には内部で名前(今回は Test02$1)が付与されているわけです。

※ 私も最初、この謎の class ファイル群はなんだろう？と不思議に思っていました

なお余談ですが JavaSE 8 からは新しい記述の ラムダ式 が使え、より JavaScript っぽい表記ができます。

Test02

    List<String> list = new ArrayList<>(Arrays.asList("aa", "bb"));
    list.replaceAll(str -> str.toUpperCase());
    System.out.println(list); // [AA, BB]

まだ馴染みの薄い拡張

上記のとおり Java 言語は拡張されてきていますが、まだ馴染みが薄いといいますか、わりと先進的な Java 開発の現場でないと見かけない要素もあります。

さきほどのラムダ式もそうですが、JavaScript では普通の書き方でも、Java 言語のなかで使用すると違和感が出てくることもあるでしょう。バージョンの関係で使えたとしても、です。既存のコードを読み、また先輩の開発者に聞いて、雰囲気をみて使いましょう。郷に入っては郷に従え、です。

個人的には ジェネリックス はもう普通に使われているケースが多く、使っていないのは、ものすごく古いコードだけだと思います。

アノテーション はかなり一般的になったと感じますが、独自アノテーションを定義するまで活用する例はまだ少ないと感じます。

Stream API は JavaScript だと多用する書き方ですが、Java のコードではまだあまり積極的に利用されていないように感じます。まあこれは、言語というよりライブラリ設計の話題な気もしますが…

※ これらは案件、現場によって大きく異なるので、繰り返しますがあくまで個人の感想です

ライブラリは大事

どの開発言語でもそうですが、言語ごとの差異はそれほど大きくなく、どちらかというと習得に時間がかかるのはライブラリの把握と上手な利用方法です。

Java は標準ライブラリがなかなか豊富です。まずか以下のような公式の API 仕様を参照してみましょう。とはいえ全部を読むのは難しいため、クラス利用時に詳細を確認しつつ、少しずつ理解の幅を広げていくのが良いでしょう。

• Java(tm) Platform, Standard Edition 8 API仕様
• Java® Platform, Standard Edition & Java Development Kit バージョン11 API仕様

java.lang が標準のライブラリで、設定しなくても最初から、自動的に読み込まれます。もし、ちゃんと読んでいくのであれば、最初はここからかな？

JavaScript の場合、NodeJS なら npm サイト で探せば、必要な機能はたいてい見つかるものです。Java の場合はまず Maven Repository を探すのが良いでしょう。各バージョンのコンパイル済みライブラリ(jar)ファイルの入手もできます。

なお NodeJS の npm はダウンロードと設定を同時に実行してくれますが、Java の場合は Java 実行環境から見つかるようちゃんと配慮してあげる必要があります。コマンドラインで実行している場合はクラスパスを設定してあげるか、-cp もしくは -classpath オプションで配置した場所を明示する必要があります。Eclipse の場合はプロジェクトの Java Build Path　設定を確認して、見当たらなければ追加してあげましょう。

JUnit など有名どころは Eclipse 環境で既に用意されている場合もあるので、まず先に下の Add Library ボタンを押してみるのも良いかもしれません。

さあ学習を始めましょう

と、最初に気になりそうな点をざっと書いてみました。あとは実際に Java の学習を始めてください。個人的なお勧めは、やはり Java コード入門 サイトです。

プロググラミング自体がまだ不慣れで、より優しい入門書を読みたい場合には スッキリわかるJava入門 第3版 スッキリわかるシリーズ など良いかもしれません。

逆に自信のある方は上記の Web サイトなどで理解した後、資格取得も視野にいれ、バージョンにあわせて以下のような書籍で学習するのも良いかもしれません。

• 徹底攻略Java SE 8 Silver問題集［1Z0-808］対応 徹底攻略シリーズ
• 徹底攻略Java SE 11 Silver問題集［1Z0-815］対応 徹底攻略シリーズ

Enjoy!

以上、JavaScript 経験者へ、Java を学ぶ際に知っておいたほうが良さそうなことをまとめてみました。これから Java 言語に親しんでいく際の、敷居が少しでも下がったのであれば嬉しいです。

逆に、よけい混乱させてしまったのであれば、すみません。文章は読み飛ばし、ご紹介した各種リンク先だけでも、参照いただければと思います！

私自身は Java -> JavaScript と学んだ人なので、見落としなど多いとおもいます。記述もいいかげんだったり、まだ十分ではないと思いますが、気がついた点があったら修正・追記していきたいとおもいます。

それではまた！

はじめに

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

今回はx-means法の実装について解説します。

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

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

概説

アルゴリズムなどについては既に良い記事がありますので、こちらも参考にしてください。

• クラスタ数を自動推定するX-means法を調べてみた

処理の流れ

fit関数により分割処理を行います。

1. 初期分割状態の生成
   • 一回目の呼び出しの場合は、k-means法により初期クラスタ数に分割（_split_cluster）し、各クラスタ情報を取得します
   • 二回目以降の場合は、自分自身の状態から各クラスタ情報を取得します
2. 存在する各クラスタに対してk-means法による分割（_split_cluster）を実施します
   • 分割後のBICが小さくなった場合は、その分割を採用します
   • 逆に大きくなった場合は、その分割は行いません
3. 指定されただけ、あるいは分割できなくなるまで2.を繰り返します

各クラスタ情報は以下のデータで、BIC計算のために使用するなどします。

• size : データ数
• cols : 特徴量数
• data : データ（size×colsなる配列の配列）
• cov : 分散共分散行列（cols×colsなる行列）
• centroid : セントロイド
• llh : 対数尤度
• bic : BIC

この情報を初回呼び出し時およびクラスタ分割時に取得（_create_clusters）しています。

また内部で使用するk-means法の処理は、先日投稿した記事で定義したKMeansModelで実行します。

行列演算

各種行列演算は手作り数学ライブラリmath.jsの中で定義してあるMatrixで実行します。

コード中で使用している処理はそれぞれ以下の通りです。

• プロパティ
  • t : 転置行列を返す
  • value : 内部で持っている一次元配列を返す
  • rows : 行数を返す
  • cols : 列数を返す
• 関数
  • cov : 分散共分散行列を返す
  • det : 行列式を返す
  • dot : 行列積を返す
  • mean : 平均値を返す
  • row : 行ベクトルを（1行の行列として）返す
  • sub : 減算する（inplace処理）

正規分布の累積分布関数

BICの計算において正規分布の累積分布関数が必要になります。

このサイトによると、標準正規分布$f(x)$についてその累積分布関数$F(x)$は以下の近似式が知られているそうです。

f(x) = \frac{1}{\sqrt{2 \pi}} e^{-\frac{x^2}{2}}
\\
のとき
\\
F(x) = \int_{-\infty}^x f(x) dx \simeq \frac{1}{1 + e^{-1.7 x}}

実装では、この近似式を用いて正規分布の累積分布関数を計算しています。

コード

class XMeans {
    // https://qiita.com/deaikei/items/8615362d320c76e2ce0b
    // https://www.jstage.jst.go.jp/article/jappstat1971/29/3/29_3_141/_pdf
    constructor() {
        this._centroids = [];
        this._init_k = 2;
    }

    get centroids() {
        return this._centroids;
    }

    get size() {
        return this._centroids.length;
    }

    _distance(a, b) {
        return Math.sqrt(a.reduce((acc, v, i) => acc + (v - b[i]) ** 2, 0));
    }

    clear() {
        this._centroids = [];
    }

    fit(datas, iterations = -1) {
        let clusters = null;
        if (this._centroids.length === 0) {
            clusters = this._split_cluster(datas, this._init_k);
            iterations--
        } else {
            clusters = this._create_clusters(this, datas);
        }
        const centers = [];

        while (clusters.length > 0 && (iterations < 0 || iterations-- > 0)) {
            const new_clusters = [];
            while (clusters.length > 0) {
                const c = clusters.shift();
                if (c.size <= 3) {
                    centers.push(c.centroid)
                    continue
                }
                const [c1, c2] = this._split_cluster(c.data);
                const beta = Math.sqrt(c1.centroid.reduce((s, v, i) => s + (v - c2.centroid[i]) ** 2, 0) / (c1.cov.det() + c2.cov.det()));
                // http://marui.hatenablog.com/entry/20110516/1305520406
                const norm_cdf = 1 / (1 + Math.exp(-1.7 * beta))
                const alpha = 0.5 / norm_cdf

                const df = c.cols * (c.cols + 3) / 2
                const bic = -2 * (c.size * Math.log(alpha) + c1.llh + c2.llh) + 2 * df * Math.log(c.size);

                if (bic < c.bic) {
                    new_clusters.push(c1, c2)
                } else {
                    centers.push(c.centroid)
                }
            }
            clusters = new_clusters;
        }
        if (clusters.length > 0) {
            centers.push(...clusters.map(c => c.centroid))
        }
        this._centroids = centers;
    }

    _split_cluster(datas, k = 2) {
        const kmeans = new KMeansModel();
        for (let i = 0; i < k; i++) {
            kmeans.add(datas);
        }
        while (kmeans.fit(datas) > 0);
        return this._create_clusters(kmeans, datas);
    }

    _create_clusters(model, datas) {
        const k = model.size;
        const p = model.predict(datas);
        const ds = [];
        for (let i = 0; i < k; ds[i++] = []);
        datas.forEach((d, i) => ds[p[i]].push(d));
        const clusters = [];
        for (let i = 0; i < k; i++) {
            const mat = Matrix.fromArray(ds[i]);
            const cov = mat.cov();
            const invcov = cov.inv()
            const mean = mat.mean(0);
            const cc = Math.log(1 / Math.sqrt((2 * Math.PI) ** mat.cols * cov.det()))
            let llh = cc * mat.rows;
            for (let j = 0; j < mat.rows; j++) {
                const r = mat.row(j);
                r.sub(mean);
                llh -= r.dot(invcov).dot(r.t).value[0] / 2
            }
            const df = mat.cols * (mat.cols + 3) / 2
            clusters[i] = {
                size: ds[i].length,
                cols: mat.cols,
                data: ds[i],
                cov: cov,
                centroid: model.centroids[i],
                llh: llh,
                bic: -2 * llh + df * Math.log(ds[i].length)
            }
        }
        return clusters;
    }

    predict(datas) {
        if (this._centroids.length == 0) {
            return;
        }
        return datas.map(value => {
            return argmin(this._centroids, v => this._distance(value, v));
        });
    }
}

さいごに

コードを読み直していると、関数名にキャメルケースとスネークケースが混ざっているのがかなり気になります。
自分で書いておいてあれですが。

概要

いよいよOffice ScriptsとしてOfficeでTypeScript(Javascript)が使えるようになったのですが、残念ながらWeb版限定でした…。

Web版ExcelでTypeScriptベースの「Office Scripts」提供開始。ユーザー操作を自動で記録可能

というわけで、アプリ版ExcelでもTypeScriptが使えるように試行錯誤してみました。

単純にTypeScript(Javascript)側からExcelを動かすのはActiveXさえ扱えれば簡単で、ググれば使えそうなサンプルがそれなりに出てくる状態なので、

逆に最小限の労力でExcel(VBA)側からTypeScriptのコードを動かせるようにもしてみたい。

新しい仕様のJSを使えるようにする

今回の構想においてJavascript実行環境はActiveXが簡単に使えてユーザー側で追加のインストールが不要なWindowsScriptHost(WSH)を使うのですが、

何もしなければ相当に古いJavascript仕様相当であるJScript環境で動いてしまうのでさすがに現実的ではない。

ただ、WSHはオプションとしてスクリプトエンジンをProgIDやCLSIDで指定することができるようになっており、

Windows10ならEdge(Chromiumじゃないほう)のES6(2015)相当のJavascriptも使えるようになっています。

WSH JScript Chakra を使用した ES2015(ES6) 対応 （ スクリプトエンジン まとめ ）

いろいろ試してみましたが、今のところsubプロシージャや関数が呼ばれた都度wscript.exeを実行してJavascriptコードを動かすのが確実そうです。

他にVBAからJavascriptを使う方法としてScriptControlを使う方法やHTMLDocumentを使う方法なんかがありますが、いずれもEdge相当のJavascriptは使えないようです。

WSH側からExcel側(起動済み)のオブジェクトを取得

WSH(wscript.exe)を実行する方式にする場合、そのままではExcel関係のActiveXオブジェクトをWSH側に渡す方法が無いのでどうにかする必要があるのですが、

GetObject(,"Excel.Application") では既に別のExcelが動いていたとしても新しいExcelウインドウが開いてしまってうまくいきません。

しかし、GetObjectにはActiveXのクラス名の他にファイルのフルパスも指定できるのですが、既に開いているエクセルファイルの場合は新しく開かずに既に開いているファイルのWorkbookオブジェクトが取得できる仕組みになっているようです。

参考: GetObject(, "Excel~")だけで無く、GetObject(ファイル名)も活用しよう

つまり、呼び出すExcel側のExcelファイルのフルパスさえわかればGetObjectで新しく(二重に)Excelを起動することなくExcel(VBA)側のWorkbookオブジェクトが取れるということです。

VBAから自身のExcelファイルのフルパスは ThisWorkbook.FullName で簡単に取得できるので、

これをコマンドラインオプションとして渡せば実質Excel(VBA)側のWorkbookオブジェクトをWSH側に渡すことができるようになります。

ちなみに (Workbookオブジェクト).Application で親となるApplicationオブジェクトが取得できます。

対象のExcelファイルが開いていない場合は新しく開いたうえでそのWorkbookオブジェクトを取得できるので、工夫すれば同じコードでExcelを開いていない状態でWSH側からスクリプトを動かすということも可能になります。

データ保存領域としてカスタムドキュメントプロパティを使う

WSHを都度起動する方式にした以上は終了するとWSH側の変数はすべて消えてしまうので、プロシージャや関数をまたがってデータをやり取りしたい場合はどこかにデータを保存しておく必要があります。

こういう時は専用のシートでも作ってセルに書き込んでおくのが王道だとは思いますが、もう一つの選択肢として、カスタムドキュメントプロパティも使えるようです。

以下のようにVBA側でヘルパー関数を定義しておけばWSH側から (Applicationオブジェクト).Run(Excelファイル名 + "!関数名", 引数...) で呼び出すことができて便利です。

Sub SetCDP(Pname As String, PValue As String)
    If Not IsCDPExist(Pname) Then
        ThisWorkbook.CustomDocumentProperties.Add Pname, False, msoPropertyTypeString, PValue
    Else
        ThisWorkbook.CustomDocumentProperties(Pname).Value = PValue
    End If
End Sub

Function GetCDP(Pname As String) As String
    GetCDP = ""
    If IsCDPExist(Pname) Then
        GetCDP = ThisWorkbook.CustomDocumentProperties(Pname).Value
    End If
End Function

Sub DelCDP(Pname As String)
    If IsCDPExist(Pname) Then
        ThisWorkbook.CustomDocumentProperties(Pname).Delete
    End If
End Sub

Function IsCDPExist(Name As String) As Boolean
    Dim prop As Object
    IsCDPExist = False
    For Each prop In ThisWorkbook.CustomDocumentProperties
        If prop.Name = Name Then
            IsCDPExist = True
            Exit For
        End If
    Next prop
End Function

WSHからExcelのユーザーフォームを開く

WSHというかExcel関係のActiveXオブジェクトからユーザーフォームを開くのは無理なようなので、VBA側でユーザーフォーム名からフォームオブジェクトを取得するヘルパー関数を作ってみました。WSH側から (Applicationオブジェクト).Run(Excelファイル名 + "!GetFormObject", "フォーム名") でフォームオブジェクトを取得したら (フォームオブジェクト).Show(1) で開いたりできます。存在しないフォーム名を指定するとVBA側ではNothingを返していますが、WSH(JavaScript)側ではnullとなるようです。
また、このままではWSH側からUnload出来ない(hideで隠すことはできる)ので、同様にヘルパー関数が必要のようです。

参考: Show Any Form

Function GetFormObject(FormName As String) As Object
    Dim Obj As Object

    For Each Obj In VBA.UserForms
        If Obj.Name = FormName Then
            Set GetFormObject = Obj
            Exit Function
        End If
    Next Obj

    On Error Resume Next
    Err.Clear
    Set Obj = VBA.UserForms.Add(FormName)
    If Err.Number <> 0 Then
        Set GetFormObject = Nothing
        Exit Function
    End If
    Set GetFormObject = Obj
End Function

Sub UnloadForm(formname As String)
    Dim obj As Object
    Set obj = GetFormObject(formname)
    If Not obj Is Nothing Then
        Unload obj
    End If
End Sub

VBAからWSH(wscript.exe)を起動

VBA内蔵のRunは実行したら即制御が戻る非同期実行となり非常に都合が悪いのでWScript.ShellのRunで同期実行するようにしています。

Function CallJScript(funcname As String, Optional formname As String = "", Optional script As String = "", Optional book As String = "") As Boolean

    Static fso As Object
    Static wsh As Object

    If fso Is Nothing Then Set fso = CreateObject("Scripting.FileSystemObject")
    If wsh Is Nothing Then Set wsh = CreateObject("WScript.Shell")

    If book = "" Then
        'bookパラメータ(対象のExcelファイル)を指定しなかった場合は自身のExcelファイルを設定
        book = ThisWorkbook.FullName
    ElseIf Left(book, 1) = "." Then
        '1文字目が.なら相対パスと判断して絶対パスに変換
        book = fso.GetAbsolutePathName(fso.BuildPath(ThisWorkbook.Path, book))
    End If

    If script = "" Then
        'scriptパラメータを指定しなかった場合はbookパラメータと同じフォルダにある同じファイル名のjsファイルを設定
        script = fso.GetParentFolderName(book) & "\" & fso.GetBaseName(book) & ".js"
    ElseIf Left(script, 1) = "." Then
        script = fso.GetAbsolutePathName(fso.BuildPath(ThisWorkbook.Path, script))
    End If

    If fso.FileExists(book) = False Then
        Err.Raise Number:=53, Description:="ファイル" & book & "が見つかりません"
        Exit Function
    End If

    If fso.FileExists(script) = False Then
        Err.Raise Number:=53, Description:="ファイル" & script & "が見つかりません"
        Exit Function
    End If

    'edgeのJScriptエンジン(Chakra)を指定してスクリプトを実行
    wsh.Run "wscript //E:{1B7CD997-E5FF-4932-A7A6-2A9E636DA385} " & script & " " & book & " " & funcname & " " & formname, 0, True


    'イベントキャンセル用のカスタムプロパティを取得して戻り値に設定しカスタムプロパティを削除
    CallJScript = False

    If LCase(GetCDP("_JScriptIsCancel")) = "true" Then
        CallJScript = True
    End If

    If IsCDPExist("_JScriptIsCancel") Then
         DelCDP "_JScriptIsCancel"
    End If
End Function

WSHでスクリプトを書く

今のところこんな感じ。

var sh = WScript.CreateObject("WScript.Shell")
var xlBook = WScript.GetObject(WScript.Arguments(0))
var xlApp = xlBook.Application

sh.popup(xlBook.Sheets("Sheet1").Range("A3").Value)
xlBook.Sheets("Sheet1").Range("A1").Value = "test"
var formtest = xlApp.Run(xlBook.Name + "!GetFormObject", "UserForm1")

if(formtest == null){
    sh.popup("Nothing!")
}else{
    formtest.Show(1)
}

xlApp.Run(xlBook.Name + "!SetCDP", "test", "Test Prop2")
sh.popup(xlApp.Run(xlBook.Name + "!IsCDPExist","test"))
sh.popup(xlApp.Run(xlBook.Name + "!GetCDP", "test"))

都度wscript.exeを起動しなくてもいいのでは…

参考：JScript と Chakra を共存させる

をみてよくよく考えたら都度都度wscript.exeを起動しなくてもお互いにカスタムドキュメントプロパティの内容を監視して協調動作すればいいのではと考え中…(リンクのほうはInternetExplorerオブジェクトでやっている模様)

まずは完成形

CdSセル（照度センサ）で暗くなると、ゆうやけこやけが流れます。
この曲聞くと切なくなるな。。

#protoout #obniz
夕暮れ時に「ゆうやけこやけ」を圧電スピーカーから流してみたよ。 pic.twitter.com/km2YmlAKAi

— @Jis (@PmanRabbit) October 18, 2020

使った部品

・Obniz Board 1Y
・圧電スピーカー（PKM13EPYH4000-A0）
・CdSセル（MI527/MI5527）
・カーボン抵抗 1/2W330Ω（CFS50J330RB）
・ミニブレッドボード（BB-601）
・ブレッドボード・ジャンパーワイヤ(オス-オス)（BBJ-20）

接続図

コード

.js

const Obniz = require('obniz');
const obniz = new Obniz('0000-0000'); // Obniz_ID

// 任意の秒数待つことができる関数
// 参考: https://qiita.com/suin/items/99aa8641d06b5f819656
const sleep = (msec) => new Promise(res => setTimeout(res, msec));

// 音階
const Key = {
    "ド" : 261.626,
    "レ" : 293.665,
    "ミ" : 329.628,
    "ファ" : 349.228,
    "ソ" : 391.995,
    "ラ" : 440.000,
    "シ" : 493.883,
    "ド2" : 523.251,
    "レ2" : 587.330
}

obniz.onconnect = async function () {

    // ディスプレイ表示
    obniz.display.clear();
    obniz.display.print('TEST');

    // スピーカー
    const speaker = obniz.wired('Speaker', { signal: 0, gnd: 1 });

    // 照度センサ
    obniz.io9.output(true);  // io9電圧を5Vに（電源＋）
    obniz.io11.output(false); // io11電圧を0Vに（電源−）

    // setIntervalで一定間隔で処理
    setInterval(async function () {
        // io10をアナログピンに(照度センサーの値を取得)
        var voltage = await obniz.ad10.getWait();
        console.log(`changed to ${voltage} v`);

        if (voltage < 0.3) {
            // 暗くなったら「ゆうやけこやけ」を流す
            speaker.play(Key["ソ"]); await sleep(1000); speaker.stop(); await sleep(100);
            speaker.play(Key["ソ"]); await sleep(500); speaker.stop(); await sleep(100);
            speaker.play(Key["ラ"]); await sleep(500); speaker.stop(); await sleep(100);

            speaker.play(Key["ソ"]); await sleep(500); speaker.stop(); await sleep(100);
            speaker.play(Key["ソ"]); await sleep(500); speaker.stop(); await sleep(100);
            speaker.play(Key["ソ"]); await sleep(500); speaker.stop(); await sleep(100);
            speaker.play(Key["ミ"]); await sleep(500); speaker.stop(); await sleep(100);

            speaker.play(Key["ド"]); await sleep(500); speaker.stop(); await sleep(100);
            speaker.play(Key["ド"]); await sleep(500); speaker.stop(); await sleep(100);
            speaker.play(Key["レ"]); await sleep(500); speaker.stop(); await sleep(100);
            speaker.play(Key["ミ"]); await sleep(500); speaker.stop(); await sleep(100);

            speaker.play(Key["レ"]); await sleep(1500); speaker.stop(); await sleep(500);

            speaker.play(Key["ミ"]); await sleep(1000); speaker.stop(); await sleep(100);
            speaker.play(Key["ミ"]); await sleep(500); speaker.stop(); await sleep(100);
            speaker.play(Key["ソ"]); await sleep(500); speaker.stop(); await sleep(100);

            speaker.play(Key["ラ"]); await sleep(500); speaker.stop(); await sleep(100);
            speaker.play(Key["ド2"]); await sleep(500); speaker.stop(); await sleep(100);
            speaker.play(Key["ド2"]); await sleep(500); speaker.stop(); await sleep(100);
            speaker.play(Key["ラ"]); await sleep(500); speaker.stop(); await sleep(100);

            speaker.play(Key["ソ"]); await sleep(500); speaker.stop(); await sleep(100);
            speaker.play(Key["ソ"]); await sleep(500); speaker.stop(); await sleep(100);
            speaker.play(Key["ラ"]); await sleep(500); speaker.stop(); await sleep(100);
            speaker.play(Key["ソ"]); await sleep(500); speaker.stop(); await sleep(100);

            speaker.play(Key["ド2"]); await sleep(1500); speaker.stop(); await sleep(500);
        }
    }, 20000);  // 20秒（約1曲分は待つ）
}

やってみた感想

圧電スピーカーは周波数で音階を決められるので、曲を流すのは割と簡単でした。
参考：音階周波数

今回、圧電スピーカーで曲を流してみたかっただけですが、なかなか面白かった。ハマりそうです。。スピーカーを複数繋げれば、和音も表現できそうで曲の幅が広がりそうで、時間があったらやってみたい。

やりたいこと

このようなアラートダイアログのOKを押されたタイミングで処理を実行したいとします。

確認ダイアログを使って、以下のようにOKボタンが押された場合とキャンセルボタンが押された場合の処理を書くのが一般的です。

if (confirm('確認ダイアログの例')) {
    console.log('OKボタンが押されました。')
} else {
    console.log('キャンセルボタンが押されました。')
}

キャンセルボタンの押せない、OKボタンのみの確認ダイアログを作りたい

ただ、時には諸々の事情でキャンセルボタンを押してもらいたくない場合もあります。

ということで、キャンセルボタンの押せない、OKボタンのみの確認ダイアログを作っていきます。

alert()の仕様

確認ダイアログでのOKボタンとキャンセルボタンを押された場合の処理の書き分けでは、JavaScriptのconfirm()が

• OKボタンをクリックした場合の戻り値：true
• キャンセルボタンをクリックした場合の戻り値：false

であることを使って、if文の条件式の中でconfirm()を使うことで実現していました。

一方、alert()では、アラートダイアログのOKボタンを押された際の戻り値はundefinedです。

この特性を使って、

if (!alert('OKを押してください。')) {
    // OKが押された際に実行する処理
}

上記のような条件式を書くことによって、OKが押された際にundefinedの否定、つまりtrueとなり、処理が実行されます。

以下、サンプルです。

サンプル

See the Pen Event After Alert by Kamiyama (@MtDeity) on CodePen.

JavaScriptやReactの基本となる概念について?

モジュール

コードを再利用しやすい形に細分化して影響範囲を狭めたもの。
違うモジュール同士なら名前が被ってもOK?なので、変数名や関数名が被ってしまう名前空間の問題を解決する。基本的にモジュールは１ファイルに1モジュール定義。

JavaScriptのモジュール形式

• CommonJS ：Node.js(サーバーサイド)で使われるJavaScriptの各種仕様。
• ES Modules ：JavaScript公式の言語仕様。今はこれが主流。

パッケージ管理システム

パッケージとは、コードの一部を使い回すために切り出したもの。
パッケージ管理システムではパッケージをいい感じでインストールし管理してくれる。　
例えば30個の依存関係のあるパッケージがあると、それぞれのパッケージがさらに依存関係を持っている、、、これをいい感じに管理してくれるのがnpm、yarn等のパッケージ管理システム。

主な機能
1. ローカル環境のパッケージを更新、検索
2. パッケージインストール削除
3. 依存関係の解決、必要な依存パッケージ自動インストール
4. 設定を書いて1-3を自動化

• npm (Node package manager)
  Node.jsの標準パッケージ管理システム。(最近githubに買収された。)

  • package.json：インストールが必要なパッケージリスト
  • package-lock.json： 実際にインストールしたパッケージがどの依存関係を持っているかの記録。チームで共有することで環境を統一できる。node_modules、package.jsonが変更されると自動で作成、変更される
  • node_modules： ディレクトリの中に依存関係のパッケージが入っている。

• yarn
  npmよりも高速なパッケージマネジャー。npmより厳密にモジュールのバージョンを固定でき、yarn.lockファイルで、各パッケージのインストールバージョンを固定できる。しかもnpmと同じpackage.jsonが使えるため、同一プロジェクトでnpmかyarnかなんて迷わなくてOK?:）
  https://classic.yarnpkg.com/ja/docs/install#mac-stable

ビルド

書いたコードを異なる環境で動かすための準備のこと。npmでインストールしたいろんな形式のモジュールで書かれたパッケージを使えるようになる。JavaScriptのビルドでは(Browserifyや)webpackが使われる。webpackではモジュールに加え画像やcssなども一緒にビルドしてくれる。

• Browserify
  CommonJS形式で書かれたものをブラウザ向けにバンドル(変換)するツール。CommonJS形式で書けばBrowseryで変換することでブラウザでもNode.js向けのパッケージが使えるようになった。ブラウザでもnpm(CommonJS形式のパッケージがメイン)が使われるようになった。

• webpack
  Browserifyの上位互換バンドルツール。JavaScript向けのファイルのみでなく、対応するローダーを使ってバンドル(変換)すればHTML,CSS,画像などを読み込めるようになる。ES Modulesにネイティブ対応。
  https://webpack.js.org/

コンパイル

開発時はブラウザで動かないコードを、ブラウザで動くように変換しJavaScriptにする機能。バンドルはモジュール依存関係解決に焦点、コンパイルは事前に変換する機能である。
ES2015の新機能を古いブラウザでもバンドル(トランスパイル)して動くようにしてくれるのがBabel。webpackと併用しコンパイルで事前に変換することでモジュールと依存関係を解消し、かつ、ES6の新しい機能も使えるようになった。
Reactだと、そのままでは動かないjsxファイルを、事前にコンパイルして変換すると、ブラウザで動くようになる。このようにいったんバンドルやコンパイルを挟むことがjQueryと違うところ。

• Babel
  ReactのJSX(JavaScript XML React)というJavaScriptの拡張版でXMLを出力すると、Babelが自動でJavaScriptに変換してくれる。?
  他にもNodeでは認識されるES6のconst foo = <div> を標準的なvar foo = React.createElement() に変換してくれる。??
  以下のページの左側にXMLを入力すると、右側にリアルタイムでJavaScriptが表示される https://babeljs.io/ JSXを使うことでHTMLのような書き方でh1タグが作成できる。

//JSXでのh1タグ
import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello!</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

tl;dr

interceptors.request.use()内でaxios.Cancel()をthrowすることでリクエストを直前でキャンセルできます。

?サンプル

認証トークンがlocalStorageに保存されており、トークンがなければAPIリクエストを投げたくないというケースを考えてみます。

認証トークンを取得する関数は以下です。

function getToken(){
  return window.localStorage.getItem("token");
}

axiosのinterceptorsを定義します。

const axios = require('axios');

  axios.interceptors.request.use(config => {
    if (!getToken()) {
      throw new axios.Cancel('トークンがないためリクエストはキャンセルされました');
    } else {
      config.headers.Authorization = "Bearer " + getToken();
      return config;
    }
  });

適当なドライバを作成し、コールしてみます。この時、ローカルストレージは空なので、requestがキャンセルされるはずです。

  async function getZip() {
    try {
      const response = await axios.get('http://api.thni.net/jzip/X0401/JSON/064/0941.js');
      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
  }

  getZip();

実行結果

Cancel { message: 'トークンがないためリクエストはキャンセルされました' }

思惑通り、requestはキャンセルされました。

以上。

JavaScript開発環境をeclipseに作りたいと思ったけど、やったことなかったので調べてみてせっかくなので備忘として残しておく。
ちなみにeclipseインストール済み前提の手順です。

■手順1. プロジェクト・エクスプローラ内で右クリックし、新規＞プロジェクト＞静的Webプロジェクト を選択

■手順2. プロジェクト名をつけて「完了」ボタン押下

■手順3. "JavaScriptリソース"と"WebContent"が入ってるプロジェクトが作成される！

■手順4. ④"WebContent"フォルダにjsやhtmlファイルを作成していく

ということでスタートラインに立てたので、これから何か書いて動かしてみる予定です。

まえがき

プログラミングをしていると、JSONというものをよく目にします。
拡張子が.jsonでなにかの設定を書くファイルや、処理の中でJSON形式のデータを受け取ったりします。
しかし、「なんかJavaScriptのオブジェクトっぽいぞ？」と思ってみても、「なんか、配列のなかにオブジェクトが入ってるのとかもある...？([{},{}]のような)」という具合で、
一体なんなのよくわからず、その場しのぎでJSON.parseやらJSON.stringifyなどして扱っていました。
せっかくなので、調べて簡単にまとめたいと思います。

最初に結論

・異なるプログラミング言語間でデータをやりとりするための、共通のデータ記述形式。
・XMLに代わって、AJAX(非同期通信)やREST APIなどで使われるようになった。
・JavaScriptのオブジェクトを「由来」にしているし、実際、オブジェクトの形式で見かけることも多いが、配列や数値、Boolean単体で記述してもOKで、まったく別物。
・シングルクォートは使えず、ダブルクォートのみが使えて、オブジェクトのkeyは文字列に限るので、

{name: "John Smith", age: 33}

という書き方はダメで、正しくは、

{"name": "John Smith", "age": 33}

・JSON.stringify()でオブジェクトや値をJSON記法に変換、JSON.parse()で引数に渡された値をJSONとして解析して、オブジェクトや値に変換してくれる。

データ記述言語

JavaScript Object Notation（JSON、ジェイソン）はデータ記述言語の1つである。軽量なテキストベースのデータ交換用フォーマットでありプログラミング言語を問わず利用できる[1]。名称と構文はJavaScriptにおけるオブジェクトの表記法に由来する。
JavaScript Object Notation
https://ja.wikipedia.org/wiki/JavaScript_Object_Notation

「JSON とは」といったキーワードで調べると大体上のようなことが最初に書かれています。個人的にはWikipediaの説明が一番シンプルだと思いました。
でもこれ、シンプル過ぎて何言ってるのかよくわからないんですよね。わかる人にはわかる説明だと思うんですが、わからない人には、何を言ってんのかわからないという。

問題は、「データ記述言語」という言葉です。
「いやそりゃなんか書いてるんだし、表現しているのはデータなはずだから、'データ'を'記述'している言語だろそりゃ」(頭悪くてすみません)と思うのですが、これ、ちゃんとした用語なんですね。

データ記述言語（データきじゅつげんご）またはデータ言語とは、コンピュータにおいて扱うデータを記述するための形式言語である。コンピュータ言語の一種だが、プログラミング言語ではない。HTMLに代表されるマークアップ言語などがある。
データ記述言語
https://ja.wikipedia.org/wiki/%E3%83%87%E3%83%BC%E3%82%BF%E8%A8%98%E8%BF%B0%E8%A8%80%E8%AA%9E

これをみると、「え、マークアップ言語がその一種？ HTML?」という感じですが、

データ記述言語は、主にデータをテキストデータとして表現し記述するためのコンピューター用言語。プログラミング言語ではないが、プログラミングと関連が深い。
あるプログラミング言語によりメモリー上に表現されたデータ構造は、他のプロセスや他のプログラミング言語で扱うのに不便なので、汎用的な形式で書かれたデータを扱うようにすることが多い。具体的には、次節で挙げるような言語が存在する。
データ記述言語
https://enpedia.rxy.jp/wiki/%E3%83%87%E3%83%BC%E3%82%BF%E8%A8%98%E8%BF%B0%E8%A8%80%E8%AA%9E

と説明されていたり。

それで、また「JSON」に戻ると、

JavaScript だけではなく、Java, PHP, Ruby, Python など、様々な言語間のデータ交換、特に Ajax や REST API などで使用されています。
これまでは、共通データ定義言語として XML が利用されてきましたが、現在では、簡易的な JSON が利用されるケースが増えてきています。
JSONとは
http://www.tohoho-web.com/ex/json.html

と書かれていたり。

しかも、

他のデータ記述法との関係
XML
JSONはXMLと違ってマークアップ言語ではない。ウェブブラウザから利用できるという点では共通している。また両者とも巨大なバイナリデータを扱う仕組みがないことが共通している。
YAML
JSONはYAMLのサブセットと見なしてよい。YAMLにはブロック形式とインライン形式（フロー形式）の表記法があるが、JSONは後者にさらに制約を加えたものと捉えることができる。例えばRubyでは以下のようにしてJSONをYAMLとして読み込むことができる：
JavaScript Object Notation
https://ja.wikipedia.org/wiki/JavaScript_Object_Notation

と、XMLやYAMLと並べて説明されている。

ここで文系出身の私は、詳しいことはよくわからないが、なんとなく雰囲気で察しました。

要するに、異なるプログラミング言語間でデータをやりとりするための、共通のデータ記述形式であり、だからこそ、サーバーからデータを引っ張ってくる時や、逆にクライアントからサーバーにデータを渡す時に、一旦JSONに変換しているのではないかと。
そして、むかし(...いつ?)はXMLがその役割を担っていて、「AJAX」の'X'もXMLのことだったりする、つまりXML形式に変換してデータをやりとりしていたけど、最近ではもっぱらJSONという形式が使われるようになった。
結果的に、私のような末端でさえ、よくわからないけどJSONという形式のデータやファイルを頻繁に目にするようになったのだと。。。

詳しく説明するかと思いきや、雰囲気で察した結論となってしまいましたが、大体こんな感じではないでしょうか。

JavaScriptのオブジェクトじゃないの？

冒頭、

「なんかJavaScriptのオブジェクトっぽいぞ？」と思ってみても、「なんか、配列のなかにオブジェクトが入ってるのとかもある...？([{},{}]のような)」

と書きましたが、この辺に関しては、

JSONとは「JavaScriptのオブジェクト記法を用いたデータ交換フォーマット」です。
JSONとは？データフォーマット（データ形式）について学ぼう！
https://products.sint.co.jp/topsic/blog/json

と書かれていたりして、やっぱり混乱します。

Wikipediaには、

名称と構文はJavaScriptにおけるオブジェクトの表記法に由来する。
JavaScript Object Notation
https://ja.wikipedia.org/wiki/JavaScript_Object_Notation

と書かれています。

しかも、

JSONの型
JSON では下記の型を使用することができます。
文字列 ("...")
数値 (123, 12.3, 1.23e4 など)
ヌル値 (null)
真偽値 (true, false)
オブジェクト ({ ... })
配列 ([...])
JSON入門
http://www.tohoho-web.com/ex/json.html

ともあって、これはWikipediaにも同じ説明が。

またしても文系出身の私は察しました。
「これは、名前と書き方がJavaScriptのオブジェクトに「由来」しているだけで、まったく別物であり、配列でもいいんだ...！」

合ってますか？

ちなみに、JSONは「発見」されたみたいです。

ダグラス・クロックフォード（英語版）はJavaScriptのプログラマで、JSONを広めた一人だが、「The JSON Saga」と題したプレゼンテーション[4]中で「自分はJSONと名付けたが、考案者ではなく、それ自体は“自然に”存在していたもので、早い例としては1996年にはNetscape Navigatorでデータ交換用に使われていた。だから“発見した”ということになるのだが、発見したのも自分が最初ではない」といったように述べている。以上のことを縮めて「JavaScriptのオブジェクト表記法からJSONが発見された。」と表現されている場合がある。
JavaScript Object Notation
https://ja.wikipedia.org/wiki/JavaScript_Object_Notation

※ちなみに、「JavaScriptのオブジェクト記法を用いたデータ形式です」と書いてあって、記法にオブジェクトの例しか書いてないサイトもあったんですが、さすがにこれはミスリードでは...?
([{},{}]に関しては一切触れてなく、混乱します)

記法

Wikipediaから丸々引用させていただきます。

表記方法
JSONで表現するデータ型は以下の通りで、これらを組み合わせてデータを記述する[5]。true, false, null などは全て小文字でなくてはならない。

オブジェクト（順序づけされていないキーと値のペアの集まり。JSONでは連想配列と等価）
配列（データのシーケンス）
数値（整数、浮動小数点数）
文字列（バックスラッシュによるエスケープシーケンス記法を含む、ダブルクォーテーション"でくくった文字列）
真偽値（true と false）
null
数値は10進法表記に限り、8進、16進法表記などはできない。また浮動小数点数としては 1.0e-10 といった指数表記もできる。

文字列は（JSONそれ自体と同じく）Unicode文字列である。基本的にはJavaScriptの文字列リテラルと同様だが、囲むのにシングルクォートは使えない。バックスラッシュによるエスケープがある。

配列はゼロ個以上の値をコンマで区切って、角かっこでくくることで表現する。例えば以下のように表現する：

["milk", "bread", "eggs"]
オブジェクトはキーと値のペアをコロンで対にして、これらの対をコンマで区切ってゼロ個以上列挙し、全体を波かっこでくくることで表現する。例えば以下のように表現する：

{"name": "John Smith", "age": 33}
ここで注意することはキーとして使うデータ型は文字列に限ることである。したがって、

{name: "John Smith", age: 33}
という表記は許されない。この後者の表記はJavaScriptのオブジェクトの表記法としては正しいが、JSONとしては不正な表記である。
JavaScript Object Notation
https://ja.wikipedia.org/wiki/JavaScript_Object_Notation

なので、配列もOKなんですね。
だから、[{"aaa": "AAA"}, {"bbb": "BBB"}]もOKなんですね(「keyと値が文字列であるオブジェクトを要素に持つ、あくまで配列」)

ちなみに、

下記の様に、配列や値のみの表記も JSON に従ったデータとして認められます。
○ ["ABC", "DEF"]
○ "ABC"
○ 123
JSON入門
http://www.tohoho-web.com/ex/json.html

とのことで、やっぱり、「JavaScriptのオブジェクトと同じ記法です」というのは、ちょっと間違いで、「JavaScriptのオブジェクトの記法を由来にしているし、実際、オブジェクトの記法でよく見かけるが、結局別物」と考えてよいのだとおもいます。

ポイントとしては、

基本的にはJavaScriptの文字列リテラルと同様だが、囲むのにシングルクォートは使えない。
ここで注意することはキーとして使うデータ型は文字列に限ることである。したがって、
{name: "John Smith", age: 33}
という表記は許されない。

とあるように、シングルクォートは使えず、ダブルクォートのみが使えて、オブジェクトのkeyは文字列に限る、というのが点だとおもいます。

JSON.stringify JSON.parse

最後はなんとなく使っていたstringifyとparseです。MDNからコードも含めて引用させていただきます。

JSON.stringify() メソッドは、ある JavaScript のオブジェクトや値を JSON 文字列に変換します。置き換え関数を指定して値を置き換えたり、置き換え配列を指定して指定されたプロパティのみを含むようにしたりすることもできます。
JSON.stringify()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

console.log(JSON.stringify({ x: 5, y: 6 }));
// expected output: "{"x":5,"y":6}"

console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// expected output: "[3,"false",false]"

console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }));
// expected output: "{"x":[10,null,null,null]}"

console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// expected output: ""2006-01-02T15:04:05.000Z""

JSON.stringify()は、オブジェクトや値を、よしなにJSON記法に変換してくれるんですね。
いままで、stringifyって、「文字列に直してんの？」「オブジェクトはJSON形式なのに、なんでstringifyする必要があるの？」とかおもったりしていました。

JSON.parse() メソッドは文字列を JSON として解析し、文字列によって記述されている JavaScript の値やオブジェクトを構築します。任意の reviver 関数で、生成されたオブジェクトが返される前に変換を実行することができます。
JSON.parse()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true

逆に、JSON.parse()は、渡された引数をJSONとして解析して、オブジェクトや値に変換してくれるんですね。

残った疑問

最後に引用したMDNの記事、JSON.parseに渡すJSON文字列にシングルクォート入ってるし('{"result":true, "count":42}')、JSON.stringifyの方では、オブジェクト自体がダブルクォーテーションで囲まれている("{"x":5,"y":6}")...?

あとがき

だいぶ正確性を疎かにした記事ですが、どうでしょうか。
自分ではどれくらい合ってるのかよくわかりませんが、理解のために、まとめてみました。

はじめに

非同期処理とはそもそもどのようなことを行うのかを初学者の方が見てもわかるようにまとめてみました。
まずは非同期処理を理解するためには、同期処理との違いについて把握しなくてはなりません。

違い

１つの処理が完了するまで次の処理に進まないというのが同期処理です。
※webサイトへアクセスした際、重い処理がある場合にはその処理の完了を待たないと次の処理を行うことができません。
対して非同期処理とは、並行して同時に処理が可能です。

Javascriptの実行場所について

Javascrtiptは、メインスレッドという領域で実行されます。
メインスレッドは、Javascriptの実行とその結果によってレンダリング(再描画、表示の更新)を行う領域です。

※ここでのレンダリングは、ビュー全体を再読み込むする形ではなく、関数の実行によってDOMの一部を操作するイメージです。
具体的には、下記のような形です。

同期処理は、実行中の関数がこのメインスレッドを占有し、その処理が完了するまで他の処理を行うことができません。
この点が同期処理では、同時に処理が行えない理由となります。

具体的には下記のコードです。

function blockTime(timeout) { 
  const startTime = Date.now();
  // `timeout`ミリ秒経過するまで無限ループをする
  while (true) {
      const diffTime = Date.now() - startTime;
      if (diffTime >= timeout) {
          return; // 指定時間経過したら関数の実行を終了
      }
  }
}
console.log("処理を開始");
blockTime(5000); // 他の処理を5000ミリ秒の間、メインスレッドを占有します。
console.log("5秒経過したので出力します。");

下記のような形になります。

※下記動画が非同期処理について非常にわかりやすく説明されてます。素晴らしい動画です。
web万屋エンジニアさんの非同期処理について

非同期処理

非同期処理もメインスレッド上で実行されますが、複数の処理を同時に実行することができます。

※非同期処理も同期処理と同様に呼び出された順番で実行されますが、別の非同期処理の完了を待たずに次の処理を行うことができる点が同期通信とは異なります。
ですが、他の関数と同時に実行されるという訳ではありません。
例えば、他の同期処理が先にメインスレッドを占有していればその処理が終わるまでは処理が実行されません。

今回は非同期処理を行うためのAPIであるsetTimeoutを用いて実装します。

<button id="eventBtn">btn</button>

window.addEventListener("load", ()=>{

  function blockTime(timeout) { 
    const startTime = Date.now();
    // `timeout`ミリ秒経過するまで無限ループをする
    while (new Date() - startTime < timeout);
    console.log("block done");
  }

  setTimeout(function(){
    console.log("2秒経過したのでコールバックします")
    blockTime(3000)
  },2000);

  document.getElementById("eventBtn").addEventListener("click", () => {
    console.log("clicked");
  });

})

上記コードを実行すると以下のようになります。
①setTimeout関数に渡したblockTimeは非同期処理として、メインスレッドから切り離される。（blockTimeout関数は2秒後に実行されます。）
②setTimeout関数によって2秒間はメインスレッドが空くため、他の処理が並行して行うことができます。
③blockTime関数がコールバックされるとメインスレッドは占有される。
④blockTimeが完了すると他の処理を実行することができます。

処理のイメージです。

まとめ

Javascriptはメインスレッドで実行されていることがわかりました。
非同期処理は、メインスレッドから切り離されるためその間同時に処理が同時に実行が可能ということですね。

参考資料

Javascriptの非同期処理演習

型判定について調べることがあったので、まとめてみました。

先に結論から

型判定にはObject.prototype.toString.call()を使うと幸せになれる。

型の種類

JavaScriptは動的型付け言語のため、静的型付け言語のような変数の型はありません。
しかし、文字列や真偽値のような値の型は存在します。

この値の型はデータ型と呼ばれ、大きく分けて下記の２つに分類されます。

プリミティブ型（基本型）

• Boolean（真偽値）
  • trueとfalseの２つがある
• String（文字列）
  • "あいうえお"などのテキストデータ
• Number（数値）
  • 42 や 3.14159 などの数値のデータ
• null
  • 値が存在しないことを意味する。nullの１種類しかない
• undefined
  • 値が未定義であることを意味する
• Symbol
  • ES2015から追加された一意で不変な値を意味する（正直使い所がよくわかっていない。。）
• BigInt（巨大な整数）
  • ES2020から追加された9007199254740992nなどの任意の精度で精度で表すことができる（正直使い所がよくわかっていない。。）

オブジェクト型（複合型）

• プリミティブ型以外のデータ
  • オブジェクト、配列　関数、正規表現、Dateなど

型判定してみる

typeof演算子を使うと型を調べることができる

console.log(typeof true); // boolean
console.log(typeof "あいうえお"); // string
console.log(typeof 1234); // number
console.log(typeof null); // object （なぜ？！？！）
console.log(typeof undefined); // undefined
console.log(typeof Symbol("シンボル"));// symbol
console.log(typeof 9007199254740992n); // bigint
console.log(typeof ["hoge", "fuga"]); // object （なぜ？！？！）
console.log(typeof { "key": "value" }); // object
console.log(typeof function() {}); // function
console.log(typeof(new Date())); // object （なぜ？！？！）
console.log(typeof(new Array())); // object （なぜ？！？！）

typeofでは厳密な判定が出来ない問題

判定結果を見ると、nullや配列やnewした際にobjectとして判定されてしまう。。。。
これでは細かなオブジェクト型の判定はできなく、配列/null/日付等の区別もできない

ちなみに、typeof nullがobjectと判定されてしまうのは、歴史的経緯のある仕様のバグ¹らしい（初めて知った）

Object.prototype.toString.call() を使って厳格な型判定をする

const toString = Object.prototype.toString;

console.log(toString.call(true)); // [object Boolean]
console.log(toString.call("あいうえお")); // [object String]
console.log(toString.call(1234)); // [object Number]
console.log(toString.call(undefined)); // [object Undefined]
console.log(toString.call(Symbol("シンボル"))); // [object Symbol]
console.log(toString.call(9007199254740992n)); // [object BigInt]
console.log(toString.call(["hoge", "fuga"])); // [object Array]
console.log(toString.call({ "key": "value" })); // [object Object]
console.log(toString.call(function() {})); // [object Function]
console.log(toString.call(new Date())); // [object Date]
console.log(toString.call(new Array())); // [object Array]

---

1. JavaScriptが最初にNetscapeで実装された際にtypeof null === "object"となるバグがありました。このバグを修正するとすでにこの挙動に依存しているコードが壊れるため、修正が見送られ現在の挙動が仕様となりました。 詳しくは https://2ality.com/2013/10/typeof-null.html 参照。 ↩

Composition APIとは、

Composition APIとは、2020年09月18に正式リリースされた、Vue 3に追加された目玉機能です。

Composition APIはコンポーネントを構築するための新しい手法です。
Vueが抱えていた以下の課題を解決するためのものです。

• TypeScriptのサポート
• ロジックの再利用の難しさ
• アプリケーションが巨大になると、コードの把握が難しくなる

Vue CLIでVue 3を導入する

早速、Vue CLIでVue 3を使っていきましょう。
まずは、最新のVue CLIをインストールします。

yarn global add @vue/cli@next
# OR
npm install -g @vue/cli@next

vue -V
@vue/cli 4.5.4

次に、いつも通りプロジェクトを作成します。
Vue 3が選べるようになっています。

vue create vue3-project

Vue CLI v4.5.4

? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features 

今回は、Manyally select featuresから選択します。

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

プロジェクトの作成が完了したら、早速起動してみましょう。

cd vue3-project
npm run serve

TODOアプリの作成を例にして、Composition APIを使っていきましょう。

コンポーネントの例

まずは、Composition APIで作成されたコンポーネントの全体像を見ていきましょう。
次のように、以前の元とは大きく変わっていることがわかります。

// MyTodo.vue
<template>
  <todo-list
    v-for="todo in sortTodo"
    :todo="todo"
    :key="todo.id"
    @toggle="toggleTodo"
    @remove="removeTodo"
  />
  <add-todo
    @add="addTodo"
  />
</template>

<script lang="ts">
import { computed, defineComponent, reactive, watchEffect, onMounted } from 'vue'
import TodoList from '@/components/TodoList.vue'
import AddTodo from '@/components/AddTodo.vue'
import { fetchTodo } from '@/api'
import { Todo } from '@/types/todo'
import { v4 as uuid } from 'uuid'

interface State {
  todos: Todo[];
}

export default defineComponent({
  components: {
    TodoList,
    AddTodo
  },
  setup () {
    const state = reactive<State>({
      todos: []
    })

    onMounted(async () => {
      state.todos = await fetchTodo()
    })

    const sortTodo = computed(() => state.todos.sort((a, b) => {
      return b.createdAt.getTime() - a.createdAt.getTime()
    }))

    const addTodo = (title: string) => {
      state.todos = [...state.todos, {
        id: uuid(),
        title,
        done: false,
        createdAt: new Date()
      }]
    }

    const removeTodo = (id: string) => {
      state.todos = state.todos.filter(todo => todo.id !== id)
    }

    const toggleTodo = (id: string) => {
      const todo = state.todos.find(todo => todo.id === id)
      if (!todo) return
      todo.done = !todo.done
    }

    watchEffect(() => console.log(state.todos))

    return {
      sortTodo,
      addTodo,
      removeTodo,
      toggleTodo
    }
  }
})
</script>

// TodoList.vue
<template>
  <div>
    <span>{{ todo.title }}</span>
    <input type="checkbox" value="todo.done" @change="toggle" />
  </div>
  <div>
    {{ date }}
  </div>
  <div>
    <button @click="remove">削除</button>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import { Todo } from '@/types/todo'

export default defineComponent({
  props: {
    todo: {
      type: Object as PropType<Todo>
    }
  },
  emits: ['toggle', 'remove'],
  setup (props, context) {
    const date = computed(() => {
      if (!props.todo) return
      const { createdAt } = props.todo
      return `${createdAt.getFullYear()}/${createdAt.getMonth() + 1}/${createdAt.getDate()}`
    })

    const toggle = () => {
      context.emit('toggle', props.todo!.id)
    }

    const remove = () => {
      context.emit('remove', props.todo!.id)
    }

    return {
      date,
      toggle,
      remove
    }
  }
})
</script>

// addTodo
<template>
  <input type="text" v-model="state.inputValue" />
  <button @click="onClick" :disabled="state.hasError">追加</button>
  <p v-if="state.hasError" class="error">タイトルが長すぎ！</p>
</template>

<script lang="ts">
import { defineComponent, reactive, watchEffect } from 'vue'

interface State {
  inputValue: string;
  hasError: boolean;
}
export default defineComponent({
  emits: ['add'],
  setup (_, context) {
    const state = reactive<State>({
      inputValue: '',
      hasError: false
    })

    const onClick = () => {
      context.emit('add', state.inputValue)
      state.inputValue = ''
    }

    watchEffect(() => {
      if (state.inputValue.length > 10) {
        state.hasError = true
      } else {
        state.hasError = false
      }
    })

    return {
      state,
      onClick
    }
  }
})
</script>

<style scoped>
.error {
  color: red;
}
</style>

以前のような構造（これをOptions APIと呼びます）と異なり、date・methods・computed・ライフサイクルメソッドなどの区別がなくなり、全てがsetupメソッドの中に記述されています。一方で、componentsやpropsの記述は以前と変わりありません。

全てがsetupメソッド内に記述された結果、他のプロパティにアクセスする際にthisが不要になりました。以前までのVueではこのthisの制約によりアロー関数で記述することが敬遠されていたのですが、Composition APIではアロー関数により記述が可能になりました。

setupメソッド内のデータは、returnされたものだけがtemplate内で使用できるようになります。
そのため、例えばMyTodo.vueのsetupメソッドではstateが宣言されていますがreturnされていないためこれを使用することはできません。stateの値は直接使用せずに、conputedを通して使用するという意図を伝えることができます。

それでは、もう少し具体的にここのプロパティを見ていきましょう。

コンポーネントの宣言

Vue 3では、今までのVue.extendの宣言に変わり、defineComponentが使われます。これにより型推論が効くようになります。JavaScriptで記述する場合には必要ありません。

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({})
</script>

リアクティブなデータ　reactive または ref

reactiveまたはrefは以前のdataに相当するものです。どちらもジェネリクスで型定義を渡すことができます。

reactive

個人的に、reactiveのほうが以前のdataに近い印象を受けます。reactiveは1つのオブジェクトとしてデータを定義します。

interface State {
  inputValue: string;
  hasError: boolean;
}
const state = reactive<State>({
  inputValue: '',
  hasError: false
})

reactiveの値にはオブジェクト形式でアクセスします。

state.inputValue
state.hasError

分割代入すると、リアクティブにならない

reactiveを使用する注意点として、分割代入した値に対してはリアクティブ性が失われるという点があります。

AddTodoコンポーネントを例に試してみましょう。

<template>
  <input type="text" v-model="inputValue" />
  <button @click="onClick" :disabled="hasError">追加</button>
  <p v-if="hasError" class="error">タイトルが長すぎ！</p>
</template>

<script lang="ts">
import { defineComponent, reactive, watchEffect } from 'vue'

interface State {
  inputValue: string;
  hasError: boolean;
}
export default defineComponent({
  emits: ['add'],
  setup (_, context) {
    // 分割代入でここのプロパティを受け取るように変更
    let { inputValue, hasError } = reactive<State>({
      inputValue: '',
      hasError: false
    })

    const onClick = () => {
      context.emit('add', inputValue)
      inputValue = ''
    }

    watchEffect(() => {
      if (inputValue.length > 10) {
        hasError = true
      } else {
        hasError = false
      }
    })

    return {
      inputValue,
      hasError,
      onClick
    }
  }
})
</script>

<style scoped>
.error {
  color: red;
}
</style>

リアクティブ性が失われていることがわかります。

このような状況に対する解決策として、toRefs関数が用意されています。toRefsはリアクティブオブジェクトをプレーンオブジェクトに変換します。結果のオブジェクトの各プロパティは、元のオブジェクトの対応するプロパティの参照です。

<template>
  <input type="text" v-model="inputValue" />
  <button @click="onClick" :disabled="hasError">追加</button>
  <p v-if="hasError" class="error">タイトルが長すぎ！</p>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watchEffect } from 'vue'

interface State {
  inputValue: string;
  hasError: boolean;
}
export default defineComponent({
  emits: ['add'],
  setup (_, context) {
    const { inputValue, hasError } = toRefs(reactive<State>({
      inputValue: '',
      hasError: false
    }))

    const onClick = () => {
      context.emit('add', inputValue)
      inputValue.value = ''
    }

    watchEffect(() => {
      if (inputValue.value.length > 10) {
        hasError.value = true
      } else {
        hasError.value = false
      }
    })

    return {
      inputValue,
      hasError,
      onClick
    }
  }
})
</script>

<style scoped>
.error {
  color: red;
}
</style>

toRefsを適用すると、後述するrefで宣言されたものと同等の状態になります。そのため、template以外の場所からアクセスする際には、inputValue.valueのように.valueの値に対してアクセスします。

ref

リアクティブなデータを宣言するもう一つの方法はrefを使用することです。
refはそれぞれの変数として宣言されます。

let inputValue = ref('')
let hasError = ref(false)

refで宣言された値にtemplate以外の場所からアクセスする場合、.valueからアクセスします。

inputValue.value
hasError.value

reactiveとrefどっちを使えばいい？

このように、Composition APIではリアクティブなデータの宣言にreactiveとrefどちらも使用することができます。しかし、どちらを使用するかのベストプラクティスはまだ存在していないようです。

Ref vs Reactive

Composition APIを効率的に理解するためには、どちらの方法を理解しておくべきだと述べられています。

メソッド

以前のmethodsに相当するものは、通常のJavaScriptの関数の宣言にになります。

const addTodo = (title: string) => {
  state.todos = [...state.todos, {
    id: uuid(),
    title,
    done: false,
    createdAt: new Date()
  }]
}

const removeTodo = (id: string) => {
  state.todos = state.todos.filter(todo => todo.id !== id)
}

const toggleTodo = (id: string) => {
  const todo = state.todos.find(todo => todo.id === id)
  if (!todo) return
  todo.done = !todo.done
}

メソッドの宣言も同様に、returnしていないものはtemplate内で使用できません。

computed

computedは関数をcomputedで包むことで実装できます。

const sortTodo = computed(() => state.todos.sort((a, b) => {
  return b.createdAt.getTime() - a.createdAt.getTime()
}))

何度も言うように、computedの値もreturnする必要があります。

データの監視 watch watchEffect

watchもdataのようにwatchとwatchEffect2つの方法が使えるようになりました。
以前のような使い方と近いのはwatchです。

watch

watchは第一に引数に監視する対象のリアクティブな値を指定します。リアクティブな値とは、ref、reactive、computedで宣言された値を指します。

第二引数に実行するメソッドを渡します。

watch(state.todos, (oldTodo: Todo, newTodo: Todo) => {
  console.log(oldTodo, newTodo)
})

監視対象が複数ある場合、配列で指定します。

watch([state.inputValue, state.hasError], ([oldInputValue, newInputValue], [oldHasError, newHasError]) => {
})

watchEffect

watchEffectは、監視対象を指定しません。computedのように、関数内の値が変更されたときに実行されます。

watchEffect(() => console.log(state.todos))

基本的に、watchEffectよりもwatchのほうが機能が優れているようで、例えばwatchEffectと比べてwatchは次のような機能を提供します。

• 副作用の遅延実行。
• 監視対象の値を渡すので、意図が明確。
• 監視状態の以前の値と現在の値の両方にアクセスできる。

ライフサイクルメソッド

Composition APIのライフサイクルメソッドはonというプレフィックスがつけられました。

onMounted(async () => {
  state.todos = await fetchTodo()
})

Options APIとの対応は以下の通りです。

Options API	Conposition API
beforeCreate	use setup()
created	use setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
activated	onActivated
deactivated	onDeactivated
errorCaptured	onErrorCaptured

beforeCrate、crateに相当するフックはなくなり、setup()で記述するようになりました。
さらに、以下のライフサイクルフックが追加されました。

• onRenderTracked
• onRenderTriggered

props

propsををsetupメソッド内で使用するために、setupメソッドは引数を受け取ります。第一引数はpropsそのものです。

export default defineComponent({
  props: {
    todo: {
      type: Object as PropType<Todo>
    }
  },
  setup (props, context) {
    const date = computed(() => {
      if (!props.todo) return
      const { createdAt } = props.todo
      return `${createdAt.getFullYear()}/${createdAt.getMonth() + 1}/${createdAt.getDate()}`
    })

    return {
        date
    }
})

propsプロパティは今まで通りです。
propsプロパティに型定義がされている場合、そのとおりに推論されます。

注意点として、以下のようにpropsを分割して受け取ると、リアクティブ性が失われてしまいます。

setup({ todo }, context) {}

emit

setupメソッドの第二引数には、contextオブジェクトを受け取ります。contextオブジェクトからはOptions APIでthisからアクセスできた一部のプロパティを提供します。

context.attr
context.slots
context.emit

どのプロパティも、先頭の$が外れていることに注意してください。
propsは使用せずに、contextオブジェクトだけ使用したいときには、第一引数を_にして受け取らないようにします。

setup(_, context) {}

contextオブジェクトの中にemitが含まれているので、以前のように使用することができます。

export default defineComponent({
  emits: ['add'],
  setup (_, context) {
    const state = reactive<State>({
      inputValue: '',
      hasError: false
    })

    const onClick = () => {
      context.emit('add', state.inputValue)
      state.inputValue = ''
    }
    return {
      state,
      onClick
    }
  }
})

さらに注目すべき変更点として、Vue 3からはemitsオブジェクトとしてそのコンポーネントがemitする可能性があるイベントを配列として宣言するようになりました。

必須のオプションではないですが、コードを自己文章化することができ、推論もされるようになります。

モジュールに分割する

ここまでただ単にComposition APIに書き換えてみただけなので、結局コンポーネント内で宣言されており、またstateの値に依存しているのであまり恩恵を感じないように思えます。

ここからは、Composition APIの真骨頂であるコードの分割にコマを進めていきましょう。
Composition APIではdate、computedなので区切りがなくなったことで関心ことの分離が可能になりました。

分割した関数は、src/composables配下に配置していきます。
それでは、まずはsortTodoを切り出してみましょう。

実装は次のようになります。

// src/composable/use-sort-todo.ts
import { computed, isRef, Ref } from 'vue'
import { Todo } from '@/types/todo'

export default (todos: Ref<Todo[]>) => {
  const sortTodo = computed(() => todos.value.sort((a, b) => {
    return b.createdAt.getTime() - a.createdAt.getTime()
  }))

  return {
    sortTodo
  }
}

元々state.todoでアクセスしていた箇所を引数で受け取るようにしました。引数の型Refとしています。ロジック部分に変わりはありません。

使用側では以下のように使います。

import { toRefs, defineComponent, reactive, watchEffect, onMounted } from 'vue'
import useSortTodo from '@/composables/use-sort-todo'

interface State {
  todos: Todo[];
}

export default defineComponent({
  setup () {
    const state = reactive<State>({
      todos: []
    })

    const { todos } = toRefs(state)

    const { sortTodo } = useSortTodo(todos)

    // 中略

    return {
      sortTodo,
      addTodo,
      removeTodo,
      toggleTodo
    }
  }
})

これで、sortTodoはVueオブジェクトに依存することなく、再利用可能な関数として取り出すことができました。

その他のメソッドも切り出してみると、だいぶコンポーネントがスッキリしました。

<template>
  <todo-list
    v-for="todo in sortTodo"
    :todo="todo"
    :key="todo.id"
    @toggle="toggleTodo"
    @remove="removeTodo"
  />
  <add-todo
    @add="addTodo"
  />
</template>

<script lang="ts">
import { defineComponent, watchEffect } from 'vue'
import TodoList from '@/components/TodoList.vue'
import AddTodo from '@/components/AddTodo.vue'
import useTodos from '@/composables/use-todos'
import useSortTodo from '@/composables/use-sort-todo'
import useActionTodo from '@/composables/use-action-todo'

export default defineComponent({
  components: {
    TodoList,
    AddTodo
  },
  setup () {
    const { todos } = useTodos()
    const { sortTodo } = useSortTodo(todos)
    const { addTodo, removeTodo, toggleTodo } = useActionTodo(todos)

    watchEffect(() => console.log(todos.value))

    return {
      sortTodo,
      addTodo,
      removeTodo,
      toggleTodo
    }
  }
})
</script>

変更はこちらのレポジトリから参照できます。

https://github.com/azukiazusa1/vue3-project

参考

Vue Composition API
Vue3への移行は可能？Vue2のコードをComposition APIで書き換えてみた
Vue.js 3.0で搭載される Composition APIをリリースに先駆けて試してみた
Vue 3 に向けて Composition API を導入した話
Vue 2.xのOptions APIからVue 3.0のComposition APIへの移行で知っておくと便利なTips
Vue3リリース直前！導入されるcomposition APIを使ってみよう

はじめに

今回は、Javaアプリケーション内でJavaScriptを使う方法を実践してみます。
JSPの中でJavaScriptを実践知る方法とJavaファイルの中で実践する方法の二つがあります。

開発環境

eclipse
tomcat
java

JSPファイルでJSを実行

IndexServlet.java
index.jsp
main.js
を作成していきます。

このような階層となっています。

servlet.IndexServlet.java

package servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class IndexServlet
 */
@WebServlet("/IndexServlet")
public class IndexServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public IndexServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        response.getWriter().append("Served at: ").append(request.getContextPath());
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

サーブレットはノータッチでOKです。（あくまでもJSPでJSを実行することが目的なので）

index.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<style>
.box1 {
    width: 200px;
    height: 200px;
    background-color: #ccffcc;
}
.box2 {
  width: 200px;
  height: 200px;
  background-color: #ddd;
}
</style>
<body>
    <h1>JSPでのJS実行確認</h1>
    <div class="box1">box1</div>

    <div class="box2">box2</div>

    <form action="IndexServlet" method="post">
      ユーザID：<input type="text" name="user_id" id="user_id">
      パスワード：<input type="password" name="pass" id="pass">
      <input type="submit" value="ログイン" id="btn">
    </form>
  <input type="button" value="パスワードをみる" id="passshow">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="main.js"></script>
</body>
</html>

・クリックすると色が変わるボックス
・マウスホバーで色が変わるボックス
・ログインフォームのバリデーション
の三つを実装していきます。

main.js

/* ---------クリックした時の処理---------*/
$('.box1').on('click', (e) => {
    $(e.target).css({'background-color': 'skyblue' });
});
/*  ------マウスをホバーした時の処理----------*/
const onMouseenter = (e) => {
  $(e.target).css({
    'background-color': '#ff9999',
  });
};
const onMouseleave = (e) => {
  $(e.target).css({
    'background-color': '#dddddd',
  });
};
$('.box2')
  .on('mouseenter', onMouseenter)
  .on('mouseleave', onMouseleave);
/*-------- パスワードを見れるようにする--------------*/
$('#passshow').on('click', () => {
  $('#pass').attr('type', 'text');
});
/*----------ログイン時にバリデーションを設定する(空欄だった場合弾く)----------- */
$('#btn').on('click', (e) => {
  const id = $('#user_id').val();
  const pass = $('#pass').val();
  if(!id){
    e.preventDefault();
    console.log(id);
    alert('IDが空欄です');
  }
  if(!pass){
    e.preventDefault();
    console.log(pass);
    alert('パスワードが空欄です');
  }
})

以上のようにJSを実装することができた。
（HTMLの時と全く同じように実装することができた。）

JavaファイルでJSを実行する

次に、JavaファイルのなかでJSを実行する方法の一つを紹介する。
解説は全てコード内にあるのでみていただければ。。。

下記のコードは、オラクルのJavaドキュメントガイドの下記のページを解説した物になります。
https://docs.oracle.com/javase/jp/8/docs/technotes/guides/scripting/prog_guide/api.html

test.java

import java.io.File;

import javax.script.Invocable;
import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;

public class test {

    public static void main(String[] args) throws Exception{
        //ScripteEnginManagerインスタンスを作成
        ScriptEngineManager factory = new ScriptEngineManager();
        //ScripteEngineManagerインスタンスのgetEngineByNameメソッドでJSのスクリプトエンジンを指定
        ScriptEngine engine = factory.getEngineByName("JavaScript");

        //JSエンジンの活用---------------------------------
        //コンソールに表示・スクリプトをJS文として評価
        engine.eval("print('Hello World')");

    //文字ファイルを読み込むためのクラスjava.io.FileReaderを使うことでJSファイルごと実行できる
        //同じパッケージ同じ階層にある時
        File file1 = new File("src/test.js");
        engine.eval(new java.io.FileReader(file1));
        //srcと同じ階層のresourcesフォルダにある時
        File file2 = new File("resources/test.js");
        engine.eval(new java.io.FileReader(file2));

        //put（キー名, ソースコード）でキー名にソースコードを保存できる
        engine.put("file", file1);
        //getAbsolutePathで絶対パスを取得する・スクリプトをJS文として評価
        engine.eval("print(file.getAbsolutePath())");

        //変数に関数などを代入可能
        String script1 = "function helle(name) { print('Hello' + name);}";
        //変数名で呼び出し(engineに保存されている)・スクリプトをJS文として評価
        engine.eval(script1);
        //engineに保存されている関数やメソッドを呼び出す。→関数などの実行ができる　＊invocable 呼び出し可能という意味
        Invocable inv1 = (Invocable) engine;
        //今回は関数なのでinvokeFunction("呼び出される関数名", "引数")で実行できる
        inv1.invokeFunction("helle", "太郎");

        //"obj"というオブジェクトを作成して、"obj"オブジェクトのメソッドも定義
        String script2 = "var obj = new Object(); "
                + "obj.goodbye = function(name){print('Goodbye' + name + 'さん');}";
        //engineに保存・スクリプトをJS文として評価
        engine.eval(script2);
        //engineを呼び出し可能にする
        Invocable inv2 = (Invocable) engine;
        //呼び出したいメソッドを持つオブジェクトを取得する（扱えるようにする）
        Object obj1 = engine.get("obj");
        //今回はメソッドなので、invokeMethod(オブジェクト名, "メソッド名", "引数")で実行
        inv2.invokeMethod(obj1, "goodbye", "次郎");

    //Runnableインターフェースのメソッドとしてスクリプト関数を扱うことができる・グローバルに使えるようになる
        //引数の無い関数生成
        String script3 = "function run() { print('java.lang.Runnableインターフェースの呼び出し'); }";
        //スクリプトをJS文として評価・呼び出し可能状態にする
        engine.eval(script3);
        Invocable inv3 = (Invocable) engine;
        //Runnable（インターフェース）を取得し、スクリプト関数（inv3）をメソッドr1として実装
        Runnable r1 = inv3.getInterface(Runnable.class);
        //Threadオブジェクト（Runnableインターフェースが実装されている）にメソッドr1を渡すし作成
        Thread th1 = new Thread(r1);
        //実行開始
        th1.start();


        //引数の無いメソッド生成
        String script4 = "var obj = new Object();"
                + "obj.run = function() {print('Runnableメソッドの呼び出し');}";
        //スクリプトとして評価
        engine.eval(script4);
        //objをオブジェクトとして扱えるようにする
        Object obj2 = engine.get("obj");
        //呼び出し可能にする
        Invocable inv4 = (Invocable) engine;
        //Runnable（インターフェース）を取得し、スクリプト関数（inv4）をメソッドr2として実装
        Runnable r2 = inv4.getInterface(obj2, Runnable.class);
        //Threadオブジェクト（Runnableインターフェースが実装されている）にメソッドr1を渡し作成
        Thread th2 = new Thread(r2);
        th2.start();

    }
}

最後に

今回紹介したようにJavaとJSを組み合わせることができれば、より動的なページが作れそうですね。

まるばつゲームの制作

3×3のマス目を作り、マスをクリックすると○と×を交互に表示できるようにします。

まず、body要素にonload属性を付与して、ブラウザがページを読み込んだときにマス目を画面に表示するように設定します。

<body onload="init()">
  <h2>⚪︎×ゲーム</h2>
  <table id="table"></table>
  <p>※ マスをクリックしてください。</p>
</body>

script要素内ではまず、変数countを定義します。初期値はfalseにします。

init関数内はtable要素に「createElement」メソッドで作成したtr要素を3つ追加します。tr要素には同じく「createElement」メソッドで作成したtd要素を3つ追加します。
「document.createElement("要素名")」で指定した要素を作成することができます。
「要素名.appendChild(要素名２)」で親要素（要素名）に子要素（要素名２）を追加することができます。
tdにはonclickプロパティでmark関数を代入します。これでtd要素であるマス目をクリックしたときにマス目に○や×を表示できるようにします。

  <script>
    let count = false;

    function init() {
      for(let r = 0; r < 3; r++) {
        let tr = document.createElement("tr");
        for(let d = 0; d < 3; d++) {
          let td = document.createElement("td");
          td.onclick = mark;
          tr.appendChild(td);
        }
        table.appendChild(tr);
      }
    }

mark関数には引数にeを指定します。マス目をクリックしたときのクリックしたtdのデータを取得することができます。
「let src = e.target;」で取得したデータを変数srcに代入します。
その後のif文は変数countがfalseのときは「src.textContent = "○";」でマス目に○が表示されるようにします。そしてcountにtrueを代入します。
elseの後はcountがfalseでないときはマス目に×を表示してcountにfalseを代入します。
countがfalseのときは○、trueのときは×を表示することを交互に行えるようにしています。

    function mark(e) {
      let src = e.target;
      if(count === false) {
        src.textContent = "⚪︎";
        count = true;
      } else {
        src.textContent = "×";
        count = false;
      }
    }
  </script>

以下のコードをコピーしてファイルに貼り付ければ試すことができます。

<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <title>marubatu</title>

  <style>
    table {
      border-collapse: collapse;
    }
    td {
      width: 100px;
      height: 100px;
      font-size: 60px;
      text-align: center;
      border: 1px solid black;
    }
  </style>

  <script>
    let count = false;

    function init() {
      for(let r = 0; r < 3; r++) {
        let tr = document.createElement("tr");
        for(let d = 0; d < 3; d++) {
          let td = document.createElement("td");
          td.onclick = mark;
          tr.appendChild(td);
        }
        table.appendChild(tr);
      }
    }

    function mark(e) {
      let src = e.target;
      if(count === false) {
        src.textContent = "⚪︎";
        count = true;
      } else {
        src.textContent = "×";
        count = false;
      }
    }
  </script>
</head>

<body onload="init()">
  <h2>⚪︎×ゲーム</h2>
  <table id="table"></table>
  <p>※ マスをクリックしてください。</p>
</body>
</html>