はじめに
ニトリのECサイトであるニトリネットがリニューアルに失敗して6日も経ってから復旧したということで、 （一部の）プログラマクラスタで話題になっています。
僕の率直な感想は次のようなもの。
閉鎖状態の「ニトリネット」が6/23にサイト運営を再開、不具合の主因はCPU不足 | ネットショップ担当者フォーラムともあれ関係者の皆さまお疲れ様でした。個人の責任問題などと短絡化することなく、粛々と原因解明と、できればぜひ知見の共有公開をお願いしたい。
2015/06/23 13:40
プレスリリースでは、原因としてCPU不足を挙げています。
珍しい原因ですよね。あまり聞いたこと無いのでぜひその知見を知りたいものです。
しかし次のようなつぶやきが
早速、ニトリのトップページ見ている。すごい8000行の中にデバックコードが山ほど埋もれているよ！！！
— れいな@底なし沼の魔女 (@MegaBlackLabel) June 23, 2015
こんなツイートをみたら興味がわくじゃないですか！
さっそく、#ニトリコード見てニヨニヨする会というツイッタータグをつぶやいて流し読みを始めました。
ニヨニヨする会
流し読みなので適当なこともつぶやいていますが、当初はこんな感じ。
コメント行にニヨニヨ
あるあるですよね。
authentication という単語は長すぎるんじゃよ。デスマ中にそんな長い単語書けるか！
/*PANKUZU(￥取る)*/ /*NINSHO*/
ネーミングセンスにニヨニヨ
topTokusyuBtn ってネーミング・・・好きかも #ニトリコード見てニヨニヨする会
— へぼへぼ＠睡眠不足 (@hevohevo) June 23, 2015
気になる箇所
- なぜか数百行の空改行が何箇所もある。全部削れば1000行くらい圧縮できそう
- 謎の
空<li>が大量に（下図参照）
コードを少し読み込んでみると、どうやらトップページにあるプルダウンメニュー（下図参照）のコードらしい。
本来は、このメニュー項目のサブ項目が設定してあったようです。
たとえば、下の図のプルダウンメニュー「ベッド」にマウスポインタを合わせると、その下位カテゴリのメニューが右にポップアップしてという動きでしょうか。たぶん。
でも、なぜかその項目文字列だけ削除されており、タグだけが残ったままです。
もしかして各項目のサブ項目の要件定義が間に合わずに空欄にしてあるのかなと思ったのですが、このプルダウンメニューをクリックして飛んだページにはそれらサブ項目らしきものが見つかるわけで。
ポップアップメニュー部分の処理で、メニューサブカテゴリを後から削った形跡があるんだけど、もしかしてここの処理（javascriptによるユーザー側処理）が重すぎたので削ったとかそういうオチ？
#ニトリコード見てニヨニヨする会 pic.twitter.com/7QY9tCfnx8
— へぼへぼ＠睡眠不足 (@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なるものを。
CSSはHEADにというのが原則だと思っていたので不思議に思い、尋ねてみました。
このあたり詳しくないんですが、パフォーマンス的に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おそらく、コードを突貫工事で全面的に書き直したために、空白行などが含まれる荒さの目立つコードが出てきてしまったのだろうなと予想しています。
しばらくしたら、綺麗に整理されてこのような荒い部分はなくなるだろうなとも。
中の人、本当にお疲れ様です。
最初はニヨニヨと言いつつ、最後は自分に当てはめて落ち込みたくなりました。
補足
#ニトリコードを見てニヨニヨする会と言いつつ、結局はほとんど一人でコード読んでいるということに気づいたあなた。鋭い子は嫌いだよ。
突っ込み大歓迎。あなたもどうぞ、つぶやいてくださいな。
補足２
改めて読み直してみると、たしかにこの記事、茶化しすぎな気もしますね。
あまりに不快に思われる方が多いようでしたら削除しましょうか。(2015.06.24 1:50)
この件について、感想などコメントをください。