Web開発でも使われるトルツメ、トルママ、イキに関してざっくりまとめる

仕様の検討をしているときに、言葉尻としては意味がぼんやりわかるが、認識されていないことがあるのでざっくりまとめる

そもそも「トルツメ」「トルママ」とは

印刷物の現行の誤りを修正する校正作業において、修正箇所の記述をするための「校正記号」というものがある。この校正記号を標準化したJIS規格として JIS Z 8208 として定義されている。その中において、トルツメやママという表現をつかっているため、そちらが原典となる。

それぞれの規格上の意味

JIS規格の記述を引用して簡単に説明をする

トルツメ

文字を「削除して埋める」というときに対象となる文字に線を引くなどして、そこに併記する形で「トルツメ」と記述する形で使用する。「トル」とだけ書く場合もある。

トルママ

文字を「削除し、削除した部分をそのまま空白にする」というときに対象となる文字に線を引くなどして、そこに併記する形で「トルママ」と記述する形で使用する。「トルアキ」と記載する場合もある。

イキ

修正の記述の記載を行ったのちに、当該修正が不要となったときに修正そのものを取り消すことを表現するために「イキ」と記載を行う。

Webのデザインにおいての所感

Web開発の世界においてもこれらの言葉を耳にすることは多く、概ね校正用語とほぼ同等の意味で使われることが多いと思われる。（こちらは出典があるわけではなく筆者体感）

主な使われ方としてはHTMLの構成要素として削って欲しい場合に「トルツメ」という表現をすることが多いように見受けられ、HTMLのレンダリングの動きとして該当のDOM要素記述を削ると該当要素がが抜けて他の要素が詰まる形になるためその親和性の高さも重なり使われているように思われる。

なお、「イキ」に関しては校正用語と同じニュアンスで「修正をキャンセルしてそのままで問題ない」という意図で使われることが多いイメージ。

参考リンク

• 校正記号：使い方を知る前に［JIS Z 8208印刷校正記号］ | Tokyo校正視点｜校正・校閲ハブサイト
• 「トルツメ」の意味が伝わらない | 編集者の郊外暮らし、自然な暮らし

JavaScriptの二重のアロー演算子を使ったカリー化がわかりにくいので分解して理解する

読んでいてたまにわからなくなるタイミングがあるので記憶を呼び起こすためのメモ

カリー化とは

Wikipedia曰く以下のようなことをカリー化としている。

カリー化 (currying, カリー化された=curried) とは、複数の引数をとる関数を、引数が「もとの関数の最初の引数」で戻り値が「もとの関数の残りの引数を取り結果を返す関数」であるような関数にすること（あるいはその関数のこと）である。 - カリー化 - Wikipedia

実際にカリー化でやりたいことは「引数が複数ある関数において、個々の引数を固定した関数をつくる」ということである。

// ベースの値を足す値と引く値をセットするメソッド
let normalFunction = (baseNumber, addNumber, subtractNumber) => {
  console.log(baseNumber + addNumber - subtractNumber);
};

// ベースの値を固定して、他の値は引数としてとるfunctionを作る（これはカリー化とは言わず部分適用と呼ばれる）
let fixBaseFunction = (baseNumber) => {
  return (inAddNumber, inSubtractNumber) => normalFunction(baseNumber , inAddNumber , inSubtractNumber);
};

let base100Function = fixBaseFunction(100)

// 以下は同じ意味
normalFunction(100,20,30);
fixBaseFunction(100)(20,30);
base100Function(20,30);


// 似た形ですべての引数を単独の引数の形に変形する、これがカリー化
let curriedFunction = (inBaseNumber) => {
  return (inAddNumber) => {
    return (inSubtractNumber) => {
      normalFunction(inBaseNumber , inAddNumber , inSubtractNumber);
    };
  };
};

// 他のfunctionと同じ結果となる
curriedFunction(100)(20)(30);

