月報BLUEBNOSE 2024年06月号(#5)

BLUE B NOSEの更新情報をお届けします

真夏に近い日差しの日もあれば、肌寒い雨模様の日もあり、今年は初夏も気温や気圧のアップダウンが激しいですね。

これから本格的な梅雨へ入っていくのに、体調管理はますます難しくなりそう。
健康第一で過ごしたいですが、心身ともに気をつけましょうね。

蛍や紫陽花を愛でつつ、まずは先月の更新情報をお届けします。

───────────────
■ 先月の記事・トピック
───────────────

・BBNで実装しているチューニング Tips6選
https://bbns.jp/tech/967/

2024年05月01日 公開 / 147回表示・読了見込 8分

・ブログの基本は1記事1イシュー
https://bbns.jp/knowledge/969/

2024年05月15日 公開 / 93回表示・読了見込 6分

・秘部を開示する覚悟こそ、”魅力”なのかも
https://bbns.jp/knowledge/1048/

2024年05月29日 公開 / 42回表示・読了見込 10分

━━━━━━━━━━━━━━━━━
■ その他の更新コンテンツ
━━━━━━━━━━━━━━━━━

・『1/3どころか、3%も伝えられない時代に考えたいこと』
https://note.com/bbns/n/n9354c6bee043

2024年05月08日 公開 / 読了見込 9分

・月刊BLUEBNOSE 2024年05月号(#5)『言葉とは、刃渡のない毒牙のつもりで』
https://bluebnose.theletter.jp/posts/1e50c230-d0c5-11ee-b579-879920f457e0

2024年05月17日 公開 / 読了見込 9分

・『ペルソナは、現実と想像の中庸で』
https://note.com/bbns/n/nde69cc40dad6

2024年05月22日 公開 / 読了見込 10分

───────────────
■ 青鼻の独白
───────────────

あなたがもしWeb制作者なら、普段よく閲覧するSNSや、GAFAM系企業のWebサービスあるいはHPを閲覧しているタイミングで、開発者ツールを立ち上げたり、ソースコードを確認するなどしてみて欲しい。昨今のトラフィックが大きなWebサイトなら、相当高い確率で"--"から始まるグローバルなカスタムプロパティを見かけることだろう。

規模の小さなWebサイトでも、それがWordPressを使ったサイトならWordPress由来の"--wp-"で始まるカスタムプロパティを、React系のフレームワークを用いたJamstack製の場合でも、ノーコードツール系の生成物でも、カスタムプロパティはどこかに含まれているだろう。

採用頻度が高そうなBootstrapやFontAwesomeのCDN由来、あるいはSwiperといったライブラリで使われるCSSにも含まれているため、あなたが気がついていないだけでカスタムプロパティを使用しているWebサイトというのは相当数に登っている。比較的最近出てきた印象のカスタムプロパティだが、どんなGithubリポジトリやnpmパッケージ、あらゆるフレームワークよりも勢いよく広がっていった、CSS領域におけるデファクトスタンダードに近い地位を築きある、最も静かかつ巨大なトレンドではないだろうか。

まずは、グローバルとローカルを理解しよう

カスタムプロパティの利便性や可能性はよく分かったけど、だからどうすればいいのかと思われたそこのあなた。まずは、カスタムプロパティの種類を抑えておこう。

主に`:root`で宣言されるグローバルなカスタムプロパティ。基本的に`--hoge-xx`と名前の前にハイフンが二つついている。もう一つは、好きなところで宣言できるローカルなカスタムプロパティ。どこで宣言してもいい。例えば、`a { --color: red; color:var(--color);}`としても良い。個人的には、カスタムプロパティが空の場合に対処するため、フォールバックも合わせて宣言する形、`a{color: var(--color, red);}`のような書き方の方が好みではある。`--color`が指定されていないときは、redが使われる。デフォルトのスタイルを指定しつつ、書き換えたい時は`--color`を上書きすることだけ考えれば良いので、必要な時に必要な分だけ、というのが手軽でいい。ハイフンが二つつくのはグローバルでもローカルでも変わらない。

カスタムプロパティを使用する際は、`var(--hoge)`と呼び出せばいい。変数の中身は割り振りたいプロパティと合致するならなんでも良い。clampやminなど、比較関数を持たせても構わない。

もし、Sassと組み合わせて使うなら、`--hoge: #{$color};`のようにインターポレーションの付与を忘れないこと。そこだけ注意すれば、Sassの変数とカスタムプロパティを併用することもそれほど難しくはないだろう。

カスタムプロパティの利点は、仮決めと外挿ができること

ある要素をコンポーネント、構造物としてスタイリングする際、「後から変更する自由は欲しいけど、仮で値を持たせないと最後まで書けない」ことがある。極めて限定的かもしれないが、例えば`display:grid`を指定して、gapは後から変更する余地を持たせたいが、`grid-template-columns`のバリエーションは限定的で良いから絞りたい場合、とか。

`gap: var(--gutter, 16px);

&--tri {
grid-template-columns: repeat(
auto-fill,
minmax(
clamp(
clamp((100% - var(--gutter) * 2) / 3, setting.breakpoints(underm), (50% - var(--gutter) * 0.5)),
setting.breakpoints(underm),
clamp((50% - var(--gutter) * 0.5), setting.breakpoints(unders), 100%)
),
1fr
)
);
}
`

のようにしておけば、後から`--gutter`に入れる値を変更すれば、行列の形を保ったまま隙間だけ調整できる。もちろん、gapなので`--gutter: 16px 24px;`のように書けば、row-gapとcolumn-gapも指定できる。例示したgrid-template-columnsでやるとどうなるかは、確かめていないが......。

「ここは後から変更したいけど、仮の値を割り振っておく」みたいな部分を（ローカルの）カスタムプロパティにしておくとそれなりに便利な気がするが、そう思うのは筆者だけだろうか。（modifierとして上書きすれば良い、という意見も理解できるが、modifierの命名を考える面倒くささは残る）

挿入する側は広く、挿入される側は狭くすると事故りにくい？

個人的に、現時点で一番カスタムプロパティを多彩に活用しているのを確かめやすいのはYoutubeだと思っているのだけど、Youtubeもグローバルなカスタムプロパティとローカルなカスタムプロパティを上手に活用している。似たような使い方をしてやれと試行錯誤してみたものの、CSS、Cascading Style Sheetsとは良く言ったもので、CSSの一角であるカスタムプロパティもカスケーディング、スタイルの上書きを受けやすい。

Scoped CSSやCSS Modulesといった要素も出てきたものの、Javascriptやその他の言語とは異なり、完全に閉じた変数の運用というのは難しい。Aのオブジェクトやコンポーネントでローカルなカスタムプロパティを宣言、設定した後で、Bでも同名のローカルなカスタムプロパティを設定してしまうと、あとはどちらが先に記述されるかで容易に破綻する。

gapやmargin、paddingといった要素で、どれも`--space`とカスタムプロパティを割り振りたくなるのはよく分かるが、避けた方が良い。意図しないスタイルを打ち消すための記述だらけになる。どうすれば良いか？　答えはYoutubeのコードを見ればいい。

グローバルに使い回しがちな余白系やline-height、色関係はグローバルに持たせつつ、カスタムプロパティを受け取る側は、容易には挿入できないローカルなプロパティ名を設定している。つまり、挿入する側のカスタムプロパティは幅広い場面で使えるように設定しつつ、受け入れる側のカスタムプロパティは事故防止として間口を狭くしておく。これが一つの解決策ではないだろうか。

変換コネクタを併用して挿入してみるのも一つ？

筆者は現在、ユーティリティファースト風の思想で、ヘルパークラスでカスタムプロパティを受け渡す形も模索している。原則は上記の通り、「挿入する側は広く、挿入される側は狭く」とし、良く使いそうなカスタムプロパティとして、`--custom-space`を採用し、これを直接ローカル変数に割り振るのではなく、変換コネクタ相当のヘルパーも併用することで安全に差し込む方法を試している。

例えば、上記の`display:grid`を割り当てる要素のgapの場合、`gap: var(--grid-gutter, 16px);`といったローカル変数を設定し、その上で`.u-insert-grid {--grid-gutter: var(--custom-space);}`とし、`.u-space-m{--custom-space: var(--space-m, 16px);}`のヘルパークラスと同時に割り当てることで、影響範囲を絞っている。

子要素にも同様の`--grid-gutter`を受け入れる要素があれば影響は防げないが、その場合は改めて専用の`.u-space-hoge`を割り振るだろうし、それ以外の方法と比較すると影響はコントロールしやすい。

オレオレ記述ではあるものの、ユーティリティファースト風の運用に変換コネクタも併用のカスタムプロパティをヘルパーで差し込むスタイルで、再生産性等を向上させられる余地はあるのでは、多少破綻しにくくなるのではという淡い期待はあるが、最終的にどうなるかは今後次第だろう。

モダンなWeb制作者になりたいなら、カスタムプロパティから手をつけてみては？

WordPressサイトの制作者で、WordPressが生成するコードを細かく制御していない場合は勝手にそうなっているだろうが、イマドキのWebサイト制作者、イケてるWebクリエイターだと言いたいなら、まずはカスタムプロパティから取り組んでみるというのはどうだろう？

もちろん、それだけでモダンな開発者、スキルを有する人ということにはならないが、新しい技術に取り組んでいるという姿勢、果敢に向き合っている雰囲気ぐらいは醸せるかもしれない。「それがどうした」と、一般ユーザーやクライアントには微塵も関係ない話ではあるのだけど......。

───────────────
■ 編集後記
───────────────

書いても書いても、安心できるだけの記事をストックすることはできないとようやく気がついて、続けていくのは大変だなぁと今更ながら痛感しております。
記事を捻るのも大変ですが、どのネタを書くか、どの順番で、どの媒体で取り上げるのがベストか。先々の展開や戦略、反応を見ながら修正や調整を重ねるのは、書く以上に大変だなぁとも思っています。

まだまだ更新頻度を下げられるレベルに至ってないので、他の業務にも勤しみながら、必死に続けてやろうとも思い始めた今日この頃です。
Substack限定コンテンツも続ける所存ですので、今後もお付き合いいただけますと幸いです。

それでは、来月の月報BLUE B NOSEもお楽しみに。

───────────────

ご意見やご感想、ご質問等ございましたら、info@bbns.jp までお寄せください。
もし、SNSで何か発信される際は、#BLUEBNOSEや@bluebnoseをつけて発信していただけますと幸いです。

忌憚のないご意見、ご感想を、スタッフ一同心よりお待ちしております。

───────────────
【月報 BLUE B NOSE 2024年06月号 (#5)】

BLUE B NOSE 運営窓口
info@bbns.jp

〒630-8217
奈良県奈良市橋本町3-1 BONCHI
（株式会社 FRATELLO内）
https://bbns.jp
───────────────

このメールマガジンは、BLUE B NOSE’s Substackにご登録いただいた皆さまにお届けしています。

ご登録がまだの方は、下記からご登録ください。

また、配信停止や配信設定の変更をご希望の方は大変お手数ですが、本メール下部のUnsubscribeのリンクよりお手続きいただくか、info@bbns.jp までお知らせください。