はじめに
ニトリのECサイトであるニトリネットがリニューアルに失敗して6日も経ってから復旧したということで、 （一部の）プログラマクラスタで騒ぎになっています。
僕の率直な感想は次のようなもの。
閉鎖状態の「ニトリネット」が6/23にサイト運営を再開、不具合の主因はCPU不足 | ネットショップ担当者フォーラムともあれ関係者の皆さまお疲れ様でした。個人の責任問題などと短絡化することなく、粛々と原因解明と、できればぜひ知見の共有公開をお願いしたい。
2015/06/23 13:40
プレスリリースでは、原因としてCPU不足を挙げています。
珍しい原因ですよね。あまり聞いたこと無いのでぜひその知見を知りたいものです。
しかし雲行き怪しく
早速、ニトリのトップページ見ている。すごい8000行の中にデバックコードが山ほど埋もれているよ！！！
— れいな@底なし沼の魔女 (@MegaBlackLabel) June 23, 2015
こんなツイートをみたら興味がわくじゃないですか！
http://t.co/4iZCLatmRd
ほんとに9000行あって笑えるｗ
でもよく見ると空行もたくさんあるんだよね。1170～1550行とか、1550～2030行とかなんだこれ。 pic.twitter.com/uoLQ6875zS
— へぼへぼ＠睡眠不足 (@hevohevo) 2015, 6月 23さっそく、#ニトリコード見てニヨニヨする会というツイッタータグをつぶやいて流し読みを始めました。
ニヨニヨする会
流し読みなので適当なこともつぶやいていますが、当初はこんな感じ。
コメント行にニヨニヨ
あるあるですよね。
authentication という単語は長すぎるんじゃよ。デスマ中にそんな長い単語書けるか！
/*PANKUZU(￥取る)*/ /*NINSHO*/
別のCSSファイルからのコピペで、そのファイルの該当行番号をコメントで書いているのかな？ 元ファイルを編集したら地獄を見ますね。でも仕方ないコピペならそう書くしかない。
ネーミングセンスにニヨニヨ
topTokusyuBtn ってネーミング・・・好きかも #ニトリコード見てニヨニヨする会
— へぼへぼ＠睡眠不足 (@hevohevo) June 23, 2015
だんだんニヨニヨできなくなってきた
ところが見ているうちに気になる箇所が増えてきます。
- なぜか数百行の空改行が何箇所もある。全部削れば1000行くらい圧縮できそう
- 謎の
空<li>が大量に（下図参照）
コードを少し読み込んでみると、どうやらトップページにあるプルダウンメニュー（下図参照）のコードらしい。
本来は、このメニュー項目のサブ項目が設定してあったようです。
たとえば、下の図のプルダウンメニュー「ベッド」にマウスポインタを合わせると、その下位カテゴリのメニューが右にポップアップしてという動きでしょうか。たぶん。
でも、なぜかその項目文字列だけ削除されており、タグだけが残ったままです。
もしかして各項目のサブ項目の要件定義が間に合わずに空欄にしてあるのかなと思ったのですが、このプルダウンメニューをクリックして飛んだページにはそれらサブ項目らしきものが見つかるわけで。
ポップアップメニュー部分の処理で、メニューサブカテゴリを後から削った形跡があるんだけど、もしかしてここの処理（javascriptによるユーザー側処理）が重すぎたので削ったとかそういうオチ？
#ニトリコード見てニヨニヨする会 pic.twitter.com/7QY9tCfnx8
— へぼへぼ＠睡眠不足 (@hevohevo) 2015, 6月 23使っているJavascriptライブラリの挙動を知らないので想像ですが、
大量の空<li>要素でもJavascriptはメニューとして処理しようとしているのでは？
そうだとすると、どのみち結構な負荷がユーザーのブラウザ側でかかっているのでは？ という疑問もあります。
まさかCPUの処理性能不足って
もしかして、思ったのだけど、
ニトリがプレスリリースで原因として語っていたCPU不足って・・・
（ページ重すぎてユーザーの）CPU不足なんじゃ・・・まさかね。
#ニトリコード見てニヨニヨする会
— へぼへぼ＠睡眠不足 (@hevohevo) 2015, 6月 23もう一つ気になる点
9000行近いコードの4800行あたり、body内でreset.css をインクルードしますね！
resetだから、h1,h2みたいな基本タグ全部リセットします。みたいな。
#ニトリコード見てニヨニヨする会 pic.twitter.com/CVGF1vICNs
— へぼへぼ＠睡眠不足 (@hevohevo) 2015, 6月 23つまり、HTMLのBODYのど真ん中にCSSインクルードしているのです。しかも、h1やpなどの基本的なタグのスタイルを全てリセットするreset.cssなるものを。
このあたり詳しくないんですが、パフォーマンス的にOKなんです？ エロい人のお言葉が欲しい。
#ニトリコード見てニヨニヨする会
— へぼへぼ＠睡眠不足 (@hevohevo) 2015, 6月 23そうすると、次のようなコメントがいただけました。
もう一つは、たぶんニトリぐらいならテンプレートを使っているでしょうから、<head>ぐらいまでは別のテンプレート読み込みになっていてそこに触れないという可能性はありえる。
— Noki (@Nokiyen) 2015, 6月 23@hevohevo 私も同じ理解をしてますー試されるクライアント側のスペック… 担当した人が<head>タグに書き込む権限もってなかったんでしょうか… 興味深いです…
— ワッタがし -☁︎ (@watta_wata) 2015, 6月 23なるほど、<head>に触る権限がないから、<body>にCSSインクルードするしかなかった説。
説得力あります。 ＞RTx2
— へぼへぼ＠睡眠不足 (@hevohevo) 2015, 6月 23また、次のようなコメントも。
@hevohevo d...divの中でスタイル、、、正気か。 再定義で重くなるというより、動的なデザイン処理もゴリゴリ入れててあまり重いから半端に再定義をすることで対応したとか？ DOMの読み込み段階で途中からスタイル定義がインラインみたいに適用されると過程すればですが。
— えにりん☆UPtoDATE (@enirin) June 23, 2015
そのようなやり方があるのですね。これってグリグリ動くサイトではあることなのです？
大規模サイトを作成したこと無いのでよくわかりませんが。
最後はしみじみ
大規模な分業体制敷いているでしょうから、メインCSSに特定のエレメント組み込むには上長の許可が必要で、しかし公開失敗で突貫工事で問題解決するために場当たり的にbody部分にCSSをインクルードするしかなかったという流れを予想しましたｗ
#ニトリコード見てニヨニヨする会
— へぼへぼ＠睡眠不足 (@hevohevo) 2015, 6月 23下っ端の悲哀。
#ニトリコード見てニヨニヨする会
— へぼへぼ＠睡眠不足 (@hevohevo) 2015, 6月 23おそらく、CPU不足（？）でコードを突貫工事で全面的に書き直したために、このような中途半端なコードが出てきてしまったのだろうなと予想しています。
しばらくしたら、綺麗に整理されてこのような荒い部分はなくなるだろうなとも。
中の人、本当にお疲れ様です。
補足
#ニトリコードを見てニヨニヨする会と言いつつ、結局はほとんど一人でコード読んでいるということに気づいたあなた。鋭い子は嫌いだよ。
突っ込み大歓迎。あなたもどうぞ、つぶやいてくださいな。