銀の弾丸

プログラミングに関して、いろいろ書き残していければと思っております。

C#のActionクラスとFuncクラスを理解する

f:id:takamints:20181112124832j:plain
photo credit: ARMLE Action ! via photopin (license)

C#でメソッドや関数を表す 2つのクラス Action と Func について説明します (全くの余談ですが、C言語的には関数ポインタ、JavaScript的にはFunctionオブジェクトに相当するものです)。

2つの違いは戻り値の有無。戻り値なしが Action で、戻り値ありが Func です。

どちらもジェネリックパラメータとして関数のパラメータリストを指定できるジェネリッククラスです。 ジェネリックパラメータを指定しない場合は引数無しの関数を表すことになります。

以降、それぞれの詳細な使い方について説明します。

※ この記事は、もともと「C#のラムダ式はAction・Funcと一緒に理解を深めるとヨロシイようで」で書いていた内容です。長ったらしいのでこちらに独立させました。

目次

Action クラス

ACTION
ACTION
posted with amazlet at 16.09.22
B’z
VERMILLION RECORDS(J)(M) (2007-12-05)
売り上げランキング: 22,294

Actionクラスは「戻り値のない処理を記述するためのクラス」です。

Actionだけなら引数もなし。

// 引数無しのActionをラムダ式で生成
Action action = () => {
    foo.bar();
};

引数が必要ならAction<引数の型リスト>を使用します。

例えば、

//引数を取るActionをラムダ式で生成
Action<string, int> action = (name, age) => {
    Console.WriteLine(string.Format(
        "{0} is {1} years old.", name, age));
};

てな感じです。

このように、インスタンスを作ること自体は難しいことではありませんが、誰かが作った既存のメソッドがActionクラスの引数を要求している場合、この逆の考え方、つまり、そのメソッドの定義を見て「何を与えればよいのか」をきちんと理解する必要がありますね。

覚えること ☞「Actionクラスは戻り値のない関数。ジェネリックパラメータは引数リストの型を表しています。」

Func<TResult>クラス

グレイト・ヒッツ
グレイト・ヒッツ
posted with amazlet at 16.09.22
T.レックス
インペリアルレコード (2005-05-25)
売り上げランキング: 3,577

Funcは戻り値があるメソッドを表します。戻り値がboolで、引数のないFuncは、以下のように記述します。

//戻り値がboolのFuncをラムダで生成
Func<bool> func = () => {
    return true;
};

引数が必要な場合は、Actionと同じくジェネリックパラメータで型を指定します。

//戻り値がboolで引数付きのFuncをラムダで生成
Func<string, int, bool> isAround50 = (name, age) =>
    Console.WriteLine(string.Format(
        "{0} is {1} years old.", name, age));
    if(45 <= age && age < 55) {
        return true;
    }
    return false;
};

これがたとえば、メソッドのパラメータだとしても、考え方は同じで、以下のように書くわけです。

Task<bool> task = new Task<bool>(() =>
{
    return execute.Invoke();
});
chainedTask._task.Start();

Lambda式は、ActionかFuncクラスのインスタンスを生成していると考えられます。 このため、Lambda式だけを見て、どちらの型なのか推測するクセをつけておくと、混乱が少なくなる気がします。 ようするにしっかり理解しておきましょうということですが。

上の例では、Task<bool>のコンストラクタの第一引数の型は Func<bool> だと推測できますね。

そのほか無駄話など

Func<void>ではダメなんですか?

個人的な好みとしてですが、戻り値の有無でクラスを分けずに、Func<void>を認めて、Actionクラスはなくてよいでしょと思っています。 しかし、そもそもジェネリックの型パラメータにvoidは無理なのかもしれませんね。 VBでもFunctionとSubに分かれているし、マイクロソフトさんは昔から分けたい派なのかと思っていたけど、言語的制約なのかもしれません。

mocha を使った npm のユニットテストをブラウザで動かす設定

f:id:takamints:20181110123153j:plain
photo credit: wuestenigel White Cup with Coffee Grains via photopin (license)

mochaとchaiを使ったnpmのユニットテストをブラウザで動かすための設定をご紹介。

mochaにはブラウザで動作させる機能が備わっていますが、テストスクリプト以外にHTMLも用意しなくてはならないので少し億劫なんですよね。

