JavaScript/TypeScriptメモ

TypeScriptでESMで動くJavaScript製ライブラリ（remark-shortcodes）を使う

info@excelspeedup.com — Sun, 07 Aug 2022 00:00:00 GMT

TypeScriptでESMで動くJavaScript製ライブラリ（remark-shortcodes）を使う

TypeScriptで、remarkと、そのプラグインremark-shortcodesを使おうと思ったところハマったのでメモ。

経緯は飛ばして、結論だけを見たいときには、まとめをご覧ください。

経緯

JavaScriptのライブラリを読み込みたいが型定義ファイルがないのでエラー

まずは、次のような最小限のコードで動くかどうか実験。

src/index.ts

import { unified } from 'unified';
import parse from 'remark-parse';
import shortcodes from 'remark-shortcodes';

const markdown = `# title
Example paragraph

[[ testTag id="abc" ]]
`;

const test = () => {
  const tree = unified().use(parse).use(shortcodes).parse(markdown);

  console.log(tree);
};

test();

上記を入力すると、VS Codeで次のようなエラーが発生。

Could not find a declaration file for module 'remark-shortcodes'. 'workdir/node_modules/remark-shortcodes/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/remark-shortcodes` if it exists or add a new declaration (.d.ts) file containing `declare module 'remark-shortcodes';`

「.d.ts」でimport文があるとグローバル宣言ができずエラー

remark-shortcodesの型定義ファイルがないので、作成する必要がありそう。

いろいろなやり方があるようですが、今回は、「index.ts」と同じ階層に「index.d.ts」を作成してみることに決定。

そこで、下記のような型定義ファイルを作成。

src/index.d.ts

import { Plugin } from 'unified';
import { Root } from 'remark-parse/lib';

declare module 'remark-shortcodes' {
  const shortcodes: Plugin<string[][] | void[], string, Root>;
  export default shortcodes;
}

それでもエラーが消えず。

Could not find a declaration file for module 'remark-shortcodes'. 'workdir/node_modules/remark-shortcodes/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/remark-shortcodes` if it exists or add a new declaration (.d.ts) file containing `declare module 'remark-shortcodes';`

たしか、importを書くと、単にdeclare moduleでは、globalな定義にならないのが原因と推測。

型定義ファイルをVS Codeでは認識したのにts-nodeで認識できずにエラー

そこで、型定義ファイルの書き方を少し修正して、importをdeclare moduleの内側に移動。

src/index.d.ts

declare module 'remark-shortcodes' {
  const shortcodes: import('unified').Plugin<
    string[][] | void[],
    string,
    import('remark-parse/lib').Root
  >;
  export default shortcodes;
}

これで、VS Codeではエラーが消えました。

ところが、ts-nodeを実行すると、下記のエラーが発生。

package.json

  "scripts": {
    "ts-node": "ts-node",
  },

> npm run ts-node ./src/index.ts

src/index.ts:3:24 - error TS7016: Could not find a declaration file for module 'remark-shortcodes'. 'workdir/node_modules/remark-shortcodes/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/remark-shortcodes` if it exists or add a new declaration (.d.ts) file containing `declare module 'remark-shortcodes';`

3 import shortcodes from 'remark-shortcodes';
                         ~~~~~~~~~~~~~~~~~~~

ts-nodeで、型定義ファイルが読み込めていない様子。

ライブラリでES modulesを使用しているためエラー

いろいろ調べていくと、独立した型定義ファイルをts-nodeで読み込ませるには--filesオプションを付ければ良いらしい。

参考：https://github.com/TypeStrong/ts-node#files

そこで、これを設定して再実行。

package.json

  "scripts": {
    "ts-node": "ts-node --files",
  },

> npm run ts-node ./src/index.ts

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: workdir\node_modules\unified\index.js
require() of ES modules is not supported.
require() of workdir\node_modules\unified\index.js from workdir\lib\postmd_remark\index.ts is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.        
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from workdir\node_modules\unified\package.json.

たしかに、型定義エラーは消えましたが、今度はES modules is not supportedというエラーが発生。

手元の設定ではCommon JSを使う設定になっており、それが原因でエラーになっているっぽい。

参考：TypeScriptのESMでハマる

ES Modules化したら型定義ファイルが読み込めないエラーが復活

先ほどのブログを参考に、設定を変更。

そして、ts-nodeではなく、node --loader ts-node/esm ./src/index.tsで呼び出すと良いらしいということで、試してみる。

package.json

  "scripts": {
    "ts-node": "ts-node --files",
  },
  "type": "module", //追加

tsconfig.json

  "compilerOptions": {
    "module": "esnext",  // ← 元々"module": "commonjs", だったのを修正
  }

> node --loader ts-node/esm ./src/index.ts

src/index.ts:3:24 - error TS7016: Could not find a declaration file for module 'remark-shortcodes'. 'workdir/node_modules/remark-shortcodes/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/remark-shortcodes` if it exists or add a new declaration (.d.ts) file containing `declare module 'remark-shortcodes';`

3 import shortcodes from 'remark-shortcodes';
                         ~~~~~~~~~~~~~~~~~~~

また、最初の「型定義ファイルを読み込めない症状」が復活してしまいました・・・。

ts-nodeを起動して、ようやくエラーが消えた

型定義ファイルを読み込みつつ、ES Moduleとして実行することができないかts-nodeのドキュメントを探していたら、ts-nodeコマンドの代わりにts-node-esmコマンドを実行する方法を発見。

参考：github ts-node#esm

package.json

  "scripts": {
    "ts-node-esm": "ts-node-esm --files",
  },
  "type": "module", //追加

> npm run ts-node-esm ./src/index.ts

{
  type: 'root',
  children: [
    {
      type: 'heading',
      depth: 1,
      children: [Array],
      position: [Object]
    },
    { type: 'paragraph', children: [Array], position: [Object] },
    { type: 'paragraph', children: [Array], position: [Object] }
  ],
  position: {
    start: { line: 1, column: 1, offset: 0 },
    end: { line: 5, column: 1, offset: 50 }
  }
}

これで、ようやく動きました。

まとめ

型定義ファイルを読み込ませたい

テキトーな場所に「.d.ts」ファイルを作成し、ts-node起動時に--filesオプションを付ける

TypeScriptのコードを、ES Modulesで起動したい

package.json、tsconfig.jsonをES Modulesが動くように設定し、ts-node-esmコマンドを使う

最終的な設定

src/index.ts

import { unified } from 'unified';
import parse from 'remark-parse';
import shortcodes from 'remark-shortcodes';

const markdown = `# title
Example paragraph

[[ testTag id="abc" ]]
`;

const test = () => {
  const tree = unified().use(parse).use(shortcodes).parse(markdown);

  console.log(tree);
};

test();

src/index.d.ts

declare module 'remark-shortcodes' {
  const shortcodes: import('unified').Plugin<
    string[][] | void[],
    string,
    import('remark-parse/lib').Root
  >;
  export default shortcodes;
}

package.json

  "scripts": {
    "ts-node-esm": "ts-node-esm --files",
  },
  "type": "module",

tsconfig.json

  "compilerOptions": {
    "module": "esnext",  // ← 元々"module": "commonjs", だったのを修正
  }

あとは、下記のコマンドで、エラーなく実行できました。

npm run ts-node-esm ./src/index.ts

TypeScript Promiseをfp-tsのTask、TaskEitherに変換する

info@excelspeedup.com — Sun, 06 Jun 2021 00:00:00 GMT

Promiseをfp-tsのTaskEitherで表現する

JavaScript（TypeScript）のPromiseは、複数のPromiseを処理したい場合、書き方が少しわかりにくく感じます。

fp-tsのTaskEitherを使うことで、そのような処理をすっきりとわかりやすく書けるようになります。

そこで、最初に、fp-tsのTaskEitherの基本を解説していきます。

TaskEitherとは（概要）

TaskEitherというのは、fp-tsで準備されている型で、TaskとEitherを組み合わせてできたものです。

Promiseオブジェクトをfp-tsで扱うときには、ほとんどの場合にこの型を使うことになります。

TypeScriptの型定義で書くと、TaskEither<E, A>>、あるいは、Task<Either<E, A>> という型を持ちます。

この型の意味を理解するために、Task型、Either型について、簡単に説明をしていきます。

Taskとは？

Taskというのは、絶対に例外を返さないPromiseオブジェクトを表す型（interface）です。

定義は次のとおりです。

// fp-ts/lib/Task.d.ts

export interface Task<A> {
  (): Promise<A>
}

このように、**Taskとは「引数のない」「返り値がPromise」である「function」**のことをいいます。

以下、Taskのことを「Task」「Task型」「Taskオブジェクト」などと表記していきます。

Taskの生成

Taskの値を作るには、特殊な生成関数を使う必要はありません。

次のように、Promiseオブジェクトを関数でラップすればTaskオブジェクトを作ることができます。

import * as T from 'fp-ts/Task';

//Task型の値を生成する例1
//T.Task<number>型のオブジェクトが得られる
const task1 = () => Promise.resolve(10);

//Task型の値を生成する例2
//T.Task<number>型のオブジェクトが得られる
const task2 = () => {
  const p = new Promise<number>((resolve) => {
    //...
    //いろいろな処理 
    //...
    resolve(10);
  });
  return p;
};

なお、上記例の1行目にあるimport文は、このソースコードを実行するだけなら不要です。 T.Task< ... >型が、'fp-ts/Task'内で定義されていることを示すために敢えて入れています

Taskの実行結果を取り出す

Taskの実態は、Promiseオブジェクトを返り値とする関数です。

ですから、Taskの実行結果は、次のようにすると取り出すことができます。

Taskオブジェクトに「()」をつけてfunctionを実行。Promiseオブジェクトを取得する
awaitなど、Promiseオブジェクトの実行結果を取り出す

