2023年12月、さくらのテックランチというイベントで「フロントエンドの複雑さに立ち向かう 〜 DDD と Clean Architecture を携えて 〜」という発表をした。ありがたいことに多くの人に見ていただき、（観測範囲では）好意的な意見をいただいた。その影響は大きく「現場から学ぶモデル駆動の設計」という勉強会を主催されている方の目にとまり、座談会メンバーとしてオファーをいただき2024年2月1日に参加してきた。
がっつりカンペを用意したのだが、時間の都合や流れ的に話せなかったことがあるので、4年ぶりにブログを更新しようと思う。
座談会は「バックエンドエンジニアがフロントエンド開発するときの悩み」というテーマで、以下のようなトピックがあった。
push.defaultなのだが、詳しくはすでに記事を書いているのでそちらを読んでほしい。
/* Default / Light Theme */
:root {
--color: black;
--background-color: white;
}
/* Dark Theme */
@media (prefers-color-scheme: dark) {
:root {
--color: white;
--background-color: black;
}
}
body {
color: var(--color);
background-color: var(--background-color);
}/* Before */
a {
color: #0000EE;
}
a:visited {
color: #800080;
}
a:active {
color: #FF0000;
}
a.grayscale {
color: LightSlateGray;
}
a.grayscale:visited {
color: Silver;
}
a.grayscale:active {
color: LightSteelBlue;
}/* After */
a {
--link: #0000EE;
--link-visited: #800080;
--link-active: #FF0000;
}
a.grayscale {
--link: LightSlateGray;
--link-visited: Silver;
--link-active: LightSteelBlue;
}
a {
color: var(--link);
}
a:visited {
color: var(--link-visited);
}
a:active {
color: var(--link-active);
}
EventTarget.addEventListener('click', listener)のように簡単に処理を追加できるわけではない。
Property $logger does not exist on type 'Store<RootState>'のようなエラーが発生する。this.$xxxにアクセスするための型定義の作り方について紹介する。
| パターン | location | proxy_pass |
|---|---|---|
| 1 | /path | /reverse-path |
| 2 | /path | /reverse-path/ |
| 3 | /path/ | /reverse-path |
| 4 | /path/ | /reverse-path/ |
font-sizeが適用されなくなる事象が発生する。transform: scale()を使うことがある。しかし、そこには落とし穴がある。下図のように並べた要素のボックスサイズが拡大/縮小されずに要素が重なってしまうのだ。
const pickN = (min, max, n) => {
const list = new Array(max-min+1).fill().map((_, i) => i + min);
const ret = [];
while(n--) {
const rand = Math.floor(Math.random() * (list.length + 1)) - 1;
ret.push(...list.splice(rand, 1))
}
return ret;
}
const list1 = pickN(1, 100, 30);
console.log(list1);
// [47, 69, 19, 73, 27, 35, 68, 21, 88, 41, 86, 14, 50, 42, 94, 26, 2, 43, 83, 76, 57, 31, 97, 45, 84, 99, 46, 22, 9, 81]
const list2 = pickN(500, 800, 10);
console.log(list2);
// [714, 557, 523, 760, 750, 677, 632, 566, 798, 587]new Array(max - min + 1).fill().map((_, i) => i + min)は、min〜mixまでの値が入った配列を生成している。そして、ret.push(...list.splice(rand, 1))でさきほどの配列からランダムな位置の1つの値を取得し、結果用の配列に追加している。
position: stickyを使うと簡単に実装できる。
background-imageやborder-imageにInline SVGを指定したときに発生する。Inline SVGとは以下のように、url("data:image/svg+xml;...")で指定する方法を指す。.item {
/* 色が反映されない */
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><path d='M10 10 H 80 V 80 H 10 L 10 10' fill='#ff0000'/></svg>");
}