実際には、ほぼ定型のHTMLなのですが、結構情報が少なくて「これで決まり!」みたいなのがない感じ。 コンソールとブラウザでスクリプトを共有したい場合に、問題が出て途方に暮れたこともありました。

ところが最近、ゆる~く試行錯誤を繰り返した結果、自分なりのテンプレートみたいなのが出来上がりつつあるので、ここに書いておきますよっと。

テスト駆動開発
テスト駆動開発
posted with amazlet at 18.11.10
オーム社 (2017-11-13)
売り上げランキング: 7,425
目次

ブラウザでmochaのテストを行う為のHTML

以下はユニットテストブラウザーで動かすために必要なHTMLファイルです。

test/web-test.html

<!DOCTYPE html>
<html>
    <head>
        <title>npm run web-test</title>
        <link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
    </head>
<body>
<h1>npm run web-test</h1>

<div id="mocha"></div>

<!-- mocha の読み込みとセットアップ -->
<script src="../node_modules/mocha/mocha.js"></script>
<script>
    mocha.setup('bdd');
    mocha.setup('tdd');
</script>

<!-- テストスクリプトを読み込む -->
<script src="./web-test.js"></script>

<!-- テストの実行 -->
<script>
    localStorage.debug = "*"; //npm debug向けのデバッグログの設定。
    mocha.run();
</script>

</body>
</html>

mochaの公式ページに掲載されているHTMLファイル(→RUNNING MOCHA IN THE BROWSER - mocha)をもとにしており、npm の開発環境にインストール(npm install --save-dev mocha chai )されているモジュールを利用するように変更しています。

元ファイルでは mocha と chai の外部スクリプトCDNから読み込んでいますが、mocha は node_modules 以下のファイルを読み込むようにして、chai はJS側で取り込みます(理由は次項で)。

debug モジュールのすゝめ

必須ではありませんが、上の例では見やすいログを出力する debug モジュールの設定をしています。 ブラウザではF12ツールのコンソールに色がついて見やすくなります。 WebではlocalStorage.debugに、出力したいロガーの名前をカンマ区切りで指定しておきますが、上の例では "*" としていますから、すべてのログが表示されます(mochaもdebugを利用しています)。

ブラウザで動作するmochaのテストスクリプト

chai は テストスクリプトで require する。

前述のように、元ファイルでは chai をSCRIPTタグで読み込んでいますが、自分的にはコンソールから実行するものと同じように、テストスクリプトで取り込むようにしています。 こうしておくことで、コンソールで実行するテストスクリプトのうち Node.js特有の機能を使っていない物をブラウザでも実行できるようになるからです。

しかし、これによってテストスクリプトをバンドラーでコンパイルしなくてはなりません。 これについては後述しますが、設定なしの Parcel を使えば簡単です。

ユーザー操作を待つテストの書き方

テストの実行時に、ボタンのクリックなどの操作を待つ必要がある場合は、その操作で解決する非同期関数を用意し、テストの中から呼び出しますようにします。 この場合、mochaのテストのタイムアウトを無効にしておく必要があります。

以下の例は、ボタンがクリックされてからテストが実行されます。

例)ユーザー操作を待つテストスクリプト

"use strict";
const assert = require("chai").assert;

/**
 * ボタンを作って押されたら解決するPromiseを返す。
 * Promiseは30秒後にリジェクトされる。
 * @returns {Promise} Promiseを返す。
 */
const buttonClicked = (() => (new Promise( (resolve, reject) => {
    const button = document.createElement("BUTTON");
    button.innerHTML = "Click to go";
    button.addEventListener("click", () => resolve() );
    document.body.appendChild(button);
    setTimeout(() => {
        document.body.removeChild(button);
        reject(new Error("The user operation timeout"));
    }, 30000);
})));

//テストターゲット
const foo = () => "bar";

//ユニットテスト
describe("foo", () => {
    it("should be bar", async () => {//非同期関数とします
        await buttonClicked();         //ボタンが押されるまで待つ関数

        assert.equal( foo(), "bar" );

    }).timeout(0);  //タイムアウト無効
});
  • 待ち時間が30秒を越えるとエラーを投入するのでテストは失敗します。
  • クリックするためのボタンを動的に追加していますが、あらかじめHTMLに書いておいても構いません。

npmのscriptsを設定する

テストに限らず、何らかのコマンドの実行は npm の scripts を使うと便利です。 node_modules 以下にあるモジュールのコマンドはパスの指定をせずに使えますから。

