第1回 HTMLファイ部 リファクタリング大会
【ルール】
参加者に与えられたミッションはだた1つ。
15分以内に こちらのコード を美しくすることのみ。美しさの定義はあえて参加者に委ねます。
「可読性」を美しさと捉えるも良し、「短さ」を美しさと捉えるも良し、「処理の軽さ」を美しさと捉えるも良し。
己の美的感覚のみを信じて戦う大会。それが、YOKOHAMA CORDS CODES COLLECTION なのです。
※ 東京ガールズコレクションと掛けたネーミングだったのですが、タイポもありまったく気づかれませんでした。
ファイ部リーダー 本多大和 の作品
あんなサイト や こんなサイト の実装を手がけるファイ部リーダー。
演出が非常に得意分野ですが、今回は演出ではなくコードの美しさを競う大会。非常にスタンダードな改修を加えてきました。
Update と Render をわけたところがポイントだそうです。
???からの採点 90点
- セレクタが複数回実行されちゃってますね。
意匠部から参戦 小原とおる の作品
こんなサイト の実装を手がけてたものの今期から意匠部(デザイナー)に転向。実装力も健在です。
HTMLが1つの要素になっているなど、とてもシンプルな実装になっています。また、唯一背景を黒に変更しています。
さすがデザイナーといったところでしょうか。
???からの採点 100点
- 正規表現の重さが気になりましたが、短さを求めるとこれしかないですね。
2013年新人王 藤澤伸 の作品
コードの綺麗さ、実装スピードに定評のある昨年の新人王。
普段は こんなサイト をつくったり、Lobi の Androidアプリ を担当していたりと大活躍です。
コードも非常に読みやすいですね。JavaScriptしか改修しないという己の決めた方針を貫きました。
(出題時に僕がいろいろタイポしていたんですけど、それもそのまま残っています)
唯一、エラー時の処理を記述しているのもポイントです。
???からの採点 100点
- 問題なしです。
スロットの達人 田島真悟 の作品
最近めきめきと頭角を現してきた期待のルーキー。
非常に素直な実装になっていますね。zero paddingというコメントがかっこいいです。
普段は こんなサイト や こんなサイト をつくってます。
???からの採点 80点
- マジックナンバーが含まれてますね。
- コメントではなく関数名で説明できるとより良いですね。
炎のストライカー 中山祐平 の作品
「苗字が中山なのでゴン」というひねりのない(?)あだなを持つ期待のルーキーですが、
実装はひねりまくりです。まさかのCSSアニメーションで動かしています。
普段は 寿司を食べたがってます 。
???からの採点 99点
- 演算子の前後にスペースが欲しいですね。
アルファベットがまったく書けない男 君塚史高 の作品
今回の出題者 & ブログ投稿者です。
出題する際に慌てすぎて、codes と minutes と seconds をタイポしました。おはずかしい。
DOMへのアクセスを減らすべく、属性セレクタのマッチをつかって実装しているところがポイントです。
???からの採点 94点
- numberToStringWithDigitに汎用性は必要ないですね。
- スコープの割に関数名が長くて読みにくいですね。
数学博士 岩淵勇樹 の作品
独特の美的センスを持つと評判の数学博士。
メソッド名を配列に収納するというユニークな方針でリファクタリングしています。
普段は サイトのソースにおしゃれな仕掛け を施すことが多いですが、今回は美しいコード対決。特に仕掛けはないようです。
???からの採点 65点
- マジックナンバーが含まれてますね。
- adjust(index) の6つの関数をまとめた関数を定義したほうがいいかもしれませんね。
- adjust にバグがありますね。
技術部から参戦 ??? の作品
己のコードに絶対的自信を持つ謎の覆面スーパーエンジニア。
唯一CoffeeScriptをつかっています。
今回も「これが正解です。」と言い張っていました。
全員分の採点(主観)も行ってくれてます。
???からの採点 100点
- 問題無しです。
- これが正解ですね。
HTMLファイ部の 比留間 和也 監督 の作品
流石、 監督 。
まるで 教科書 にでてくるようなコードです。
それもそのはず。 監督 は JavaScriptの新しい教科書 の作者なのです。
???からの採点 80点
- マジックナンバーが含まれてますね。
- セレクタが複数回実行されていますね。
いかがでしたか。
コードから実装者の思想がかいま見えたのではないでしょうか。
「変数は初期化のタイミングで一気につくるべきだ!」
「1000msごとに更新すると最大1000ms未満の誤差がでちゃうよ!」
「お前ら同じ DOM を何回も走査してんじゃねえよ!」
「マジックナンバー、ダメ・ゼッタイ!」
「ライブラリをつくる時と簡単な実装をする時では求められる汎用化の粒度が違う!」
「正規表現は重いからつかいたくない!」
「ちょっと処理が重くなったとしても読みやすさのほうが重要だ!」
「codes を cords って書いちゃうなんて人としてどうなの?」
「自分のサイトをつくっている気持ちになれば対応環境は広いほうが良いと思うはず!」
「今回の課題を共同作業と捉えると勝手に変更しすぎるのは良くない!」
などなど、発表後は各々の美的センスをぶつけあいましたが、みんな己の思想をコードに込めてコーディングしているんですね。