Webの部品はあるものを利用する事が一番早くて速い(追記あり)

基本的に「ただのリンク(aタグ)」か「Form内にある画面変わるリンク(buttonタグ)」かで組みたい派なのですが、時にはそうじゃない瞬間がありますよね。というやつ。
 
TL;DR
わりと特殊な状況で使う事が稀にあるやつ。
 
<a>か<button>か - hitode909の日記
拡張機能などで絶対に本体に影響させず、しかしボタンを置きたい時(安易に置くと発火して送信されてしまう)
2017/12/07 17:11
 
ブラウザに実装されている「あるものをそのまま利用せよ」という事が大前提です。そんなのWebものを触りながらご飯食べてる人なら誰でもそこに辿り着く話ですよというのはその通りであって、
  • リンクはaタグ
  • Form内の遷移はbuttonタグ
  • Form内にある説明文などを開くものはaタグ
みたいなやつです。基本的にdivタグやspanを使ったスクリプト(ECMAというかJavaScript)に依存したやつというのは歴史的には後付けの機能で、オフにしていたら「説明文の小さなウインドウが開かなくなってしまいました」という事態になりかねないのですが、現在(2017年のこのエントリー時点)のブラウザでは皆様JavaScriptとcookieくらいは許可されてますよね。というトレンドに沿って実装しています。
そんなことを言ってしまうとブラウザ歴史的原則民*1からは、すべての補助機能をオフにしても閲覧できるものが大原則でユーザーは何も不自由する事なく閲覧できることを担保するべきでありスクリプトを切った際に何も表示されないのは言語道断と言われそうですが、その意見は大原則であり本当に正しいのですが、Formというユーザー(閲覧者)からの送信機能もやはり後付けの機能となってしまいます。
突き詰めると「HTMLでマークアップされたもののみ」で表示されるものが最速で最適であるといったニュアンスのお話が話題になりますが、我々Webを弄りながらご飯ムシャムシャ人は1/60秒の世界で如何にユーザーの体験を向上させるかに日夜努力したりしなかったりしているため、今、この画面に表示されている「はてなブログ」のようなリッチな閲覧体験が実現しているのです。
ちなみに、JavaScriptを切ってもこのページは表示されますが、画面左に付いているメニューが表示されなかったりします。つまりはそういうところです。
 
話を戻して。
spanやdivタグをリンクやボタンのような使い方する状況とは何?というやつですが、つまりはこういう奴です。
一例ですが、はてブロimageTitleという はてなブログ向けの拡張機能がありまして、画像の一覧部分が少しだけ便利になるやつの中身です。
ここでbuttonを使っても良いのですが、追加された機能の一部が不具合によりクリックイベントの伝播*2 を止める事ができなかった場合、意図せず画像の貼り付けが行われたり、記事の投稿が発生してしまったりという現象が起こってしまいます。
 
追記:(実話)
 
こうなってしまうと、使っている人にとっては何が原因か分からない為、まずは問題が発生しても影響を最小限に止める設計が必要になり、何事も無くただ壊れるだけとなる「普段その目的で使われないようなタグ」に実装していく事になります。
 
 
以下私信のようなものですが、最近のエントリーであまり調子がよろしくない状況が続いている感がある id:hitode909 くんさんはご自愛くださいというやつです。*3
拡張機能を作るうえで変換済みなコードをマッチョに読んだりする中でも「はてなブログチームがんばってますねぇ」と感じるやつが各所にありますよとお伝えください。(最近は別チームやってるというエントリーがあったのでこのような表現)
コードばらして色々見ているので「TLS/SSL化早く」という枠には入らずに「まあまあ焦らず行きましょうじゃないですか」と言う枠になりたいやつ。
 
 
日報みたいなエントリー。
 
 
*1:便宜上、適当に今考えた
*2:バブリング
*3:とはいえ、これを書いている id:psne も慢性的に目が痛い日が続いているので対策をしないといけない