【ITニュース解説】Tally: The Liveability Dashboard

Tally（タリー）は、新しい地域へ引っ越す際に感じる不安や情報不足を解消するために開発されたWebアプリケーションである。仕事や教育のために見知らぬ場所へ移ることは、その地域の生活環境について不確かな情報が多いと、大きなストレスとなることがある。Tallyは、このような課題に対して、地域住民からのアンケート調査に基づいた情報を提供する解決策として登場した。

このシステムは、地域の住民に、そのエリアにある学校や病院などの施設、あるいは清潔さ、水質、空気の質、物価の手頃さ、安全性といった生活水準を評価してもらうことで、役立つ情報を収集する。アンケートが送信されると、その地域の評価が集計され、インタラクティブなダッシュボードに表示される。これにより、引っ越しを検討している人々は、その地域の状況を簡潔に把握できる。開発者自身も、かつて新しい都市へ引っ越した際に、どの地域を選ぶかという決断が非常に大変で疲弊する経験をした。もしTallyのようなツールがあれば、もっと簡単かつ迅速に決断ができたはずだと語っている。このように、Tallyは地域住民のレビューを基にした「住みやすさ」ダッシュボードを提供し、コミュニティ主導で地域の情報を提供する取り組みである。より多くのアンケートが提出されることで、ダッシュボードの精度は向上し、次の引っ越し先を見つけるための信頼できるツールへと成長する。誰でもアンケートフォームに記入して貢献できる点が、このプロジェクトの大きな特徴である。

Tallyは、最新のWeb開発技術を組み合わせて作られている。フロントエンド、つまりユーザーが直接触れる部分は、ReactとTypeScriptという技術が使われている。Reactは、ウェブページの見た目を作るためのJavaScriptライブラリであり、TypeScriptはJavaScriptに型という概念を導入して、より堅牢なプログラムを作成するのに役立つ。バックエンド、つまりシステムの裏側でデータの処理や管理を行う部分は、Node.jsとTypeScriptが使われている。Node.jsは、JavaScriptをサーバーサイドで実行できる環境だ。データベースには、Googleが提供するFirebase Firestoreが採用されている。これは、リアルタイムでデータを同期できるNoSQLデータベースで、開発が迅速に進められるメリットがある。

ユーザーインターフェース（UI）の部品には、KendoReactとMUI（Material-UI）という二つのライブラリが利用されている。これらは、ボタンや入力フォーム、スライダーなど、ウェブサイトでよく使われる部品をあらかじめ用意しており、見た目の美しいアプリケーションを効率的に開発するのに貢献する。位置情報を取得するためには、ipapiというAPI（Application Programming Interface）が使われている。これにより、ユーザーの現在地を自動で検出し、アンケートフォームの地域情報を自動入力したり、その地域に関するダッシュボードを作成したりする。ダッシュボードに表示されるグラフやチャートは、Rechartsというライブラリを使って作成されている。これは、Reactアプリケーション内で動的でインタラクティブなグラフを簡単に作成できるツールである。

開発の効率化と品質管理のために、Sass（CSSの拡張言語）、ESLint（コードの静的解析ツール）、Dotenv（環境変数の管理）、React Router（Reactアプリケーション内のページ遷移を管理）などの追加パッケージも活用されている。ソースコードのバージョン管理にはGitHubが使われており、これは複数の開発者が協力して作業を進める上で不可欠なツールである。完成したアプリケーションは、バックエンドがRender、フロントエンドがNetlifyというサービスにホスティングされている。これらのサービスは、開発されたアプリケーションをインターネット上で公開・運用するために使われる。

Tallyの具体的な利用の流れを見てみよう。まず、ユーザーはTallyのランディングページにアクセスする。このページには、ナビゲーションバーが配置されており、ランディングページ、アンケートフォーム、ダッシュボードの各ページへ移動するためのボタンが備わっている。これらのボタンは、KendoReactのSvgIconsというコンポーネントを使って作られている。

次に、アンケートフォームだ。このフォームは五つのアコーディオン（クリックすると内容が開閉するUI要素）で構成されている。ページのタイトルとサブタイトルはKendoReactのTypographyコンポーネントでデザインされており、アコーディオンのヘッダーにはKendoReactのTooltip機能が追加されているため、マウスオーバーで補足説明が表示される。最初の二つのセクションは、個人の詳細と地域情報を入力するためのものだ。地域情報セクションでは、ipapi APIを使って三つのフィールド（国、地域、都市など）が自動入力されるため、ユーザーによる不正確なデータ入力を防ぐことができる。もちろん、これらのフィールドは後から編集可能だ。このセクションでは、KendoReactのLabel、Input、Autocompleteといったコンポーネントが活用されている。

残りのセクションは、地域の評価とコメントを記入するためのものだ。ここでは、MUIのスライダーコンポーネントが使われ、住民がさまざまな施設や生活要素について評価を入力する。例えば、学校の質や病院のアクセシビリティなどを段階的に評価できる。最後のセクションは、住民が自分の地域に関するフィードバックやコメントを自由に記入できる。ここにはKendoReactのTextAreaコンポーネントが使われている。全てのフォームが記入されると、KendoReactのButtonコンポーネントで作成された送信ボタンが有効になる。フォームが正常に送信されると、KendoReactのInfinite Spinner Loaderというローディング画面が表示され、その後KendoReactのNotificationコンポーネントを使って成功通知が表示される。

アンケートが完了し、データが蓄積されると、その情報はダッシュボードで視覚化される。ダッシュボードには検索フィールドがあり、地域名（エリア、郵便番号、都市、州など）を入力してエンターキーを押すと、その地域のデータが検索される。データが見つかればダッシュボードが表示され、見つからない場合は「見つかりません」というページが表示される。

ダッシュボードは、Rechartsライブラリを使って作成された様々なチャートを含んでいる。具体的には、各施設や生活水準の集計評価を示すダイヤル型のグラフ、住民からのコメントを一覧表示する専用セクション、そしてその地域の年齢分布や職業分布を示すチャートがある。さらに、空気の質、騒音レベル、清潔さ、水質の傾向が時間の経過とともにどのように変化しているかを示す折れ線グラフも表示される。これにより、ユーザーは特定の地域の住みやすさを多角的に、そして視覚的に把握できる。

Tallyは、React、Node.js、Firebaseといった最新の技術スタックと、KendoReactやMUIのようなコンポーネントライブラリを組み合わせることで、優れたパフォーマンスとユーザーエクスペリエンスを実現している。コミュニティの広範な参加と本物のフィードバックに大きく依存しており、より多くのデータが集まることで、視覚化される情報はさらに豊かで正確になる。Tallyのユーザーベースが成長するにつれて、その精度は高まり、新しい場所への引っ越しを検討している人々にとって、かけがえのないツールとなるだろう。