2024-04-19

RailsでJavaScriptを使わずにクリックによる表示切り替えを実装する

花粉症になりかけていたが、それは気のせいだったようだ。単に体調が悪かっただけかもしれない。そういう考えのもと、このあいだもコードを書いていた。文字をクリックするとそこだけ中身が切り替わる、ということを実装したかった。JavaScriptを使わずにやることができた。すこし苦労したのでメモを残しておく。

RailsアプリなのでHTMLではなく、slim記法でviewファイルを書いている。

 .area
    = check_box_tag "userid#{user.id}"
    = label_tag "userid#{user.id}"
      .number
        | 数字表記
      .percentage
        | パーセント表記

これをHTMLにすると以下のようになる。

<div class="area">
  <input type="checkbox" name="userid527754862" id="userid527754862" value="1">
  <label for="userid527754862">
    <div class="number">数字表記</div>
    <div class="percentage">パーセント表記</div>
  </label>
</div>

親であるareaクラスからチェックボックスとlabel要素を書く。そしてその下にnumberクラスとpersentageクラスを書く。これらのクラス名は任意である。checkboxのidとlabel要素のforは同じになるようにする、こうやって関連づけておくことで、labelの中をクリックすることはチェックボックスをクリックすることと同じになる。

CSSは以下のように書く。

.area input
  display: none

.area input:checked ~ label .number
  display: block

.area input:checked ~ label .percentage
  display: none

.area input:not(:checked) ~ label .number
  display: none

.area input:not(:checked) ~ label .percentage
  display: block

.area input の表示を消すことでチェックボックスの欄自体を非表示にする。これによって文字だけが表示される。:checked や:not() は擬似クラスとよばれ、セレクタについて、特定の状態を指定してデザインをあてる。

チェックが入っている時とそうでないときで、デザインを変更している。

~ の記号は後続兄弟結合子と呼ばれる。

https://developer.mozilla.org/ja/docs/Web/CSS/Subsequent-sibling_combinator

後続兄弟結合子 (subsequent-sibling combinator, ~) は 2 個のセレクターを結びつけ、 1 つ目の要素の後に 2 つ目の要素があり（直後である必要はない）、かつ両者が同じ親要素の子であるすべてのパターンに一致します。

チェックボックスONまたはOFFの後に、指定したセレクタが存在していると、その箇所のデザインが変更になる。

わたしはこの「両者が同じ親要素の子」という記述を見逃しており、デザインがあたるまで試行錯誤してしまった。label を追加することで無事にできた。

以上。

Unsplash eberhard 🖐 grossgasteiger

2024-04-07

思っていることを口に出さないだけの雰囲気は春

大型犬くらいの持ち運び型コンプレッサーを、私はひいていた。彼には車輪が後方にしかついておらず、常に前側を持ち上げながら移動させねばならなかった。少しだけ汗をかく。

オッペンハイマーの映画を観た。三時間は長い。始まったのが20時で、終わるときにはもう日が変わりそうだった。それでも退屈なのことはまるでなく、ずっと集中できた。なぜだろう。絵が綺麗だからかな。音も大きかった。

もう少し予習しておけば良かった。科学者の名前とか全然分からないし、だれがだれとどういう関係なのかも追えない。昔読んだ本を読み直せば良かったかもしれないなあ。

オッペンハイマーは、誠実すぎたのだと思う。それでいて政治に口を出し過ぎた。技術だけを楽しく追求していたら、あんな目に合わずに過ごせたのだろう。でも、それではオッペンハイマーではない。ぜんぜんハイマーではない。

この記事の着地点がわからなくなって、下書きが残ったままだった。それではよくないので思い切って公開してしまおう。

Unsplash Marek Piwnicki

2024-04-01

Railsのcollection_check_boxes を部分的に出力させる

どこまでを前提として文章を書くか。それを考えることが難しい。

Railsには入力フォームを生成するためのフォームヘルパーというものが備わっている。今回は、チェックボックス群を生成するcollection_check_boxes を利用した。ちょっとやりかたに詰まってしまったので、ここに書き残しておく。

2024-03-23

茎わかめとめかぶと春の雨

駅についた途端冷たい雨が降ってきて、だれも何も言わないまま、風上に背を向けた。電車は少しだけ遅れているようで、我々はそれを待つことにした。アナウンスの優しい声に、ぬくぬく生きてるお前たちは知らんだろうがな…！というような想いがふつふつと湧いて出てきた。

電車が来たので想いは消えた。

また似たような一年が流れてきそうだが、私の寿命はじりじりと削り取られていくので、同じではない。残り時間を意識すると、やはりコードを書き切りたいという感想になって、私の首を絞める。フィヨルドブートキャンプのカリキュラムは少しずつ進んではいる。データの一覧を表示させる際に、ちょっと面倒なことがあったが、それはなんとかなった。

こういった事柄をもう少し詳しくやって、技術記事に落とし込めばいいのだろうな。しばらくアウトプットをしていないので、それをやらないといけない。

が、レビューをしていただく中でそのやり方が不適切だったり冗長だったりすることもあり、自分の中で情報を整理するのに時間がかかる。結果としてアウトプットできるタイミングが遅れてしまい、ついには忘れる。そういう生き方だ。

常に閉塞感を抱いていて、どうにもならない、やるせない感じもある。ただ、それでも生きるはあって、進みはあって、明日のごはんや週末の天気を気にかけるくらいの余裕はある。

急に子供が「茎わかめとめかぶは何が違うの」と聞いてきた。私もわからなかった。ネットで調べてすぐにわかったが、もしここが宇宙だったらどうか。息が詰まるな。

Unsplash sander traa