このようにカリー化を行うと「baseNumberだけ100で大体固定なんだけどな…」のようなシーンに100で固定した関数を作り出して渡すということが可能になる。

なお、カリー化は引数を1つずつ分割することを意味し、部分的に引数を分割すること（上記の例で言う fixBaseFunction )は「部分適用」と呼ばれる。

アロー演算子を二重に使ってカリー化をする

カリー化をとても雑にいうと「引数を複数持つ関数を引数を一つずつ取る形に分割する」ということなので、それをアロー演算子を重ねて使うとかんたんに実現できる

let originalFunction = (x, y) => {
  return x - y;
};


let curriedFunction = (x) => {
  return (y) => {
    return x - y;
  };
};

let arrowCurriedFunction = (x) => (y) => {
  return x - y;
};

let minimumArrowCurriedFunction = x => y => x - y;

参考サイト

• カリー化と部分適用（JavaScriptとHaskell） - Qiita
• サルでもわかるカリー化とそのメリット - These Walls
• 【TS】今さら聞けない高階関数・カリー化

Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス

JavaScriptのDestructuring（分割代入）に関してざっくりまとめる

便利だけど名前がふわっとしているので雑にまとめる

今回取り上げるもの

JavaScriptにおいて Destructuring assignment と呼ばれるもの、日本語では分割代入と訳したり、ままカタカナ語でデストラクチャリングという。大きくこの機能には「配列を対象にしたもの」「オブジェクトを対象にしたもの」が存在するのでその2つのくくりで説明をする。

配列

配列を分割して代入をすることができる

const baseArray = [1,2,3]

const [frist,sencond,third] = baseArray
// firstには1 , secondには2 , thirdには3が入る

また、部分的に取り出したりすることもできる

const baseArray = [1,2,3]

const [ichi] = baseArray
// ichiに1が入る

const [x,,z] = baseArray
// xに1 , zに3が入る

またスプレッド構文を用いた残余引数(RestParameter)を指定すると広域に切り取りができる

const longArray = [10,20,30,40,50]

const [ichi,...nokori] = longArray
console.log(ichi) // 10
console.log(nokori) // [20,30.40.50]

ただし残余引数のあとに別の変数を設定を指定していれることはできない

// 下記のような記述をするとエラー
const [first,...aida,last] = longArray

引数への活用

関数の引数に使うこともできる

function loggingfirst([first, ...nokori]){
  console.log(`logging ${first}`)
}

let array = [2,4,8,16]
loggingfirst(array) // logging 2

オブジェクト

オブジェクトは対応するキーのものがあれば入る形になる

let source = { age: 20, name: "Tanaka", country: "Japan"}
let {name , age} = source

console.log(name) // Tanaka
console.log(age) // 20

もちろん対応するオブジェクトがない場合は入らない

let source = { age: 20, name: "Tanaka", country: "Japan"}
let {test , age} = source

console.log(test) // undefined
console.log(age) // 20

また初期値設定もできる

let source = { age: 20, name: "Tanaka", country: "Japan"}
let {test = "test text" , age = 30} = source

console.log(test) // test text
console.log(age) // 20

キー名とは異なる変数への割当

以下のように書くことでキー名と別の変数に割り当てることができる

let source = { age: 20, name: "Tanaka", country: "Japan"}
let {test: newTest = "test string" , age: newAge , todouhuken: region} = source

console.log(newAge) // 20
console.log(newTest) // test string
console.log(region) // undefined

この構文はコロンを挟んで右側に要素を入れる形なので気をつける。（だいたい他の構文はコロンの左側に右側の値を入れる）

引数への活用

配列同様に引数にも活用できる

function loggingName({name}){
  console.log(`logging ${name}`)
}

let source = { age: 20, name: "Tanaka", country: "Japan"}
loggingName(source) // logging Tanaka

参考リンク

• 分割代入 - JavaScript | MDN

Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス

JavaScriptのスプレッド構文(...)についてざっとまとめる

