図書館蔵書確認userscriptのリファクタリングの会

Javascript

Greasemoneky使ってサーバサイドの処理をクライアント側に持ってこれないかなあと試行錯誤しているうちに、半年前に作ったスクリプトが俄然気になりだしたのでリファクタリングの会。
http://userscripts.org/scripts/show/13816

Inserts links into Amazon's page to the libraries in central Tokyo. 東京23区内の国公立図書館に蔵書確認を行い、Amazonの書籍ページに予約ページへのリンクを挿入します。

Amazon書籍ページを表示すると、23区図書館+都立図書館+国会図書館に対し蔵書の有無を問い合わせ、蔵書がある場合には予約ページへのリンクを挿入します。

■以下の図書館は蔵書問い合わせが可能です。
国会図書館、都立図書館、千代田区立、中央区立、新宿区立、文京区立、台東区立、墨田区立、江東区立、品川区立、目黒区立、世田谷区立、渋谷区立、中野区立、豊島区立、北区立、荒川区立、板橋区立、練馬区立、足立区立、葛飾区立、江戸川区立
■以下の図書館には制約があります。
・大田区立はネット経由の図書館検索システムがないので、非対応です。
・港区立はISBNによる検索ができないので、非対応です。
・杉並区立はISBNによる検索ができるようなのですが、どう検索条件を変えても一件も検索できなかったため、非対応としました。
・渋谷区立と中野区立はISBNを手作業で入力しているらしく、間違ったISBNが登録されている場合が多々あります。そういった書籍は正確には検索できません。

当時はJavaScriptに(今以上に)詳しくなかったとか、動けばいいやモードだったこともあり、今コードを見返すと反省点が色々出てきます。
さあいっしょにレビューしてみよう! 約500行、32KBほどあるから引用はしないけどここを見てみてください。
僕がとても気になったのが、

  • 漢字を書くのに文字参照を使っている(このスクリプトを書き始めていた頃(一年くらい前かな)はLatin-1の文字コードしか書けなかった)。
  • メソッドの定義にはprototypeを使うべき。
  • チェックボックスを表示するのに、innerHTMLを使って生成している上にid属性を使っている。idが重複したらどうするんだ。
  • リクエストオブジェクトの生成方法が一貫していていない。
  • ビューとモデルが渾然一体になりすぎている。データ処理主体でやるはずの関数なのにinnerHTMLでの画面操作が入っていたり。
  • バージョンアップ通知があるべき。userscriptはアドオンと違って更新通知を作り込まないといけない。
  • 各図書館の定義ファイルはサーバに置いておいて定期的に取得した方が良いのでは。
  • 江戸川区の実装が汚すぎる(いやね、江戸川区図書館のサイトの設計が良くないのが原因なんですがね)。
  • 千代田区図書館でシステム更新が入ったためこのコードが動かない。

このあたり。
江東区民であり、新宿区図書館と墨田区図書館をよく使っている僕としては今のままでもあんまり困らないのですが、もうちょっとなんとかしたいなあという気持ちが強くなって参りました。あと、userscriptを書くときにはjQueryのような便利ライブラリが使えないので、かえってJavaScriptの勉強になるなあということにも気づきだしましてね。

というわけで、リファクタするぜ!