はじめに – 恐怖

社内Timesで私はこういった発言をしました。

勉強会を企んだときの心理を少し思い出した
私、恐ろしくなりたい
Kamada.S

この発言が拾われ、なんと12月は勉強会を2回開催することになりました。

まあ、年末スペシャルですね。

しかし、残念なことがひとつ。

1回目の発表の録画を紛失した可能性があります。

発見されたら後々追加するので、一旦2回目の内容を掲載します。

今回の発表内容

CSSの詳細度について
来年に向けて、気になっていること・挑戦したいこと
基本情報技術者試験 B試験について
応用情報技術者試験午前試験について
危機管理能力の研修について
午前2時の勇気

CSSの詳細度について

発表者：Kamada.S

CSSにおいて最も重要な知識はプロパティだと思います。
一方で、セレクタについては近年重要視されていません。
Tailwind CSSのようにそもそもCSSを書かないスタイルの流行で、セレクタに関する知識はあまり広まっていないイメージがあります。

CSSセレクタのなかでも最も厄介なのは詳細度です。
Tailwind CSSのようなスタイルの利点は、すべてのスタイルがclassで宣言されているので詳細度の管理する必要がないことです。
ですが、詳細度を管理してCSSを書いたほうが効率がよい場合もあります。

詳細度とは

詳細度とは、スタイルブロックを適用する優先度です。

セレクタ {
  /* ここがスタイルブロック */
  プロパティ名: プロパティ値;
}

基本はCSSファイルの後の方に書いたスタイルが適用されますが、詳細度が高いスタイルがある場合はそれに準じずにスタイルが適用されます。

詳細度は、セレクタが要素を特定できるものであるほど高い傾向になります。
要するに条件が多くて厳しいほど詳細度が高くなります。

詳細度の比較

詳細度はセレクタの重みを3つの値で管理します。
ID-CLASS-TYPEの形式で書かれます。

詳細度は左から順に比較されます。
ID列が同じならCLASS列で比較し、それも同じならTYPE列で比較して値の大きいセレクタが優先されます。
ID列またはCLASS列で優劣がついた場合はそれ以降を比較せずに優先されるセレクタが決まります。

セレクタの種類

基本のセレクタは次の5つです。

タグセレクタ
タグ名を指定します。
1つごとに重みの値に0-0-1を追加します。
疑似要素::before、::afterや::placeholderなど、::から始まるセレクタも同じ詳細度です。
例：div
classセレクタ
クラス名を指定します。
1つごとに重みの値に0-1-0を追加します。
:hoverのような疑似クラスセレクタも同じ詳細度です。
例：.class-name
属性セレクタ
要素の属性を指定します。
classセレクタと同じ詳細度です。
例：[type="submit"]
idセレクタ
ID名を指定します。
1つごとに重みの値に1-0-0を追加します。
例：#id-name
全称セレクタ
すべての要素を指します。
詳細度に影響を与えないため、要素セレクタよりも低い詳細度のスタイルを作ることができます。
例：*

結合子の種類

セレクタはタグの親子関係や兄弟関係を指定することができ、その際に使うのが結合子です。
結合子を使い分けることでより細かい条件を指定することができます。
結合子自体は詳細度に影響しません。

子孫結合子
空白区切りでセレクタを連ねます。
左から順に親要素を指し、最も右の要素が子孫に存在する場合にマッチします。
直接の子要素でなくてもマッチします。
例：main div img
子結合子
>区切りでセレクタを連ねます。
右の要素が左の要素の直接の子要素である場合にマッチします。
例：main>div>img
後続兄弟結合子
~区切りでセレクタを連ねます。
右の要素と左の要素が同じ親要素を持つ場合にマッチします。
直後の兄弟要素でなくてもマッチします。
例：img~p
次兄弟結合子
+区切りでセレクタを連ねます。
右の要素が左の要素の直後にある場合にマッチします。
例：img+p

擬似クラス

疑似クラスはセレクタにより詳細な条件を加えることができます。
基本的には要素の状態を判別するために使われます。
擬似クラスはいくつかを除いて1つごとに0-1-0の詳細度を追加します。

今回は擬似クラスの中でも引数を取る関数擬似クラスをいくつか紹介します。

:not()
引数に与えたセレクタ以外にマッチします。
引数に擬似要素を与えることはできません。
例：input:not([type="password"])
:is()
引数に与えたセレクタのどれかにマッチします。
引数の中で最も高い重みが詳細度に加算されます。
例：form :is(input[type="text"], textarea)
:where()
引数に与えたセレクタのどれかにマッチします。
詳細度に影響を与えません。
例：:where(h1, h2, h3, h4, h5, h6)
:has()
装着した要素が、引数にマッチする要素を持つ場合にマッチします。
子や弟に特定の要素を持つ場合のスタイルを定義できます。
引数に:has()や疑似要素を与えることはできません。
引数の中で最も高い重みが詳細度に加算されます。
例：a:has(img) a:has(>img) a:has(+button) a:has(~button)

この他の擬似クラス、その他情報はMDNのWebドキュメントに掲載されているので読んでみてください。

来年に向けて、気になっていること・挑戦したいこと

発表者：I.Tさん

今年もあと僅かなので、来年の抱負的な話をします。

OSと開発環境：Linuxに挑戦したい

