Upgrade to Pro — share decks privately, control downloads, hide ads and more …

サポートチャットサービスをローンチしてから5年間で発生した負債と対策

YS
September 07, 2022
1.1k

 サポートチャットサービスをローンチしてから5年間で発生した負債と対策

システム開発を行う中で、様々な条件によって技術的負債は生み出されてしまいます。

サポートチャットボットを提供するサービス『ChatDealer』はローンチされてから5年目であり、ラクスでは新しめのサービスです。
しかし、開発を進める中で様々な技術的負債が生じております。

本発表では、以下ポイントを中心にお話させていただきます。

・『ChatDealer』で技術的負債が生じた経緯
・技術的負債の解消に向けた対策

YS

September 07, 2022
Tweet

Transcript

  1. #RAKUSMeetup ©2022 RAKUS Co., Ltd. ©2022 RAKUS Co., Ltd. 酒井

    幸教 サポートチャットサービスを ローンチしてから5年間で 発生した負債と対策
  2. #RAKUSMeetup ©2022 RAKUS Co., Ltd. 自己紹介 酒井 幸教(さかい ゆきのり) 2007年よりラクスのクラウドサービス

    配配メール・クルメル・メールディーラーの開発を経験し 現在はチャットディーラーの開発に携わり 実装チームのサブリーダを担当している。
  3. #RAKUSMeetup ©2022 RAKUS Co., Ltd. チャットディーラーとは チャットボットを提供するサービス お客様サイトへ簡単にチャットボットを設置可能 設置 <script

    type="text/javascript"> <!-- var vgHost='xxx.xxx.xx',vgProtocol='https',vgPort='443',vgAtxt='k7Y7zq0g1T',vgSid=2; (function(){try{ var ins=document.createElement('script'),dt=new Date,tg=document.getElementsByTagName('script')[0]; ins.type='text/javascript';ins.async=!0;ins.setAttribute('charset','utf-8'); ins.src=vgProtocol+'://'+vgHost+':'+vgPort+'/chat/client.js?'+dt.getTime();tg.parentNode.insertBefor e(ins,tg); }catch(e){console.log(e);}})(); //--> </script> 設置タグをHTMLに記載
  4. #RAKUSMeetup ©2022 RAKUS Co., Ltd. 目次 1.サービスのローンチ時点からの技術的負債 6 生じた負債 10

    対策 13 2.アプリケーションの種類が増えた事による技術的負債 15 生じた負債 17 対策 21 3.メンバ体制の変更による技術的負債の発生 23 生じた負債 25 対策 27 4.度重なる改修によって蓄積される技術的負債 29 生じた負債 31 対策 33 まとめ 35
  5. #RAKUSMeetup ©2022 RAKUS Co., Ltd. 1.サービスのローンチ時点からの技術的負債 技術的負債の発生を防ぐために、開発着手前に次の施策を準備した。 • 施策 静的コード分析ツール(

    eslint, phpcs, phpmd )を使用し、コードの品質担保 - エディタ( PhpStorm )上で問題のある箇所を分析しエラーを通知 - GitへのPush後に自動チェックし、メール・Mattermostへエラーを通知
  6. #RAKUSMeetup ©2022 RAKUS Co., Ltd. 1.サービスのローンチ時点からの技術的負債 ▪生じた技術的負債 1. Node.jsの実装内容が古臭い Node.jsが古いJavaScriptの作りになっている。

    ・原因 工数を短縮するために、他サービスの古いNode.jsで作成された 類似機能を参考に実装したため作りが古い。 また、当時のNode.jsのLTSバージョンで同期機能(async, await) が利用できなかったため、ネストが深くなっている。
  7. #RAKUSMeetup ©2022 RAKUS Co., Ltd. 1.サービスのローンチ時点からの技術的負債 ▪生じた技術的負債 2. CSS定義の重複 共通のCSS定義が重複してスタイルシートに定義されてしまった。

    ・原因 デザイナーから提供されたモックに、共通のCSSが定義されていたため 実装者毎にスタイルシートにCSSを定義してしまい 共通のCSSが一部重複して定義された。 CSS 重複
  8. #RAKUSMeetup ©2022 RAKUS Co., Ltd. 1.サービスのローンチ時点からの技術的負債 ▪対策 1. Node.jsの最新化 Node.jsのLTSバージョンが同期機能(async,

    await)に対応した後 共通部品を最新の書き方で使いやすい形式にリファクタリングし 今後の開発で、可読性の良い書き方が行えるよう対応した。
  9. #RAKUSMeetup ©2022 RAKUS Co., Ltd. 1.サービスのローンチ時点からの技術的負債 ▪対策 2. リファクタリングバージョンの設定 年に2回、リファクタリングを行うためのバージョンを設けた。

    リファクタリングの候補は発見された時点で、リファクタリング候補一覧へ追加し リファクタリングバージョンで、棚卸しを行い優先度が高い問題から解決して行く。 1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月 リファクタリングを実施
  10. #RAKUSMeetup ©2022 RAKUS Co., Ltd. 2.アプリケーションの種類が増えた事による技術的負債 ▪生じた技術的負債 1. 可読性の低下 処理の分岐の増加、1ファイル内のコード量の増加

    xxxxxxxxxxxxxxx; switch (appType) { case アプリケーションA; xxxxxxxxxx; break; case アプリケーションB; xxxxxxxxxx; break; } ・・・ アプリケーションの種類ごとに 分岐と処理が増加
  11. #RAKUSMeetup ©2022 RAKUS Co., Ltd. 2.アプリケーションの種類が増えた事による技術的負債 ▪生じた技術的負債 2. 開発工数の増加 アプリケーションの種類を意識した設計・実装が必要

    ・◦◦ 項目は【タイプB】のみ表示する。 ・◦◦オプションは【タイプA】 のみ使用できる。 ・ 【タイプA】では、◦◦テーブル、 【タイプB】では□ □テーブルからデータを取得する。 ・ チャットの応答は【タイプA】は◦◦で応答をし、 【タイプB】では□ □で応答する。 等
  12. #RAKUSMeetup ©2022 RAKUS Co., Ltd. 2.アプリケーションの種類が増えた事による技術的負債 ▪生じた技術的負債 3. テスト工数の増加 特定のアプリケーションのタイプに対しての修正であっても

    コードが共通なので、対象外のタイプについてもテストが必要になる タイプA タイプB テスト範囲は両方 タイプBのみ修正
  13. #RAKUSMeetup ©2022 RAKUS Co., Ltd. 4.重なる改修によって蓄積される技術的負債 ▪生じた技術的負債 1. 速度劣化によるサービス品質の低下 速度が劣化することにより、次のような問題が引き起こされる。

    • 処理速度の低下により、大量のアクセスが応答待ちとなる障害の発生 • サーバに収容できるアカウント数が下がり機器コストの増加
  14. #RAKUSMeetup ©2022 RAKUS Co., Ltd. 4.度重なる改修によって蓄積される技術的負債 ▪対策 2. 定期的な速度改善の実施 ①

    速度改善が可能な箇所があるか調査 • プロファイラの活用 • SQL応答時間の調査 等 ② 改善点があれば、修正を実施