2022-03-12

サーバのホスト名に使える文字は英字、数字、ハイフンそしてドット

Tips

定義の面はわからなかったのでざっくりまとめる。

出典

出典いわく

RFC1123には以下のように記述がある。

正当なインターネットホスト名の構文はRFC952[DNS:4]で規定され、RFC1034のセクション3.5[DNS:1]で繰り返し述べられている。ホスト名構文の一つの側面をここで変更する。先頭文字の制限が緩和され、英字または数字のいずれかであれば許容されるようになる。ホストソフトウェアは、より寛容なこの構文をサポートしなければならない(MUST)。

ここをもとにRFC1034の3.5のセクションを見ると文字列ルールの定義が記載されている。ドメインの定義だが、これがホスト名と同義ということになる。

<domain> ::= <subdomain> | " "
<subdomain> ::= <label> | <subdomain> "." <label>
<label> ::= <letter> [ [ <ldh-str> ] <let-dig> ]
<ldh-str> ::= <let-dig-hyp> | <let-dig-hyp> <ldh-str>
<let-dig-hyp> ::= <let-dig> | "-"
<let-dig> ::= <letter> | <digit>

<letter> ::= 大文字のAからZと小文字のaからzの52文字のアルファベット文字
に含まれる任意の1文字
<digit> ::= 0から9までの10の数字の任意の数字

使える文字

上記のルールにはなっているが使える文字ということで汲み取ると

大文字のAからZと小文字のaからzの52文字のアルファベット文字
0から9までの10パターンの数字
. （ドット)
- （ハイフン）

ということになる。

使えそうで使えない文字

これを見ると実は _ (アンダースコア,アンダーバー)は使えない、がホスト名においては許容しているケースがいくつかある。詳しくは参考リンクのサイト参照のこと。

参考リンク

2022-03-05

「アラインをとる」というビジネス用語の意味をざっくりまとめる

雑記

HTMLの text-align が脳裏に出てきて、全然関係ない言葉だと認識するのに労力がかかったので雑にまとめる

利用シーン

「AさんとBさんに例の件はアラインしている？」

意味

本来のalignの意味は以下の通り

1.〔～を〕一直線［平行］にする［並べる］ 2.〔部品などを〕調整する、調節する 3.〔大義や方針で～を〕同じ立場に置く、提携させる - alignの意味・使い方・読み方｜英辞郎 on the WEB

1の意味のニュアンスである「直線に並べる」というところから転じて「揃える」という意味合いがあり、「認識を揃える」という意味で使われるケースがおおい。そのため日本語に置き換えると「アラインしている」は「認識が揃っている」、「アラインを取る」は「認識を揃える」という置き換えで認識するとニュアンスとしては合致する。

参考サイト

2022-02-26

JavaScriptにおいてイベントハンドラに何もしないダミー関数を入れる意味と効果

Reactハンズオンラーニングを読んでいてなるほどなーと思ったのでメモ

コード例

Reactでクリックイベントを付与したオブジェクトを作る関数を作るとする

function makeClickableButton(onClickEventFunction = f => f){
  return ( <button onClick={onClickEventFunction} >this is demo button</button>)
}

f => f という形で一見すると意味のない初期値をいれるような記述が今回取り上げたい話題

どういう嬉しい効果があるのか

このような書き方にすると「引数に何もセットしなくてもエラーにならない」というのが嬉しいポイント。

仮に onClick などに undefined がセットされてしまうと、クリックするとJavaScriptのバージョンによってはでエラーが上がってしまう懸念がある。そのため、必ず何かしら関数が入るようにしておきたい。特にクリック時のイベントに関して何もセットしたくないがコンポーネント自体は出したいときなどに makeClickableButton() と呼んでも問題ない形になる。

また、 undefined の変数が来ても、中身としてエラーにはならないので、防護壁の一枚としても機能する。

記事に起こした際の余談

Reactハンズオン第2版の記述をもとに検証してみたが、実際のところ直近のブラウザではonClickイベントにundefinedなものを設定してもエラーにならないので、どこかしらのバージョンで対策がされている可能性があります。

参考

イベントの扱い (概要) - イベントリファレンス | MDN

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

作者:Alex Banks,Eve Porcello
オライリージャパン

Amazon

2022-02-19

JavaScriptのデフォルト引数はundefinedを渡した場合でもデフォルト引数を入れてくれる

JavaScript

なるほど、と思ったのでメモ

前提

この仕様はECMA2015からの仕様です、IE11などでは動かない話なのでお気をつけください。

今回着目したいコード

引数に何も設定されていないときに代わりの値として入るデフォルト引数を書く場合の関数を考える

function test(x = 1, y = 1) {
  console.log(`${x} , ${y}`)
}

通常の動き

引数が何も設定されていないとデフォルト引数が使われる

test()
// 1 , 1

test(100)
// 100 , 1

let setVal = 30
test(setVal,20)
// 30 , 20

undefinedな値を引数に使う場合の動き

引数にundefined相当のものがセットされると、undefinedが入らずデフォルト引数の値が入る

test(undefined,100)
// 1 . 100


let nonSetVal
test(20,nonSetVal)
// 20 , 1

参考リンク

デフォルト引数 - JavaScript | MDN

2022-02-12

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

ざっくりまとめ

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

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

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

それぞれの規格上の意味

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

トルツメ

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

トルママ

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

イキ

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

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

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

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

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

参考リンク

2022-02-05

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

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;

参考サイト

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

作者:Alex Banks,Eve Porcello
オライリージャパン

Amazon

2022-01-29

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

JavaScript

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

今回取り上げるもの

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アプリケーション開発のベストプラクティス

作者:Alex Banks,Eve Porcello
オライリージャパン

Amazon