それもまたUIだね。インタフェース散歩！(5) データやアルゴリズムを可視化して開発者の生産性を上げる

人とコンピュータの関係を考えると、二者間には常にインタフェースが存在します。本連載では、人とコンピュータの間に介在するインタフェースに着目し、インタフェースとそれらを世に生み出すプロダクト開発について議論します。Helpfeelが、独自のインタフェースを実装しながら、便利さと楽しさを備えたWebサービスをどのように開発しているのかについてお伝えします。

こんにちは、Helpfeelプロダクトマネージャーのniboshiです。エンタープライズサーチ「Helpfeel」の機能設計・開発を行っています。HelpfeelはFAQをはじめ、社内ナレッジの検索や商品の推薦など、幅広い用途でご利用いただいています。本稿では前回までと少し趣向を変えて、エンドユーザではなく開発者向けのUIについて紹介します。

開発者を助けるUI

近年、開発者の生産性を向上させるためのDeveloper Productivity Engineeringに注目が集まっています。具体的な取り組みとしてはCI/CD整備や開発ワークフロー改善などがありますが、開発者の理解を助けるためのインタフェース整備も重要な観点の一つでしょう。

例えばReactを用いて開発する場合、多くの開発者はReact DevToolsを利用します。React DevToolsはChrome拡張として配布されており、仮想DOMと実DOMの対応関係をElement Panelに似たUIで示してくれます。

React DevTools、https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=jaより引用

また、データを視覚化するための取り組みもDeveloper Productivity Engineeringの一環と言えるかもしれません。GrafanaやMongoDB Charts、Matplotlibなどは、それぞれ対象とするデータも使われ方も異なりますが、開発者の認知負荷を下げて生産性を上げるという観点で同じ方を向いているツールだといえます。

Helpfeelでの開発者向けUIの取り組み

開発者の生産性を向上させるためのHelpfeelでの取り組みを3つご紹介します。

Server Timing APIを活用した処理時間の可視化

ChromeのDevToolsでは、さまざまなデータを対象として処理時間を可視化する機能が実装されています。JavaScriptの処理時間を示すPerformanceタブや各リソースのダウンロード状況を示すNetwork Panelは、利用されている方も多いのではないでしょうか。これらの機能はそのまま使うだけでも便利ですが、Network PanelはServer Timing APIを活用することで、クライアント側から見た計測時間だけでなく、サーバ内部での処理時間も同じインタフェースで可視化できます。

サーバ側の処理時間をChrome DevToolsで可視化している様子(赤枠内)

もちろん DevToolsとサーバ側のログを突き合わせても同じ情報は得られますが、このような表示であることで処理全体のどこがボトルネックになっているのかがひと目で分かるようになります。

検索アルゴリズムを可視化するChrome拡張

連載第3回でも紹介しましたが、Helpfeelでは「意図予測検索」と呼んでいる独自の検索アルゴリズムを開発/運用しています。grepのような逐次検索をベースにしていますが、検索処理がいくつかのフェーズに分かれており、曖昧一致や動詞の活用形を吸収した検索などを段階的に行うのが特徴です。

Helpfeelのエンジニアは、日々、意図予測検索アルゴリズムの改善に取り組んでいるのですが、日本語特有の泥臭い処理も多く、Helpfeelを構成する要素の中でもなかなか理解が難しいです。

意図予測検索処理のイメージ図（実際はもっといろんなことをしています）

そこで、我々は検索アルゴリズムを可視化するためのChrome拡張を開発し、社内に配布しています。

開発したChrome拡張の利用イメージ

これは、実環境での検索内容に応じてChrome DevToolsにアルゴリズムの内部情報がリアルタイムで反映される仕組みです。このツールを作ったことで、新しくジョインしたメンバーの理解に役立てたり、想定していない検索結果が得られた時のトラブルシューティングなどが高速に行えたりできるようになりました。