入社してWindowsからmac移行した経験を経て、次はLinuxデスクトップに入門したくなりました。

Linuxに対して少し嫌悪感がありましたが、ZorinOSの評判がいいらしいので使ってみたいと思います。
UIが美しいらしいので、家にあるノートPCに入れてみるつもりです。

WebGPU：表現力と効率の向上

WebGLの後継技術らしいです。
EdgeとChromeでは既に使えるようになってるらしいので、来年は基礎からキャッチアップして使ってみたいです。

プロダクトづくり：MVPからMLPへ

MVP(Minimum Valiable Product)は最低限動くプロダクトで動作感や印象を試して改善を取り込み、また試し…を繰り返すための試作品のようなものです。

これに対して最近MLP(Minimum Lovable Product)という概念です。
「愛される最小限」という考え方で、ユーザが使い続けてくれる最低限のレベルから始まりサービスの継続とともに成長させていくことを目指します。

伝え方：人を動かす3要素

アリストテレスの弁論術についてです。
技術選定の提案やチームビルディングに通ずる要素だと思いました。

人を動かす3要素とは以下の通りです。

ロゴス(Logos)：論理や理屈、話の筋が通っているか
＝Logic
エトス(Ethos)：信頼や人徳、誰が発言したか
＝Emotion
パトス(Pathos)：感情や共感、相手の心を揺さぶれるか
＝Passion

ただ論理的な話をすれば人を説得できるわけではありません。
それ以外にも信用と感情が必要だということです。

来年の個人的目標：インプットの強化

目標は本を月2冊(技術書＋思考法)読むことです。

今年読んだ本の中でおすすめは3冊です

1兆ドルコーチ：シリコンバレーの伝説的メンターを例に学ぶチームビルディング
世界一流エンジニアの思考法：マインドセットの変革と生産性
Pythonで学ぶアルゴリズムとデータ構造：基礎力の向上

来年の目標のまとめ

アンテナは広くして情報に触れて、完全に理解できなくても「面白い」と思ったことは楽しみたい。

2026年はもっと挑戦を増やしていきます。

(勉強会の登壇回数が増えるかもしれませんね by Kamada.S)

基本情報技術者試験 B試験について

発表者：N.Aさん

以前I.TさんがA試験(午前試験)について話していたのでB試験(午後試験)について話します。

試験は全部で20問あり、18、19、20問目がセキュリティ分野の出題です。
私は試験が始まったら先にセキュリティ分野から解くことにしていました。
問題文は長いですがきちんと読めば誤りに気づける難易度のため、時間と心に余裕があるうちに落ち着いて解く算段です。

1〜9問目はアルゴリズムなどの基礎的な問題です。
苦手な分野があればさっさと飛ばしてしまいましょう。

よく10〜17問目が応用的な問題だと思われがちですが、実際はそうではありません。
半分くらいは基礎的な知識で解ける問題であるため、問題文を読んで状況を理解することが重要です。

落としたくない長文→単純な問題→余った時間で問題を読み解く
と進めていく感じです。

B試験については特に過去問を解いておくことが重要です。
基礎的な長文問題を見抜きやすくなります。
加えて、過去問がそのまま出題されるケースが意外と多いため、過去問を把握しておくことのメリットが大きいです。

試験前の勉強方法として、個人的には時間を無制限に使って手書きで解いていくことがおすすめです。
特に、アルゴリズム系は解説を見てノートに書き写し、そのあと解説を見ずに書き出すと暗記しやすいです。

最初から時間内に解く練習をするのではなく、練習を重ねて解く時間を縮めていくイメージです。

応用情報技術者試験午前試験について

発表者：N.Aさん

(引き続きN.Aさんに喋ってもらいました)

応用情報の午前試験の勉強には評判の動画教材を使いました。
わからない単語が出てきたらその度に調べるようにしていました。

動画教材と併せて会社の本棚にある過去の解説書を利用しました。
お互いにカバーしきれていない箇所があり、2つの教材を利用したことで理解が深まる箇所もありました。

よく対策で用いられる「過去問道場」というWebサイトも利用しました。
実施年毎に分けられていますが、解くときはジャンル毎に分けて問題を解きました。

動画教材は様々な形式のものが公開されています。
図解、イラスト、アニメーションなど、自身で理解しやすそうなものを選んで利用するのが良いでしょう。

応用情報の午前試験はとにかく地道にやるほかありません。

危機管理能力の研修について

発表者：Y.Aさん

案件先の研修に危機管理能力に関する内容があり、興味深かったので共有します。
ざっくりと内容を説明しておくと、「人間って思い込みで行動しがちだよね」というものになります。

ある研究によると、人は何かを得るときには安全をとり、何かを失うときにはギャンブルに走る傾向にあります。

例えば、確実に100円を貰うか25%の確率で10000円を貰うかの選択では、多くの人が前者を選びます。
一方で、確実に100円を失うか25%の確率で1000円を失うかの選択では、後者を選ぶ人の方が多いのです。
これはプロステクト理論にて語られています。

損失が出る可能性と損失が抑えられる可能性のどちらもがある場合に賭けに走ってしまうと、将来的に信用を失うことに繋がる可能性があります。
「バレる前にリカバリーしてしまおう」と考えたときは、素直に周りに状況を共有して対策を取りましょう。

午前2時の勇気