CSSのSelectorは条件分岐と考えるとわかりやすい話

自分で言うのもなんですが、優秀なITトレーナーの、ユゲタです。 先日Webプログラミングを学習している人から質問を受けたんですが、次のような内容でした。

CSSのセレクタがどうしても理解できない

これまで、コピペをしてcssを記述して対応していたようですが、スマホページを作る際に、メニューリストの出し入れで、checkboxを設置してjavascriptを使わずに対応をする王道のやり方を設置していたらしいんですが、 checkboxを設置するのがどうしてもイヤになり、別の方法が何かないか？という内容で聞かれました。 色々とやり方はあるんだけど、この質問に対して、ユゲタが何パターンかcssの書き方を思いついたんですが、 実はココに初心者的学習を妨げる思考が潜んでいることに気がついたので、その話と、Selectorを条件分岐ととらえるとすごくわかりやすかった話をブログに書いておきます。

初心者的学習を妨げる思考とは

わからない時に質問をするのは、時間効率もいいし、問題をスマートに解決することができます。 スクールなどで出された課題に対応することもでき、自分もほんの少し経験を積んだ感じがします。 問題が解決して、対応が完了した後は、達成感すら感じることができます。 でも・・・ 本人、何も成長してませんから。 ここで学習を妨げるポイントとして、本当にメシ食ってクソするぐらい当たり前のことを言います。

自分で考えて無いから！

物事を知らないというのは、書物を読む、人に聞く、ネットをググる、奇跡を待つ、この４パターンしか存在しないと思っている人が多いと言うことですね。 もう一つ重要な要素があることに気がつくと、人は何事に対しても問題解決をすることができます。 それは・・・

自分で考える

どうですか？魔法の言葉ですよね。 え？自分で考えてわからないから人に聞いてるんだって？ それでは、次の会話を見てみましょう。

• cssだけでcheckbox使わずにメニューの出し入れする方法を教えて。
• cssは書ける？
• 基本的なことは理解しているけど、根本的に何ができるのかよく分かっていない。
• Javascriptを使ったら簡単にできるよ
• Javascriptはまだ学習していないからよくわからないのさ。
• それじゃあ、何をどうした時に、どういう状態になっていればいいか教えて。
• 画面に表示されているメニューを出し入れするボタンを押したら、メニューを表示するようにしたい。
• それなら、ボタンが押された状態のselectorを作ってそこにメニューが表示されるプロパティを書けばいいんじゃない？
• ボタンが押された状態ってどういう状態ってどうやって書けばいいの？
• ボタンが押された時に、フラグを立てて、もう一回抑えた時に、フラグを削除すればいいんじゃない？
• それが簡単にできないから聞いてるんだよ。
• 簡単にしたかったら、checkboxをフラグに見立てればいいじゃん。そもそもなんでcheckboxを使いたく無いの？
• なんとなく他の方法にいい方法がないか聞いてみたかったんだよ。
• それが仕事だとしたら、それを考えるのが仕事じゃない？
• そうかも
• checkboxを使って確実に仕事を完了した方がいいんじゃない？

おわかりいただけましたでしょうか？ この会話では、何一つGive and taleが成り立っていないという事ですね。 回答する人も、遠回しに「それぐらい自分で考えろよ」と言っているような表情が思い浮かびます。 そもそも、基本的な事がわかっているのに、根本的な事がわかっていないって、技術者には向いていないので、永遠教えて君やってろ！って感じですね。 おっと、言葉が過ぎましたね。技術者になろうなんて思っていないのであれば、全く問題ありません。（何のためにcss勉強してるんだろ？）

Selectorは条件分岐

CSSの難しポイントとして、Selectorは内容であるプロパティを理解するよりも、難しいポイントとして、ユゲタは人に教えています。 複雑な階層構造から、優先順位などなど、実際にブラウザで表示した時に、想定していた動作をしないこともしょっちゅうあります。 そして、CSSのSelectorは、特定の条件の時に優先的にプロパティを発動させる記述と考えると、if文では無い条件分岐のように思えてきました。 Selectorが同じ要素を対象にするのであれば、よりSelectorに書かれている文字列が長い方が優先になるし、属性によっての優劣があることさえ理解していれば、 あとは、先書きよりも、後書きが優先なので、これに応じて、その時のプロパティを書けばいいだけなんですね。 そう考えると、CSSって十分プログラミング要素を持った言語であると思えてきますね。 シンプルな仕様だけど、かなり高品位な事ができる言語として、ユゲタのお気に入り言語の一つと考えています。

最後に

スマホでのメニュー出し入れにcheckboxを使うパターンが常識化しているようですが、checkboxを使わないとjavascriptを使わないと設置できないと考えている人も多いようですね。 cssだけでかなり色々な方法で、メニューの実装ができてしまうので、ここには創意工夫がモノをいう世界ということが見えてきました。 ユゲタもこれまで独自に何パターンか作ってきたことがあるので、今後ブログで公開していこうと考えました。 このブログを読んでいる人も、是非自分でトライしてみてください。