2023-03-20

世の中の分類

存在の分類

コト
モノ

モノの種類

気体
液体
固体

観点のまとめ

自然
社会
経済
政治
法

2023-02-01

RabbitMQのチュートリアルのまとめ

RabbitMQのチュートリアルのうち、1 ~ 6 までの Spring AMQP のチュートリアルに出てくる言葉をまとめる。

1. Producing

メッセージを送る事を指す。

1-1. Producer

メッセージを送るプログラムを指す。
Deliver, Publisherという言い方もしている。
後述するが、Spring AMQP において Producer は直接 Queue にメッセージを送らず Producer はメッセージがどの Queue に送られるのかに関心を持たない。
Producer は Exchange にメッセージを送る。

2. Queue

郵便ポストであり郵便配達人である。
メッセージを受け取り、そのメッセージを Consumer に届ける。

3. Consuming

メッセージを受ける事を指す。

3-1. Consumer

メッセージを受けるプログラムを指す。 Subscriber という言い方もしている。

4. Binding Key

Exchange の種類により役割が変わる Exchange が持つKey。

5. Routing key

メッセージが持つkey。

6. Binding

Exchange と Queue を紐づけること

7. Exchange

Producer からメッセージを受ける。
受けたメッセージをどの Queue に送るのかを知っている。

7-1. FanoutExchange

1個 ~ 複数個の Queue と Binding する Exchange。
Binding Keyの意味は無く、設定しても無視される。

7-2. DirectExchange

1個 ~ 複数個の Queue のうちメッセージの Routing key と Binding key が一致するもののみを Binding する Exchange。

7-3. TopicExchange

メッセージの Routing key はドットで区切られた単語のリストを持つ。
Binding keyも同様だが、Binding key は下記の２つの文字が使える。

アスタリスク（*） ...1つの単語を置き換える
ハッシュ（#） ... 0 ~ 複数の単語を置き換える。

2023-01-25

EVERY LAYOUT の3つのレイヤー

CSSスタイル設定の3つのレイヤー

グローバルスタイル
レイアウトプリミティブ
ユーティリティクラス

1. グローバルスタイル

:root {
    /* モジュラースケールの考え方 */
    --ratio: 1.5;
    --s1: calc(var(--s0) * var(--ratio));
    --s2: calc(var(--s1) * var(--ratio));
    --s3: calc(var(--s2) * var(--ratio));
    --s4: calc(var(--s3) * var(--ratio));
    --s5: calc(var(--s4) * var(--ratio));
    --s0: 1rem;
    --s-5: calc(var(--s-4) / var(--ratio));
    --s-4: calc(var(--s-3) / var(--ratio));
    --s-3: calc(var(--s-2) / var(--ratio));
    --s-2: calc(var(--s-1) / var(--ratio));
    --s-1: calc(var(--s0) / var(--ratio));

    /* カラム幅の公理の考え方 */
    --measure: 30em;
}

* {
    max-width: var(--measure);
    line-height: var(--ratio);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: ;
    color: ;
}

*::before, *::after {
  box-sizing: border-box;
}

html, body, div, section, header, nav, main, footer {
    max-width: none;
}

グローバルスタイルは、CSSのグローバルに適用出来る性質を生かすものである。
グローバルに、:root, * といった要素や、各HTML要素を定義する。
また、モジュラースケールの考え方やカラム幅の公理の考え方を適用する。

2. レイアウトプリミティブ

レイアウト用のHTMLのカスタム要素を作る。
EVERY LAYOUT の本で提供しているモジュールは、このカスタム要素を指す。

3. ユーティリティクラス

HTML要素やレイアウトプリミティブのカスタム要素に、適用するクラス。
大きくなりやすく、クラスの付与は実装者がミスを起こしやすいので、なるべくグローバルスタイルとレイアウトプリミティブで解決するようにする。
ユーティリティクラスのcssはグローバルスタイルを定義している箇所に定義すると良さそう。

2023-01-05

HTMLのブロック要素とインライン要素について

1. 参考

2. 言葉の整理

2-1. コンテンツ

HTMLタグの間にあるものを指す。

例1

<div>おはよう</div>

divタグにとって おはよう の一文字一文字がコンテンツ

例2

<span>こんにちは</span>

spanタグにとって こんにちは の一文字一文字がコンテンツ

例3

<div>
    <span>こんばんは</span>
</div>

