なぜコードは汚くなるのか

こうめ氏の記事「コード汚くてもデザインが見えればいいじゃん」への返答を読みました。
簡単にまとめると、汚いコードは一見ユーザーには関係なさそうに見えるけども、メンテナンス性を損ねることは開発スピードを下げたり、アクセシビリティに影響することで、間接的にユーザーのベネフィットを下げるよねって話。

自分はDTP出身のWEBデザイナーなので、正直言ってコードに関してはまだまだ勉強していかなければいけない身だけれど、デザインよければコードなんてどうだっていい、とは思わない。基本的に記事の内容に全面同意です。

汚いコード。

これが具体的に、どういう事態を招くのか。とある若手コーダーY君の仕事ぶりを見てみましょう。（以下の内容はすべてフィクションであり、実在の人物、企業とは一切関係ございません）

とあるコーダーY君の物語

新サイトの開発&ローンチ！これから頑張るぞ！

Y君はとある広告会社のコーダー。まだまだ半人前だけど、新規のWEBサービス開発による中途採用でなんとか潜り込めました。
人出も予算も時間もない中、徹夜と根性でなんとかリリースできました。気になるところもないでもないけど、コードもまーまーいい感じ！
スタイルガイド？仕様書？うーん、時間もギリギリだったし、落ち着いたらまとめようかな。

糞度:0.5

シーン1: トップページのレイアウト変えてみようか

ローンチから一ヶ月。思うようにコンバージョンが上がってきません。
エライ人は言います。「ちょっとトップページいじってみようか？」
WEBサービスは改善の繰り返しだし、しょうがないよね。素直に変更するY君。
あれ？捨てたはずのレイアウトのCSS消し忘れてない？

糞度:5

シーン2: 見出しとボタンのデザイン変えたい

「チョッキリツの改善や！」なかなか成果の出ない現状にイライラし始めたエラい人からの要望です。なおHTMLに関する知見はゼロの模様。
うーん…見出しやボタンはスタイルで統一してるからむやみにバリエーション増やしたくないんですよねえ…。Y君はちょっと食い下がるものの「うんうん、でもさ、結果出すのも大事だし、やらないよりやった方がいいよね？」エラい人にうまい感じにまとめられてしまいます。

その後、似たようなことを半年くらい繰り返す。

最近残業が増えてきたなあ…。

糞度:8

シーン3: 新人コーダーが入社

度重なるカイゼン&カイゼンで作業スピードだけは板についたきたY君に待望の後輩ができます。
まだまだデザインカンプ通りにコーディングするだけで精一杯のお年頃。「ああ、その組み方はうまくないなあ…」最初のうちは熱心に指導するY君ですが、自分の業務もすでに手一杯。自ずとチェックも甘くなります。
この辺りから、Y君の頭の中だけにあったスタイルガイドに崩壊の兆しが。
「ねえ、これどうやって組んでんの？」

糞度:15

シーン4: 新しいデザイナーが入社

やっぱデザインが全体的にアレじゃね？ってことで新デザイナーJoin。パチパチパチパチ。人は目に見える部分がどうしても目につくんですね。
「（デザイナー氏）スタイルガイドってあります？」→「ありません」→「お、おう…」
ないものはしょうがない。なんとなく全体のテイストに合わせたオレオレデザインを量産するデザイナー氏。それをコーディングするY君。
微妙に既存デザインと違う文字サイズ、色、見出しデザイン…etc。
デザインの数だけ増えるclassとCSSとjQuery。スパゲッティ化するコード。
この辺りからY君にもCSSの影響範囲が把握しきれなくなり、どこに影響するか分からないから消せない負のスパイラルに陥る。

Y君、タバコの本数が増え始める。

糞度:30

シーン5: 新機能の追加開発

相変わらず成果がなかなか上がらない日々。とうとうエラい人が大幅予算を投下を決意！ﾔｯﾀｰ！！人が増えるぞ～！
…と思いきや見た目の変更じゃラチがあかんと思ったのか新機能の開発案件。画面数？100Pくらい？
日々のルーティンに飽き飽きしていたデザイナー氏のテンション急上昇！反比例して盛り下がるY君。糞コード量産待ったなし！

たすけて。

糞度:50

