それもまた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で示してくれます。

また、データを視覚化するための取り組みも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を活用することで、クライアント側から見た計測時間だけでなく、サーバ内部での処理時間も同じインタフェースで可視化できます。

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

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

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

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

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

より良い検索体験のためには、高度な検索アルゴリズムだけでなく質の良い検索対象データも必要です。Helpfeelでは正規表現に似た独自の記法（Helpfeel記法）を用いて、データの半自動生成を行う仕組みがあります。

上記の例はシンプルなので、どのように展開されるのかがイメージしやすいのですが、もっと複雑な記法になると、展開パターンはかなり複雑になります。そこで、Helpfeel記法をGraphvizを用いてグラフ構造として可視化する社内ツールを開発しています。

下図はより複雑な例です。これは実際にHelpfeelのヘルプページで利用されているデータですが、このぐらい複雑になると可視化のメリットが感じられます。

ポイントは、グラフ構造を可視化するUIはReact Componentとして再利用可能になっている点です。コンポーネントはGitHub Packages経由で社内に配布されているので、誰でも簡単に記法の可視化ができるようになっています。
おわりに

UIの観点から開発者の生産性を向上させるアプローチについて、Helpfeelでの取り組みを例にいくつかご紹介しました。この記事がインスピレーションを得るきっかけになれば幸いです。

文：niboshi

Helpfeel へるぷふぃーる Helpfeel エンジニアチーム Helpfeel（旧Nota）は「Human Empowerment Technology テクノロジーの発明により、人の可能性を拡張する」をビジョンに掲げ、メディアキャプチャー「Gyazo」、アイディエーションツール「Scrapbox」、エンタープライズサーチ「Helpfeel」の3つのクラウドサービスの開発・運用を行っている。 これらを開発しているのが、Helpfeelのエンジニアチーム。未踏ソフトウェア開発事業採択者が4名在籍する開発力の高さを生かして、全ての人を尊重したユニバーサルでユーザー中心のプロダクトを開発する。 この著者の記事一覧はこちら