divタグにとって <span>こんばんは</span> の一文字一文字がコンテンツ
spanタグにとって こんばんは の一文字一文字がコンテンツ

2-2. ブロック要素

下記のようにdisplayプロパティの値がblockのものを指す。
親要素の横幅か高さに伸びる性質を持つ。
横幅か高さかを決めるのは、後述のwriting-modeに指定する値による。

display: block;

2-3. インライン要素

下記のようにdisplayプロパティの値がinlineのものを指す。
コンテンツの長さまで伸びる性質を持つ。

display: inline;

2-4. フロー方向

2個目以降の「ブロック要素」が配置される方向を指す。

2-5. 書字方向

2個目以降の「コンテンツ」が配置される方向を指す。

3. CSSプロパティのwriting-mode

writing-modeは、フロー方向と書字方向を決めるcssのプロパティである。

横書きであり左から右へ流れる言語（ltr: Left To Right）である場合、下記のような意味を持つ。

writing-modeの値	ブロック要素の伸びる方向	書字方向	フロー方向
horizontal-tb	水平（親要素の横幅）	左から右	上から下\|水平
vertical-rl	垂直（親要素の縦幅）	上から下	右から左\|垂直
vertical-lr	垂直（親要素の縦幅）	上から下	左から右\|垂直

3-1. horizontal-tbの例

特に何も指定しない場合、ほとんどのブラウザはデフォルトでこの値を設定しているっぽい。

<div class="作文用紙" style="writing-mode: horizontal-tb">
    <p>これは一行目です。</p>
    <p>これは二行目です。</p>
<div>

↓Hatena Blog は HTML で書けます。実際に上記のHTMLをそのまま書いたものが下記です。

これは一行目です。

これは二行目です。

3-2. vertical-rlの例

日本語（ltr: Left To Right）で作文用紙のように書きたい場合、作文用紙の行をブロック要素、作文用紙の一つをコンテンツとみなすと、フロー方向は右から左、書字方向は上から下なので vertical-rl が適切となり、下記のように書ける。

<div class="作文用紙" style="writing-mode: vertical-rl">
    <p>これは一行目です。</p>
    <p>これは二行目です。</p>
<div>

↓実際に上記のHTMLをそのまま書いたものが下記です。

これは一行目です。

これは二行目です。

3-3. vertical-lrの例

日本語（ltr: Left To Right）でこの形式で書くときが思いついていないが、一応下記のように書ける。

<div class="作文用紙" style="writing-mode: vertical-lr">
    <p>これは一行目です。</p>
    <p>これは二行目です。</p>
<div>

↓実際に上記のHTMLをそのまま書いたものが下記です。

これは一行目です。

これは二行目です。

2022-12-02

複合主キーではなくサロゲートキーを使う理由

1. 定義

1-1. サロゲートキー（Surrogate key）

A surrogate key (or synthetic key, pseudokey, entity identifier, factless key, or technical key[citation needed]) in a database is a unique identifier for either an entity in the modeled world or an object in the database. The surrogate key is not derived from application data, unlike a natural (or business) key.[1]

データベースにおけるサロゲートキー（または合成キー、疑似キー、エンティティ識別子、ファクトレスキー、テクニカルキー[要出典]）は、モデル世界のエンティティまたはデータベース内のオブジェクトのいずれかに一意の識別子である。サロゲートキーは、ナチュラルキー（またはビジネスキー）とは異なり、アプリケーションデータから派生するものではない[1]。

引用元...https://en.wikipedia.org/wiki/Surrogate_key

2. 複合主キーではなくサロゲートキーを使う理由

観点	サロゲートキーを使う理由	複合主キーを使わない理由
関心事	テーブルの識別子のカラムを作るので識別に、そのカラムを利用する事がはっきりする。	複合なので本来何か他に記録したいカラムであり、その上識別の一部にも使われるため1つのカラムに2つ（以上）の関心事がある事になる。
JOIN	JOINが見やすい。	JOINが見にくい。
ナチュラルキー	ナチュラルキーではない。	複合主キーだからと言ってナチュラルキーであるわけではない。例えば顧客番号や商品番号や商品コードなどは現実で使われていても結局は人が識別のために作った番号なのでナチュラルキーではない。
識別に必要なカラムの表し方	UNIQUE制約で表す。	識別に必要なカラムを複合主キーにするので、そのまま表せる。
コード量	複合主キーを使う場合より少ない。	サロゲートキーを使う場合より多い。