ドットドットドットとかトリプルドットとか、ググる場合の初見殺しであるスプレッド構文に関してまとめる

スプレッド構文とは

変数名の前にドット3つで表現する構文 ... というものをスプレッド構文という。なお、functionの引数に...を付けて表現するものは残余引数なので、それは後述。

使い方

配列のコピー

配列を複製するのに使うことができる。JSで変数を扱う場合イミュータブルにしたいケースが多いので、配列操作をするときに重宝する。

let target = [1,2,3]
// [1, 2, 3]
let new_array = [...target,10]
// [1, 2, 3, 10]
let long_array = [100,...new_array,1000]
// [100, 1, 2, 3, 10, 1000]

ただし、多次元配列には適さないので注意。

オブジェクトのコピー、改変

スプレッド演算子を使うとオブジェクトの値として代入が可能。いろいろなパターンの応用ができる。

純粋に複製する

let obj = { name: "taro" , age: 20 }
// {name: 'taro', age: 20}

let copy_obj = {...obj}
// {name: 'taro', age: 20}

キーと値を追加する

let obj = { name: "taro" , age: 20 }
// {name: 'taro', age: 20}

let new_obj = { ...obj, skill: "運転免許" } 
// {name: 'taro', age: 20, skill: '運転免許'}

こちらに関しては変数名だけ書くとその変数のキーの値を入れるということもできる。設定したキー名と変数名が一致した場合は後述の上書きの挙動とおなじになる。

let obj = { name: "taro" , age: 20 }
// {name: 'taro', age: 20}

let power = 20
let power_obj = {...obj , power} 
// {name: 'taro', age: 20, power: 20}

既存要素を上書きする

let obj = { name: "taro" , age: 20 }
// {name: 'taro', age: 20}

let ziro_obj = { ...obj, name: "jiro" }
// {name: 'jiro', age: 20}

let age = 35
let feature_obj = { ...obj , age}
// {name: 'taro', age: 35}

残余引数とは

functionの引数に...を3つつけることで実現する数に縛られない引数。いわゆる可変長引数。下記の moreArgs のように記述する。

function test(mustArg1, mustArg2, ...moreArgs) {
  console.log("Arg1 is ", mustArg1)
  console.log("Arg2 is ", mustArg2)
  console.log("moreArgs is ", moreArgs)
}

上記のfunctionを利用すると以下のようになる。

// 引数として指定しないと空の配列となる

test("1" , "2")
// Arg1 is  1
// Arg2 is  2
// moreArgs is  []

// 複数指定するとその分配列で値が入る

test("1" , "2" , "3" , "4")
// Arg1 is  1
// Arg2 is  2
// moreArgs is  (2)['3', '4']

ちなみに残余引数のあとに、通常の引数を記述することはできない

// 下記のように定義するとエラーになる

function test(firstArg , ...args , lastArg){
}

参考リンク

• スプレッド構文 - JavaScript | MDN

Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス

GoogleAppScriptでJSを使う場合、便利なメソッドが用意されている

base64変換処理とかECMA2015の標準にないからつくらないといけないのかな…とか思ったときに

リファレンス

Class Utilities | Apps Script | Google Developers

どんなものがあるか

• BASE64への変換/BASE64からの復元(base64Encode/base64Decode)
• ByteデータからBlobへの変換(newBlob)
• CSVやTSVをString配列に変換(parseCsv)
• gzip形式への圧縮/解凍(gzip/ungzip)
• Date型を文字列変換(formatDate)

参考リンク

• GAS の Blob とファイル変換まとめ - Qiita
• Google Apps Script で、電子署名をする | Monotalk

アスタリスクを2つ並べる記法(**)をglobstar(グロブスター)と表現することがある

ググりにくいんだけど、あんまり呼称が定着指定ない感じもしたので調べてみた

TL;DR

ディレクトリパスの指定などで ** と書くことがあり、その際の呼称を globstar と記載することがある。なお globstar という呼称で呼ばれるのはbashのオプション名が起源かと思われる。

