改題のお知らせ(2015.06.24 8:00)
内容と題名を合わせる為に、題名に（）内の追記を入れました。 最後まで読んでいただければ幸いです。
このお話は、プログラマあるあるを探す（ニヨニヨする）ためにコードを読み始めた筆者が、 発見し、調べていくうちに、その背景にある事情を慮り、だんだん笑えなくなってくる流れをご紹介しています。
はじめに
ニトリのECサイトであるニトリネットがリニューアルに失敗して6日も経ってから復旧したということで、 （一部の）プログラマクラスタで話題になっています。
僕の率直な感想は次のようなもの。
閉鎖状態の「ニトリネット」が6/23にサイト運営を再開、不具合の主因はCPU不足 | ネットショップ担当者フォーラムともあれ関係者の皆さまお疲れ様でした。個人の責任問題などと短絡化することなく、粛々と原因解明と、できればぜひ知見の共有公開をお願いしたい。
2015/06/23 13:40
プレスリリースでは、原因としてCPU不足を挙げています。
珍しい原因ですよね。あまり聞いたこと無いのでぜひその知見を知りたいものです。
しかし次のようなつぶやきが
早速、ニトリのトップページ見ている。すごい8000行の中にデバックコードが山ほど埋もれているよ！！！
— れいな@底なし沼の魔女 (@MegaBlackLabel) June 23, 2015
こんなツイートをみたら興味がわくじゃないですか！
サイトトップページの（HTML）ソースコードを読んでみました。
プログラマあるある探しをする
流し読みなので適当なこともつぶやいていますが、当初はこんな感じ。
コメント行にニヨニヨ
authentication という単語は長すぎるのでこんなコメントはあるあるネタですよね。
/*NINSHO*/ /*PANKUZU(￥取る)*/
ネーミングセンスにニヨニヨ
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) June 23, 2015つまり、HTMLのBODYのど真ん中にCSSインクルードしているのです。しかも、h1やpなどの基本的なタグのスタイルを全てリセットするreset.cssなるものを。
CSSはHEADにというのが原則だと思っていたので不思議に思い、尋ねてみました。
このあたり詳しくないんですが、パフォーマンス的にOKなんです？ エロい人のお言葉が欲しい。
#ニトリコード見てニヨニヨする会
— へぼへぼ＠睡眠不足 (@hevohevo) June 23, 2015たまたま上記ツイートを読んでくださった方から、次のようなコメントがいただけました。
もう一つは、たぶんニトリぐらいならテンプレートを使っているでしょうから、<head>ぐらいまでは別のテンプレート読み込みになっていてそこに触れないという可能性はありえる。
— Noki (@Nokiyen) June 23, 2015@hevohevo 私も同じ理解をしてますー試されるクライアント側のスペック… 担当した人が<head>タグに書き込む権限もってなかったんでしょうか… 興味深いです…
— ワッタがし -☁︎ (@watta_wata) June 23, 2015なるほど、<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)
改めて読み直してみると、たしかにこの記事、茶化しすぎな気もしますね。
あまりに不快に思われる方が多いようでしたら削除しましょうか。
この件について、感想などコメントをください。
補足３（2015.06.25 01:15）
一時は記事そのものを削除することも考えましたが、 ふざけて書いた補足１の文章を削り、本文中の明らかに茶化すような表現を修正することで記事自体は残すことにします。
タイトルにある「ニヨニヨ」という言葉も大変不評なので削るべきかとは思いますが、すでにこれだけの方が読んでいる記事でタイトルを大幅に改編することは混乱を招くと思い、軽率な私自身への自戒の意味も込めて現在のままにしておきます。