ここでは一例として、npm run web-test でブラウザでのテストを実行するよう設定し、 npm test または npm run test で通常のコンソールでのテストを実行するようにしています。 この辺はお好みに応じて変更してください。

package.json(一部):

"scripts": {
    "test": "mocha",
    "web-test": "parcel test/web-test.html --open",
    ・・・
    },

Parcel のすゝめ

ブラウザでのテストは、Parcel だけで 「バンドル」 → 「Webサーバー起動」 →「 ページを開く」 までを一気にやっています。 Parcelめっちゃ便利です。ブラウザーでのテストのためだけに使っても良いかも?って思っています。 BrowserifyやWeb-Packでは、いろいろ細かな設定が必要になるはずです。

コンソールでブラウザ向けテストを除外する

細かなことですが、コンソールでもテストを行っている場合は、 ブラウザ特有の機能を使っているテストスクリプトを除外してやる必要があります。

これは、mocha.opt というファイルで行います。 以下の例では、testディレクトリ内のファイル名が'web-'で始まるファイルを除外しています。

test/mochar.opt

test/!(web-)*.js

リンク

あなたが正しくウェブページのカーソル形状を変更するには

f:id:takamints:20181101110252j:plain
photo credit: Maria Eklind Frankie & Benjys bookstore and theatre Reggiano via photopin (license)

暑苦しいタイトルで失礼します。

ここにはウェブページのマウスカーソルの形状を変更するにはどうすればよいかってことを冷静に書いています。

知ってる人にとっては「何を今さら」って感じだとおもいますが、しかし先日、知ってるつもりのジブンの目から、ウロコが3つほど落ちましたので書いておきます。

小ネタといえば小ネタです。

目次

ページ全体のカーソル形状を変更する

ページ全体でマウスカーソルの形状を「待ち状態」にしたいことがありますね。 勝手に手が動くぐらいの勢いで以下のようにしていましたし、ググってみてもこのように説明されてるページが多いです。

でも、これ厳密には不完全なんですよ。

document.body.style.cursor = "wait";

何がダメかって言うと、WEBページのコンテンツが短い場合です。

コンテンツが少ないと、画面の下のほうにカーソル形状が変化しない領域が残ってしまうのです。

BODY要素(=document.body)はブラウザ画面の全体に広がっているとは限らないということです。 スタイルシートがどうなってるかにもよりますけどね。

で、これを回避するのは実に簡単。BODYじゃなくてHTMLのスタイルを変更します。

document.body.parentElement.style.cursor = "wait";

document.bodyの親要素はHTMLです。document.documentElement もHTML要素を指すそうですが、ブラウザ間の実装に違いがあるかもしれないので注意が必要。

以下のボタンを押すとHTMLのカーソル形状を変化させます。

コントロールは親要素の形状を継承しないみたいです

下のフォームのボタンを押すとBODYのマウス形状をWaitカーソルに変えます(5秒後に元に戻ります)が、 各コントロールの上へカーソルを持って行っても形状は変化していません。 ChromeFirefoxではLABELのマウスも変化しません(Edgeでは変化しました)。





既定の形状に戻すのはdefaultではない

一時的に変化させたカーソル形状を元に戻す場合、default に設定しなおしていましたが、これでは全てが矢印になっていました。

ほとんどの要素の既定の形状は矢印ですが、そうでないのもありまして。 例えばテキストボックス(<input type="text"/>)は縦線みたいなのが既定の形状。

const foo = getElementById("foo");
foo.style.cursor = "wait";
(長めの処理)
foo.style.cursor = "default"; //← 全部矢印になっちゃいます

といっても、すべての要素の既定のカーソル形状を覚えておいて、それぞれ個別に元に戻すなんてナンセンス。

じゃ、どうするか。defaultじゃなくautoにすればよいのです。

const foo = getElementById("foo");
foo.style.cursor = "wait";
(長めの処理)
foo.style.cursor = "auto"; // ← 要素ごとの既定のカーソルに戻ります。

ちなみに、最近のブラウザでは initial でも元に戻っているようです。 これはHTML5で規定されているのかもしれませんが、IE11では効きませんから、やっぱり auto でよいみたいです。

default / initial / auto でそれぞれ意味が違うのでしょうから、ややこしいですね。