以下のサイトを見て欲しい
これはとあるミュージカルの案内サイトである。
www.tohostage.comはcloudflare経由で配信されておりオリジンサーバーがどこかはわからない。
なんてことのないサイトではあるが、出演者にスタエン（旧ジャニーズ）のメンバーがでているため、ファンクラブのメルマガなどからここに来訪する。数十万人が一斉にアクセスする。
その中で面白い機能がある。
https://www.tohostage.com/vampire/castsche.html
お芝居ではダブルキャストという仕組みがあり、その日に誰がでるかというのがあらかじめスケジュールされている。
したがって「この人とこの人がいる日に行きたい」という要望に答えるため、「スケジュールのフィルタ機能」がもうけられてる。
エンジニアならこういうフィルタ機能をどうやって実装するか？
サーバーサイドでやる？フロントエンドでやる？フロントエンドでやる場合はReactとか使っちゃう？
などなど。
上記サイトでは実際にどうやってるか？
それがこれ。
$(function(){
/* select 変更時にキャスト検索 */
$('#castlist select').change(function(){
/* 選択したキャストを配列に格納 */
var get_cast = [];
$('#castlist select').each(function(){
var p = $(this).attr('name').replace('cast', '');
get_cast[p] = $(this).val();
});
/* テーブル内を検索(AND検索)して一致するデータを表示 */
var top = 1;
$("#castlist tr").css("display", "");
$("#castlist tr").each(function(){
/* 1行目は飛ばす */
if(top == 1) {
top = 2;
} else {
var num = 0;
var td = $(this).children('td');
$(td).each(function(){
cast = $(this).text();
/* 一致しなければ display:none */
if(get_cast[num] && get_cast[num] != cast)
$(this).parent('tr').css({display: "none",padding:0});
num++;
});
}
});
});
});
jQuery一発もの。
一見これはダサい。どこがダサいかを挙げる。
- 1行目を飛ばすロジックがダサい
- 表の先頭業はデータ行ではないから飛ばさざるをえない
- ただこれはテーブルヘッダにthを使えばいいことで、JSの課題でもない
- tdのテキストノードとフィルタする値を比較している
- 本当は裏にJSONみたいなデータ構造があってフィルタされたものが画面に差分描画されるという構造が理想
- そもそもjQueryがダサい
- モダンではない（とされている）
- 転職時のポートフォリオとして映えない
だからどうした
- 用途としては足りてる
- 機能面でも問題ない
- テストが必要なのは変わりがない
- 何よりも「www.tohostage.com」という強力なドメイン配下で、隣接コンテンツに一切影響を与えない範囲でのアーキテクチャというのもいい
ただのHTMLにjQueryでちょっとした機能をつけるだけってのがjQueryの不完全なところだけど、ただのHTMLで情報が提供できないで何がITだ。寺西くん出演日がチェックできればいいと思うファンのニーズとその他の人のニーズは十分満たせている。アーキテクチャ選定としては大正解だ。
一方「ただのHTML」としてはfabiconは用意しておいて欲しい。