はじめに
こんにちは! 社会人2年目を頑張っております、エンジニアの@b0ntenmaruです。
今年2月までリファクタリング専門チームにてcrowdworks.jpの技術的負債を返却するために奮闘しておりましたが、そこから現在まではユーザーの皆様に安心安全なサービスを提供するためにクラウドワークス 安心安全宣言のための施策を行っています。
リファクタリング専門チームについては以下をご覧ください。
施策による機能開発を行う際に直面した課題
施策では主にフロントエンドの機能追加をすることになったのですが、技術的負債によりスピードを維持しながら開発を続けることは困難な状態でした。 crowdworks.jpを取り巻くフロントエンドの技術スタックはざっくり書くと下記3つに分類できます。それぞれで発生している問題を簡潔にまとめます。
ERB
- html.erbファイルにif分岐や業務ロジックが直接記述されており、かつ同様の記述が複数ファイルに散らばっている
※ ERBはcrowdworks.jpで採用されているRuby on Railsのテンプレートエンジン
CSS
- 秩序なく数年上書きされ続けたCSSが無数に存在していて、意図したように実装できなかったり意図しないページのデザインが破綻してしまうことが頻繁にある
- 変更による影響範囲の特定が困難、かつできたとしても調査に時間がかかる
- CSSの中には
!important
で上書きされ続けたCSSも多数存在しており、新規のデザインを適用される場合やむをえず!important
を上書きするしかない場合がある
jQuery
- 古の時代に書かれたjQueryのイベントハンドラが大量に張り巡らされており、変更を加えると意図しないページで破綻していることがある
- そもそも読むのに膨大なエネルギーを消費する
- 変更による影響範囲の特定が困難、かつできたとしても調査に時間がかかる
このような課題があり、スピードを維持して開発が続けられるよう機能追加だけでなく負債の返却作業をする必要もありました そこで、関心事を集約して複雑なUIを確実かつ堅牢に組み上げる手段であるコンポーネントベースの思想を取り入れ、かつ今後の負債化を防ぎ、持続的に開発していくためのコンポーネント設計を考えました
※ crowdworks.jpではVue.jsを採用
この記事ではhtml.erbからVue.js置き換えなど負債を返却しながら機能追加していく時に実践したフロントエンドのコンポーネント設計について書いていこうと思います。
続きを読む