# 概要
老朽化したプロダクトのバックエンド、フロントエンド両方の作り直し。
#チーム情報
サーバーサイドエンジニア/フロントエンドエンジニア: 4名
プロダクトマネージャー: 1名
デザイナー: 1名
＃ 使用技術
- Vue.js, Laravel
# 担当業務
MVCにおけるVCを主に担当し、フロントエンド全体の技術選定・コンポーネント設計・実装を担当。
# 課題
- jQueryとCakePHPのテンプレートであるctpにより管理されていたフロントエンドはUI部分とビジネスロジックが深く依存し切り離させない状態であった
- 各ページごとに似たような機能やUIがある場合、それぞれでロジックやスタイルの実装がされており冗長化していた。メンテナンス工数が高く機能追加、改善が難しい状態であった
- プロダクトを通して細かいデザインのズレが多くあり一貫性のないサイトであった
- 多言語のメディアサイトであるため、ページ内で言語ごとに細かくコンテンツの出し分けなどを行っており、その表示ロジックがテンプレート内に直接実装されており複雑で可読性が著しく悪い状態であった
- クライアントや編集者の要望でデザインの変更や追加が頻繁に起きる状況の一方、上記で挙げた課題の結果、それに対応する際の修正箇所や工数が不必要に多かった
- スタイルの衝突や!importantを使用することでのスタイルの上書きが横行しており、ちょっとしたスタイル変更も難があり、また影響範囲の把握も難しかった。
# 取り組み
上記で挙げた課題を解決するための取り組み
- Vue.jsの選定
コンポーネントシステムとVue.js経験者がいなかったチームにとって学習コストが低いVue.jsは魅力的で利用した。
- Atomic Designの考えを取り入れ、課題であったUI、スタイル実装の冗長化を改善
上で挙げた通り、同じUI部品やスタイルがコードベース内に複数存在している課題があったのでそれを解決するためAtomic Designの考えを取り入れました。
これによりUIに専念したコンポーネントがAtoms,Molecules,Organismsという粒度で作成され使い回しがしやすく、メンテナンス性が向上したとともにページを通してデザインの統一も可能になった
* UI部分の実装と各UI部品が持つ機能ロジックを明確に分離させた
下記がごちゃ混ぜになり複数のjsファイルで定義されていた。
* UIに関する実装(jQueryを利用しDOM操作を行いエレメントの追加など)
* APIを利用したデータの取得
* 各ユーザーアクション起因で起こるUIの変化のロジック
これを解決するために、Renderless Componentsを作成し、そこにAPIを利用したデータの取得などを閉じ込め、UIコンポーネントはUIに関することに注力できるようにした。
これを行ったことで見た目が同じだけど扱う表示するデータが異なる場合、UIコンポーネントを使い回すことができ肥大化したコードベースを小さくする効果もあった。
- 多言語サイトであるが故のコンテンツの細かい出しわけはSchemaを定義し、複雑にネスト化する条件分岐を避けた
表示ロジックやページごとに異なるコンテンツの出しわけなどを、
この言語のときはこのコンテンツ
のようなルールをマッピングしたSchema定義しておき、可読性を高めメンテナンス性を高めた。
非エンジニアがコードを触る機会があるプロダクトなので、非エンジニアでも表示するコンテンツの変更などをSchemaを変えることで可能になり作業工数が削減できた。
- BEM記法をべースとしてコーディングルールを設けることでスタイルの衝突リスクの削減
リボーン前では、スタイルの衝突が横行していたので、それが起きないようルールを定義し、またAtomic Designを用いたコンポーネント設計でスタイルのスコープを明確化した
# 成果
コンポーネント設計、Vue.jsの導入をした結果下記のような結果になった
- UIコンポーネントはUIに専念でき余計なAPI連携のロジックなどを持たない
- 共通コンポーネントができた結果、プロダクトを通してのデザインの一貫性が上がり、スタイルやマークアップの冗長化が改善、スタイルの上書きがなくなった。これによりより機能追加やメンテナンス性が向上した