SQLは、答えだけではわからない。
SQLを実行すれば、答えは返ってきます。
売上はいくらだったのか。
どの施策の成果が高かったのか。
何人の顧客が継続しているのか。
どこで利用者が離脱しているのか。
しかし、表示された数字だけを見ても、その数字が正しい理由までは分かりません。
ブラウザで完結するWebアプリ(メモ帳・ダーツ計算・各種ツール・localStorage活用等)に関する記事。
全てのタグを見るSQLを実行すれば、答えは返ってきます。
売上はいくらだったのか。
どの施策の成果が高かったのか。
何人の顧客が継続しているのか。
どこで利用者が離脱しているのか。
しかし、表示された数字だけを見ても、その数字が正しい理由までは分かりません。

前回リリースした「01(ゼロワン)」と「クリケット」のダーツ計算用ブラウザアプリに続き、新たに「カウントアップ(Count-Up)」のスコア計算ツールを追加しました。
01やクリケットは戦略性が高く楽しいゲームですが、ダーツの基礎練習や、ルールを覚えたての初心者と一緒に遊ぶ際には、シンプルに合計得点を競うカウントアップが最適です。これまでと同様に、アプリのインストールやアカウント登録は一切不要。ブラウザを開くだけですぐに利用できます。


自宅にハードダーツボードがあり、これまでは点数計算を頭でやりながら投げていました。しかし、友人と遊んだときにきちんとした計算ツールが必要になり探してみたところ、スマホアプリのインストールが必要だったり、アカウント登録が求められたりと、サクッと使えるものが意外と見つかりませんでした。
そこで、ダウンロードも登録も不要で、ブラウザを開くだけですぐに使えるシンプルな「ダーツ計算用ブラウザアプリ」を自作し、個人サイトで公開しました。定番の01(ゼロワン)とクリケットのスコア管理に完全対応しています。
この記事では、DocusaurusサイトにReactとTypeScriptを利用して、クライアントサイドで動作するシンプルなブラウザメモ機能を実装した際の主要な仕様と技術的ポイントを整理。
なお、本機能はその後 URL共有機能とUX改善 で大幅に拡張しています。
また、本記事は実装当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 にまとめています。
ユーザーがブラウザ上で手軽にテキストメモを作成・保存し、次回訪問時にも内容を保持できる機能の提供。 サーバーサイドの処理を介さず、すべてクライアントサイド(ブラウザのlocalStorage)で完結させることによる手軽さと応答性を重視。