Shut the fuck up and write some code

グダグダ言わずにコードを書きたいブログ

フロントエンドに秩序を取り戻そうしている話

今月から新たな案件を引き受け始めたのですが、これが中々の地雷案件だったので、作業内容を今後のメモ的に残して置こうと思います。

問題

内容としてはページ内に埋め込んで使う汎用的なブログパーツ的なコンテンツの改修/開発なのですが、現状のソースを見るとかなりの惨状でありました。

  • jQuery + Knockout.js
  • documentファイルなし。ソースにコメント無し。何がどうなっているのか一見では掴めない・・・。
  • 基本コア機能とViewが激しく密になっている。あちらこちらで行われているDOM操作。
  • スクランナー使わずmakeでビルド(!)。
  • ファイル階層は1層のみ。jsとsassフォルダに乱雑に各種ファイルが突っ込まれているだけ。整理は全くなされていない。
  • SASS PCブラウザとスマートフォンでファイルが別れてるものの、共通ファイルがそれぞれのフォルダ用意されている(それ共通なの?)
  • SP用のソースなのになぜか-msやmozなどのprefixの指定がある。さらにはminifyされてないコンパイルされたCSS・・・。

ツッコミどころが満載で、今まで誰もツッコんでないのが不思議に思える現状。こうなっている原因は詳細はよくは聞いてないですが

  • 少人数開発による属人的な実装(ドキュメント無し/コメント無し)
  • フローとルール無き開発(開発ブランチをマスターにマージするという考えすらない)

あたりが原因かなとは思います。個人一人で開発し続けるなら良いですが、人を雇って実装を任せるにはあまりに稚拙で閉口・・・。

とりあえず改修してみる

もう怒りを通り越して悲しみしかないのですが、請けた仕事である以上やるしかないので出来るところから着手していきます。

スクランナーの導入

とにかくビルドを楽にしたいのでgulpによるビルド環境を用意。これでmakefileから開放される。watchによる自動ビルド&リロードも導入して真っ当なフロントの開発環境に。超絶便利になった!と思わせといて、これが普通ですから・・・。

ファイルの整理

Javascriptはかろうじてbrowserifyが導入されていたのでファイルの依存関係の問題はなかったので、コードリーディングしてファイルを分別。コメントを書き残しつつ整理する。以下のような分け方をしてみた。

  • classes 機能毎クラス
  • components Viewのためのクラス
  • utils 汎用関数

だいぶ機能が可視化されるようになった。

SASSは中身を精査しながら

  • common PC/SP共通スタイル
  • pc PC用
  • sp スマホ

に整理。これでファイル量が1/3くらいになった。csscombなど導入してファイルの中身も整形。さらにSASSのビルドにPostCSSをかますようにしてprefixの問題などを解消。グチャグチャだったスタイルもかなりスッキリした。

ES6に変換

今時ES5なんて書けないのでxto6を入れてjsをコンバート。ただxto6の変換はclassのコンストラクタの引数がうまく変換されないなど問題が所々あったので変換したソースをビルドして確認しつつ手動で修正。

ESLint

コードスタイルが場所によってバラバラなのも問題だったので、eslintを入れて一定のスタイルで実装出来るようにした。AirBnbベースにしてみたものの、xto6の変換があまり対応してなかったので結構な量を手動で修正。

まとめ

とりあえずフロントエンド開発環境としてはそれなりに真っ当なところまで整えることが出来た。ファイルもかなり整理されて、ストレスフルな状況からは脱した。けどスタートラインに立っただけとも言う。

今後

テスト導入

これは近々の課題。何を使うかまだ精査してないですが多分karma + mochaあたりに落ち着くと思う。

jQuery脱出

Knockout.jsが使われていながらもそれは一部で、7割くらいはjQueryによるDom操作。「今更Knockoutでもないよなー」と思ってるのでVirtualDom系の何かを使いたい。規模は小ー中規模なので、reactでもないかなと思いriot使い始めてみている。あと設計実装があまりに見通しが悪く今後付き合う気力もないので、riotcontrolを使った簡単なfluxっぽい設計に変更にしたい。

CI導入

そもそもCI使ってないのでアレだけど、自腹払ってでも使いたい。クソコードは絶対通さない強い意志を示したい。

バージョン管理

そもそも開発フローが完全に属人化されてしまっていて、PR無し&タグも切られてない、マスターと開発ブランチが大きく乖離していて、もはやマスターがマスターとしての機能がなされてない。少人数の開発だからってそんな状況はどうかしてるの、でGitFlow的な開発スタイルを徹底的にやる。

最後に

辛抱強くやるべきことを積み重ねるだけ。戦いは終わらない・・・。

参考

フロントエンドに秩序は戻ったか? // Speaker Deck

フロントエンドに秩序を取り戻す方法 // Speaker Deck