**が登場するドキュメント

Docker

Dockerの設定としても登場する。

Go 言語の filepath.Match ルールを拡張し、 Docker は特別なワイルドカード文字列 ** もサポートします。これは、（0も含む）複数のディレクトリに一致します。 - Dockerfile リファレンス — Docker-docs-ja 20.10 ドキュメント

GitHub Actions

GitHub Actionsでフィルタパターンとして登場している

・ ゼロ個以上のキャラクタにマッチしますが、/にはマッチしません。 たとえばOctoはOctocatにマッチします。
・** ゼロ個以上の任意のキャラクタにマッチします。
- GitHub Actionsのワークフロー構文 - GitHub Docs

そもそもglobとは

wikipediaの記述が的確なので転載する。

グロブ（英: glob）とは主にUnix系環境において、ワイルドカードでファイル名のセットを指定するパターンのことである。例えば、UNIXのコマンド「mv .xlsx 営業実績/」はカレントディレクトリから営業実績/ディレクトリへと.xlsxで終わる全てのファイルを移動する。ここで、は「任意の文字列」を表すワイルドカードであり、.xlsxはグロブである。以外に一般的なワイルドカードは疑問符 (?) であり、これは任意の1文字を表す。 - グロブ - Wikipedia

このようにワイルドカードとセットで表現した文字列のことをグロブという。

globstarという呼び方の由来について

紹介したドキュメントで ** という記法は登場するが、大体記号を記載することで説明としては完結するので、ドキュメント上は「globstar(グロブスター)」という表現は登場しない。

そのため明示的に「globstar(グロブスター)」という呼称を使っているものはどこが起源かというところが見当たらないので、少し調べてみた。

** という記法の起源

下記のブログ曰く、 ** という記法は、zshが起源ではないかとされている。

そしてついに Zsh-2.2 の Modification history に、 **/ が出現します。 (中略) 時に、1992/05/14。 ここまでの経緯を見るに、zsh が元祖ではないか？と私には見えました。 -再帰globパターン **/ の元祖は zsh なのか、調べてみた - hkoba blog

しかしながらzshのドキュメントにはglobstarという表現は見当たらない、そこでもう少し追う。

bashでの利用とオプション名としての命名

この ** は bashで利用したい場合 globstar という名前でオプション指定できるようになっている。

シェル変数「globstar」を有効にすると、「**」によるパス名展開を使用できるようになります。 - 【 shopt 】コマンド（応用編その5）――「**」によるパス名展開を可能にする：Linux基本コマンドTips（366） - ＠IT

このglobstarオプション自体が（bashに加わったのはversion4で、時系列としては2005年あたりになるが、ざっくり調べて見たがこれ以外にglobstarという表現を使っているケースが無く、おそらくこのbashのオプション表現が呼び名としての起源かと推察される。

参考リンク

• glob（グロブ）：Dev Basics／Keyword - ＠IT
• 再帰globパターン **/ の元祖は zsh なのか、調べてみた - hkoba blog
• bashとzshとglobstar

認証と認可がわからなくなったとき、誰かに教えるときに起点にしたい記事「よくわかる認証と認可」

複数サービスをまたぐログイン機構をやる瞬間が多いので、基本を振り返るためのものとして。スライドではないけど回顧録として。

対象の記事

dev.classmethod.jp

みどころ

• 混同されがちな「認証」と「認可」を短い文章でたとえを交えながら説明された文章
• TwitterやFacebookのOAuth認証を使ってログインをする機構を作ることが多いが、本質的なことをわからなくても実装できてしまうため、なんとなく作ってしまった人が読むといい記事。
• また、改めてログイン機構などをつくるさいに学び直しの起点として読み直すと頭が整理される。

関連リンク

• 認証と認可の超サマリ　OAuth とか OpenID Connect とか SAML とかをまとめてざっと把握する本
• Microservices における認証と認可の設計パターン - Please Sleep