//Taskを実行する例1
const test1 = async () => {
  const task1 = () => Promise.resolve(10);

  //1. Promiseオブジェクトを取得  const promise1 = task1();
  //2. awaitして、実行結果「10」を取得  const ret1 = await promise1;};

//Taskを実行する例1（別の書き方）
const test1_2 = async () => {
  const task1 = () => Promise.resolve(10);

  //一気にPromiseの返り値「10」を取り出すこともできる  const ret1 = await task1();};

//Taskを実行する例2
const test2 = async () => {
  const task2 = () => {
    const p = new Promise<number>((resolve) => {
      //...
      //いろいろな処理
      //...
      resolve(10);
    });
    return p;
  };

  //一気にPromiseの返り値「10」を取り出す  const ret2 = await task2();};

TaskオブジェクトとPromiseオブジェクトの違い

Taskオブジェクトは、Promiseオブジェクトを関数でラップしたものです。

ですから、Taskオブジェクトを生成した時点では、Promiseオブジェクト内部の処理は実行されないことに注意しましょう。

const taskTest = async () => {
  console.log(`1.Task生成前`);  const task = () => {
    const p = new Promise<number>((resolve) => {
      console.log(`3.Promise内部`);      resolve(10);
    });
    return p;
  };
  console.log(`2.Task生成後`);
  const promise = task();
  console.log(`4.task実行後`);
  const ret = await promise;
  console.log(`5.返り値 ${ret}`);};

taskTest().catch(() => {
  console.log(`error`);
});

//↓ 実行結果
//1.Task生成前
//2.Task生成後
//3.Promise内部
//4.task実行後
//5.返り値 10

上の例を見ると、Promiseオブジェクト内部の処理が実行されるのは、task()を実行した瞬間であることがわかります。

Taskの問題点

冒頭で書いたとおり、Taskオブジェクトは、絶対に例外を返さないPromiseオブジェクトだけを扱うことができます。

とはいえ、現実には、このようなPromiseオブジェクトを扱うことはないので、ほとんど使い道がありません。

そこで、実際に使うときには、（次の項で説明する）Either型を返すTaskオブジェクトを作ることで、例外を返すPromiseオブジェクトも扱えるようにします。

Eitherとは？

Eitherとは、指定した2つの型の「どちらかの型の値」を持つ型です。

Either型は、次のようにLeft型とRight型のUnionとして定義されています。

// fp-ts/lib/Either.d.ts

export interface Left<E> {
  readonly _tag: 'Left'
  readonly left: E
}

export interface Right<A> {
  readonly _tag: 'Right'
  readonly right: A
}

export declare type Either<E, A> = Left<E> | Right<A>

Eitherを使うメリット、Either型の使い道

Either型を使えば、正常終了時はRight型、異常終了時はLeft型を返すことで、正常終了か異常終了かを返り値で判別できます。

Either型を使わない場合、関数で異常終了したことを示そうとする場合、次のような手段が一般的です。

null、undefinedを返す
例外を返す

それに比べ、Either型を使うことで、次のようなメリットがあります。

エラーの内容を返せる

null,undefinedを使うと、エラーの内容を返すことができません。

一方で、Either型を使えば、エラーの内容を返り値として返すことができます。

呼び出し側としては、エラーの内容がわかるのは大きなメリットです。

エラー時の型を明示できる

例外を返す場合、エラー時の型を明示できません。

一方で、Either型を使えば、エラー発生時の返り値の型を明示することができます。

ですから、エラー処理が書きやすくなります。

エラー判定を強制できる

例外を返す場合、エラー判定を強制することができません。実際、例外を返す関数を呼び出した場合、その関数の周りにtry～catch文を入れなくても構文エラーにはなりません。

一方で、Either型の場合、正常値を取り出すために、if文を使うなど異常値でないかどうかを切り分ける処理を書く必要があります。

その結果、異常時のロジックを書き洩らすリスクを減らすことができます。

Either型の使用例

実際の使用例を見てみましょう。

下記の例では、文字列を数値に変換するconvertToNumber関数を作っています。

import * as E from 'fp-ts/Either';

const convertToNumber = (numberString: string): E.Either<string, number> => {
  const num = Number(numberString);

  //変換に失敗した場合には、エラーの内容をLeft<string>型で返す
  if (isNaN(num)) return E.left(`${numberString}を数値に変換できませんした`);

  //変換に成功した場合には、変換結果をRight<number>型で返す
  return E.right(num);
};

const ret1 = convertToNumber(`123`);

// 変換が正しく行われるので、結果はRight<number>型
// { _tag: 'Right', right: 123 }
console.log(ret1);

if (E.isRight(ret1)) {
  console.log(`123 の変換結果: ${ret1.right}`);
} else {
  console.log(`123 の変換失敗: ${ret1.left}`);
}

const ret2 = convertToNumber(`abc`);

// 変換に失敗したので、結果はLeft<string>型
// { _tag: 'Left', left: 'abcを数値に変換できませんした' }
console.log(ret2);

if (E.isRight(ret2)) {
  console.log(`abc の変換結果: ${ret2.right}`);
} else {
  console.log(`abc の変換失敗: ${ret2.left}`);
}

//↓実行結果
// { _tag: 'Right', right: 123 }
// 123 の変換結果: 123
// { _tag: 'Left', left: 'abcを数値に変換できませんした' }
// abc の変換失敗: abcを数値に変換できませんした

convertToNumber関数の処理

convertToNumber関数では、返り値をEither<string,number>型にして、

数値への変換に「失敗」した場合には「エラーメッセージ」
数値への変換に「成功」した場合には「変換結果」

を返しています。

もう少し、細かく説明すると、E.right関数やE.left関数を使って

数値への変換に「失敗」した場合には、エラーメッセージをLeft<string>型で
数値への変換に「成功」した場合には、変換結果をRight<number>型で

返しています。

convertToNumber関数を抜粋

const convertToNumber = (numberString: string): E.Either<string, number> => {
  const num = Number(numberString);

  // 変換に「失敗」した場合には、エラーの内容をLeft<String>型で返す  if (isNaN(num)) return E.left(`${numberString}を数値に変換できませんした`);
  //変換に「成功」した場合には、変換結果をRight<number>型で返す  return E.right(num);};

このように、異常終了時の値はLeft型、正常終了時の値はRight型で返すことが一般的です。

ちなみに、Left型、Right型のLeft、Rightに深い意味はありません。「一方ともう片方」程度の意味しかありませんので、Left、Rightの語感は忘れてしまったほうがいいかもしれません。

ただ、Left型、Right型のどちらが正常値かわからなくなったときには、Rightには「正しい」という意味があることを手掛かりにして、「正常値はRight型」と覚えるといいかもしれません。

ひょっとしたら「正常＝Right」という発想が最初にあって、その後、Rightの対といえばLeftだろうということでLeft、Rightという呼称になったのかもしれません（が、定かではありません）。

Either型の返り値を受け取ったときの処理

Either型を受け取った側では、E.isRight関数を使って、返り値がRight型かどうかを判定しています。

Right型の場合には、rightプロパティに返り値の実態が格納
Left型の場合には、leftプロパティにエラーメッセージの実態が格納

されているので、それらを取り出していきます。

先ほどの例の13行目～23行目までは、convertToNumber関数で、正常に数値変換ができたパターンです。

正常に数値に変換できたので、変数ret1には、{ _tag: 'Right', right: 123 }というRight型のオブジェクトが格納されています。

そこで、まず、E.isRight関数を使って型の絞り込みを行いましょう。

その後、if文内でrightプロパティを参照すれば、変換結果を取得することができます。

正常時（right）の処理

const ret1 = convertToNumber(`123`);

// 変換が正しく行われるので、結果はRight<number>型// { _tag: 'Right', right: 123 }console.log(ret1);

if (E.isRight(ret1)) {
  console.log(`123 の変換結果: ${ret1.right}`);} else {
  console.log(`123 の変換失敗: ${ret1.left}`);
}

先ほどの例の25行目～35行目は異常パターンです。

数値変換ができなかったので、変数ret2には、{ _tag: 'Left', left: 'abcを数値に変換できませんした' }というLeft型のオブジェクトが格納されています。

処理自体は、先ほどと同じです。

E.isRight関数を使って、型の絞り込みを行ったうえでelse節内でleftプロパティを参照しましょう。

これで、エラーメッセージを取得することができます。

異常時（left）の処理

const ret2 = convertToNumber(`abc`);

// 変換に失敗したので、結果はLeft<string>型// { _tag: 'Left', left: 'abcを数値に変換できませんした' }console.log(ret2);

if (E.isRight(ret2)) {
  console.log(`abc の変換結果: ${ret2.right}`);
} else {
  console.log(`abc の変換失敗: ${ret2.left}`);}

fp-tsには、leftプロパティ・rightプロパティを直接操作しないでも済むような便利な関数も準備されています。

今回の目的とは関係が薄いので説明は省略しますが、興味があったら調べてみてください。

TaskとEitherを組み合わせて、すべてのPromiseをTask（TaskEither）に変換できるようにする

冒頭で書いたとおり、Taskオブジェクトは、絶対に例外を返さないPromiseオブジェクトだけを扱うことができます。

このままでは、例外が発生するPromiseオブジェクトを扱うことができません。

そこで、次のようにしてPromiseオブジェクトを変換していきます。

Promiseオブジェクトを、Taskオブジェクト（※例外が発生する可能性がある）に変換する
Taskオブジェクトを、返り値がEitherのTaskオブジェクト（例外は発生しない）に変換する

「2.」のステップでは、Taskオブジェクトの最終的な返り値をEither型にして、正常終了したときにはRight型、例外が発生したときにはLeft型で値を返すようにします。

このTaskとEitherを組み合わせた型のことをTaskEither型と呼びます。

こうすることで、例外が発生するPromiseを、Task型（TaskEither型）として扱えるようになります。

Promiseで例外（reject）が発生する例

次のconvertToNumberPromise関数を見てください。

Promiseで例外（reject）が発生する例

const convertToNumberPromise = (numberString: string): Promise<number> =>  new Promise((resolve, reject) => {    const num = Number(numberString);    //変換に失敗した場合にはreject    if (isNaN(num)) reject(`${numberString}を数値に変換できませんした`);    //変換に成功した場合には変換結果をresolve    return resolve(num);  });
const main = async () => {
  //正常終了
  const ret1 = await convertToNumberPromise('123');
  console.log(ret1);

  //例外発生
  const ret2 = await convertToNumberPromise('abc');
  console.log(ret2);
};

main().catch((e) => {
  console.log(e as string);
});

//↓実行結果
// 123
// abcを数値に変換できませんした

convertToNumberPromise関数は、先ほどのconvertToNumber関数と、処理はほぼ同じです。

ただ、返り値の返し方が違っています。

返り値はPromise<number>で、正常終了時にはnumber型の値をresolveし、異常時にはstring型の値をrejectしています。

例外が発生するPromiseをTaskに仮変換する

このconvertToNumberPromise関数を、まずはTaskに変換します。

PromiseをTaskに変換

import * as T from 'fp-ts/Task';

const convertToNumberPromise = (numberString: string): Promise<number> =>
  new Promise((resolve, reject) => {
    const num = Number(numberString);

    //変換に失敗した場合にはreject
    if (isNaN(num)) reject(`${numberString}を数値に変換できませんした`);

    //変換に成功した場合には変換結果をresolve
    return resolve(num);
  });

//convertToNumberPromise関数をTaskに変換するconst convertToNumberTask =  (numberString: string): T.Task<number> =>  () =>    convertToNumberPromise(numberString);
const main = async () => {
  //正常終了
  const ret1 = await convertToNumberTask('123')();  console.log(ret1);

  //例外発生
  const ret2 = await convertToNumberTask('abc')();  console.log(ret2);
};

main().catch((e) => {
  console.log(e);
});

//↓実行結果
// 123
// abcを数値に変換できませんした

新たにconvertToNumberTask関数（14～18行目）を作り、main関数内でconvertToNumberTask関数を呼び出す（22行目、26行目）ように書き換えました。

convertToNumberTask関数は、string型の引数を受け取ると、T.Task<number>型のオブジェクト() => convertToNumberPromise(numberString)を返します。

なお、22行目、26行目でTask型のオブジェクトを使うときには、末尾に「()」を付けることを忘れないようにしましょう。

Taskの返り値をEitherに変換してTaskEitherにする

さらに、Taskオブジェクトの返り値をEither型に変換して、TaskEitherオブジェクトを作ります。

TaskをTaskEitherに変換

import * as T from 'fp-ts/Task';
import * as E from 'fp-ts/Either';import * as TE from 'fp-ts/TaskEither';
const convertToNumberPromise = (numberString: string): Promise<number> =>
  new Promise((resolve, reject) => {
    const num = Number(numberString);

    //変換に失敗した場合にはreject
    if (isNaN(num)) reject(`${numberString}を数値に変換できませんした`);

    //変換に成功した場合には変換結果をresolve
    return resolve(num);
  });

const convertToNumberTask =
  (numberString: string): T.Task<number> =>
  () =>
    convertToNumberPromise(numberString);

//Taskオブジェクト（ConvertToNumberTask）をTaskEitherオブジェクトに変換するconst convertToNumberTaskEither = (  numberString: string): TE.TaskEither<string, number> =>  TE.tryCatch(convertToNumberTask(numberString), (r) => r as string);
const main = async () => {
  const ret1 = await convertToNumberTaskEither('123')();

  // 変換が正しく行われるので、結果はRight<number>型
  // { _tag: 'Right', right: 123 }
  console.log(ret1);

  if (E.isRight(ret1)) {
    console.log(`123 の変換結果: ${ret1.right}`);
  } else {
    console.log(`123 の変換失敗: ${ret1.left}`);
  }

  const ret2 = await convertToNumberTaskEither('abc')();

  // 変換に失敗したので、結果はLeft<string>型
  // { _tag: 'Left', left: 'abcを数値に変換できませんした' }
  console.log(ret2);

  if (E.isRight(ret2)) {
    console.log(`abc の変換結果: ${ret2.right}`);
  } else {
    console.log(`abc の変換失敗: ${ret2.left}`);
  }
};

main().catch((e) => {
  //Promiseで例外が発生しないので、このロジックは通らない  console.log(e);
});

//↓実行結果
// { _tag: 'Right', right: 123 }
// 123 の変換結果: 123
// { _tag: 'Left', left: 'abcを数値に変換できませんした' }
// abc の変換失敗: abcを数値に変換できませんした

21行目～25行目で、convertToNumberTask関数を、TaskEither型に変換しています。

convertToNumberTaskEither関数を抜粋

const convertToNumberTaskEither = (
  numberString: string
): TE.TaskEither<string, number> =>
  TE.tryCatch(convertToNumberTask(numberString), (r) => r as string);

TaskEither型への変換には、TaskEitherモジュールのtryCatch関数を使っています。

tryCatch関数の1つ目の引数にTask型オブジェクト、2つ目の引数に例外をcatchしたときの処理ロジック（≒Promise.catch節の中の処理ロジック）をを渡すと、TaskEither型のオブジェクトが得られます。

ロジック的には、次のものとまったく同じです。

convertToNumberTaskEitherを別ロジックで書いたもの

const convertToNumberTaskEither =
  (numberString: string): TE.TaskEither<string, number> =>
  () =>
    convertToNumberTask(numberString)()
      .then((v) => E.right(v))
      .catch((r) => E.left(r as string));

このようにして、TaskEitherオブジェクトを作って、TaskEitherの処理結果をawaitすれば、後続処理は、通常のEitherに対する処理とまったく同じです。

await語は、通常のEitherに対する処理とまったく同じ

  const ret1 = await convertToNumberTaskEither('123')();

  // 変換が正しく行われるので、結果はRight<number>型
  // { _tag: 'Right', right: 123 }
  console.log(ret1);

  if (E.isRight(ret1)) {
    console.log(`123 の変換結果: ${ret1.right}`);
  } else {
    console.log(`123 の変換失敗: ${ret1.left}`);
  }

これで、すべてのPromiseをTaskEitherに置き換えることができるようになりました。

TaskEitherを使うと、何が便利なのかは、次の記事で解説します。

TypeScript fp-tsのTaskEither＋sequenceでPromiseの順次処理、並列処理をシンプルに書く

info@excelspeedup.com — Sun, 06 Jun 2021 00:00:00 GMT

fp-tsのTaskEitherでPromiseの並列・直列処理をシンプルに

fp-tsのTaskEitherを使うことで、複数のPromiseについての処理をシンプルに書くことができます。

TaskEitherがわからない、というときには、下記の記事をご覧ください。

TypeScript Promiseをfp-tsのTask、TaskEitherに変換する

下準備：TaskEitherオブジェクトを準備する

まず、下記のようにTaskEither型のオブジェクトを4つ準備します。

import * as TE from 'fp-ts/TaskEither';

const sleep = (ms: number) =>
  new Promise<void>((resolve) => {
    setTimeout(() => {
      resolve();
    }, ms);
  });

const createTasks = () => {
  const te1 = TE.tryCatch(
    () =>
      sleep(1000).then(() => {
        console.log(`te1`);
        return 1;
      }),
    (e) => e as string[]
  );

  const te2 = TE.tryCatch(
    () =>
      sleep(2000).then(() => {
        console.log(`te2`);
        return `a`;
      }),
    (e) => e as string[]
  );

  const te3 = TE.tryCatch(
    () =>
      sleep(1500).then(() => {
        console.log(`te3`);
        return Promise.reject([`error te3-1`, `error te3-2`]);
      }),
    (e) => e as string[]
  );

  const te4 = TE.tryCatch(
    () =>
      sleep(2500).then(() => {
        console.log(`te4`);
        return Promise.reject([`error te4`]);
      }),
    (e) => e as string[]
  );
  return [te1, te2, te3, te4] as const;
};

「te1」～「te4」まで、次のような挙動の4つのTaskEitherオブジェクトを準備しています。

変数名	待ち時間	resolve	reject
te1	1000ms	1	-
te2	2000ms	'a'	-
te3	1500ms	-	['error te3-1', 'error te3-2']
te4	2500ms	-	['error te4']

たとえば、

「te1」は、1000ms後に「1」をresolveする
「te4」は、2500ms後に「['error te4']」をrejectする

ということです。

今回の4つのオブジェクトを見ると、

resolveされる値の型が違う（「te1」はnumber型、「te2」はstring型）
rejectされる値の型はstring[]型

ことに注意してください。

この4つのTaskEitherオブジェクトを様々な方法で実行してみます。

1. 並列実行-1つでもrejectされたら全体をrejectにする（Promise.all相当）

まず、この4つのTaskEitherオブジェクトを並列実行し、1つでもrejectされたら全体をreject扱いにします。

reject時には、一番最初にrejectされたときのエラーメッセージを表示させます。

要するに、Promise.allとまったく同じ挙動になるようにしてみます。

import * as TE from 'fp-ts/TaskEither';
import { sequenceT } from 'fp-ts/Apply';

const sleep = (ms: number) => { 
  // （略）
} 

const createTasks = () => {
  // （略）
  return [te1, te2, te3, te4] as const;
};

const test1 = async () => {
  const [te1, te2, te3, te4] = createTasks();

  const ret = await sequenceT(TE.ApplyPar)(te1, te2, te3, te4)();  return ret;
};

test1()
  .then((v) => {
    console.log(v);
  })
  .catch(() => {
    console.log(`error`);
  });

//↓実行結果
//te1
//te3
//te2
//te4
//{ _tag: 'Left', left: [ 'error te3-1', 'error te3-2' ] }

sequenceT(TE.ApplyPar)で、複数のTaskEitherオブジェクトから、並列実行をするTaskEitherオブジェクトを作る関数が得られます。

そこで、sequenceT(TE.ApplyPar)(te1, te2, te3, te4)と、並列実行したいTaskEitherを引数で渡すと、並列実行用のTaskEitherオブジェクトができあがります。

あとは、末尾に「()」を付けることで、指定したTaskEitherが並列に実行されます。

その結果、待ち時間の少ない順（「te1」→「te3」→「te2」→「te4」）に実行が完了します。

今回は、「te3」と「te4」がrejectされますので、そのうち最初にrejectされた「te3」のエラーメッセージがLeft<string[]>型の値として得られます。

（参考）全TaskEitherがresolveされた場合

全TaskEitherがresolveされた場合には、Promise.allと同様に、実行結果が配列で得られます。

たとえば、次のように「te1」「te2」だけを並列実行してみます。

すると、待ち時間の少ない順（「te1」→「te2」）の順に実行が完了し、「te1」「te2」の実行結果がRight<[number, string]>型の値として得られます。

import * as TE from 'fp-ts/TaskEither';
import { sequenceT } from 'fp-ts/Apply';

const sleep = (ms: number) => { 
  // （略）
} 

const createTasks = () => {
  // （略）
  return [te1, te2, te3, te4] as const;
};

const test1_2 = async () => {
  const [te1, te2] = createTasks();
  const ret = await sequenceT(TE.ApplyPar)(te1, te2)();  return ret;
};

test1_2()
  .then((v) => {
    console.log(v);
  })
  .catch(() => {
    console.log(`error`);
  });

//↓実行結果
//te1
//te2
//{ _tag: 'Right', right: [ 1, 'a' ] }

2. 直列実行-1つでもrejectされたら全体をrejectにする

今度は、「te1」～「te4」までの4つのTaskEitherオブジェクトを直列実行し、1つでもrejectされたら全体をreject扱いにします。

reject時には、一番最初にrejectされたときのエラーメッセージを表示させます。

import * as TE from 'fp-ts/TaskEither';
import { sequenceT } from 'fp-ts/Apply';

const sleep = (ms: number) => { 
  // （略）
} 

const createTasks = () => {
  // （略）
  return [te1, te2, te3, te4] as const;
};

const test2 = async () => {
  const [te1, te2, te3, te4] = createTasks();
  const ret = await sequenceT(TE.ApplySeq)(te1, te2, te3, te4)();  return ret;
};

test2()
  .then((v) => {
    console.log(v);
  })
  .catch(() => {
    console.log(`error`);
  });

//↓実行結果
//te1
//te2
//te3
//{ _tag: 'Left', left: [ 'error te3-1', 'error te3-2' ] }

sequenceT(TE.ApplySeq)で、複数のTaskEitherを直列実行する関数が得られます。

先ほどのパターンと比べると「TE.ApplyPar」が「TE.ApplySeq」に変わっただけで、そのほかはまったく同じです。

あとは、直列実行したいTaskEitherオブジェクトを引数で渡して、新たなTaskEitherオブジェクトを作成・実行することで、指定した順（「te1」→「te2」→「te3」）に直列実行されます。

そして、「te3」がrejectされたところで、そのエラーメッセージがLeft<string[]>型の値として得られます。

直列実行ですので、「te3」がrejectされたら、それ以降のTaskEitherオブジェクトは実行されません。

このように、TaskEitherを使うと、直列実行も簡単に記述することができます。

3. 並列実行-rejectされた全メッセージを統合して取得する

指定したすべてのTaskEitherを並列に実行します。

すべてresolveされたときの挙動は「1.」と同じですが、rejectされたものがあるときには、すべてのTaskEitherのエラーメッセージを統合して取得します。

import * as TE from 'fp-ts/TaskEither';
import { sequenceT } from 'fp-ts/Apply';
import * as T from 'fp-ts/Task';import { getSemigroup } from 'fp-ts/lib/Array';
const sleep = (ms: number) => { 
  // （略）
} 

const createTasks = () => {
  // （略）
  return [te1, te2, te3, te4] as const;
};

const test3 = async () => {
  const [te1, te2, te3, te4] = createTasks();

  const v = TE.getApplicativeTaskValidation(T.ApplyPar, getSemigroup<string>());  const ret = await sequenceT(v)(te1, te2, te3, te4)();
  return ret;
};

test3()
  .then((v) => {
    console.log(v);
  })
  .catch(() => {
    console.log(`error`);
  });

//↓実行結果
//te1
//te3
//te2
//te4
//{ _tag: 'Left', left: [ 'error te3-1', 'error te3-2', 'error te4' ] }

まず、下記の行で、sequenceTに渡す用のオブジェクトを作ります。

  const v = TE.getApplicativeTaskValidation(T.ApplyPar, getSemigroup<string>());

細かいところはわからないのですが、いわゆるValidationパターン（EitherのLeft側が複数ある場合にはArray.concatで結合していく）操作を定義しているのだろうと思います。

このオブジェクトが生成できたら、あとは、先ほどまでと手順は、ほとんど同じです。

sequenceT(v)で、複数のTaskEitherオブジェクトから、並列実行をしつつValidationパターンに従ってTaskEitherオブジェクトを作る関数が得られます。

そこで、sequenceT(v)(te1, te2, te3, te4)と、並列実行したいTaskEitherを引数で渡すと、並列実行（Validationパターン）用のTaskEitherオブジェクトができあがります。

あとは、末尾に「()」を付けることで、指定したTaskEitherが並列に実行されます。

その結果、待ち時間の少ない順（「te1」→「te3」→「te2」→「te4」）に実行が完了します。

今回は、「te3」と「te4」がrejectされますので、それらのエラーメッセージを統合したものが、Left<string[]>型の値として得られます。

4. 直列実行-rejectされた全メッセージを統合して取得する

パターンが読めてきたのではないかと思うのですが、「3.」のT.ApplyParをT.ApplySeqに変えることで、直列実行に切り替えることができます。

「3.」と、ほとんど同じですので、詳細は省略します。

5. 並列実行-すべてのTaskEitherの結果を個別に取得する（Promise.allSettled相当）

指定したすべてのTaskEitherを並列に実行します。

resolve、rejectに関わらず、すべてのTaskEitherの結果を個別に取得してみましょう。

import * as TE from 'fp-ts/TaskEither';
import { sequenceT } from 'fp-ts/Apply';
import * as T from 'fp-ts/Task';
const sleep = (ms: number) => { 
  // （略）
} 

const createTasks = () => {
  // （略）
  return [te1, te2, te3, te4] as const;
};

const test5 = async () => {
  const [te1, te2, te3, te4] = createTasks();

  const ret = await sequenceT(T.ApplyPar)(te1, te2, te3, te4)();  return ret;
};

test5()
  .then((v) => {
    console.log(v);
  })
  .catch(() => {
    console.log(`error`);
  });

//↓実行結果
//te1
//te3
//te2
//te4
//[
//  { _tag: 'Right', right: 1 },
//  { _tag: 'Right', right: 'a' },
//  { _tag: 'Left', left: [ 'error te3-1', 'error te3-2' ] },
//  { _tag: 'Left', left: [ 'error te4' ] }
//]

「1.」と、ほとんど同じですが、17行目のsequenceTの引数が、「1.」ではTE.ApplyParだったのが、今回はT.ApplyParに変わっています（TE→Tに変わっている）。

こうすることで、各TaskEitherの実行結果をEither型の配列の形で取得することができます。

6. 直列実行-すべてのTaskEitherの結果を個別に取得する

これも、今までとパターンは、まったく同じです。「5.」のT.ApplyParをT.ApplySeqに変えれば、直列実行に切り替えることができます。

7. 並列実行-オブジェクトのプロパティに格納されたTaskEitherをまとめて実行する

今まで「1.」～「6.」では、実行したいTaskEitherオブジェクトを、引数として設定していました。

今回は、TaskEitherオブジェクトを、あるオブジェクトのプロパティとして設定してみます。

import * as TE from 'fp-ts/TaskEither';
import { sequenceS } from 'fp-ts/Apply';
const sleep = (ms: number) => { 
  // （略）
} 

const createTasks = () => {
  // （略）
  return [te1, te2, te3, te4] as const;
};

const test7 = async () => {
  const [te1, te2, te3, te4] = createTasks();

  const ret = await sequenceS(TE.ApplyPar)({ te1, te2, te3, te4 })();  return ret;
};

test7()
  .then((v) => {
    console.log(v);
  })
  .catch(() => {
    console.log(`error`);
  });

//↓実行結果
//te1
//te3
//te2
//te4
//{ _tag: 'Left', left: [ 'error te3-1', 'error te3-2' ] }

「1.」のプログラムと比較すると、下記の3点が違います。

2行目でsequenceTではなくsequenceSをインポート
16行目でsequenceTの代わりにsequenceSを指定
同じく16行目で、引数を({te1, te2, te3, te4})とオブジェクト形式で指定

今回のように、一部のTaskEitherでrejectされた場合には、実行結果自体は「1.」と変わりません。

（参考）全TaskEitherがresolveされた場合

全TaskEitherがresolveされた場合には、実行結果は「1.」と変わります。

import * as TE from 'fp-ts/TaskEither';
import { sequenceS } from 'fp-ts/Apply';
const sleep = (ms: number) => { 
  // （略）
} 

const createTasks = () => {
  // （略）
  return [te1, te2, te3, te4] as const;
};

const test7_2 = async () => {
  const [te1, te2] = createTasks();
  const ret = await sequenceS(TE.ApplyPar)({ te1, te2 })();  return ret;
};

test7_2()
  .then((v) => {
    console.log(v);
  })
  .catch(() => {
    console.log(`error`);
  });

//↓実行結果
//te1
//te2
//{ _tag: 'Right', right: { te1: 1, te2: 'a' } }

このように、引数として渡したオブジェクトと同じ構成で、プロパティにresolveされた実行結果が格納されます。

全パターン試したわけではありませんが、パターン「2.」～「6.」についても、sequenceSをsequenceTに変えれば、同じように動くのではないかと思います。

まとめ

TaskEitherを使うと、Promiseについての処理を非常にシンプルに書くことができるようになります。

非常に便利ですので、ぜひ、使ってみてください。

JavaScriptで0.1はなぜ0.1と表示されるのか？

info@excelspeedup.com — Sun, 14 Feb 2021 00:00:00 GMT

JavaScriptで0.1はなぜ0.1と表示されるのか？

この記事では、正しい結論を導きだせていない可能性が高いですので、ご注意ください。

もちろん、この記事を読んでみて「ここが違う」という指摘は大歓迎です。ご意見がありましたら、ぜひお知らせください。

chromeのコンソールで、「0.1」「0.1+0.2」の計算結果を表示すると、それぞれ「0.1」「0.30000000000000004」と表示されます。

console.log(0.1);
//0.1

console.log(0.1+0.2);
//0.30000000000000004

この記事では、JavaScriptの仕様書を見ながら、下記の疑問について調べてみました。

なぜ、console.logで表示する結果が、この真の数字と異なるのか？
なぜ、「0.1」は「0.1」、「0.1+0.2」は「0.30000000000000004」と表示されるのか？

この挙動の鍵はNumber.toStringメソッドにあるらしいので、その中身を重点的に見ていきます。

JavaScriptで「0.1」「0.1+0.2」は、どう扱われるか？

まず、これらの値がJavaScriptで、実際に「どのような値」として管理されているかを確認します。

確認するには、Number.toFixedメソッドで、引数に十分大きな値を指定しましょう。

実際に、実行してみると、下記のようになります。

console.log((0.1).toFixed(56));
//0.10000000000000000555111512312578270211815834045410156250

console.log((0.1+0.2).toFixed(56));
//0.30000000000000004440892098500626161694526672363281250000

これが、JavaScriptで管理される「数値」の実態です。

一方で、単に、console.logで値を表示すると、内部的に、Number.toStringメソッドが呼び出され、冒頭のように、適当に端数処理された値が返されます。

なぜ、このような挙動を示すのか、Number.toStringメソッドの挙動を調べていきます。

※ちょっと探してみたのですが、仕様書上、console.log呼び出し時に、内部的にNumber.toStringが呼び出される、という記載を見つけることができませんでした。この記事では、これ以上深入りはしませんが、もし、仕様書のどこに書かれているかご存じの方がいらしたら、ぜひ、教えてください。

例1. (123456).toString()

まずは、手軽な例として(123456).toString()を実行したときの挙動を見ていきます。

仕様書の該当箇所は、「ECMAScript 2021 Language Specification」6.1.6.1.20 Number::toStringです。

まず、処理対象の数「x」として、「123456」が渡され、処理が行われます。

The abstract operation Number::toString takes argument x (a Number). It converts x to String format.

次に、処理手順の「1.」～「4.」です。

ここでは、「NaN」「+0」、「-0」、負の数、「Infinity」についての処理が記載されています。

If x is NaN, return the String "NaN".

If x is +0_𝔽 or -0_𝔽, return the String "0".

If x < +0_𝔽, return the string-concatenation of "-" and ! Number::toString(-x).

If x is +∞_𝔽, return the String "Infinity".

今回の「x」（＝「123456」）は、どれにも該当しないので、「5.」の処理に進みます。

条件を満たす「n」「k」「s」の値を計算する

処理手順「5.」では、「n」「k」「s」の3つの「整数」値を計算します。

Otherwise, let n, k, and s be integers such that k ≥ 1, 10^k-1 ≤ s < 10^k, s × 10^{n - k} is ℝ(x), and k is as small as possible. Note that k is the number of digits in the decimal representation of s, that s is not divisible by 10, and that the least significant digit of s is not necessarily uniquely determined by these criteria.

以下、詳細に見ていきます。

「s」と「k」を決める

「s」は整数値で、かつ、「s × 10^{n - k}」が「ℝ(x)」となるような数です。

「ℝ(x)」が何かは、後で考えるとして、とりあえず、今のところは「ℝ(x)」は「x」と同じ値（＝「123456」）と考えて、先に進みましょう。

「s」は整数で、かつ、元の数「x」に10を何回か乗じてできる数なので、「s」の候補は「123456」「1234560」・・・といった数のうちの、いずれかになります。

そして、それぞれの「s」に対して、「k」の値を計算すると、次のようになります。

s	sとkの関係	k
123456	10^6-1 ≦ 123456 < 10⁶	6
1234560	10^7-1 ≦ 1234560 < 10⁷	7
12345600	10^8-1 ≦ 12345600 < 10⁸	8

先ほどの仕様書を読むと、**「k」は「1以上」でかつ「できるだけ小さい数」**にしないといけません。

この中で「k」が一番小さくなるのは、**「s」が「123456」、「k」が「6」**です。これが、目的の「s」「k」の値となります。

この **「k」は「元数値の桁数」**を表しています。

「Number型」と「普通の数値」

※たぶん、この項で書いている解釈は間違えています（結果は合っていると思いますが、過程が間違えているはず）。正しい解釈をご存じの方がいらしたら、ぜひ教えてください。

次に「n」を決めていきたいのですが、その前に、一つ、概念を整理しておきましょう。

仕様書を見ると、「x」と「n」「k」「s」は、「s × 10^{n - k} is ℝ(x)」という関係を満たす、と書かれています。

この文中に出てくる「ℝ(x)」は、「ECMAScript 2021 Language Specification」5.2.5 Mathematical Operationsで定義されています。

A conversion from a Number or BigInt x to a mathematical value is denoted as "the mathematical value of x", or ℝ(x).

「mathmatical value」というのは、プログラミングとは関係ない、普通の算数で使う「数値」（以下、「普通の数値」と表記します）を表しています。

そして「ℝ(x)」は、Number型「x」に対応する「普通の数値」を表すのです。

たとえば、Number型「123456」に対応する「普通の数値」は「123456」です。ですから、「ℝ(123456)」は、普通の数値「123456」という数値を表すことになります。

仕様書上「Number型」の世界と、「普通の数値」の世界は、明確に区分されています。

たとえば、先ほどの「s × 10^{n - k} is ℝ(x)」は、「is」の左側も右側も「普通の数値」で書かれています。

ですから、この文章は、「Number型」の世界ではなく「普通の数値」の世界で考えたときに、「s × 10^{n - k} = ℝ(x)」という意味に解釈することになります。

「n」を決める

では、実際に、先ほどの関係から「n」を決めてみましょう。

先ほど出てきた関係式に、「s」「k」「x」をあてはめると、次のようになります。

「123456 × 10^{n - 6} = 123456」

ですから、「n」は「6」であることがわかります。

最終的に、元の数と、算出した「n」「k」「s」を表にまとめると次のようになります。

元の数	n	k	s
123456	6	6	123456

これで、「処理手順5」は終わりです。

「n」「k」「s」の値に応じて、文字列変換を行う。

次に、「処理手順6」に進みます。

If k ≤ n ≤ 21, return the string-concatenation of:

the code units of the k digits of the decimal representation of s (in order, with no leading zeroes)

n - k occurrences of the code unit 0x0030 (DIGIT ZERO)

今回は、このケースに該当するので、この手順に従って表示する値を決定します。

まず「s」の数値を「k」桁分出力（＝「123456」）し
次に「n-k」桁分「0」を出力（＝今回は何もなし）します

結果、「123456」という文字列が出力されることになります。

例2. (12.3456).toString()

次に、(12.3456).ToString()を実行したときの挙動を見ていきます。

「処理手順1」~「処理手順4」までは、先ほどと同じように無視することができます。

そこで、「処理手順5」の部分を見ていきます。

条件を満たす「n」「k」「s」の値を計算する

「s」と「k」を決める

「s」と「k」に関しては、結果的には、さきほどとまったく同じになりますが、一応、手順を追ってみましょう。

「s」は整数値で、かつ、「s × 10^{n - k}」の形に書けないといけません。

ですから、「s」は「12.3456」に「10を何回か掛けて整数値にしたもの」（＝「123456」「1234560」・・・）のうちのどれかになります。

それぞれの「s」に対して、「k」の値は、次のように計算できます。

s	sとkの関係	k
123456	10^6-1 ≦ 123456 < 10⁶	6
1234560	10^7-1 ≦ 1234560 < 10⁷	7
12345600	10^8-1 ≦ 12345600 < 10⁸	8

「k」を、「1以上」でかつ「できるだけ小さい数」にしようとすると、先ほどと同じく、**「s」が「123456」、「k」が「6」**の組み合わせを採用することになります。

「n」を決める

「s × 10^{n - k} = ℝ(x)」という関係式に、「s」「k」「x」をあてはめると、次のようになります。

「123456 × 10^{n - 6} = 12.3456」

ここから、「n」は「2」であることがわかります。

参考のため、先ほどの「123456」の場合と、今回の「12.3456」の場合について、元の数と、算出した「n」「k」「s」を表にまとめてみると、次のようになります。

元の数	n	k	s
123456	6	6	123456
12.3456	2	6	123456

「n」が変わりましたが「k」「s」はまったく同じになりました。

「n」「k」「s」の値に応じて、文字列変換を行う。

次に、「処理手順6」以降に進みましょう。

If k ≤ n ≤ 21, return the string-concatenation of:

the code units of the k digits of the decimal representation of s (in order, with no leading zeroes)

n - k occurrences of the code unit 0x0030 (DIGIT ZERO)

今回は、「k」が「6」、「n」が「2」なので、「処理手順6」の条件を満たしません。

次に進みます。

If 0 < n ≤ 21, return the string-concatenation of:

the code units of the most significant n digits of the decimal representation of s

the code unit 0x002E (FULL STOP)

the code units of the remaining k - n digits of the decimal representation of s

「n」が「2」なので、この「処理手順7」の条件を満たします。

そこで、次のように文字列を出力します。

「s」の数値を「n」桁分（＝「12」）
「.」を出力し
「s」の数値の残り「k-n」桁分（＝「3456」）を出力します。

その結果、「12.3456」という文字列が出力されます。

例3. (0.1).toString()

それでは、今までの議論を踏まえて、いよいよ、(0.1).ToString()を実行したときの挙動を見ていきます。

今回も、「処理手順1」~「処理手順4」までは、先ほどとまったく同じで条件を満たさないので、「処理手順5」の部分を見ていきます。

解釈1（誤った解釈？）

※たぶん、この項で書いている解釈は間違えています。が、正しい解釈がわからないので、とりあえず晒しておきます。正しい解釈をご存じの方がいらしたら、ぜひ教えてください。

「x」と「ℝ(x)」の値を計算する

まず、今回指定した「0.1」という数値は、JavaScriptの引数として渡されている数です。ですから、これは「普通の数値」ではなく、**「Number型の数値」**です。

そして、「Number型」では「0.1」という数を正確に表すことができず、「0.10000000000000000555111512312578270211815834045410156250」として扱われます。

ですから、今回のtoStringメソッドの引数「x」の真の値は「0.10000000000000000555111512312578270211815834045410156250」となります。

また、「s」「n」「k」は、「普通の数値」の世界で「s × 10^{n - k} = ℝ(x)」という関係を満たす必要があります。

ここで、右辺の、「ℝ(x)」は、「x」を「普通の数値」に変換した「0.10000000000000000555111512312578270211815834045410156250」になります。

これから、この「ℝ(x)」に一致するような「s」「k」「n」を探していきます。

「s」と「k」を決める

「s」は整数値で、かつ、「ℝ(x)」が「s × 10^{n - k}」の形に書けないといけません。

ですから、「s」は「0.10000000000000000555111512312578270211815834045410156250」に10を何回か掛けて整数値にしたものになります。

先ほどまでの議論を考えると、「s」は、そのような整数値のうちで最小のものになるはずです。

ですから、「s」は「1000000000000000055511151231257827021181583404541015625」になります。

その場合、「k」は、次のようになります。

s	sとkの関係	k
100000000000000005551115123125782702118 1583404541015625	10^55-1 ≦ 123456 < 10⁵⁵	55

つまり、**「s」が「1000000000000000055511151231257827021181583404541015625」、「k」が「55」**になります。

「n」を決める

「s × 10^{n - k} = ℝ(x)」に、「s」「k」「ℝ(x)」をあてはめると、次のようになります。

「1000000000000000055511151231257827021181583404541015625 × 10^{n - 55} = 0.1000000000000000055511151231257827021181583404541015625」

通常の数の世界での等式ですから、端数処理は一切行いません。

これを計算すると、「n」は「0」になります。

元の数	n	k	s
0.100000000000000005551115123 1257827021181583404541015625	0	55	100000000000000005551115123 1257827021181583404541015625

「n」「k」「s」の値が決まりましたので、次の処理手順に移りましょう。

「n」「k」「s」の値に応じて、文字列変換を行う。

If k ≤ n ≤ 21, return the string-concatenation of:

the code units of the k digits of the decimal representation of s (in order, with no leading zeroes)

n - k occurrences of the code unit 0x0030 (DIGIT ZERO)

今回は、「k」が「55」、「n」が「0」なので、「処理手順6」の条件を満たしません。

次に進みます。

If 0 < n ≤ 21, return the string-concatenation of:

the code units of the most significant n digits of the decimal representation of s

the code unit 0x002E (FULL STOP)

the code units of the remaining k - n digits of the decimal representation of s

「n」が「0」なので、この「処理手順7」の条件を満たしません。

次に進みます。

If -6 < n ≤ 0, return the string-concatenation of:

the code unit 0x0030 (DIGIT ZERO)

the code unit 0x002E (FULL STOP)

-n occurrences of the code unit 0x0030 (DIGIT ZERO)

the code units of the k digits of the decimal representation of s

「n」が「0」なので、この「処理手順8」の条件を満たします。

そこで、次のように文字列を出力します。

「0」を出力
「.」を出力
「0」を「-n」桁分出力（今回は「n」は「0」なので、何も出力しない）
「s」の数値を「k」桁分（＝「1000000000000000055511151231257827021181583404541015625」）出力。

その結果、「0.1000000000000000055511151231257827021181583404541015625」という文字列が出力される、、、はずです。

ところが、実際の出力結果は「0.1」なので、これと一致しません。

仕様書の、どこを読み間違えているんでしょう？

解釈2（一部旧仕様書に沿って）考えてみる

「処理手順5」の古い仕様書を確かめる

古いJavaScriptの仕様書の、「処理手順5」に相当する記述を見てみると、微妙に違う表現がされているように見えます。

「Standard ECMA-262 5.1 Edition」9.8.1 ToString Applied to the Number Type

Otherwise, let n, k, and s be integers such that k ≥ 1, 10^k−1 ≤ s < 10^k, the Number value for s × 10^n−k is m, and k is as small as possible. Note that k is the number of digits in the decimal representation of s, that s is not divisible by 10, and that the least significant digit of s is not necessarily uniquely determined by these criteria.

そこで、旧仕様書に沿って、「処理手順5」の挙動を考えてみようと思います。

以下、「ECMAScript 2021 Language Specification」を「新仕様書」、「Standard ECMA-262 5.1 Edition」を「旧仕様書」と表記していきます。

旧仕様書と新仕様書では大きく違う点が2つあります。

1つ目は、変数名です。旧仕様書では「元の値」は「m」、新仕様書では「元の値」は「x」で表されています。

2つ目は、「s」「n」「k」の計算方法です。引用した文章中の、強調している部分に注目してほしいのですが、ここでは「Number value for s × 10^n−k is m」という表現がされています。

「Number value for x」という表現は、**「普通の数値」の世界の数「x」に対応する「Number型の数」**を意味しています。

→ 「Standard ECMA-262 5.1 Edition」8.5 The Number Type

そして、先ほどの文章は、「Number value for s × 10^n−k」と「m」（これは、両方ともNumber型の数）が等しいと言っているわけですから、「s」「n」「k」と、元の数「m」が「Number型の数として等しい」という意味に解釈できます。

Number型同士で数値を比較する場合には、少し数値がずれていても一致すると判定されることがあります。

たとえば「0.1000000000000000055511151231257827021181583404541015625」は、少なくとも、0.099999999999999999≦m≦0.100000000000000012を満たす「m」とは等しいと判定されます。

console.log(0.1000000000000000055511151231257827021181583404541015625 === 0.099999999999999999)
// true

console.log(0.1000000000000000055511151231257827021181583404541015625 === 0.100000000000000012)
// true

ですから、この範囲に収まるように「s」「n」「k」を選べば良い、ということになります。

（補足）「解釈1」と「解釈2」の違い

先ほどの「解釈1」（＝新仕様書）では「s × 10^n−k = ℝ(x)」は「普通の数値」の世界で考えていました。

一方で「解釈2」（＝旧仕様書）では「s × 10^n−k = x」は「Number型」の世界で考えています。

この点が両者で、大きく異なるように感じます。

が、実際には、新旧仕様書で、ここの計算ロジックが変わるわけがないと思うので、何か、私が読み間違いをしている気がします。

「s」と「k」を決める

「s」は整数値で、かつ、「m」が「s × 10^{n - k}」の形に書けないといけません。

「k」は元の数「m」の桁数を表すのですから、「m」として、できるだけ桁数が小さくなるものを選ぶ必要があります。

先ほど見たとおり、「m」は、「0.099999999999999999 ≦ m ≦ 0.100000000000000012」の範囲で自由に選んでいいわけです。そこで、この中から、桁数が一番短くなりそうな「0.1」を選びましょう。

その場合、**「s」は「1」（＝「0.1」に10を1回掛けたもの）、「k」は「1」**になります。

s	sとkの関係	k
1	10⁰ ≦ 1 < 10¹	1

「n」を決める

「s × 10^{n - k} = m」（※JavaScriptのNumber型としての等式）に、「s」「k」「m」をあてはめると、次のようになります。

「1 × 10^{n - 1} = 0.1000000000000000055511151231257827021181583404541015625」

「n」に「0」を入れると、左辺は「1 × 10^{0 - 1}」=「0.1」となり、「Number型の世界」では、左辺と右辺は一致します。

console.log(0.1 === 0.1000000000000000055511151231257827021181583404541015625)
// true

ということで、算出した「n」「k」「s」を表にまとめると、次のようになります。

元の数	n	k	s
0.1000000000000000055511151231257827021181583404541015625	0	1	1

「n」「k」「s」の値に応じて、文字列変換を行う。

ここからは、新仕様書に戻って、「処理手順6」以降に進みましょう。

If k ≤ n ≤ 21, return the string-concatenation of:

the code units of the k digits of the decimal representation of s (in order, with no leading zeroes)

n - k occurrences of the code unit 0x0030 (DIGIT ZERO)

今回は、「k」が「1」、「n」が「0」なので、「処理手順6」の条件を満たしません。

次に進みます。

If 0 < n ≤ 21, return the string-concatenation of:

the code units of the most significant n digits of the decimal representation of s

the code unit 0x002E (FULL STOP)

the code units of the remaining k - n digits of the decimal representation of s

「n」が「0」なので、この「処理手順7」の条件を満たしません。

次に進みます。

If -6 < n ≤ 0, return the string-concatenation of:

the code unit 0x0030 (DIGIT ZERO)

the code unit 0x002E (FULL STOP)

-n occurrences of the code unit 0x0030 (DIGIT ZERO)

the code units of the k digits of the decimal representation of s

「n」が「0」なので、この「処理手順8」の条件を満たします。

そこで、次のように文字列を出力します。

「0」を出力
「.」を出力
「0」を「-n」桁分出力（今回は「n」は「0」なので、何も出力しない）
「s」の数値を「k」桁分（＝「1」）出力。

その結果、「0.1」という文字列が出力されることになります。

これで、実際の挙動と同じ動きになりました。

例4. (0.1+0.2).toString()

最後に、(0.1+0.2).ToString()を実行したときの挙動を見ていきます。

今回も、「処理手順1」~「処理手順4」までは、先ほどとまったく同じで条件を満たさないので無視できます。

そこで、「処理手順5」の部分を見ていきます。

条件を満たす「n」「k」「s」の値を（一部旧仕様書に沿って）計算する

「s」と「k」を決める

先ほどの「例3」と同じように、旧仕様書に沿って、「s」「k」の値を算定してみます。

まず、元の値「m」は、「0.3000000000000000444089209850062616169452667236328125000」です。

console.log((0.1+0.2).toFixed(55));
// 0.3000000000000000444089209850062616169452667236328125000

また、少なくとも「0.3000000000000000167 ≦ m ≦ 0.3000000000000000721」の範囲の数は、Number型の数値として一致します。

console.log(0.30000000000000004440892098500626161694526672363281250 === 0.3000000000000000167);
// true

console.log(0.30000000000000004440892098500626161694526672363281250 === 0.3000000000000000721);
// true

「k」は元の数「m」の桁数を表すのですから、「m」として、できるだけ桁数が小さくなるものを選ぶ必要があります。

この範囲内で、桁数が一番小さくなる数は「0.30000000000000002」「0.30000000000000003」・・・「0.30000000000000007」の6通りあります。

（新仕様書、旧仕様書のどちらでも）仕様書上は、この中から、任意の数値を選べるようです。そこで、今回は「0.30000000000000004」を、元の数「m」として先に進みましょう。

さて、「s」は整数値で、かつ、「m」が「s × 10^{n - k}」の形に書けないといけないのですから、「s」は「30000000000000004」になります。

そして、「k」は「17」になります。

s	sとkの関係	k
30000000000000004	10^17-1 ≦ 123456 < 10¹⁷	17

「n」を決める

まず、「s × 10^{n - k} = m」の左辺を計算します。

「s × 10^{n - k}」に「s」「k」をあてはめましょう。

「30000000000000004 × 10^{n - 1} = 0.30000000000000004440892098500626161694526672363281250」

なお、等号は、「Number型」の世界での等号であることに注意してください。

そして、この数式を成り立たせようとすると、「n」は「0」になることがわかります。

実際、「n」に「0」を入れて、左辺を計算すると、「30000000000000004 × 10^{0 - 17}」=「0.30000000000000004」となります。

なお、この左辺の計算は、「普通の数値」の世界で行うことになります。

旧仕様書では、左辺は「the Number value for s × 10^n−k」という表現をされているので、「s × 10^n−k」の計算は「普通の数値」の世界で行い、その後、それに対応する「the Number value」（＝Number型の値）に変換をすることになります。

そして、JavaScriptのNumber型として、左辺と右辺を比較すると、両者は一致していることがわかります。

console.log(0.30000000000000004 === 0.30000000000000004440892098500626161694526672363281250)
// true

ということで、算出した「n」「k」「s」を表にまとめると、次のようになります。

元の数	n	k	s
0.30000000000000004440892098500626161694526672363281250	0	17	30000000000000004

「n」「k」「s」の値に応じて、文字列変換を行う。

ここからは、新仕様書に戻って、「処理手順6」以降に進みましょう。

If k ≤ n ≤ 21, return the string-concatenation of:

the code units of the k digits of the decimal representation of s (in order, with no leading zeroes)

n - k occurrences of the code unit 0x0030 (DIGIT ZERO)

今回は、「k」が「17」、「n」が「0」なので、「処理手順6」の条件を満たしません。

次に進みます。

If 0 < n ≤ 21, return the string-concatenation of:

the code units of the most significant n digits of the decimal representation of s

the code unit 0x002E (FULL STOP)

the code units of the remaining k - n digits of the decimal representation of s

「n」が「0」なので、この「処理手順7」の条件を満たしません。

次に進みます。

If -6 < n ≤ 0, return the string-concatenation of:

the code unit 0x0030 (DIGIT ZERO)

the code unit 0x002E (FULL STOP)

-n occurrences of the code unit 0x0030 (DIGIT ZERO)

the code units of the k digits of the decimal representation of s

「n」が「0」なので、この「処理手順8」の条件を満たします。

そこで、次のように文字列を出力します。

「0」を出力
「.」を出力
「0」を「-n」桁分出力（今回は「n」は「0」なので、何も出力しない）
「s」の数値を「k」桁分（＝「30000000000000004」）出力。

その結果、「0.30000000000000004」という文字列が出力されることになります。

これで、実際の挙動と同じ動きになりました。

まとめ

仕様書の読み方が、どこか間違えているのだろうと思います。

どう読むのが正しいのか教えてください。

Next.jsでTypeScriptを導入する手順

info@excelspeedup.com — Sun, 17 Jan 2021 00:00:00 GMT

Next.jsでTypeScriptを導入する手順

Next.jsでTypeScript環境を導入する手順をまとめます。

1. Next.js インストール

Tutorialの手順（に近い手順）でインストールをします。

※今回は、exampleは指定していません。

npx create-next-app nextjs-blog --use-npm

参考：Create a Next.js App

2. TypeScriptの（自動）設定

TypeScript関連のnpmパッケージをインストールし、空のtsconfig.jsonを作成します。

あとは、開発用サーバを立ち上げましょう。

npm install --save-dev typescript @types/react @types/node
touch tsconfig.json
npm run dev

これで、tsconfig.jsonが自動的に編集され、next-env.d.tsが自動で作成されます。

tsconfig.json（自動生成）

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

next-env.d.ts（自動生成）

/// <reference types="next" />
/// <reference types="next/types/global" />

3. tsconfig.jsonの書き換え

自動生成されたtsconfig.jsonでは、"strict": falseと設定されているため、"strict": trueに修正しておきましょう。

tsconfig.json（手修正後）

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

これで、TypeScriptが使えるようになります。

あとは、好みに合わせて修正をしていってください。

自動生成されたjsファイルをts、tsxファイルに修正する

自動生成された表示用のjsファイルをts、tsxファイルに修正しておきましょう。

pages/index.js → index.tsx

「pages」以下の表示用コンポーネントについては、constで宣言した変数に、React.FC型を付けておけば大丈夫なようです。

そこで、元々のソースコードを修正していきます。

元々のHomeはfunctionで定義されています。そこで、constを使った定義に変えて、変数Homeに、関数の型（React.FC）を付けます。

また、const宣言だとdefault exportができないので、別途default exportを追加します。

pages/index.tsx

import Head from 'next/head';
import styles from '../styles/Home.module.css';

const Home: React.FC = () => {  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      //...
      //（略）
      //...

      <footer className={styles.footer}>

        //...
        //（略）
        //...

      </footer>
    </div>
  );
};

export default Home;

pages/_app.js → _app.tsx

これも、先ほどと同じように、コンポーネントにReact.FC型を付けます。

なお、「_app.tsx」で作成するコンポーネントは引数を受け取るので、React.FCの型変数に「引数の型」を指定する必要があります。

そこで、型定義をimportして、引数に型を付けます。

_app.tsx

import { AppProps } from 'next/app';import '../styles/globals.css';

const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {  return <Component {...pageProps} />;
};

export default MyApp;

pages/api/hello.js → hello.tsx

型定義をimportして、引数に型を付けます。

pages/api/hello.tsx

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import { NextApiRequest, NextApiResponse } from 'next';
export default (req: NextApiRequest, res: NextApiResponse): void => {  res.statusCode = 200;
  res.json({ name: 'John Doe' });
};

まとめ

「tsconfig.json」の"strict": trueを、忘れると後が大変そうなので、気を付けましょう。

TypeScriptでオブジェクトの全プロパティを走査するときの注意点

info@excelspeedup.com — Mon, 30 Nov 2020 00:00:00 GMT

TypeScriptでオブジェクトの全プロパティを走査するときの注意点

TypeScriptで、オブジェクトの全てのプロパティの走査をするのは意外と大変です。

たとえば、次のような処理をしたいときには、気を付けて書かないと、TypeScriptの型がうまく付かずに、エラーが大量に発生してしまいます。

全プロパティを読み込む
全プロパティを別オブジェクトにコピーする
全プロパティを別オブジェクトにコピーするときに、一部プロパティを改変する

そこで、このような処理を書くときに気を付けるべき点を書いていきます。

全プロパティを読み込む

JavaScriptで、オブジェクトの全プロパティの一覧を取得するためにはfor ～ in構文や、Object.keys()構文が使われます。

ただ、どちらも、TypeScriptでは、気持ちよく使えません。

for ～ in構文を使うと、プロパティアクセス時にエラーが発生する

for ～ in構文を使うと、const value = obj[key]の行でエラーが発生します。

const obj = {
  a: 1,
  b: 'b',
  c: true,
};

for (const key in obj) {
  const value = obj[key]; //エラー}

具体的には、次の2つのエラーが発生します。

Unsafe assignment of an any value.
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ a: number; b: string; c: boolean; }'. No index signature with a parameter of type 'string' was found on type '{ a: number; b: string; c: boolean; }'.

Object.keys()構文でも、プロパティアクセス時にエラーが発生する

同様に、Object.keys()構文を使っても、const value = obj[key]の行でエラーが発生します。

const obj = {
  a: 1,
  b: 'b',
  c: true,
};

const keys = Object.keys(obj);

keys.forEach((key) => {
  const value = obj[key]; //エラー});

これでも、先ほどとまったく同じエラーが表示されます。

Unsafe assignment of an any value.
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ a: number; b: string; c: boolean; }'. No index signature with a parameter of type 'string' was found on type '{ a: number; b: string; c: boolean; }'.

for ～ in、Object.keys() 構文でエラーが発生する原因

TypeScriptでは、objオブジェクトのプロパティとして指定する値は「keyof typeof obj」型（＝「 a | b | c 」型）でないとエラーが発生してしまいます。

ところが、今回のプログラムでは、次のように、どちらも、変数keyは「string」型になってしまうため、エラーが発生してしまうのです。

for ～ in構文で得られる、変数keyは「string」型になる
Object.keys()構文で得られる、変数keysは「string[]」型になるため、変数keyは「string」型になる

変数keyが「string」型になってしまうと、変数keyに、「a」「b」「c」以外の値が入る可能性が否定できないため、エラーになってしまうのです。

また、「a」「b」「c」以外のプロパティを指定した場合、その結果の値の型がどうなるかTypeScriptとして保証できないため、valueは、自動的に「any」型になってしまうのです。

実際、下記を見てみると、次のようなことが書かれています。

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ a: number; b: string; c: boolean; }'. No index signature with a parameter of type 'string' was found on type '{ a: number; b: string; c: boolean; }'.
- 「string」型の値をindexとして指定することはできない
- 「string」型の値をindexとして指定した場合、その評価結果は「any」型になる

その結果、「any」型の値を左辺（value）に代入しようとしているため、次のエラーが発生してしまいます。

Unsafe assignment of an any value.

なぜ、for ～ in、Object.keys() で「keyof typeof obj」型が得られないのか？

直感的には、for ～ in構文で「keyof typeof obj」型、Object.keys()構文で「(keyof typeof obj)[]」型の値が得られても良さそうなところです。

それなのに、このような仕様になっている理由は、これらの構文で、指定したキー以外の値が入る可能性があるからです。

たとえば、次のプログラムでは、関数objFunc内の変数keyには「a」「b」だけでなく「c」が入る可能性があります。

type Obj = {
  a: () => void;
  b: () => void;
};

const objFunc = (argobj: Obj): void => {
  // key には「a」「b」「c」のいずれかが入る（=keyが「 a | b 」型にならない！)
  for (const key in argobj) {

    // keyが「c」のときには「no function」という文字列データが格納される
    const func = argobj[key];

    // keyが「c」のときは、文字列が格納されているためエラーになる！    func();  }
};

const main = (): void => {
  const obj = {
    a: () => { console.log('a'); },
    b: () => { console.log('b'); },
    c: 'no function', //余計なプロパティが入っている  };

  objFunc(obj); //余計なプロパティが入っていてもエラーにならない};

main();

Object.keys()構文を使う場合も、話はまったく同じです。

要するに、型で指定したプロパティ以外の値が、変数「key」、変数「keys」に入る可能性があるため、型が「string」や「string[]」になってしまうのです。

解決法

解決法として、次のようなものがあり得ます。

状況に合わせて、適したものを使ってください。

解決法1: 変数keyの値をチェックする

ループ内で変数keyの値をチェックする方法は、一番シンプルです。

const obj = {
  a: 1,
  b: 'b',
  c: true,
};

for (const key in obj) {
  if (key === 'a' || key === 'b' || key === 'c') {    //変数keyの値は「a」「b」「c」のいずれかであることが保証されているのでエラーが出ない
    const value = obj[key];
  }}

ループ内で、変数keyが「a」「b」「c」のいずれかであることを確認しておけば、objのプロパティであることが保証されますので、エラーが出なくなります。

この方法であれば、asなどを使って、無理やり型を補正しないで済みます。

とはいえ、いちいち、プロパティを明示的に列挙するのでは、for ～ in構文を使うメリットが半減してしまいます。

また、変数「obj[key]」の型は、あり得る型すべてのUnionになることに注意してください。

今回の例であれば、変数fromValueの型は「 string | number | boolean 」になります。

解決法2: Object.entries()を使う

const obj = {
  a: 1,
  b: 'b',
  c: true,
};

Object.entries(obj).forEach(([key, fromValue]) => {  const value = fromValue;
});

Object.Entries()を使うと、プロパティアクセスをすることなく値が取得できるため、エラーは出なくなります。

先ほどと同じく、変数「fromValue」の型は、あり得る型すべてのUnion「 string | number | boolean 」になります。

解決法3: 変数keyを無理やり「keyof typeof obj」型にする

const obj = {
  a: 1,
  b: 'b',
  c: true,
};

// 変数「key」を「keyof typeof obj」型として宣言する。// 変数「key」に、この型に適した値しか入らないことを、プログラマが保証する必要があることに注意let key: keyof typeof obj;
for (key in obj) {
  const value = obj[key];
}

変数「key」を「keyof typeof obj」型として宣言すると、エラーは出なくなります。

ただし、先ほどの「なぜ、for ～ in、Object.keys() で「keyof typeof obj」型が得られないのか？」で書いた例のように、TypeScriptコンパイラは、変数keyに「keyof typeof obj」型を満たす値だけが入ることを保証してくれません。

変数「key」の中身が問題ないかどうかは、プログラムを組む人が責任をもって管理する必要があることに、注意してください。

解決法4: value参照時にkeyの型を無理やり「keyof typeof obj」型にする

const obj = {
  a: 1,
  b: 'b',
  c: true,
};

for (const key in obj) {
  // 変数「key」を「keyof typeof obj」型に読み替える  // 変数「key」に、この型に適した値しか入らないことを、プログラマが保証する必要があることに注意  const value = obj[key as keyof typeof obj];}

今度は、変数「key」を参照するときに、「keyof typeof obj」型に読み替えています。これでも、エラーは出なくなります。

注意点は、先ほどの「解決法3」と同じです。

TypeScriptコンパイラは、変数keyに「keyof typeof obj」型を満たす値だけが入ることを保証してくれません。変数「key」の中身はプログラムを組む人が責任をもって管理する必要があります。

解決法5: 型変数を使ったfunctionに分離する

const getProps = <T extends Record<string, unknown>>(obj: T): void => {  for (const key in obj) {  // 「key」は「Extract<keyof T, string>」型    const value = obj[key]; // 問題なし。  }};  
const main = () => {
  const obj = {
    a: 1,
    b: 'b',
    c: true,
  };

  getProps(obj);
}

main();

コピーロジックを別functionに分離したうえで、オブジェクトを引数で受け取るとエラーは発生しません。

この場合、型変数Tの型はobjの構造と完全に一致するため、変数「key」が「string」型にならない、、、ということだろうと想像しています。

全プロパティを別オブジェクトにコピーする

スプレッド構文を使うのがおすすめ

全プロパティを別オブジェクトにコピーしたいときには、特別な事情がない限りは、スプレッド構文を使うようにしましょう。

これなら、特に問題は発生しません。

const obj = {
  a: 1,
  b: 'b',
  c: true,
};

const obj2 = { ...obj };

コピーするfunctionを作ると良い場合も

あるいは、コピーするロジックを別functionに分離したうえで、オブジェクトを引数で受け取ってもエラーは発生しません。

const copyProps = <T extends Record<string, unknown>>(obj: T): T => {
  const ret = {} as T;

  for (const key in obj) {
    ret[key] = obj[key]; // 問題なし。「key」は「Extract<keyof T, string>」型
  }

  return ret;
};

考え方は、先ほどの「解決法5」とまったく同じです。

何らかの事情で、個々のプロパティを転記せざるを得ない場合

もし、何らかの事情で、個々のプロパティを転記せざるを得ない場合には、かなり大変です。

変数「key」の型が「keyof typeof obj2」型でない

とりあえず、変数keyを参照時に「keyof typeof obj」型に変換する方法で書いてみると、次のようにエラーが発生します。

const obj = {
  a: 1,
  b: 'b',
  c: true,
};

//後で、各プロパティを代入できるように、obj2を「typeof obj」型として定義
const obj2 = {} as typeof obj;

for (const key in obj) {
  obj2[key] = obj[key as keyof typeof obj];//~~~~~~~~~
//Element implicitly has an 'any' type because expression of type 'string'
//can't be used to index type '{ a: number; b: string; c: boolean; }'.
//No index signature with a parameter of type 'string' was found on type
//'{ a: number; b: string; c: boolean; }'.
}

変数keyの型が、「keyof typeof obj2」型ではなく「string」型であることから、左辺のobj2[key]の部分でエラーが発生しています。

「obj2[key]」の型が「never」型になる

そこで、obj2[key]の「key」を、無理やり「keyof typeof obj2」型にしてみます。

const obj = {
  a: 1,
  b: 'b',
  c: true,
};

//後で、各プロパティを代入できるように、obj2を「typeof obj」型として定義
const obj2 = {} as typeof obj;

for (const key in obj) {
  obj2[key as keyof typeof obj2] = obj[key as keyof typeof obj];//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//Type 'string | number | boolean' is not assignable to type 'never'.
//Type 'string' is not assignable to type 'never'.
}

すると、今度は、左辺の「obj2[key]」が、never型になってしまい、代入することができません。

変数keyを「keyof typeof obj2」と読み替えると、その取り得る値は、「a」「b」「c」の3つです。

すると、「obj2[key]」の型は「string」「number」「boolean」のいずれかということになります。

この場合、代入できる値の型は、「obj2[key]」が3つの型のどれであっても矛盾しないような値だけです。つまり、「string & number & boolean」を満たすような型だけを代入することができます。

ところが、このような値はありませんので、左辺は、never型になってしまうのです。

データ型ごとに個別に代入すれば問題はないが、、、

左辺の型が確定しないのが問題なのですから、次のようにデータ型ごとに代入をすればうまくいきます。

const obj = {
  a1: 1,
  a2: 2,
  b1: 'b',
  b2: 'bb',
  c1: true,
  c2: false,
};

const obj2 = {} as typeof obj;

for (const key in obj) {
  if (key === 'a1' || key === 'a2') {    //左辺はnumber型、右辺もnumber型
    obj2[key] = obj[key];
  } else if (key === 'b1' || key === 'b2') {    //左辺はstring型、右辺もstring型
    obj2[key] = obj[key];
  } else if (key === 'c1' || key === 'c2') {    //左辺はboolean型、右辺もboolean型
    obj2[key] = obj[key];
  }}

もっとも、ここまでやるなら、for ～ in構文を使わずに、個別に代入してしまうほうがマシなくらいかもしれません。

「obj2」を「any」型にする

そこで、最後の手段として「変数obj2」型を「any」型にしましょう。

const obj = {
  a: 1,
  b: 'b',
  c: true,
};

//後で、各プロパティを代入できるように、obj2を「typeof obj」型として定義
const obj2 = {} as typeof obj;

for (const key in obj) {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access  (obj2 as any)[key] = obj[key as keyof typeof obj];}

これで、TypeScriptとしてはエラーはなくなりました。

ただし、私の手元の設定では、any型のプロパティアクセスをしているために、ESLintでエラーが発生します。そこで、ESLintのエラーを消すコメントを追加しています。

また、変数obj2をany型として扱っているため、TypeScriptの型チェックは無効化されています。適切に「typeof obj」型になっていることは、プログラマの責任で確認する必要があることに注意してください。

全プロパティを別オブジェクトにコピーするときに、一部プロパティを改変する

たとえば、あるオブジェクトをコピーするけれど、プロパティが数値のときだけはその数値を文字列に変換するような関数を考えてみます。

このとき、特定のオブジェクトを変換するだけではなく、次のように、どんなオブジェクトでも数値から文字列に変換できるような汎用的な関数を作ってみようと思います。

{a: 1, b: 'b', c: true } → {a: '1', b: 'b', c: true }
{b: 10, c: 'c' } → {b: '10', c: 'c' }

今回は、単純化のため、オブジェクトのネストはないケースで考えてみたいと思います。

//プロパティがnumber型の場合のみstring型に変換する型
type ConvertNumberToString<T> = {
  [K in keyof T]: T[K] extends number ? string : ConvertNumberToString<T[K]>;
};

const convertNumberToString = <T extends Record<string, unknown>>(
  obj: T
): ConvertNumberToString<T> => {
  const ret = {} as ConvertNumberToString<T>;

  for (const key in obj) {
    if (typeof obj[key] === 'number') {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
      (ret as any)[key] = (obj[key] as number).toString();
    } else {
      //オブジェクトのネストはない前提
      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
      (ret as any)[key] = obj[key];
    }
  }

  return ret;
};

const main = () => {
  const obj = {
    a: 1,
    b: 'b',
    c: true,
  };

  const obj2 = convertNumberToString(obj);

  console.log(obj);
  // { a: 1, b: 'b', c: true }

  console.log(obj2);
  // { a: '1', b: 'b', c: true }
};

main();

考え方自体は、先ほどの《「obj2」を「any」型にする》例とまったく同じです。

個々のプロパティごとに、データ型を判定して適切な値を代入していきます。

「as」を各所で使用していますが、（たぶん）やむを得ないのだろうと思います。

まとめ

オブジェクトの全プロパティを走査するようなプログラムをTypeScriptで書くと、非常に面倒なことが多いので気を付けましょう。

Promiseの基本～Promiseの挙動サンプル、コード例

info@excelspeedup.com — Thu, 22 Oct 2020 00:00:00 GMT

Promiseとは？

Promiseとは、JavaScript（TypeScript）で、非同期処理を統一的に扱うインタフェースです。

このページでは、TypeScriptを前提にPromiseの使い方をまとめます。

Promiseオブジェクトの生成

1. 返り値がPromiseの関数呼び出し

const ret = fetch(`http://abc.com/`);

Promiseオブジェクトは、呼び出した関数内で行われます。

2. Promise.resolve

const resolved = Promise.resolve(`resolve value`);

Promiseの前にnewは不要です。

3. Promise.reject

const rejected = Promise.reject(new Error(`rejected`));

これも、Promiseの前にnewは不要です。

4. 非同期処理をPromiseでラップ

setTimeout関数の例です。

正常終了する場合にはresolve、異常終了する場合にはrejectを呼び出すのが基本です。

また、new Promise<...>の部分は、型変数を指定しましょう。今回は、stringを指定しています。

逆に、コールバック関数内のresolve、rejectの型は自動で付きますので、型変数は不要です。

//正常終了時の返り値の型（今回の場合は「string」）をPromiseの型変数に指定
const promise1 = new Promise<string>((resolve, reject) => {
  setTimeout(() => {
    try {
      //非同期処理内の処理はtry～catchで囲むのが基本
      resolve('return value'); //処理の返り値はresolveに渡す
    } catch (e) {
      reject(e); //エラーはrejectに渡す
    }
  }, 1000);
});

Promise作成時の実行順

下記ソースコードを実行して、実行順を確認してみましょう。

const OrderOfExecutionTestSub = () => {
  const promise = new Promise<string>((resolve, reject) => {
    console.log('2'); // Promise内部 
    setTimeout(() => {
      console.log('5'); // 非同期処理本体       resolve('resolved');
    }, 0);
  }).then((value) => {
    console.log(value);
    console.log('6'); // then内部  });
  console.log('3'); // Promise作成直後};

const OrderOfExecutionTestMain = () => {
  console.log('1'); // プログラム開始  OrderOfExecutionTestSub();
  console.log('4'); // プログラム終了};

OrderOfExecutionTestMain();
// 1
// 2
// 3
// 4
// 5
// resolved
// 6

つまり、次のような順序で実行されるということになります。

new Promiseで与えたコールバック関数内部の処理「2」は、その場で実行される（＝常に「同期的」に実行する）
Promise内部の非同期処理（setTimeout内部）は後回しにして、「3」→「4」と、いったんプログラムの末尾まで実行する
プログラム末尾までたどりついた後、Promise内部の非同期処理「5」を実行する
メソッドチェーンでつながれたthenやcatch「6」を実行する

Promise内部のエラーハンドリング

さきほどのnew Promiseで与えたコールバック関数内部の処理「2」で発生したエラーは、Promiseのcatch句で補足できます。

const errorCatchable = () => {
  const promise = new Promise<string>((resolve, reject) => {
    setTimeout(() => {
      resolve('some value');
    }, 0);
    throw new Error('catchable');  }).catch((e) => {
    console.log('catched');
  });
};

errorCatchable();
// catched

一方で、Promise内部の非同期処理（setTimeout内部）「5」で発生したエラーは補足できず、そのままエラーになります。

const errorNotCatchable = () => {
  const promise = new Promise<string>((resolve, reject) => {
    setTimeout(() => {
      throw new Error('not catchable');    }, 0);
  }).catch((e) => {
    console.log('catched');
  });
};

errorNotCatchable();
// Error: not catchable
//    at Timeout._onTimeout (C:\nodejs\src\Promise.ts:X:X)
//    at listOnTimeout (internal/timers.js:531:17)
//    at processTimers (internal/timers.js:475:7)
//  ...

異常終了を表す場合には、冒頭で説明したようにrejectを使いましょう。

const errorCatchable2 = () => {
  const promise = new Promise<string>((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('catchable'));    }, 0);
  }).catch((e) => {
    console.log('catched');
  });
};

errorCatchable2();
// catched

あるいは、必要に応じて、全体をtry～catchで囲んでもいいでしょう。

その場合には、catch句でrejectを呼び出しましょう。

const errorCatchable3 = () => {
  const promise = new Promise<string>((resolve, reject) => {
    setTimeout(() => {
      try {        //各種処理
        throw new Error('catchable');
      } catch (e) {        reject(e); // rejectを呼び出す      }    }, 0);
  }).catch((e) => {
    console.log('catched');
  });
};

errorCatchable3();
// catched

then、catch、finallyメソッド

Promiseオブジェクトを作った後の処理は、thenメソッド、catchメソッド、finallyメソッドで書いていきます。

基本的に、正常系の処理はthenメソッド内に書いていきます。

import fetch from 'node-fetch';

const fetchZipcode = () => {
  const yuubinApi = fetch(
    'https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060'
  )                            //APIにアクセスしてresponseを取得
    .then((res) => res.json()) //正常系。responseからjsonを取得
    .then((json) => {
      console.log(json);       //正常系続き。jsonを表示する
    })
    .catch((err) => {
      console.log(err);        //エラーの場合の処理
    });
};

fetchZipcode();
//{
//  message: null,
//  results: [
//    {
//      address1: '高知県',
//      ...
//      prefcode: '39',
//      zipcode: '7830060'
//    }
//  ],
//  status: 200
//}

以下、Promiseの挙動を知るための例です。

1. resolveされた値は「then」メソッドで受け取る

const promiseTestResolved = () => {
  const promise = Promise.resolve('resolved');

  promise.then((value) => {
    console.log(value);
  });
};

promiseTestResolved();
//resolved

2. rejectされた値は「catch」メソッドで受け取る

const promiseTestRejected = () => {
  const promise = Promise.reject('rejected');

  promise.catch((err) => {
    console.log(err);
  });
};

promiseTestRejected();
//rejected

途中にthenメソッドを挟んでもかまいません。一番近いcatchメソッドで、rejectされた値を受け取れます。

const promiseTestRejected2 = () => {
  const promise = Promise.reject('error');
  promise
    .then((value) => { // thenは無視される
      console.log(`resolved`);
      console.log(value);
    })
    .catch((err) => { // rejectされた値を受け取る      console.log(`rejected`);      console.log(err);    });};

promiseTestRejected2();
//rejected
//error

3. then、catchメソッドは常に新しいPromiseオブジェクトを返す

const isSameObject = () => {
  const promise1 = Promise.resolve('resolved1');

  const promise2 = promise1.then(() => {
    return 'resolved2';
  });

  console.log(promise1 === promise2);};

isSameObject();
//false

4. then、catchメソッドで普通の値をreturn→resolve

thenメソッドの中で、普通の値（＝Promise.reject以外の値）をreturnで返すことで、新しく値をresolveすることができます。

そのresolveした値は、後に続くthenメソッドで、その値を使うことができます。

const resolveInThen = () => {
  const promise = Promise.resolve('')
    .then(() => {
      return 100; // 普通の値でOK（Promise<number>が返り値になる）    })
    .then((value) => {
      console.log(value); // 100
      return Promise.resolve('abc'); // Promise.resolveを使ってもOK    })
    .then((value) => {
      console.log(value); // 'abc'    });
};

resolveInThen();
//100
//abc

catchメソッドが間に入っていても無視されます。

const resolveInThen2 = () => {
  const promise = Promise.resolve('')
    .then(() => {
      return 100; 
    })
    // rejectされていないので無視される
    .catch(() => {      console.log(`ignored1`);    })    .then((value) => {
      console.log(value);
      return Promise.resolve('abc');
    })
    // 直前でrejectされていないので無視される
    .catch(() => {      console.log(`ignored2`);    })    .then((value) => {
      console.log(value);
    });
};

resolveInThen2();
//100
//abc

catchメソッドの中からも、普通の値をreturnで返すことで、新しく値を「resolve」することができます。

catch内から単にreturnをしただけでは「reject」にはならないことに注意しましょう。

const resolveInCatch = () => {
  const promise = Promise.reject('error')
    // 直前でresolveされていないので無視される
    .then((v) => {
      console.log(v);
      return 'ignored';
    })
    .catch((e) => {
      console.log(e);
      return 'return value of catch';    })
    .then((value) => {
      console.log(value); // return value of catch    });
};

resolveInCatch();
//error
//return value of catch

5. then、catchメソッド内で「return Promise.reject(...)」または「throw」→reject

thenメソッドのreturnでPromise.reject(...)を値をreturnすると、「reject」することができます。「reject」した結果は、一番近いcatchで受け取ることができます。

const rejectInThen = () => {
  const promise = Promise.resolve('')
    .then(() => {
      return Promise.reject('error');    })
    .catch((err) => {
      console.log(err); // error    });
};

rejectInThen();
//error

thenメソッドでthrow errorしても「reject」できます。

const rejectInThen2 = () => {
  const promise = Promise.resolve('')
    .then(() => {
      throw 'error';    })
    .catch((err) => {
      console.log(err); // error    });
};

rejectInThen2();

catchメソッド内でrejectしたいときも、上の2つのどちらかの方法を取りましょう。

rejectした値は、その次のcatchメソッドで使えます。

const rejectInCatch = () => {
  const promise = Promise.reject('')
    .catch(() => {
      return Promise.reject('error');    })
    .catch((err) => {
      console.log(err); // error    });
};

rejectInCatch();

6. finallyメソッドは必ず実行される

finallyメソッドは必ず実行されます。なお、finallyメソッドは、引数を取れません。

const finally1 = () => {
  const promise = Promise.resolve('resolved')
    .then((value) => {
      console.log(value);
    })
    .catch((error) => {
      console.log(error);
    })
    .finally(() => {      console.log('finally');    });};

finally1();
//resolved
//finally

7. finallyメソッド以降のthen、catchメソッドは実行されない

finallyメソッド以降の、thenメソッド、catchメソッドは実行されません。

const finally2 = () => {
  const promise = Promise.resolve('resolved')
    .then((value) => {
      console.log(value);
      return 'then1';
    })
    .catch((error) => {
      console.log(error);
    })
    .finally(() => {      console.log('finally');    })    .then((value) => {
      // 絶対に実行されない
      console.log(value);
    });
};

finally2();
//resolved
//finally

【Node.js】ファイルの入出力処理を行う（同期処理、Promiseによる非同期処理）

info@excelspeedup.com — Sat, 17 Oct 2020 00:00:00 GMT

Node.jsでファイル操作を行う

Node.jsでファイルの入出力処理を行うには、次の方法があります。

同期処理　（←おすすめ）
コールバックによる非同期処理
Promiseによる非同期処理　（←おすすめ）

同期処理で良い状況なら、同期処理を使うのがシンプルです。

もし、非同期処理を書く必要があるときには、Promiseによる非同期処理を書くほうが見やすく書けるので、おすすめです。

それぞれの方法でファイル入出力処理を書く

「ファイルを読み込んで、その内容を別のファイルに出力する」プログラムをTypeScriptで書いてみます。

下記環境で、プログラムを実行しています。

Node.js 12.13.0
TypeScript 4.0.3
ts-node 9.0.0

1. 同期処理

import fs from 'fs';

const inputFilepath = './file/input.txt';
const outputFilepath = './file/output_syncronous.txt';

const main = () => {
  try {
    const data = fs.readFileSync(inputFilepath, 'utf-8');
    console.log(data);

    fs.writeFileSync(outputFilepath, data);
    console.log(`Write to ${outputFilepath}`);
  } catch (e) {
    //エラー処理
    console.log(e);
  }
};

main();

fsモジュールをimportし、fs.readFileSyncでファイル読み込み、fs.writeFileSyncでファイル出力を行います。

すべて、同期的に処理されるので、流れが、とてもわかりやすいです。

なお、ファイル操作に失敗した場合には例外が発生します。そこで、try～catchを使って、例外処理を行いましょう。

2. コールバックによる非同期処理

import fs from 'fs';

const inputFilepath = './file/input.txt';
const outputFilepath = './file/output_callback.txt';

const main = () => {
  fs.readFile(inputFilepath, 'utf-8', (err, data) => {
    if (err) {
      //エラー処理
      console.log(err);
      return;
    }
    console.log(data);
    fs.writeFile(outputFilepath, data, (err) => {
      if (err) {
        //エラー処理
        console.log(err);
        return;
      }
      console.log(`Write to ${outputFilepath}`);
    });
  });
};

main();

先ほどと同じようにfsモジュールをimportします。

コールバックによる非同期処理をする場合には、fs.readFileでファイル読み込み、fs.writeFileでファイル出力を行います。

これらの関数を使う場合には、3つめの引数に、コールバック関数を渡す必要があります。

たとえば、読み込み処理の場合には、(err, data) => { ... }の形のコールバック関数を渡します。処理がうまくいった場合には、引数dataに、処理結果が格納されるので、この引数を使って後続処理を書いていくことになります。

逆に、うまくいかなかった場合にはerrに値が設定されるので、その内容を使ってエラー処理を行ってください。

同様に、出力処理の場合には、(err) => { ... }の形のコールバック関数を渡して、後続処理を記述していきます。

コールバック関数を使うと、ネストがどんどん深くなるので、とても記述がしにくいです。ですから、この方法を使うことはおすすめしません。

3. Promiseによる非同期処理

import { promises as fs } from 'fs';
const inputFilepath = './file/input.txt';
const outputFilepath = './file/output_promise.txt';

const main = async () => {
  try {
    const data = await fs.readFile(inputFilepath, 'utf-8');
    console.log(data);

    await fs.writeFile(outputFilepath, data);
    console.log(`Write to ${outputFilepath}`);
  } catch (e) {
    //エラー処理
    console.log(e);
  }
};

main();

Promiseによる非同期処理をする場合には、まずimport文の書き方を変える必要があります。import { promises as fs } from 'fs';というようにしてインポートをしてください。

そして、fs.readFileでファイル読み込み、fs.writeFileでファイル出力を行います。

Promiseを使う書き方には何パターンか書き方がありますが、上の例では、async-awaitを使って記述をしています。

まず、ファイル入出力をする関数mainをasync関数として宣言します。

そして、fs.readFile、fs.writeFileの処理時にawaitキーワードを付けて処理を行います。

こうすることで、同期処理と、ほとんど同じ書き方で書くことができます。

もし、async、awaitを使わずに、thenを使って書くのであれば、次のような感じに書くことができます。

import { promises as fs } from 'fs';

const inputFilepath = './file/input.txt';
const outputFilepath = './file/output_promise2.txt';

const main = () => {
  fs.readFile(inputFilepath, 'utf-8')
    .then((data) => {
      console.log(data);
      return fs.writeFile(outputFilepath, data);
    })
    .then(() => {
      console.log(`Write to ${outputFilepath}`);
    })
    .catch((e) => {
      //err処理
      console.log(e);
    });
};

main();

括弧は増えましたが、それでも、コールバックを使う書き方よりは、見やすいでしょう。

githubリポジトリ

今回のプログラムは、下記に上げています。

→ https://github.com/m-haketa/node-fs

【JavaScript】Date型のオブジェクト生成、文字列変換時の罠を避ける

info@excelspeedup.com — Wed, 14 Oct 2020 00:00:00 GMT

JavaScriptでDate型の罠を避ける

JavaScript（TypeScript）のDate型には、様々なトラップがあります。

気を付けて使わないと、簡単にバグが発生するので気を付けて使いましょう。

以下、Date型を使ううえでポイントになりそうな点をまとめます

Date型の内部実装
タイムゾーンの扱い
有効な日付の判定
ローカルタイムゾーンによる、Date型と他の型の相互変換
UTCによる、Date型と他の型の相互変換

なお、このページのソースは、すべてTypeScriptで書いています。JavaScriptで使うときには、型の部分を削除して使ってください。

1. Date型の内部実装：内部にNumber型を持つ

Date型変数は、内部にNumber型の値を持っています。

そのNumber型には、UTCの1970年1月1日からのミリ秒数が格納されており、これで、日付・時刻を管理しています。

たとえば、UTCの「2020年1月1日0時0分0秒」は「1580515200000」という数値に置き換えて管理されることになります。

この、内部のNumber型には、-8,640,000,000,000,000〜8,640,000,000,000,000と「NaN」が入る可能性があります。特に、「NaN」が格納される場合もあることに注意が必要です。

また、1日は厳格に86,400,000ミリ秒で換算されます（うるう秒は考慮されません）。

2. タイムゾーンの扱い

Date型変数の内部では、タイムゾーンの情報は持ちません。

つまりDate型変数単体では、次の2つを区別することはできません。

2020年1月1日0時0分0秒（UTC）
2020年1月1日9時0分0秒（東京時間）

3. 有効な日付の判定

ある変数に格納されているデータが、Date型として有効かどうかを判定するためには、次のように判定しましょう。

Date型であることを確かめる
Date型で管理している日付の内部値が「NaN」でないことを確かめる

const isValidDate = (date: unknown): boolean =>
  toString.call(date) === `[object Date]` &&
  (date as Date).toString() !== 'Invalid Date';

const d1 = new Date();
const d2 = new Date('invalid date sample');
const d3 = '2020-02-03';

console.log(isValidDate(d1)); //true
console.log(isValidDate(d2)); //false
console.log(isValidDate(d3)); //false

日付の内部値が「NaN」になっていると、後で紹介する「date-fns」の「format」関数使用時に実行時エラーが表示されるので、注意が必要です。

4. ローカルタイムゾーンによる、Date型と他の型の相互変換

以下、console.logの結果は、私の手元のNode.jsで実行した場合のものです。タイムゾーンは東京（UTC+9）に設定されています。

A. 指定した日時に対応するDate型を作成する

const dateFromYMDHMS = new Date(2020, 1, 3, 4, 5, 6);

console.log(dateFromYMDHMS);
// 2020-02-02T19:05:06.000Z

下記の点に注意が必要です。

月は、1月〜12月が0〜11に対応する
指定した日時は、ローカル時間で生成される

また、Node.js環境では、console.logで、Date型の値を表示すると、UTCでの日付が表示されます。

日本時間の「2020年2月3日4時5分6秒」を、UTCに直すと「2020年2月2日19時5分6秒」になります。ですから、今回、console.logで時間を表示すると、2020-02-02T19:05:06.000Zと表示されます。

B. 文字列からDate型を作成する

import { parse } from 'date-fns/fp';

//parse用の関数を準備
const parseString = parse(new Date(), 'yyyy-MM-dd HH:mm:ss');

//parse実行
const dateFromString = parseString('2020-02-03 04:05:06');

console.log(dateFromString);
// 2020-02-02T19:05:06.000Z

文字列からDate型のデータを作成する場合、JavaScript標準の関数だと、動きが読めない場合があるためdate-fnsを使います。

今回は、date-fnsを関数型プログラミング的に使えるdate-fns/fpを使っています。

date-fns/fpのparse関数は、機能的には、通常のdate-fnsのparse関数と同じです。ただし、引数の並び順が逆順になっていて、一部の引数だけを部分適用することができます。

そこで、parseをする準備として、parse関数にReference Dateとしてnew Date()、format stringとして'yyyy-MM-dd HH:mm:ss'を部分適用したparseString関数を作りましょう。

あとは、parseString関数にparseしたい文字列を指定すると、Date型オブジェクトを得ることができます。

C. Date型のデータを文字列に変換する

import { format } from 'date-fns/fp';

//format用の関数を準備
const formatDate = format('yyyy-MM-dd HH:mm:ss');

//日付データ
const d = new Date(2020, 1, 3, 4, 5, 6);

//文字列化
const dateString = formatDate(d);

console.log(dateString);
// 2020-02-03 04:05:06

Date型のデータを文字列に加工する場合も、JavaScript標準の関数だと、動きが読めない場合があるためdate-fnsを使います。

先ほどと同様、date-fnsを関数型プログラミング的に使えるdate-fns/fpを使っています。

まず、準備として、format関数に、出力形式：'yyyy-MM-dd HH:mm:ss'を指定したformatDate関数を準備しましょう。

あとは、formatDate関数に、文字列化したいDate型データを指定すると、文字列に変換することができます。

D. 指定したtimeに対応するDate型を作成する

const time = 1580670306000; // 1970年1月1日からの経過時間（ミリ秒単位）
const dateFromTime = new Date(time);

console.log(dateFromTime);
// 2020-02-02T19:05:06.000Z

経過時間はUTCベースで表されるので、タイムゾーンは関係ありません。

E. 指定したUNIX timeに対応するDate型を作成する

UNIX timeは、1970年1月1日午前0時0分0秒からの経過秒数で表されます。

そのため、UNIX timeを1,000倍すると、JavaScriptのDate型の内部管理で使っている数値に変換ができます。

const unixTime = 1580670306; // 1970年1月1日からの経過時間（秒単位）
const dateFromUnixTime = new Date(unixTime * 1000);

console.log(dateFromUnixTime);
// 2020-02-02T19:05:06.000Z

経過時間はUTCベースで表されるので、タイムゾーンは関係ありません。

5. UTCによる、Date型と他の型の相互変換

A. 指定した日時に対応するDate型を作成する

const dateFromYMDHMS = new Date(Date.UTC(2020, 1, 3, 4, 5, 6));

console.log(dateFromYMDHMS);
// 2020-02-03T04:05:06.000Z

あらかじめ、Date.UTCメソッドを使って、指定した（UTCでの）日付・時刻に応じた「1970年1月1日からの経過秒数（ミリ秒）」が得られます。

その数値を、Dateのコンストラクタに渡すことで、指定したUTCでの日付・時刻に応じたDate型オブジェクトを作成しています。

注意点は、ローカルタイムベースの生成時とまったく同じです。

月は、1月〜12月が0〜11に対応する
new Date( ... )を使うと、指定した日時は、ローカル時間で生成される

実際、console.logで時間を表示すると2020-02-03T04:05:06.000Zと表示されます。

B. 文字列からDate型を作成する

import { parse, addMinutes } from 'date-fns/fp';

//ローカルタイムゾーンからUTCにDateオブジェクトを調整する関数を準備
const AdjustLocalToUTC = addMinutes(-new Date().getTimezoneOffset());
//ローカルタイムゾーンにparseする関数を準備
const parseString = parse(new Date(), 'yyyy-MM-dd HH:mm:ss');

//parse後ローカルタイムゾーン分時刻を調整する
const parseUTCString = (dateString: string): Date =>  AdjustLocalToUTC(parseString(dateString));
//parseし、DateオブジェクトをUTCに調整
const dateFromString = parseUTCString('2020-02-03 04:05:06');

console.log(dateFromString);
// 2020-02-03T04:05:06.000Z

ローカルタイムベースのときと同じようにdate-fnsを使います。

単にparseをするだけだと、ローカルタイムでのDateオブジェクトしか得られません。そこで、さらに、parseして得られたDateオブジェクトを、タイムゾーンのずれ分だけ時刻を調整します。

まず、タイムゾーンを補正する用の関数AdjustLocalToUTCを作ります。

new Date().getTimezoneOffset()で、UTCとローカルタイムの間の時間差を「分」単位で取得することができます。そこで、その結果（の符号を反転させたもの）をAddminutes関数に渡して、タイムゾーンを補正するAdjustLocalToUTC関数を作ります。

次に、ローカルベースのときとまったく同じ方法でparseString関数を作ります。

最後に、この2つの関数を適用するparseUTCString関数を作れば、準備完了です。

あとは、parseUTCString関数にparseしたい文字列を指定すると、UTCベースでのDate型オブジェクトを得ることができます。

C. Date型のデータを文字列に変換する

import { format, addMinutes } from 'date-fns/fp';

//ローカルタイムゾーンからUTCにDateオブジェクトを調整する関数を準備
const AdjustUTCToLocal = addMinutes(new Date().getTimezoneOffset());
//format用の関数を準備
const formatDate = format('yyyy-MM-dd HH:mm:ss');

//タイムゾーン調整後format
const formatUTCDate = (date: Date): string =>  formatDate(AdjustUTCToLocal(date));
//日付データ（UTCで2020年2月3日4時5分6秒）
const d = new Date(Date.UTC(2020, 1, 3, 4, 5, 6));

//DateオブジェクトをUTCの日時として文字列化
const dateString = formatUTCDate(d);

console.log(dateString);
// 2020-02-03 04:05:06

考え方は、先ほどとほとんど同じです。今回は、タイムゾーン分補正を入れた後にformatを使ってstring化します。

まず、UTCベースのDate型の値をローカルベースに調整するための関数AdjustUTCToLocalを作成します。さきほどと違い、今回は、マイナス符号を付けずに、new Date().getTimezoneOffset()の結果をそのまま、addMinutes関数に渡しています。

formatDate関数は、ローカルタイムのときとまったく同じように準備しましょう。

あとは、AdjustUTCToLocal関数と、format関数を連続して摘要するformatUTCDate関数を作れば準備完了です。

formatDate関数に、文字列化したいDate型データを指定すると、文字列に変換することができます。

TypeScriptでPhantomType（幽霊型）を実装する3つのパターン

info@excelspeedup.com — Wed, 30 Sep 2020 00:00:00 GMT

TypeScriptでPhantomType（幽霊型）を実装する3つのパターン

TypeScriptで幽霊型を実装するパターンをまとめました。

すべて、**元の「プリミティブ」に「形式的にオブジェクトを付加する」**ことで幽霊型を実現しています。

1. {unique symbol: never}

declare const P1_1US: unique symbol;
type P1_1 = string & { [P1_1US]: never };

declare const P1_2US: unique symbol;
type P1_2 = string & { [P1_2US]: never };

const P1func = (p: P1_1): void => {};

P1func('aaa'); //エラー
P1func('aaa' as P1_1); //OK
P1func('aaa' as P1_2); //エラー

メリット

型として一番綺麗？

デメリット

1つ1つの方ごとに、unique symbolを定義しないといけないので、面倒

2. {unique symbol: string}

declare const P2: unique symbol;
type P2_1 = string & { [P2]: 'P2_1'};
type P2_2 = string & { [P2]: 'P2_2'};

const P2func = (p: P2_1): void => {};

P2func('aaa'); //エラー
P2func('aaa' as P2_1); //OK
P2func('aaa' as P2_2); //エラー

メリット

unique symbolの定義が1つだけで済む

デメリット

ユニークな文字列を振らないといけない（「P2_1」「P2_2」の部分）

3. {string: never}

type P3_1 = string & { __P3_1__: never};
type P3_2 = string & { __P3_2__: never};

const P3func = (p: P3_1): void => {};

P3func('aaa'); //エラー
P3func('aaa' as P3_1); //OK
P3func('aaa' as P3_2); //エラー

メリット

定義が楽

デメリット

ユニークな文字列を振らないといけない（「__P3_1__」「__P3_2__」の部分）

関数型プログラミングを応用してプログラムを書く - most adequate guide Chapter 6のテキトーな訳

info@excelspeedup.com — Tue, 08 Sep 2020 00:00:00 GMT

このページの趣旨

下記ページの、かなり「大雑把」に、「私が興味を持ったところだけ」を「雰囲気」で翻訳したものです。

mostly-adequate.gitbooks.io Chapter 06: Example Application

原文をかなり崩して書いている（原文にない単語、文章を追加したりしている箇所もある）ので、翻訳とすら、呼べないものかもしれません。

違和感を感じたら、原文を参照することをおすすめします。

Chapter6: 関数型プログラミングを応用してプログラムを書く

宣言的コーディング

これからは、プログラムを組むときの考え方を変えましょう。

コンピュータにどのような処理をしてほしいかを書くのは止めて、これからは、どのような結果が欲しいかを書くようにしていきましょう。常に、細かい作業の仕方を管理しようとするのに比べて、はるかにストレスが少なくてすむようになるはずです。

「宣言的」というのは、式を書くということです。それに対して、「手続き的」というのは、1つ1つの指示を書くことを表します。

たとえば、SQLを考えてみてください。

そこには「最初にこれをして、次にこれをする」というような記述はありません。そこには、1つの式があって、データベースから何を取ってきてほしいかが書かれています。どうやって、その作業をするのかを、あなたが決めることができません。SQLが決めるのです。

データベースがアップグレードされて、SQLの解析エンジンが最適化されたときでも、クエリを変える必要はありません。なぜなら、仕様を満たし、同じ結果を得られるような方法は何通りもあるからです。

ある人にとっては（私もそうなのですが）、宣言的なプログラムを見ても、ぱっと何をしているかが理解するのが大変です。

それを実際に感じてもらうために、いくつか例を見てみましょう。

// 手続き的
const makes = [];
for (let i = 0; i < cars.length; i += 1) {
  makes.push(cars[i].make);
}

// 宣言的
const makes = cars.map(car => car.make);

手続き的にループを書くときには、最初に配列を初期化しておく必要があります。インタープリタは、必ず、この文を解釈してから、実際の処理に入ることになります。次に、車のリストを反復する処理を直接書き、手動でカウンターを増やし、こまごまとした醜い反復処理の内容を明示的に書いています。

一方で、宣言的な書き方では、1つの式があるだけです。評価の順番について指示する必要はありません。map関数が、どのように反復処理をして、返り値となる配列を組み立てるかについての自由度は高いです。どうすべきかではなく、何をすべきかを指示しているのです。

この書き方は、明確で簡潔であることに加えて、仮にmap関数の実装が最適化されたとしても、プログラムを書き替える必要はありません。

それでも「その話はわかった。けれど、手続き的にループを書いたほうが処理速度が速い」と考えているようであれば、JITがあなたのコードをどのように最適化しているかを勉強してみることをおすすめします。たとえば、この素晴らしいビデオを見てみるといいでしょう。

また、別の例も見てみましょう。

// 手続き的
const authenticate = (form) => {
  const user = toUser(form);
  return logIn(user);
};

// 宣言的
const authenticate = compose(logIn, toUser);

手続き的なコードは、完全に間違えている、というわけではありませんが、1つ1つ評価をする、という指示がコード中に残っています。

一方で、composeを使ったコードでは、事実関係を記述しているだけです。書かれているのは、認証ロジックはtoUserとloginを合成したもの、ということだけです。

繰り返しになりますが、こう書くことで、実装されるコードが最適化される余地が残り、その結果、コードは、より高度なものになるのです。

先ほどの手続き的なコードでは、評価の順番は、決められています（toUserが最初で、その後にloginが呼ばれます）。でも、評価の順番が重要でないケースも多々あります。そして、宣言的なコードであれば、評価の順番が重要でない旨を簡単に指定することができます（詳細は後述）。

宣言的なコードは、評価の順番を指定する必要がないため、並列計算に適しています。この「宣言的なコードが書ける」ことと「純粋関数を使う」ということが、将来的な並列化を視野に入れたときに、関数型プログラミングが良い選択肢になる理由です。並列、同時実行するシステムを作るために、特別なことをする必要はありません。

関数型プログラミングでFlickr APIを使う

それでは、composeを使って宣言的に、サンプルアプリケーションを作ってみようと思います。

今のところは、ちょっとズルをして、副作用を使います。ただ、副作用を使うのは最小限に、かつ、純粋なコードと分離して配置します。

今回は、flickr（というアプリ）の画像を取り込んで表示するブラウザのウィジットを作ってみましょう。

それでは、アプリの枠組みを作ってみましょう。下記がHTMLのソースコードです。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Flickr App</title>
  </head>
  <body>
    <main id="js-main" class="main"></main>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

そして、これが、Java Scriptのひな型です。

const CDN = s => `https://cdnjs.cloudflare.com/ajax/libs/${s}`;
const ramda = CDN('ramda/0.21.0/ramda.min');
const jquery = CDN('jquery/3.0.0-rc1/jquery.min');

requirejs.config({ paths: { ramda, jquery } });
requirejs(['jquery', 'ramda'], ($, { compose, curry, map, prop }) => {
  // ここにコードを書いていきます。
});

関数型プログラミングのライブラリとして、lodashなどではなく、ramdaを使います。ramdaにはcompose、curryなどが含まれています。

また、requirejsを使ってライブラリを読み込みます。やりすぎな気もしますが、この本では一貫して使っていきます。

それでは、本題に戻って、仕様を説明しましょう。私たちが作るアプリでは、次の4つのことを行います。

検索したい単語に応じてURLを組み立てる
flickrにAPI呼び出しを行う
その結果のJSONをHTMLの画像に変形する
その結果を画面に表示する

この中には、2つ、非純粋な操作が含まれています。それが何かわかるでしょうか？それは、flickr APIからデータを取得するところと、その結果を画面に表示するところです。

そこで、最初に、これらの部分を実装して隔離できるようにしておきましょう。また、trace関数を追加して、デバッグをしやすくなるようにしましょう。

const Impure = {
  getJSON: curry((callback, url) => $.getJSON(url, callback)),
  setHtml: curry((sel, html) => $(sel).html(html)),
  trace: curry((tag, x) => { console.log(tag, x); return x; }),
};

jQueryのメソッドを単純にラップしています。そのときに、カリー化するとともに、引数の順番をより使いやすくなるように入れ替えています。そして、Inpureという名前でまとめることで、これらが危険な関数であるということをわかるようにしています。なお、後の例では、これらの2つの関数を純粋関数に修正します。

次に、Inpure.getJSON関数に渡すためのURLを組み立てます。

const host = 'api.flickr.com';
const path = '/services/feeds/photos_public.gne';
const query = t => `?tags=${t}&format=json&jsoncallback=?`;
const url = t => `https://${host}${path}${query(t)}`;

実際には、おしゃれで、かつ、かなり複雑ですが、モノイド（後で学びます）やコンビネータを使って、pointfreeにurlを作る方法もあります。ただ、今回は、読みやすさを優先して、普通のpointfulな方法でurlを組み立てます。

それでは、APIを呼び出して、画面にデータを表示するapp関数を書いてみましょう。

const app = compose(Impure.getJSON(Impure.trace('response')), url);
app('cats');

このappは、まずurl関数を呼び出し、その結果の文字列をgetJSON関数に渡します。なお、そのgetJSON関数は、1つ目の引数にtrace関数が部分適用されています。実際に実行してみると、APIからのレスポンスが画面に表示されます。

このJSONデータから、画像表示用のデータを作っていこうと思います。どうやら、画像のURLはitemsの中にあり、さらに、それぞれのmediaのmプロパティから取得できるようです。

このネストされたプロパティを取得するために、ramdaで定義されている、一般的なgetter関数であるprops関数を使うことができます。次のpropsを自力実装したバージョンを見ると、何が起きるのかわかりやすいでしょう。

const prop = curry((property, object) => object[property]);

かなり退屈な定義ですが、行っていることは、指定したオブジェクトに、[]を使って、プロパティにアクセスしているだけです。

では、この関数を使って、mediaUrlsを取得しましょう。

const mediaUrl = compose(prop('m'), prop('media'));
const mediaUrls = compose(map(mediaUrl), prop('items'));

items部分を取得したら、それぞれのitemのurlを取得するためにmapする必要があることに注意してください。これを実行すると、mdeiaUrlsに配列が入ります。

これをアプリに組み込んで、取得した結果を画面に表示させましょう。

const render = compose(Impure.setHtml('#js-main'), mediaUrls);
const app = compose(Impure.getJSON(render), url);

ここまででやったことは、mediaUrlsを呼び出して、その結果をHTMLの<main>の部分に配置するように、関数を結合しただけです。そして、traceを呼び出していたところを、renderに置き換えたことで、JSONデータそのままではなく、適切な内容を表示するようにしました。これで、mediaUrlsの内容が、そのまま本文内に表示されます。

最後に、このmediaUrlsを、実際の画像に変換しましょう。もっと大きなアプリケーションでは、HandlebarsやReactなどのテンプレート/DOMライブラリを使ったほうがいいでしょう。

ただ、今回作るアプリでは、imgタグがあればいいだけなので、jQueryを使います。

const img = src => $('<img />', { src });

jQueryのhtmlメソッドには、HTMLタグが入った配列を渡すこともできます。ですから、「mediaUrls」を「imgタグ」に置き換えて、setHTMLメソッドに送れば、アプリは問題なく動きます。

const images = compose(map(img), mediaUrls);
const render = compose(Impure.setHtml('#js-main'), images);
const app = compose(Impure.getJSON(render), url);

これで、完成です！

完成版のスクリプトは次のとおりです。

const CDN = s => `https://cdnjs.cloudflare.com/ajax/libs/${s}`;
const ramda = CDN('ramda/0.21.0/ramda.min');
const jquery = CDN('jquery/3.0.0-rc1/jquery.min');

requirejs.config({ paths: { ramda, jquery } });
require(['jquery', 'ramda'], ($, { compose, curry, map, prop }) => {
  // -- Utils ------------
  const Impure = {
    trace: curry((tag, x) => { console.log(tag, x); return x; }),
    getJSON: curry((callback, url) => $.getJSON(url, callback)),
    setHtml: curry((sel, html) => $(sel).html(html)),
  };

  // -- Pure -------------
  const host = 'api.flickr.com';
  const path = '/services/feeds/photos_public.gne';
  const query = t => `?tags=${t}&format=json&jsoncallback=?`;
  const url = t => `https://${host}${path}${query(t)}`;

  const img = src => $('<img />', { src });
  const mediaUrl = compose(prop('m'), prop('media'));
  const mediaUrls = compose(map(mediaUrl), prop('items'));
  const images = compose(map(img), mediaUrls);

  // -- Impure ------------
  const render = compose(Impure.setHtml('#js-main'), images);
  const app = compose(Impure.getJSON(render), url);

  app('cats');
});

できあがったコードを見てみましょう。

仕様がどうあるべきかが美しく宣言され、どうやってそうなるかは書かれていません。

各行は、どういう特性を持つべきかを表す等式が書かれています。

そして、これらの特性を使って、どういうアプリケーションかを推測したり、リファクタリングをすることができます。

法則に基づいたリファクタリング

先ほどのプログラムは、さらに最適化ができます。というのは、先ほどのプログラムでは、mapを使って各itemを画像のURLに変え、さらにもう一度mapを使って画像のURLをimgタグに変えているからです。

mapと結合（composition）の間には、次のような法則があります。

// mapの結合法則
compose(map(f), map(g)) === map(compose(f, g));

この法則を使って、先ほどのコードを最適化しましょう。これが、法則に基づいたリファクタリングです。

// 元々のコード
const mediaUrl = compose(prop('m'), prop('media'));
const mediaUrls = compose(map(mediaUrl), prop('items'));
const images = compose(map(img), mediaUrls);

まず、mapをしている箇所を1列に並べましょう。具体的には、imagesを処理するときのmediaURLsを呼び出す処理をインライン化します。

等式推論と純粋関数のおかげで、このような処理ができるのです。

const mediaUrl = compose(prop('m'), prop('media'));
const images = compose(map(img), map(mediaUrl), prop('items'));

mapが1列に並んだので、「mapの結合法則」を適用することができます。

/*
compose(map(f), map(g)) === map(compose(f, g));
compose(map(img), map(mediaUrl)) === map(compose(img, mediaUrl)); 
*/

const mediaUrl = compose(prop('m'), prop('media'));
const images = compose(map(compose(img, mediaUrl)), prop('items'));

これで、このアプリは、1回のループ処理だけで、各itemをimgタグに変換できるようになりました。さらに、少し読みやすくするために、一部分の機能を抽出しましょう。

const mediaUrl = compose(prop('m'), prop('media'));
const mediaToImg = compose(img, mediaUrl);const images = compose(map(mediaToImg), prop('items'));

まとめ

このChapterでは、今まで学んできた技術を使って、小さいながらも実際に動くアプリを作りました。そして、数学的なフレームワークを使って、コードを読み、リファクタリングを行いました。

とはいえ、いくつかの疑問も残ります。

エラーハンドリングや、条件分岐はどのように書けばいいのでしょうか？
今回は名前空間を分離して破壊的な関数を使いましたが、それの代わりに純粋関数だけでアプリを作るには、どうすればいいのでしょうか？
アプリを安全に、表現力豊かなものにするためには、どうすればいいのでしょうか？

これらの疑問には、次のChapter以降で取り組んでいきます。

Composeを使ったコーディング - most adequate guide Chapter 5のテキトーな訳

info@excelspeedup.com — Mon, 07 Sep 2020 00:00:00 GMT

このページの趣旨

下記ページの、かなり「大雑把」に、「私が興味を持ったところだけ」を「雰囲気」で翻訳したものです。

mostly-adequate.gitbooks.io Chapter 05: Coding by Composing

原文をかなり崩して書いている（原文にない単語、文章を追加したりしている箇所もある）ので、翻訳とすら、呼べないものかもしれません。

違和感を感じたら、原文を参照することをおすすめします。

Chapter5: Composeを使ったコーディング

関数を組み合わせて使いやすい関数を作ろう

下記がcomposeの汎用的な定義です。

const compose = (...fns) => (...args) =>
  fns.reduceRight((res, fn) => [fn.call(null, ...res)], args)[0];

ただ、現時点で、これがわからなくても大丈夫です。この表記方法は、ものすごく難解な表記方法なので、理解できなくても当たり前です。

そこで、composeがどういうものか理解するために、いったん汎用的な表現から離れます。まずは、2つの関数を結合（compose）する単純な例を見てみましょう。

いったん、具体的な例でcomposeを理解した後に、それを抽象化して考えてみてください。そうすれば、関数がいくつあってもcomposeが動くことが理解できると思います（それを証明することもできます）。

まずは、composeを理解しやすい形で書いてみましょう。

const compose2 = (f, g) => x => f(g(x));

fとgはfunctionで、xは値です。xは、それらのfunctionに（次々と）渡されていく値です。

結合（composition）という演算は、functionを飼育するイメージにも感じられます。たとえば、あなたは、functionのブリーダーです。組み合わせたい2つの関数を選び・混ぜ合わせて、新しいfunctionを作り出すのです。

それでは、話を元に戻しましょう。composeは次のように使います。

const toUpperCase = x => x.toUpperCase();
const exclaim = x => `${x}!`;
const shout = compose(exclaim, toUpperCase);

shout('send in the clowns'); // "SEND IN THE CLOWNS!"

2つのfunctionを結合すると、1つの新しいfunctionが得られます。これは、次のように理解することができます。

2つの同じ型（今回の例ではfunction）の「もの」を結合すると、それとまったく同じ型の新しい「もの」ができあがる

2つのレゴブロックを組み合わせても、リンカーンログ（丸太を組み合わせてログハウスを作るおもちゃ）にはならないということです。今回の「結合演算」の根底には、ある「基本的な法則」が潜んでいます。それについては、後で考えていきましょう。

さて、先ほどのcomposeの定義を見ると、gが先に実行され、fが後に実行されることがわかります。要は、データxは、右から左に流れていくことになります。

さて、このcomposeを使った書き方は、関数呼び出しをネストさせるよりも、はるかに読みやすいものになります。実際、composeを使わない場合、先ほどの式は次のように書くことになります。

const shout = x => exclaim(toUpperCase(x));

この書き方だと、内側から外側の順に関数が実行されていきます。一方で、composeを使えば、右から左に関数が実行されます。

次に、シーケンス（配列など）に対する処理を見ていきましょう。

const head = x => x[0];
const reverse = reduce((acc, x) => [x].concat(acc), []);
const last = compose(head, reverse);

last(['jumpkick', 'roundhouse', 'uppercut']); // 'uppercut'

reverseはリストを逆順に並べ替え、headは、最初の要素を取得します。この2つを組み合わせた結果、（効率的ではありませんが）正しく計算できるlast関数を作ることができました。なお、composeの中の関数の並び順は重要です。並び順が変わると結果が変わる場合があることに注意してください。

また、関数を左から右に適用していくようなcomposeに似た関数を定義することもできます。現状の定義のほうが、数学でいう結合の概念に違いものになります。実は結合（compose）という概念は、数学から来ているのです。

さて、composeは次のような性質を持っています。

// 結合法則を満たす
compose(f, compose(g, h)) === compose(compose(f, g), h);

composeが結合法則を満たすということは、3つの関数を結合するときに、最初に、どの2つの関数を結合しても構わないということです。

たとえば、先ほどの例で、さらに最後に、抽出した文字列を大文字に変換することを考えてみましょう。このとき、次のどちらで書いてもかまいません。

compose(toUpperCase, compose(head, reverse));
// または
compose(compose(toUpperCase, head), reverse);

どのようにcomposeをするくくりを変えても、計算結果は変わりません。

ですから、次のように関数を可変個指定するようなcomposeを書くこともできます。

// 今まで、2つの関数だけを結合してきました。
// でもcomposeは結合法則を満たすので、 
// composeの引数に関数を何個書いても構いません（計算結果は変わりません）。
// どれを最初に結合するかは、composeの実装で自由に決められます。
const arg = ['jumpkick', 'roundhouse', 'uppercut'];
const lastUpper = compose(toUpperCase, head, reverse);
const loudLastUpper = compose(exclaim, toUpperCase, head, reverse);

lastUpper(arg); // 'UPPERCUT'
loudLastUpper(arg); // 'UPPERCUT!'

結合法則が成り立っているので、このように、（右から左に適用する関数をカンマで区切って指定するという）柔軟な表記をすることができます。

もちろん、（どれを最初に結合しても）常に同じ計算結果が得られるので安心して使うことができます。

なお、少し複雑な可変個引数についての定義はこの本のサポートライブラリに含まれています。これは、lodash、underscoreやramdaなどに含まれている通常の定義と同じです。

さて、結合法則を満たすことによるメリットの1つに「複数の関数をcomposeしたもの」を、composeの引数として指定することができる、ということが挙げられます。

この性質を使って、先ほどの例をリファクタリングしてみましょう。

const loudLastUpper = compose(exclaim, toUpperCase, head, reverse);

// -- または --------

const last = compose(head, reverse);
const loudLastUpper = compose(exclaim, toUpperCase, last);

// -- または --------

const last = compose(head, reverse);
const angry = compose(exclaim, toUpperCase);
const loudLastUpper = compose(angry, last);

// 他にも様々な書き方があります

どの方法を選ぶべきかについては、正解・不正解はありません。好きな方法で、レゴブロックを組み立てるように、関数を組み立ててください。

通常は、last、angryなど、再利用できるような単位で、関数をまとめていくといいでしょう。

もし、FowlerのRefactoringという本を読んだことがあるのであれば、この操作は、関数の抽出と同じものだと感じられるかもしれません。もっとも、今回の方法であれば「オブジェクトの状態をまったく意識しないで済む」という点は、違っていますが。

Pointfree styleによるプログラミング

Pointfree styleとは、データそのものについての記述をしないプログラミング手法のことを言います。これは、関数を定義するときに、関数が操作するデータについての記述をしない、ということでもあります。

関数を第一級オブジェクトとして扱うこと、カリー化、結合、これらをうまく組み合わせることで、この手法ができあがっています。

// pointfreeではありません。なぜならデータを表す「word」という変数が出てきているからです
const snakeCase = word => word.toLowerCase().replace(/\s+/ig, '_');

// pointfree
const snakeCase = compose(replace(/\s+/ig, '_'), toLowerCase);

replaceに対して、どのように部分適用をしているでしょうか？replaceは3つの引数を取る関数で、そのうち2つの引数をあらかじめ部分適用して、composeに入れる段階では、残りの1つの引数だけを受け取ればいい状態になっています。そして、composeには「1つの引数をとる関数」を指定して、それらの関数に対してデータを次々と流していっているのです。

このように、カリー化を使って関数を準備することで、データを受け取り、処理をして、次の関数に渡すしています。

また、別の注目点として、pointfree版では、関数について記述をするときに「データについての記述」をしていません。一方で、pointfreeでないほうは、最初にwordというデータを使うための記述が必要になります。

ヒント：replace、toLowerCaseを、Pointfreeな書き方で定義したものがAppendix C - Pointfree Utilitiesの中に入っています。ぜひ、見てみてください。

それでは、別の例も見てみましょう。

// pointfreeではありません。なぜならデータを表す「name」という変数が出てきているからです
const initials = name => name.split(' ').map(compose(toUpperCase, head)).join('. ');

// pointfree
// 注：今回は、Chapter9で出てくる'join'の代わりに、appendixに出てくる'intercalate'を使っています。
const initials = compose(intercalate('. '), map(compose(toUpperCase, head)), split(' '));

initials('hunter stockton thompson'); // 'H. S. T'

pointfree styleのコードでは、今回も「データの名前」は不要なので取り除いています。その結果、簡潔で汎用的な書き方になっています。

pointfree styleは、関数型によるコーディングをするときに、入力から出力にうまく変換できる、小さい関数があるかどうかを判定する、ちょうどいい指標となります。たとえば、pointfree styleでは、whileループを作ることはできません。

ただし、pointfree styleを使うのは、諸刃の剣でもあり、ときどき意図が掴みにくくなるときもあります。ですから、すべての関数型によるコーディングを、pointfree styleにより行う必要はありません。

pointfree styleを使えるときは使えばいいですし、使えないときには通常の関数を使いましょう。

デバッグ

ここで、composeを使う場合に、よくある間違いのパターンを紹介します。

それは、mapのような2つの引数を取る関数を、1つ目の引数に部分適用をしない状態でcomposeをしてしまう、というものです。

// NG：angryの引数に「配列」を渡し、mapの1つ目の引数に「よくわからない何か」を渡して部分適用しています
const latin = compose(map, angry, reverse);

latin(['frog', 'eyes']); // error

// OK：それぞれのfunctionは、1つの引数を受け取る関数になっています
const latin = compose(map(angry), reverse);

latin(['frog', 'eyes']); // ['EYES!', 'FROG!'])

次の例で、実際にデバッグをしてみましょう。

もし、composeが、うまくいかなくなった場合には、（非純粋関数ですが）ログ出力をする関数を定義・使用して、何が起きているのか見てみましょう。

const dasherize = compose(
  intercalate('-'),
  toLowerCase,
  split(' '),
  replace(/\s{2,}/ig, ' '),
);

dasherize('The world is a vampire');
// TypeError: s.toLowerCase is not a function

何か誤りがあるようなので、trace関数を定義して使ってみます。

const trace = curry((tag, x) => {  console.log(tag, x);  return x;});
const dasherize = compose(
  intercalate('-'),
  toLowerCase,
  trace('after split'),  split(' '),
  replace(/\s{2,}/ig, ' '),
);

dasherize('The world is a vampire');
// after split [ 'The', 'world', 'is', 'a', 'vampire' ]   // TypeError: s.toLowerCase is not a function

配列の各要素に対してtoLowerCaseで処理をしたいのですから、mapをする必要があることがわかります。

const dasherize = compose(
  intercalate('-'),
  map(toLowerCase),  split(' '),
  replace(/\s{2,}/ig, ' '),
);

dasherize('The world is a vampire'); // 'the-world-is-a-vampire'

このように、trace関数を使うことで、デバッグ用に、ある時点でのデータの内容を見ることができます。ちなみに、HaskellやPureScriptにも、開発を楽にするために、同じような関数があります。

さて、Composition（結合）は、プログラムを作るためのツールになります。また、（運がいいことに）強力な理論により、うまくいくことが裏付けられています。

それでは、この理論を見ていきましょう。

圏論

圏論は、数学の中で抽象的な分野の一つで、集合論、型理論、群論、論理学などの様々な分野の構造を統一的に扱うものです。

圏論では、主に、対象、射、変換を扱います。これらは、プログラミングに非常に近く、概念を対応付けることができます。次の表では、それぞれの分野で扱われる概念で、同じ概念であるものをまとめています。

型理論	論理学	集合論	homotopy
$A$	命題	集合	space
$a:A$	証明	要素	point
$B(x)$	命題	集合族	fibration
$b(x):B(x)$	条件付き証明	family of elements	section
$0,1$	$\bot,\top$	$\varnothing, \{\varnothing\}$	$\varnothing, *$
$A + B$	$A \lor B$	disjoint union	coproduct
$A \times B$	$A \land B$	set of pairs	product space
$A \to B$	$A \Rightarrow B$	set of functions	function space
$\sum_{(x:A)}B(x)$	$\exists_{x:A}B(x)$	disjoint sum	total space
$\prod_{(x:A)}B(x)$	$\forall_{x:A}B(x)$	product	space of sections
$Id_{A}$	$=$ （等号）	$\{ (x,x) \mid x \in A \}$	path space $A^{i}$

決して、あなたを怖がらせようとして書いたわけではありません。また、これらの概念すべてに慣れてほしい、と思っているわけでもありません。

伝えたいことは、様々な分野で概念が重複しているということです。そして、これを見れば、圏論が、様々な分野の概念を統一しようとしている理由がわかるのではないかと思います。

圏とは何か？

圏論では、圏と呼ばれるものがあります。圏は、次のようなもの（の集まり）として定義されます。

対象（の集まり）
射（の集まり）
- 射は合成できること
- 射の中に恒等射と呼ばれる射があること

圏論は、抽象的なので、様々なものにあてはめることができます。ただ、今回は、プログラミングに関連する概念である「型」と「関数」にあてはめてみましょう。

対象（の集まり）

「対象」は「データ型」に対応します。たとえば、String、Boolean、Number、Objectなどといったものです。

よく、データ型のことを、取り得る値の集合、とみなして考えることもあります。たとえば、Booleanを[true, false]という値の集合として見たり、Numberを、すべての取り得る数値の集合として見ることができます。

型を集合として扱うと、集合論の知識を使って考えることができるようになるので、有用です。

射（の集まり）

「射」は、普通の「純粋関数」に対応します。

射は合成できること

すでにわかっているかもしれませんが、「射の合成」は、さきほど導入したcomposeに対応します。先ほど書いたとおり、composeは、結合法則を満たします。

これは偶然ではありません。圏論の「射の合成」にあてはまるのであれば、この性質を必ず持っている必要があるのです。

次の図は、結合のイメージを表しています。

具体的なコード例は、次のようになります。

const g = x => x.length;
const f = x => x === 4;
const isFourLetterWord = compose(f, g);

射の中に恒等射と呼ばれる射があること

ここで、idと呼ばれる、便利な関数を導入しましょう。この関数は単純で、何か入力を受けたら、それをそのまま出力します。実際に関数を定義すると、次のようになります。

const id = x => x;

ひょっとしたら、「これのどこが便利なんだろう？」と疑問に感じたかもしれません。

後のChapterで、この関数を様々な場所で使うことになるのですが、とりあえず、今は、値の代わりに使える関数（データのフリをした関数）だと考えてみましょう。

idとcomposeを組み合わせて使うときに、idは、1つの引数を持つ任意のfunction f に対して、次のような特別な性質を満たします。

// 恒等射
compose(id, f) === compose(f, id) === f;
// true

この性質を満たす射のことを恒等射といいます。ですから、idは、この圏の恒等射になります。

さて、idは、まるで、数字における単位元（足し算における「0」、掛け算における「1」）のように見えます。もし、すぐに納得できないようであれば、少し時間をかけてみてください。

idは、そのうち様々な場面で使われることになります。ただ、現時点では、この関数は、与えられた値の代わりに振る舞うと考えておきましょう。この関数は、pointfree styleのコードを各ときには、とても役に立つことになります。

様々な圏

ここまでで、データ型と関数からなる圏を定義することができました。

とはいえ、もし、あなたが、圏論に始めて触れているのであれば、たぶん、圏とはどういうもので、なぜ役に立つのか、まだあまりピンと来ていないのではないかと思います。でも、これから、この本を通して知識を積み上げていきます。

とりあえず、このChapterでは、少なくとも、結合（composition）について、結合法則が成り立ち、恒等射が存在しているということは、わかったのではないかと思います。

そのほかに、どのような圏があるか気になるかもしれないので、いくつか例を挙げておきます。

有向グラフについて、「点の集合」を「対象」、「2つの点を結ぶ矢印」を「射」、「2つの点を結ぶ矢印をつなぐ」ことを「合成」とすると、圏を定義することができます
「数字」を「対象」、「≧」を「射」と定義することもできます（実際、任意の全順序集合や半順序集合から、圏を作ることができます）

このように、さまざまな圏がありますが、この本の目的を考えて、この本では、先ほど定義した「データ型と関数からなる圏」だけを考えていきます。

とりあえず、概要は掴めたと思いますので、次に進みましょう。

まとめ

関数の結合（composition）を使うと、まるで複数のパイプをつなぐように、関数を組み合わせて使えるようになります。そして、データは、あなたが作ったアプリケーションの中を流れていきます。

このとき、入力から出力まで、純粋関数でつないでいく必要があります。もし、このつながりを壊してしまった場合には、作ったソフトウエアは役に立たないものになってしまうでしょう。

アプリケーションを作るときには、結合（composition）を使うことを、設計の原則としましょう。

こうすることで、あなたが作るアプリケーションが単純かつ合理的なものになります。圏論は、アプリケーションの構造や、副作用の取り扱い方、正確な処理の保証に大きな役割を果たすでしょう。

次のChapterでは、ここまでの知識を実際に使って、実際にアプリケーションを作ってみましょう。

練習問題

https://mostly-adequate.gitbooks.io/mostly-adequate-guide/content/ch05.html#exercisesに移動して、問題を解いてみてください。

カリー化 - most adequate guide Chapter 4のテキトーな訳

info@excelspeedup.com — Sun, 06 Sep 2020 00:00:00 GMT

このページの趣旨

下記ページの、かなり「大雑把」に、「私が興味を持ったところだけ」を「雰囲気」で翻訳したものです。

mostly-adequate.gitbooks.io Chapter 04: Currying

原文をかなり崩して書いている（原文にない単語、文章を追加したりしている箇所もある）ので、翻訳とすら、呼べないものかもしれません。

違和感を感じたら、原文を参照することをおすすめします。

Chapter4: カリー化

あなたなしでは生きることはできない

私の父は、かつて、一度手に入れるまでは、持っていなくても平気で生活できるような物がある、と説明してくれたことがあります。電子レンジは、その1つです。スマートフォンは、もう1つのものです。年配の方であれば、インターネットのない充実した生活を思い出すかもしれません。私にとっては、カリー化も、それに匹敵します。

その概念はシンプルです。関数を、その関数が必要とするよりも少ない数の引数で、呼び出すことができるのです。その結果、残りの引数を受け取るような関数が得られます。

あなたは、すべての引数を一気に指定して関数を呼び出すか、少しずつ引数を指定して呼び出すかを選ぶことができます。

const add = x => y => x + y;
const increment = add(1);
const addTen = add(10);

increment(2); // 3
addTen(2); // 12

今回は、引数を1つ指定すると関数が得られるfunction addを作りました。返されたfunctionは、1つ目の引数をクロージャーを通して記憶しています。

両方の引数を一気に指定するのは大変なので、curryと呼ばれる特別なヘルパーfunctionを使って、このように簡単に呼び出せるfunctionを定義することができます。

それでは、試しに、いくつかのカリー化されたfunctionを定義してみましょう。ここからは、Appendix A - Essential Function Support.で定義されたcurry関数を使っていきます。

const match = curry((what, s) => s.match(what));
const replace = curry((what, replacement, s) => s.replace(what, replacement));
const filter = curry((f, xs) => xs.filter(f));
const map = curry((f, xs) => xs.map(f));

ここで適用しているパターンは単純ですが、とても重要です。私は、戦略的に、操作対象となるデータ（たとえば、文字列や配列）を最後の引数として配置しています。その理由は、これを使うときにわかるでしょう。

（/r/gという構文は、正規表現で、すべての「r」に一致することを表しています。もし、さらに詳細を知りたいときには、more about regular expressionsをご覧ください。）

match(/r/g, 'hello world'); // [ 'r' ]

const hasLetterR = match(/r/g); // x => x.match(/r/g)
hasLetterR('hello world'); // [ 'r' ]
hasLetterR('just j and s and t etc'); // null

filter(hasLetterR, ['rock and roll', 'smooth jazz']); // ['rock and roll']


// xs => xs.filter(x => x.match(/r/g))
const removeStringsWithoutRs = filter(hasLetterR); 

// ['rock and roll', 'drum circle']
removeStringsWithoutRs(['rock and roll', 'smooth jazz', 'drum circle']);


const noVowels = replace(/[aeiou]/ig); // (r,x) => x.replace(/[aeiou]/ig, r)
const censored = noVowels('*'); // x => x.replace(/[aeiou]/ig, '*')
censored('Chocolate Rain'); // 'Ch*c*l*t* R**n'

ここで、お見せしたのは、事前に1つまたは2つの引数を指定して「事前に」functionを呼び出して、これらの引数を覚えさせた新しいfunctionを得る機能です。

ぜひ、あなたもMostly Adequate repositoryのGitリポジトリをクローンして、上のコードをコピーして、REPLで実行してみてください。curry関数や、付録に書かれているすべてのものは、support/index.jsモジュールで定義されています。

git clone https://github.com/MostlyAdequate/mostly-adequate-guide.git

カリーは特製のソース

カリー化は、様々な場面で便利に使うことができます。たとえば、さきほどのhasLetterR、removeStringsWithoutRsやcensoredのように、元となるfunctionに、いくつかの引数を指定することで、新しいfunctionを作ることができます。

また、1つの要素を操作するあらゆるfunctionを変形して、配列を操作するようにすることもできます。単純にmapでwrapしましょう。

const getChildren = x => x.childNodes;
const allTheChildren = map(getChildren);

一般的に、functionに、想定されているよりも少ない引数を適用することを、部分適用と呼びます。functionに部分適用をすることで大量のボイラープレート（繰り返し似たようなコードを書くこと）を書かないでも済むようになります。

たとえば、先ほどのallTheChildren functionを、カリー化されていないlodashのmapで書くと、どうなるか考えてみましょう（なお、lodashのmapは、先ほど定義したmapとは引数の順番が違うことに注意してください）。

const allTheChildren = elements => map(elements, getChildren);

通常、配列を操作するようなfunctionを直接定義することはありません。なぜなら、単にmap(getChildren)と呼び出せば、配列を操作ようにできるからです。これは、sortやfilter、その他の高階関数を呼び出すときも同じです（高階関数とは、関数を引数または返り値に取る関数です）。

前のChapterで純粋関数の話をしたときに「純粋関数は1つの入力から1つの出力を得る関数だ」という話をしました。カリー化した関数は、まさしくこれに当てはまります。カリー化した関数は、1つの「入力」から（残りの引数の指定が必要な）1つの「新しい関数」が得られます。つまり、1つの入力に対して1つの出力が得られています。

出力が別の関数であっても、純粋関数であることに変わりはありません。また、一度に、複数の引数を指定することもできます。これについては、単に、（表記を簡便にするために）余分な括弧()を取り除いたものと考えることができます。

まとめ

カリー化は、手軽に使うことができます。そして、私は、毎日のように、カリー化した関数を使って仕事をすることをとても楽しんでいます。カリー化は、関数型言語によるプログラミングをするときの冗長さ、面倒さを軽減するためのツールなのです。

新しい便利な関数を、その場で、（単にいくつかの引数を渡すだけで）作成することができます。おまけに、複数の引数を持つ関数についても、数学的な関数の定義に当てはめられるようになりました。

次のChapterでは、もう1つの基本的なツールであるcomposeを手に入れましょう。

練習問題

練習問題についての注意

この本全体を通して、今回のような「練習問題」の項が出てきます。練習問題は、gitbook経由であれば、ブラウザ内で直接実行することができます（これがおすすめです）。

この本のすべての練習問題では、グローバルスコープに、様々なヘルパー関数が準備されていることに注意してください。具体的には、この本のAppendix A、Appendix B、Appendix Cで定義されているすべてのものを使うことができます。それだけでは足りない場合、いくつかの練習問題では、その問題を解くために使う関数を個別に定義しています。それらの個別に定義された関数も使えるものとして考えてください。

ヒント：ブラウザのフォームで「Ctrl」+「Enter」を押すと、回答を投稿することができます。

あなたのPCで練習問題を解く（オプション）

もし、あなたの手元のエディタを使って、練習問題を解きたいときには、次のようにしてください。

リポジトリをcloneする（git clone git@github.com:MostlyAdequate/mostly-adequate-guide.git）
excercises sectionに行く（cd mostly-adequate-guide/exercises）
npmで必要なパッケージをインストールする（npm install）
各chapterのフォルダに入っている「exercises_*」というファイルを修正して、解答を作る
npmで必要な修正を加える（npm run ch04）

ユニットテストが実行され、誤りがあるときには、ヒントが表示されます。また、練習問題の解答は、「exercises_*」というファイルに入っています。

それでは、始めてください！

練習問題はこちら

純粋関数で純粋な幸せを手に入れよう - most adequate guide Chapter 3のテキトーな訳

info@excelspeedup.com — Sat, 05 Sep 2020 00:00:00 GMT

このページの趣旨

下記ページの、かなり「大雑把」に、「私が興味を持ったところだけ」を「雰囲気」で翻訳したものです。

mostly-adequate.gitbooks.io Chapter 03: Pure Happiness with Pure Functions

原文をかなり崩して書いている（原文にない単語、文章を追加したりしている箇所もある）ので、翻訳とすら、呼べないものかもしれません。

違和感を感じたら、原文を参照することをおすすめします。

Chapter3: 純粋関数で純粋な幸せを手に入れよう

純粋さを取り戻そう

まず最初に学ばないといけないのは、純粋関数の考え方です。

純粋関数とは、同じ入力からは、必ず、同じ出力が得られる関数で、副作用のないものをいいます

たとえば、sliceとspliceを考えてみましょう。この2つの関数は、まったく同じことをする関数です。ただ、その処理の方法は、まったく違います。

sliceは、毎回、同じ入力から同じ出力が得られるので純粋関数です。一方で、spliceは、元配列をグチャグチャにして、違うものにしてしまいます。これが副作用です。

const xs = [1,2,3,4,5];

// 純粋関数
xs.slice(0,3); // [1,2,3]

xs.slice(0,3); // [1,2,3]

xs.slice(0,3); // [1,2,3]


// 純粋関数でない
xs.splice(0,3); // [1,2,3]

xs.splice(0,3); // [4,5]

xs.splice(0,3); // []

関数型プログラミングでは、spliceのような元データを変更するような、扱いにくい関数は好みません。私たちは、信頼できる関数を使いたいので、このようなものは使いません。

信頼できる関数というのは、毎回、同じ結果を返す関数であって、spliceのような、後に混乱を残すような関数ではないのです。

それでは、別の例を見てみましょう。

// 純粋関数ではない
let minimum = 21;
const checkAge = age => age >= minimum;

// 純粋関数
const checkAge = (age) => {
  const minimum = 21;
  return age >= minimum;
};

前者の「純粋関数ではない関数」を見てみましょう。

checkAgeは、変更可能な変数であるminimumの内容に応じて、関数の出力が変わります。言い換えると、この関数は、システムの状態に依存しているのです。

これは、残念なことです。というのは、関数の実行結果を考えるときに、外部環境を考慮する必要が出てくるため、考えるべきことが増えてしまうからです。

この例だけでは、それほど重大なことには感じられないかもしれませんが、状態に依存することは、システムを複雑化する一番大きな要因なのです（http://curtclifton.net/papers/MoseleyMarks06a.pdf）。

このcheckAgeは、入力以外の要因に依存して、別の結果を返します。これは、関数の純粋性を失うだけではなく、私たちが、プログラムの挙動を考えるときにも、苦労することになります。

一方で、後者の「純粋関数」は、自己完結しています。変数minimumも不変にすることができます。状態が絶対に変わらないことを保証できるため、純粋性を保つことができるのです。

これをオブジェクトで行いたいときには、次のようにfreezeする必要があります。

const immutableState = Object.freeze({ minimum: 21 });

副作用には、何が含まれるのか？

それでは、さらに副作用がどういうものかを見ていきましょう。

純粋関数の定義の中で悪いものとして言及されている副作用とはどういうものなのでしょうか？これからは、計算結果（返り値）として、計算されたもの以外に発生するすべてのものを「作用」と書いていきます。

作用そのものは悪いものではありませんし、これから後のChapterの至るところで作用を使っていきます。

問題があるのは、その作用に付随する部分です。たとえば、水自体は何も問題ありませんが、よどんだところには虫がわきます。副作用は、それと同じように、あなたのプログラムのバグの発生源となるのです。

副作用は、システムの状態を変えたり、外部との間に観測できる入出力を生じるもので、返り値を計算する途中で発生するものです。

副作用には、次のようなものが含まれます（それ以外のものもあります）。

ファイルの変更
データベースへのデータの挿入
HTTP呼び出し
（オブジェクトの）変更
画面出力、ログ出力
ユーザからの入力の受取
DOMからの情報取得
システムの状態へのアクセス

もちろん、副作用の例は、他にもたくさんあります。functionの外に対する、あらゆる相互作用は副作用です。

この一覧を見ると、本当に、このような作用なしに、実用的なプログラムが組めるのか疑問に感じるかもしれません。でも、関数型言語の世界では、副作用は、プログラムが正しく動かない主な原因であると考えています。

だからといって、これらの副作用を使うことを禁止しているわけではありません。むしろ、これらの副作用を、適切に統制し、制御された方法で扱いたいのです。その方法は、後の章で、関手（functors）や、モナド（monads）が出てきたときに学びます。とりあえず、今は、これらの面倒な機能は扱わないことにしましょう。

副作用があると、関数は、純粋関数になりません。そして、純粋関数は、（定義からわかるように）常に、同じ入力に対して、同じ出力を返す必要があります。逆に、関数が、関数外部の事象を扱っていたら、絶対に、この純粋性を保証することはできないのです。

これから、なぜ、同じ入力に対して同じ出力が得られることが必要なのか、もう少し詳細に見ていきましょう。まずは、（中学で習うレベルの）数学の話を見ていきましょう。

関数とは何か

mathisfun.comによると、関数とは次のようなものです。

関数とは、複数の値の間の、特別な関係です。入力された値に応じて、ただ1つの出力する値を返します。

言い換えると、関数は単なる、「2つの値（入力と出力）の間の関係」です。それぞれの入力に対して、ただ1つの出力を持ちますが、その出力は、入力ごとに違う値を取る必要はありません。たとえば、次の図で表される「xとyの関係」は、関数の定義にあてはまります。

https://www.mathsisfun.com/sets/function.html

一方で、下記の図の「xとyの関係」は、関数ではありません。なぜなら、「5」という入力に対して、複数の出力があるからです。

https://www.mathsisfun.com/sets/function.html

関数は、複数の「（入力、出力）の組」で表現することができます。たとえば、[(1,2), (3,6), (5,10)]は、入力を2倍する関数に見えます）。

あるいは、表の形で表すこともできます。

入力	出力
1	2
2	4
3	6

あるいは、xを入力、yを出力してグラフで表すこともできます。

入力から出力が決まりさえすれば、関数を詳細に実装する必要もありません。関数は、単に、入力と出力を対応づけるものであればなんでも構いません。ですから、関数を使わずに、単純なオブジェクトリテラルで書き下しても構いません。その場合には、()の代わりに[]を使うことになります。

const toLowerCase = {
  A: 'a',
  B: 'b',
  C: 'c',
  D: 'd',
  E: 'e',
  F: 'f',
};
toLowerCase['C']; // 'c'

const isPrime = {
  1: false,
  2: true,
  3: true,
  4: false,
  5: true,
  6: false,
};
isPrime[3]; // true

もちろん、個別に対応を書き下すよりも、計算で、結果を導出したい、と思うときもあるでしょう。でも、これは、関数について違った考え方ができることを表しています。

ひょっとしたら、あなたは、複数の引数を取る関数はどうなるのだろう？と考えているかもしれません。たしかに、数学的に考えるときには、少し表しにくい部分もあります。

とりあえず、今の段階では、「複数の引数」を配列としてまとめたargumentsオブジェクトを入力として使う、と考えてみてください。後で、カリー化を学ぶと、数学的な関数の定義を、プログラミングの関数に、直接適用する方法がわかるようになります。

ここまでで、重要なことがわかりました。純粋関数というのは、数学的な関数だということです。そして、これが、関数型言語のすべてなのです。

この単純なパーツを使ってプログラミングをすることで、大きな利益を得ることができます。これから、なぜ、純粋性を保つために多大な努力をする必要があるのか、その理由を見ていきましょう。

純粋性が重要な場面

キャッシュ可能

まず最初に、純粋関数は、常に、入力に応じて、出力をキャッシュすることができます。出力をキャッシュするために、典型的には「メモ化」という技術が使われます。

const squareNumber = memoize(x => x * x);

squareNumber(4); // 16

squareNumber(4); // 16, 入力「4」に対するキャッシュを返します

squareNumber(5); // 25

squareNumber(5); // 25, 入力「5」に対するキャッシュを返します

次のソースコードは、キャッシュの簡略化した実装です。もちろん、より堅牢に実装されたライブラリも、たくさんあります。

const memoize = (f) => {
  const cache = {};

  return (...args) => {
    const argStr = JSON.stringify(args);
    cache[argStr] = cache[argStr] || f(...args);
    return cache[argStr];
  };
};

注意すべき点として、評価（関数の実行）を後回しにすることで、非純粋関数を純粋関数に変換することができる、ということです。

const pureHttpCall = memoize((url, params) => () => $.getJSON(url, params));

ここで興味深いのは、実際にHTTP呼び出しを行っていないところです。その代わりに、「呼び出したときに、HTTP呼び出しが実行される」functionを返却しています。

このfunction（pureHttpCall）は純粋関数です。なぜなら、同じ入力に対して、同じ出力が得られるからです。urlとparamsを与えると、特定のHTTP呼び出しを行う関数が得られます。

もちろん、先ほど作ったmemoize関数も、問題なく動きます。とはいえ、HTTP呼び出しの結果をキャッシュするわけではなく、生成されるfunctionをキャッシュすることに注意しましょう。

この方法は、今のところ、それほど有用とはいえません。でも、後で、この方法を有用に使う「手法」を学ぶことになります。

ここで学んでほしいのは、どんな関数であっても、たとえその関数が破壊的なものに感じたとしても、キャッシュできるということです。

可搬性がある、自己文書化されている

純粋関数は、完全に、自分自身で完結しています。関数が必要とするすべてのものが、常に揃った状態になっています。

これがどのような効果を持つのか、少し考えてみてください。

まず、関数の依存関係が明示されているため、読みやすく理解しやすいです。見えないところで、何か怪しげなことが行われているということはありません。

// 非純粋関数
const signUp = (attrs) => {
  const user = saveUser(attrs);
  welcomeUser(user);
};

// 純粋関数
const signUp = (Db, Email, attrs) => () => {
  const user = saveUser(Db, attrs);
  welcomeUser(Email, user);
};

この例でわかるように、純粋関数は、何に依存しているかをすべて書く必要があります。その結果、純粋関数の定義を見れば、何が起きるのかが正確にわかります。関数の引数を見るだけで、少なくとも、その関数ではDb、Emailとattrsを使うということがわかります。

これから、私たちは、（単に）評価を遅延する方法ではない方法で、このような純粋関数をどう作るかを学んでいきます。明確にしておきたいのは、純粋な関数は、誰が何を知っているか次第で動きが変わる非純粋関数よりも有益であるということです。

それとは別に意識してほしいのは、純粋関数では、依存性を注入すること、あるいは、引数として依存する対象を渡すことを強制されている、ということです。

これにより、この関数を使ったアプリケーションは、より柔軟なものになります。なぜなら、私たちは、データベースやメールクライアントなどを、パラメータ化したからです（面倒に感じるかもしれませんが、後で、その面倒さを軽減する方法を紹介するので、安心してください）。

別のデータベースを使うことにした場合であっても、この関数を、その別のデータベースを引数にして呼び出せばいいだけです。別のアプリケーションを作る場合に、この信頼できる関数を再利用したいときでも、単に、DbとEmailの部分を、そのとき使っているものに置き換えて、この関数を呼び出せばいいのです。

JavaScriptの設定では、ポータビリティがある（可搬性がある）ということは、関数をシリアライズしてソケット通信で関数を送付できるということを意味します。ということは、Web Workersなどでも、コードを動かせるということです。ポータビリティがあるということは、とても強力な特性なのです。

命令型プログラミングで作られた「典型的な」メソッドやプロシージャは、その状態、依存関係、利用可能な結果などの環境に大きく依存してしまいます。それに対して、純粋関数は、どこでも好きなところで動かすことができるのです。

あなたが最後にメソッドを、別のプログラムにコピーしたのはいつでしょうか？私は、Erlangを作ったJoe Armstrongの次の言葉を、よくお伝えしています。「オブジェクト指向言語の問題は、暗黙の前提となっている環境も一緒に持ち歩かないといけないことです。単にバナナが欲しいだけなのに、バナナを持っているゴリラだったり、ときには、ジャングル全体を持ち歩かないといけないのです。」

テストしやすい

次に、純粋関数は、テストを書くのが、比較的簡単だということに気付くでしょう。実際の支払ゲートウェイや、外部の世界の状態を設定し、結果を想定する必要はありません。単に、関数の入力と想定される出力を与えれば良いのです。

実際、関数型言語のコミュニティでは、新しいテストツールを生み出しています。それは、関数に、自動生成した膨大な数の入力を与えて、出力が満たすべき性質を想定するようなものです（Property-Based-Testing）。それは、この本の範囲からははずれますが、ぜひ、そのツール「Quickcheck」を探して、試してみることを強くおすすめします。このツールは、純粋関数の環境に最適化されたテストツールです。

合理的である

多くの人が、純粋関数を使う、一番大きなメリットは参照等価性を確保できることだと考えています。プログラムの一部が「参照等価的」というのは、挙動を変えずにプログラムの一部の「コード」を「そのコードを評価した値」に変更できることをいいます。

純粋関数は副作用を持たないので、プログラムに対して影響を与えるためには、出力した値を使うしかありません。さらに、純粋関数が出力する値は、入力された値から信頼性をもって計算することができます。ですから、純粋関数は、常に参照等価性を持つことになります。実際の例を見てみましょう。

const { Map } = require('immutable');

// Aliases: p = player, a = attacker, t = target
const jobe = Map({ name: 'Jobe', hp: 20, team: 'red' });
const michael = Map({ name: 'Michael', hp: 20, team: 'green' });
const decrementHP = p => p.set('hp', p.get('hp') - 1);
const isSameTeam = (p1, p2) => p1.get('team') === p2.get('team');
const punch = (a, t) => (isSameTeam(a, t) ? t : decrementHP(t));

punch(jobe, michael); // Map({name:'Michael', hp:19, team: 'green'})

decrementHP、isSamteTeamとpunchは、すべて純粋関数なので、参照等価性を持ちます。そのような場合には、「等式推論」と呼ばれる技術を使うことができます。

これは、ある2つの値が等しいことが分かっている場合に、その1つを別の1つに置き換えることで、コードの動きを推論する方法です。

これは、プログラム的な評価のクセを考慮せずに、コードを手動で評価するようなものです。参照等価性を使って、少し、このコードを解析してみましょう。

最初に、function isSamteTeamを、インライン展開してみましょう。

const punch = (a, t) => (a.get('team') === t.get('team') ? t : decrementHP(t));

今回使っているデータは変更できない（immutable）ので、チームは、実際の値に置き換えることができます。

const punch = (a, t) => ('red' === 'green' ? t : decrementHP(t));

この等式の評価の結果はfalseなので、条件分岐を取り除くことができます。

const punch = (a, t) => decrementHP(t);

さらに、function decrementHPをインライン展開すると、punchは、hpから1を引く処理に置き換わります。

const punch = (a, t) => t.set('hp', t.get('hp') - 1);

一般的に、コードについて、このような推論ができるということは、コードのリファクタリングをしたり、コードの理解をするために、とても効果的です。

実際、このテクニックを使って、Chapter1で、カモメの群れのリファクタリングを行いました。そこでは「等式推論」を使って、足し算・掛け算の性質に結びつけたのでした。たしかに、私たちは、この本を通じて、このテクニックを使います。

並列実行

最後に、とどめの一撃として、純粋関数は並列に実行することができます。なぜなら、並列関数は、共有メモリにアクセスする必要はなく、また、（定義からわかるように）副作用を原因とする競合を起こすこともありません。

サーバサイドJavaScript環境では複数スレッドを使ったプログラムを動かせますし、同じように、ブラウザ環境でもWeb Workerで複数スレッドを使ったプログラムを動かせます。ただ、現時点では、非純粋関数を処理するときの複雑さを回避するために、複数のスレッドを使ったプログラムはあまり使われていないようです。

まとめ

この章では、純粋関数とはどういうものか、そして、関数型言語のプログラマーが、なぜ、純粋関数を非常に重要だと考えているかを見てきました。この観点からは、私たちは、すべての関数を純粋関数として書きたいと切望しています。そのためには、いくつか追加のツールが必要になります。現時点では、純粋なコードから、非純粋関数を分離して扱うことにしましょう。

純粋関数を使って、プログラムを書くことは、追加のツールがないと、やや面倒です。たとえば、状態を使ってはいけないため、当然、すべての箇所に、引数を通じてデータをやり取りしないといけません。どうやって、こんな面倒すぎるプログラムを組めばいいのでしょうか？

そこで、次の章で、カリー化という新しいツールを手に入れましょう。

functionは第一級オブジェクト - most adequate guide Chapter 2のテキトーな訳

info@excelspeedup.com — Fri, 04 Sep 2020 00:00:00 GMT

このページの趣旨

下記ページの、かなり「大雑把」に、「私が興味を持ったところだけ」を「雰囲気」で翻訳したものです。

mostly-adequate.gitbooks.io Chapter 02: First Class Functions

原文をかなり崩して書いている（原文にない単語、文章を追加したりしている箇所もある）ので、翻訳とすら、呼べないものかもしれません。

違和感を感じたら、原文を参照することをおすすめします。

Chapter2: functionは第一級オブジェクト

概要

functionが「第一級（first class）」と呼ばれるのは、functionが他の「もの」とまったく同じときです。言い換えると「普通のclass」ということです。関数を他のデータと同じく扱うことができ、かつ、かつ、関数は、他のデータと変わるところはありません。関数は、配列に格納したり、関数の引数として指定したり、変数に代入することができます。

このことは、JavaScriptの基本的な事項ですが、再確認してください。なぜなら、githubでちょっとコードを検索すると、このことを無視したプログラムが大量に出てくるからです。例えば、次の例を見てみてください。

const hi = name => `Hi ${name}`;
const greeting = name => hi(name);

ここで、h1に対して作成したラッパーgreetingは、完全に冗長なものになっています。なぜでしょうか？それは、JavaScriptでは、functionは「呼び出し可能(callable)」だからです。hiに()を付けて呼び出せば、functionとして実行されて値が返されます。もし()を付けなければ、単に、変数に格納されたfunction（を定義するソースコード）が返されます。確認のために、あなた自身で確かめてみてください。

hi; // name => `Hi ${name}`
hi("jonas"); // "Hi jonas"

greetingは、単にh1を呼び出しているだけで、引数もまったく同じなので、次のように簡潔に書くことができます。

const greeting = hi;
greeting("times"); // "Hi times"

言い換えると、hiは、元から1つの引数を受け取るfunctionなのに、なぜ、同じ引数で単にh1を呼び出すだけのfunctionをわざわざ別に作る必要があるのでしょうか？まったく意味がありません。

ムダに冗長なだけでなく、たまたま、内部で呼び出している関数を遅延実行できるようになりましたが、遅延実行をする書き方としても良い書き方ではありません（その理由は、後述するように、内部の関数の仕様変更に伴いこの関数を書き替える必要があるからです）。

npm packagesにも出てくる冗長な書き方の例

この問題については、次に進む前に、きちんと理解しておいたほうがいいでしょう。そこで、もう少し、面白い例を見てみましょう。npm packagesのライブラリには、次のようなものがあります。

// 冗長な例
const getServerStuff = callback => ajaxCall(json => callback(json));

// 書き換え後
const getServerStuff = ajaxCall;

このような書き方をしているajaxのコードは、様々な場所で出てきます。

実際、この2つは、次のようにして等価であることを確かめられます。

// この部分は、、
ajaxCall(json => callback(json));

// 下記と同じ
ajaxCall(callback);

// だから、getServerStuffを、次のようにリファクタリングすることができて
const getServerStuff = callback => ajaxCall(callback);

// これは、下記と同じになる
const getServerStuff = ajaxCall; // <-- ()がなくなりました

たとえば、もう1つの例を見てみましょう。それをみると、なぜ、私がここまでしつこくこの話を言うかがわかるでしょう。

const BlogController = {
  index(posts) { return Views.index(posts); },
  show(post) { return Views.show(post); },
  create(attrs) { return Db.create(attrs); },
  update(post, attrs) { return Db.update(post, attrs); },
  destroy(post) { return Db.destroy(post); },
};

このバカげたControllerは99%意味がありません。このプログラムは、次のように書き換えられます。

const BlogController = {
  index: Views.index,
  show: Views.show,
  create: Db.create,
  update: Db.update,
  destroy: Db.destroy,
};

あるいは、単にViewとDBをひとつにまとめているだけなのですから、この文自体も不要で、バラバラにしてもいいかもしれません。

なぜ「第一級（first class）」が良いのか

なぜ、functionが「第一級（first class）」として扱われるのが良いのか、もう少し考えてみましょう。

先ほど見たgetServerStuffやBlogControllerの例のように、簡単に、なんの付加価値も生み出さない、メンテナンス・検索性を損なうだけのムダなコードを増やすことができます。

さらに、このように無意味にラップされた関数を修正するときに、ラッパー関数も修正する必要が出てきます。たとえば、次の例を見てみましょう。

httpGet('/post/2', json => renderPost(json));

ここで、httpGetを、errが起きた場合にそれをcallback関数に返すように修正してみましょう。すると、次のように、ラッパー関数も修正する必要がでてきます。

// httpGetを呼び出しているすべての箇所で、引数にerrを付け加える必要がある
httpGet('/post/2', (json, err) => renderPost(json, err));

もし、functionを「第一級（first class）」として書いていれば、修正すべき箇所は大きく減るでしょう。

// httpGetは、renderPostを好きな引数で呼び出すことができます
httpGet('/post/2', renderPost);

引数の名前を一般化する

不要なfunctionを取り除くだけでなく、引数の名前も取り除くべきです。というのは、引数の名前は、実体とずれてしまう場合があるのです。特に、プログラムを作ってから時間が経ったり、要件が変わったときに問題になります。

ですから、引数の名前は取り除きましょう。同じものに対して複数の名前が付いていると、プロジェクトが混乱する原因となります。

また、変数名は、汎用性にも関わってきます。たとえば、次の2つのfunctionはまったく同じことをしていますが、後者のほうが、より一般的で、再利用できるように感じます。

// 現在のブログに特化していている
const validArticles = articles =>
  articles.filter(article => article !== null && article !== undefined),

// 将来のプロジェクトにも使いまわせそう
const compact = xs => xs.filter(x => x !== null && x !== undefined);

状況に特化した名前を付けてしまうと、私たち自身、そのデータ（たとえば、今の例であればarticles）と結びつけて考えてしまいがちです。これは、再発明の原因になってしまいます。

thisを使うのはトラブルの元

また、もう1つ伝えるべきことがあります。オブジェクト指向で書くコードのように、thisを使うと、後で、大きな問題になりがちです。もし、下層のfunctionでthisをつかっている場合、そのfunctionの引数として「第一級（first class）のfunction」を指定すると、抽象化が破れてしまいます。

const fs = require('fs');

// NG
fs.readFile('freaky_friday.txt', Db.save);

// OK
fs.readFile('freaky_friday.txt', Db.save.bind(Db));

自分自身をbindしておくことで、DBは、自分自身のプロトタイプのコードに無理やりアクセスすることはできます。ただ、thisの使用は避けるべきでしょう。実際、関数型の作法でコードを書いていれば、thisを使う必要はありません。とはいえ、他のライブラリを使う場合には、このような面倒なことを意識しないといけないかもしれません。

thisは、実行速度を上げるために必要だ、という人もいるかもしれません。もし、あなたが実行速度に過度にこだわるのであれば、この本を読むのは止めましょう。実行速度にこだわる代わりに、手間がかかることは覚悟しましょう。

それでは、次の章に進みましょう。

これから何を学ぶのか？ - most adequate guide Chapter 1のテキトーな訳

info@excelspeedup.com — Thu, 03 Sep 2020 00:00:00 GMT

このページの趣旨

下記ページの、かなり「大雑把」に、「私が興味を持ったところだけ」を「雰囲気」で翻訳したものです。

mostly-adequate.gitbooks.io Chapter 01: What Ever Are We Doing?

Chapter1: これから何を学ぶのか？

カモメの群れの例で考える

カモメの例で考えてみよう。

群れが合流したら大きな群れができる（※こちらの群れと、相手の群れの足し算）
繁殖をしたら、交配した数だけ増える（※こちらの群れの数と、相手の群れの数のかけ算）

まずは、オブジェクト指向でコードを書くとこんな感じ。

これは、現代の代入ベースのプログラムの組み方に危険性に焦点をあてるための例です。

class Flock {
  constructor(n) {
    this.seagulls = n;
  }

  conjoin(other) {
    this.seagulls += other.seagulls;
    return this;
  }

  breed(other) {
    this.seagulls = this.seagulls * other.seagulls;
    return this;
  }
}

const flockA = new Flock(4);
const flockB = new Flock(2);
const flockC = new Flock(0);
const result = flockA
  .conjoin(flockC)
  .breed(flockB)
  .conjoin(flockA.breed(flockB))
  .seagulls;
// 32

意図としては、答えは16になってほしいのに、32になってしまっています。flcokAは、計算過程で値が変わってしまっているのが原因です。

もし、理解できなくても、それは全然問題ありません。私自身も理解できないので（笑）。

覚えておいてほしいのは、「状態」と「変化する値」を追うのは、大変だということです。実際、今回のような簡単な例でも大変ですよね？

関数型言語のアプローチで考えてみる

では、もう一度同じ問題をやってみましょう。

今度は関数型言語のアプローチでやってみます。

const conjoin = (flockX, flockY) => flockX + flockY;
const breed = (flockX, flockY) => flockX * flockY;

const flockA = 4;
const flockB = 2;
const flockC = 0;
const result =
    conjoin(breed(flockB, conjoin(flockA, flockC)), breed(flockA, flockB));
// 16

今度は正しい値が計算できたでしょう？しかも、短いコードで。もっとも、関数の入れ子は、少し読みにくいですが（これについては、Chapter 5でこの問題を解決します）。

最初の例に比べれば、かなり良いプログラムになったけれど、さらにプログラムを改良できないか考えてみましょう。先ほどの関数がどういうものか考えてみると、これらの関数は、単に足し算（conjoin)、かけ算（breed)をしているだけです。それなら、これらの関数を、足し算は足し算、掛け算は掛け算と呼んだほうがいいのではないか？

関数名を実態に合わせる

この2つの関数は、名前以外に特に変わっているところもないので、これらの関数をaddとmultiplyに変えて、名前を実体に合わせてみましょう。

const add = (x, y) => x + y;
const multiply = (x, y) => x * y;

const flockA = 4;
const flockB = 2;
const flockC = 0;
const result =
    add(multiply(flockB, add(flockA, flockC)), multiply(flockA, flockB));
// 16

上のように書きなおしたことで、次のような「昔の人の知恵」を利用することができます。

// 結合法則
add(add(x, y), z) === add(x, add(y, z));

// 交換法則
add(x, y) === add(y, x);

// 単位元「0」の存在
add(x, 0) === x;

// 分配法則
multiply(x, add(y,z)) === add(multiply(x, y), multiply(x, z));

数学の法則を使って、さらに簡単な式に書き換える

これらの昔から知られている数学的な性質を利用していきましょう。もし、これらの内容がわからなくても安心してください。ほとんどの人にとって、これらの算数の法則を学んでから、随分時間が経っているのですから。

それでは、これらの性質を使って、先ほどのプログラムを簡単な形に直していきましょう。

// 元々の形
add(multiply(flockB, add(flockA, flockC)), multiply(flockA, flockB));

// 単位元「0」の足し算をしても結果は変わらないので、取り除きましょう
// (add(flockA, flockC) == flockA)
add(multiply(flockB, flockA), multiply(flockA, flockB));

// 分配法則（の逆）を使って、最終的な形に変形しましょう
multiply(flockB, add(flockA, flockA));

この関数呼び出しだけで充分だったのです。あとは、add関数とmultiply関数の定義を書き足しておけば、完全なものになります。でも、実際には、これらの定義を各必要はありません。addとmultiplyは、既存のライブラリで提供されているはずです。

このChapterのまとめ

ひょっとしたら、「こんな数学っぽい例を全面に出されても意味がない」「実際のプログラムは、こんなに単純じゃないから、こんな方法では無意味だ」などと考えているかもしれません。でも、この例を選んだのは、ほとんどの人が「足し算」と「掛け算」を理解しているからです。そして、算数の知識がどれだけ利用価値が高いかが簡単に理解できだと思います。

数学がわからないからといって悲観的になる必要もありません。この本の中では、圏論や集合論、ラムダ計算を使って、実世界ででてくる例を、プログラム化していきます。その結果は、さきほどのカモメの群れの例と同じように、綺麗・シンプルなプログラムができあがるでしょう。もちろん、あなたは数学の学者になる必要もありません。この本で扱うことは、自然に・簡単に感じられるでしょう。それは、一般的なフレームワークやAPIを使うのとあまり変わりません。

（以下、疲れたのと、本題に関係なさそうなので、翻訳は略）

このブログを構築した方法

info@excelspeedup.com — Wed, 02 Sep 2020 00:00:00 GMT

きっかけ

昨日（2020/9/3）、ツイッターで、「githubにmarkdownの原稿を上げたら、記事がホームページ（ブログ）に公開される仕組みを、簡単に作る方法」について質問をしたら「GitHub PagesとかNetlifyがいいんじゃない？」というお返事を頂きました。

githubにmarkdownの原稿を上げたら、記事がホームページ（ブログ）に公開される仕組みを、簡単に作る方法ってあるんでしょうか？
— はけた＠経理のExcel仕事術 8/27発売 (@excelspeedup) September 3, 2020

ということで、せっかくなので、ブログを作ってみました。

技術選定

最近、Reactを勉強していることもあり、とりあえずGatsbyを使おう、ということは決めていました。

あとは、それで生成したデータを、どこで公開するかを検討し、最終的には「Netlify」に決定しました。

Github Pages

調べてみると、GitHub Pagesに上げるためには、下記のような制約があるようでした。

Publicフォルダ以下だけをMasterブランチにPushしないといけない
1つのGitHubアカウントごとに、1つのGitHub Pagesしか使えない

Gitの設定も面倒そうですし、GitHub Pagesは、昔、別用途で使っていたので、どちらにしても、無理ということで却下。

Netlify

こちらは、単に、MasterブランチにGatsbyのプロジェクトをPushすれば、ブログが公開できるらしい、ということで、Netlifyで公開することに決定。

Gatsbyの設定

ということで、Gatsbyの設定を始めます。

チュートリアルの実施。Netlifyで試しに公開

まずは、適当にチュートリアルを実行。ある程度まで進めたところで、いったん、Netlifyに転送。まずは、簡単に公開できることは確認できました。

→　Hello Gatsby!

テンプレートの選定

ということで、本腰を入れて構築を開始します。

まずは、公式サイトのstarters（ブログなどのテンプレートが公開されているページ）から、適当なGatsbyのテンプレートを探してダウンロードします。

最終的に選んだのはgatsby-markdown-blog-starterです。

このテンプレートに行きつくまで、いくつか試してみたのですが、なかなかうまくいかず難航しました。

デザインが気に入らない

シンプルな、カテゴリページ・記事ページが作れるブログテンプレートを探したのですが、意外とそういうテンプレートがありません。

ソースコードが複雑すぎる

当然、テンプレートのソースコードは、テンプレートごとに変わります。

ダウンロードしたものの中には、テンプレートがどういう構造になっているのか、（今の私のレベルでは）ぱっと見でわからないものもありました。なので、そういうものは、候補から除外しました。

例：gatsby-starter-blog-and-cv

ダウンロードしても動かない

ダウンロードしても、うまく動かせない、というものも結構ありました。

あるいは、うまく動いたとしても、使っているnpmパッケージが古くて脆弱性だらけ。なので、パッケージをアップデートしたら動かなくなる、というようなものもチラホラ。

特に、ソースコードが複雑すぎて、どう見たらいいかわからないもので、こうなってしまうとお手上げです。

テンプレートを設定・改変する

テンプレートを選んだら、個別の設定をしていきます。

Linterを入れる

まず、Linterの設定を自分の好みに変えて、ソースコードをそれに合わせて自動修正します。

npmパッケージのアップデート

npmパッケージが古いのでアップデート。それに合わせて、動かない箇所が出てきたので微修正をします。

今回は、「LinkedIn」関連のコンポーネント（いいねをする機能か、いいねの数を拾う機能？）がアップデートに伴い、うまく動かなくなっていたようです。LinkedInは不要なので削除しました。

日付処理のローカライズ

ブログ記事の投稿日が「2020/9/1」なのに、実際の表示が「2020/8/31」になる、など、日付関連に不具合がありました。

どうやら、タイムゾーンの処理に起因するトラブルのようなので、テンプレートに修正を入れました。

Add option to get date in local or specified time zone

※参考にした記事がもう1つあったんですが。忘れました。

具体的には、次のように処理を変えています。

Markdownのデータを取得するクエリ部分で書式を整えない

test.js：変更前

  query BlogPostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      timeToRead
      excerpt
      frontmatter {
        title
        cover
        date
        categories
        tags
      }
      fields {
        slug
        date(formatString: "MMMM DD, YYYY")      }
    }
  }

↓

test.js：変更後

  query BlogPostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      timeToRead
      excerpt
      frontmatter {
        title
        cover
        date
        categories
        tags
      }
      fields {
        slug
        date      }
    }
  }

実際の出力時に日付を整える処理を入れる

test.js 変更前

//（略）
<p className={styles.postMeta}>
  {date} &mdash; {postNode.timeToRead} Min Read{' '}</p>

↓

test.js 変更後

const f = (date) => moment(date).format(`YYYY-MM-DD`);//（略）
<p className={styles.postMeta}>
  {f(date)} &mdash; この記事は{postNode.timeToRead}分で読めます{' '}</p>

その他細かい調整

その他、出力されたHTMLで、いくつか、怪しげなところがあったので微調整をして、一応は設定が完了です。

まとめ

ということで、記事を投稿してみましたが。

見出し・画像が見にくいなど、まだまだ、レイアウトに調整が必要そうですね。

追々調整をしていきます。