【開発ログ#3】正規表現チェッカーv0.1、ついに完成へ。Vue.jsで作るコア機能の実装と、MVPで「やらないこと」を決める勇気
こんばんは！IT業界で働くアライグマです！
先日の記事で、「正規表現チェッカー(仮)」の基本設計書と詳細設計書を公開し、その開発の航海図を皆さんと共有しました。
そして今日、ついに、あの設計図が、私の手元で実際に動くプロダクトとして、その姿を現し始めたことをご報告できる日がやってきました。開発は佳境を迎え、v0.1のリリースが、いよいよ目前に迫っています。
この記事では、Vue.jsで実装した「正規表現チェッカー」の核心的なロジックの概要と、MVP（Minimum Viable Product：最小限の価値ある製品）を無事に完成させるために、PjMとして私が下した「やらないこと」という、もう一つの重要な決断について、その全貌を語りたいと思います。
コアロジック徹底解説：Vue.jsで「リアルタイム・チェッカー」を作る
このツールの心臓部であり、ユーザーが最も価値を感じる部分。それは、入力した正規表現が、テスト文字列に対してリアルタイムでどのようにマッチするのかが、瞬時に視覚化される体験です。この「リアルタイム性」を実現するために、私はVue.jsのリアクティブシステムを最大限に活用しました。
リアクティブな魔法：入力と結果を繋ぐ仕組み
Vue.jsの最も強力な特徴の一つに、「リアクティビティ（反応性）」があります。これは、データが変更されると、そのデータを使用している表示部分が自動的に更新される仕組みです。
今回のツールでは、ユーザーが入力する「正規表現パターン」「テスト文字列」、そしてON/OFFする「フラグ」の3つを、それぞれリアクティブなデータとして定義しました。そして、これらのいずれかのデータが変更されるたびに、正規表現のマッチング処理を再実行し、その結果を表示する、というロジックを組んでいます。
これにより、ユーザーがキーボードを一文字タイプする、あるいはチェックボックスを一つクリックする、その全ての操作に、アプリケーションが瞬時に反応し、まるで魔法のように、マッチ結果がリアルタイムで更新されていくのです。
動的な正規表現オブジェクトの生成
ユーザーが入力するのは、ただの「文字列」です。これを、JavaScriptが解釈できる「正規表現オブジェクト」に変換する必要があります。ここが、チェッカー機能の技術的な核となります。
具体的には、ユーザーが入力したパターン文字列と、チェックボックスで選択されたフラグ（例: “gi"）を組み合わせ、JavaScriptの標準機能を使って、動的に正規表現オブジェクトを生成しています。
ここで重要なのが、エラーハンドリングです。ユーザーは、時に無効な正規表現（例えば、カッコの閉じ忘れなど）を入力することがあります。その場合、プログラムはエラーを発生させて停止してしまいます。それを防ぐため、「もし無効なパターンが入力されたら、エラーとして処理し、ユーザーに『無効な正規表現です』と優しく伝える」という、例外処理の仕組みを組み込んでいます。
全てのマッチを捕獲するロジック
正規表現にgフラグ（グローバル検索）が指定されている場合、文字列中の一致箇所を全て見つけ出す必要があります。そのために、最新のJavaScriptに用意されている、非常に強力なメソッドを活用しました。
このメソッドは、単純にマッチした文字列を返すだけでなく、全てのマッチ箇所について、その「開始位置」や、カッコ()で囲んだ「キャプチャグループ」の内容まで、詳細な情報を余すところなく取得してくれます。この豊富な情報を基に、後述する「マッチ結果の一覧表示」や「ハイライト表示」を実現しているのです。
ハイライト表示の実現
そして、ユーザー体験を決定づけるのが、テスト文字列中のマッチ箇所のハイライト表示です。これは、取得したマッチ結果のインデックス情報（何文字目から何文字目までがマッチしたか）を基に、元のテキストをプログラムで分割し、該当する部分を<mark>のようなHTMLタグで動的に囲むことで実現しています。この視覚的なフィードバックこそが、このツールの価値を何倍にも高めてくれる、重要な機能です。
“第二の脳”の実装：LocalStorageとの対話
もう一つのコア機能が、作成した正規表現パターンを保存する機能です。v0.1では、この機能をサーバーもデータベースも使わずに、ブラウザのLocalStorageだけで実現します。
なぜLocalStorageなのか？
MVPにおいて、サーバーサイドの環境構築やAPI開発は、非常に時間のかかる作業です。LocalStorageを使えば、それらのコストを一切かけることなく、ユーザー毎のデータを永続化できます。これは、「コアな価値を、最速でユーザーに届ける」というMVPの思想に、完全に合致した、合理的で賢い選択です。
データの永続化の仕組み
ユーザーが作成した正規表現パターンのデータ（名前やパターン文字列などを持つ、オブジェクトの配列）を、JSONという、プログラムが扱いやすいテキスト形式のフォーマットに変換します。そして、そのテキストを、ブラウザが提供するLocalStorageという「小さな保管庫」に保存します。
ユーザーが次回サイトにアクセスした際には、その保管庫からテキストを読み出し、再びプログラムが扱えるオブジェクトの配列に戻して、画面に復元します。この一連の流れをJavaScriptで実装することで、サーバーなしでも、まるでログインしているかのようなデータ保存体験を実現しているのです。
【PjM視点】MVPで「やらないこと」を決める勇気
さて、ここからが、PjMとしての私の、もう一つの重要な仕事の話です。
開発が佳境に入り、動くものが目の前に現れると、「あれも欲しい」「これもあった方が、もっと良くなる」という機能追加の誘惑が、悪魔のように囁きかけてきます。
この誘惑に打ち勝ち、「何を作らないか」を意識的に決定する勇気。これこそが、個人開発プロジェクトを「エターナる」の沼から救い出し、無事にリリースへと導くための、最も重要なスキルです。
私が今回「やらなかった」ことリスト
- サーバーサイドとの連携: v0.1では、あえて全ての処理をクライアントサイドで完結させました。なぜなら、MVPの目的は「コアな価値（正規表現のテストと保存）の検証」であり、インフラ構築やAPI開発に時間をかけるべきではないからです。
- 複雑なUIとデザイン: PrimeVueのデフォルトコンポーネントを、ほぼそのまま使いました。なぜなら、MVPでは「見た目の美しさ」よりも「機能が確実に、そして高速に動くこと」の方が、100倍重要だからです。デザインに凝るのは、ユーザーがこのツールを愛してくれてからで、全く遅くありません。
- 高度なエラーハンドリング: 無効な正規表現が入力された際の、詳細なエラー原因の表示（例：「カッコの対応が取れていません」など）は、作り込もうと思えばいくらでもできます。しかし、まずは「動くこと」を最優先し、それ以外の作り込みは、全てTrelloのバックログに追加するに留めました。
PjMの仕事とは、機能を追加することではありません。プロダクトの価値を最大化するために、「今、何に集中すべきか」を選択し、それ以外を、たとえそれが魅力的なアイデアであっても、勇気を持って「捨てる」ことなのです。
まとめ
「正規表現チェッカー」v0.1は、技術的には、ほぼ完成しました。
Vue.jsのリアクティブな力で、リアルタイムなフィードバックを実現し、LocalStorageによって、サーバーレスでデータを永続化する。まさに、MVPとして必要十分な機能が、今、私の手元にあります。
MVPとは、単なる「機能が少ない製品」ではありません。それは、「ユーザーの最も重要な課題を、最も早く解決するための、研ぎ澄まされたソリューション」です。
次回、いよいよこのMVPを世に送り出す、ローンチ（公開）の記事をお届けします。私の新しい挑戦が、どんな反響を呼ぶのか。ぜひ、楽しみにしていてください！