シーン6: 回らないPDCA

せっかく新機能も入れたし、成果が出なかったらちゃんと数字を見てカイゼンしていくぞ！エライ人がなにか言っています。最近ぐろーすはっくっていう単語を覚えたらしい。
案の定成果はあまり上がらないわけですが、もはや問題点を検討したところで糞コードでがんじがらめの当ウェッブサイトはそうやすやすと組み替えられないんですよ！Y君はそう心の中で叫びながら、「他の業務が〜」「優先順位的には〜」などと供述しうやむやのまま現状維持に努めます。

ペンディングっていう言葉をおぼえた。保留より響きがいい。

糞度:70

シーン7: リアル離脱率の増加

最近新人氏が遅刻気味だ。そういえば最近作業に追われてあまり会話していなかった気がする。これは…もしかして…。
Y君の悪い予感は的中。なんやかんやあって、新人氏、帰らぬ人に。
当然のように新人氏の仕事もY君が引き継ぐ。

なお予算不足につき補充はされない模様。
というかもはやスーパーなマークアップエンジニアでも救済はかなり困難な状況。

そして、そんなスーパーマークアップエンジニアはわざわざこんな環境には来ません。

糞度:100

シーン8: モチベーション低空飛行

最近ではエライ人やデザイナー氏の無茶ぶりにも、心を無にして黙々と実装する（コードを上乗せし続ける）日々だ。思えば昔はもう少し抵抗していたような気もする。
創設以来日々継ぎ足してきた秘伝のソースは、もはや誰にも全容を把握できない。
命名規則？そんなものはこの世のどこかに置いたきた！
遠い国では、CSSプリプロセッサとかバージョン管理システムとかスタイルガイド作成ツールとかスプライトイメージ作成の自動化とかなんだかステキそうなものが流行っているらしい。うちには関係ない。そんなものを導入する気力も湧かない。

早く帰って艦◯レやりたい。

糞度:150

シーン9: まごころを、君に

Y君は思う。自分も会社もこのままでいいんだろうか。いいわけないんだけど。
膨れ上がった糞コードはもはや制御不可能。いっそ一から作った方がよっぽど早い。
何度か全面的なリファクタリングを提案したこともあるが、どうせ作り変えるならデザインもリニューアルしたいよね。あ、あのサイトにあるあの機能も実装しようよ！とかあちこちから口を挟まれ、結果膨大な工数がかかることが判明。リファクタリングもろとも保留された。

Y君は意を決してエライ人に言う。「あの。折り入ってお話があるので少しお時間いただけますか」

懐には一通の封筒が。

糞度:∞

汚いコードを産むのはコーダーではなく環境なのかも

どこに出しても恥ずかしくない、立派な糞コードです本当にありがとうございました。
他にもいろいろあるんだけど、書いてて辛くなってきた。（フィクションだけど）
でも、似たような状況に心当たりのある人はそれなりにいるんじゃないかな。

Y君もエライ人も新人氏もデザイナー氏も、（勉強不足な点はさておき）それぞれ自分の持ち場で精一杯サイトを良くしようとはしているんですよね。

Y君の書いた（舐めた）コードを正しく評価できる上司や同僚がいない点、ゆえにデザインとか機能とか分かりやすい改善が優先され、リファクタリングが軽視された点、設計思想の共有が全然なされていない点あたりが有効打となり、通常のPDCAサイクルが回せなくなった辺りで致死量を超えて、負のスパゲッティコードスパイラルを抜け出せなくなった感じかなと想像します。（フィクションです）

WEB制作・運営も結局上限付きの予算・時間の中で行うものなので、「見た目良ければ良し」に流れてしまうのも理解はできます。
ただ「コーダー個人の意識の問題」と切り捨ててしまうのもなんだか違う感じ。
結局、組織としてセマンティックでメンテナンス性の高いサイトについての知見を高めて、そのための予算と時間を確保できるように努めましょうよ、というお決まりの結論になっちゃうんですけどね。nanapiさんあたりは、その辺りうまく仕組み化している印象です。

改善を邪魔しない！シンプルなコードにするためのマークアップ術 | nanapi TechBlog

このお話（フィクションって言ってんだろ！）から、我々は何を学ぶべきなんだろうね？

2014.07