先日，Reactの勉強を始めました．
こういうツールを学ぶには，「こんなサービスがあったらいいな」って思えるサービスを実際に作ってみるのが一番です．ということで，物語を書くのを支援してくれる高機能エディタのUIをReactを用いて作成してみることにしました．
Reactとは？
一言で言えば，
「WebサイトのUIを作るための便利ツール詰め合わせ」
です．もうちょっと詳しく説明すると，google検索エンジンとか，ホームページとか，そういったブラウザ上で動作するサービスを作るのに役立つライブラリのことです．ボタンとか，サイドバーとか，そういった部品を「コンポーネント」として用意されていて，ユーザーはコンポーネントを好きなようにカスタマイズして利用することができます．
どんなWebサービスを作る？
面白い小説を読み終えると，どうしようもなく「何かを創作して，この感情を発散したい」という衝動に駆られるときがあります．
そういうときは生成AIと対話しながら物語を練っていくのですが，生成AIは会話を重ねるとだんだん出力が汚れてきて，文脈もめちゃくちゃになっていきます．
また，途中で設定変更をすると，過去の設定と競合して出力が大変なことになってしまうという問題もあります．
ということで，生成AIにもコンテキストが伝わりやすく，設定の変更も容易に行えるようなエディタを作成していこうと思います．
サービスの設計
要求定義
1. プロジェクトの目的・コンセプト
- 複雑なストーリーや設定を管理して，ユーザーが創作的活動に集中できるような環境を提供する
- 物語を「静的なテキスト」ではなく「動的なコンポーネントの集合」として扱うことで，執筆における設定の矛盾を撲滅し，効率化を実現する
2. 解決したい課題
- 登場人物の相関関係や持ち物，状態などを追跡するのが面倒で，物語の途中で矛盾が生じてしまう
- 同じような描写を何度も書くのが面倒
- 設定を変更するとき，変更忘れが多々生じる
- 物語の構造や時系列が複雑化し，把握しきれなくなる
- 伏線の設置や回収を忘れてしまう
- 分岐や回想を含むストーリーが，複雑すぎて管理しきれない
3. システムでなんとかしてほしいこと（要求リスト）
- 【一元管理】 登場人物のアイテムなどの設定を一度定義すれば，物語全体で一貫して扱えるようにしたい
- 【構造と表現の分離】 設定情報（構造）と，それを描写する文章（表現）を分離したい．同じ設定情報から，文体や詳細度を変えて様々な表現を生成できるようにし、執筆の手間を省きたい
- 【構造化・可視化】 ストーリーのシーン間の繋がりを，視覚的に分かりやすい形で設計・確認したい
- 【動的シミュレーション】 書いたシーンの編集をするとき，その時点での各キャラクターの状態を即座に確認できるようにしたい
- 【回想や並行ストーリーのサポート】 過去を回想するシーンや，「一方そのころ」というふうに並行するストーリーへの移行を，直感的に管理したい
要件定義
1. 機能要件
コンポーネント管理機能
- 物語の構成要素（キャラクター・アイテム・場所・シーン等）を「コンポーネント」として定義・管理（作成・読み取り・更新・削除）できる
- 各コンポーネントに，状態（ステータスや持ち物，他キャラとの相関）を表すデータプロパティを定義できる
表現管理機能
- コンポーネントのデータプロパティに基づいて，描画テキストを生成するための「表現ルール」を定義できる（例：キャラクターのステータスが”今にも眠りそう”なら，「私は明日から頑張ります」という文章を「ふあぁ…あしたから…がんばるぞぉ…zzz」みたいに自動変換してくれる）
- ストーリー全体の表現のルールや，人物の口調等をまとめた「表現スタイル」を作成できる
- 執筆中に，ストーリー全体の「表現スタイル」をいつでもすぐに切り替えることができる
ストーリーボード機能
- シーンコンポーネントをカードとして視覚的に配置できる
- シーン間の流れをエッジ（矢印）で接続できる
- 1つのシーンから複数のシーンへ矢印を伸ばし，ストーリーの「分岐」を表現できる
- 複数のシーンから一つのシーンへ矢印を接続し，ストーリーの「合流」を表現できる
- 矢印の複雑化を防ぐための特殊な「参照カード」を定義し，回想シーンや別フローへのリンクを表現できる
アウトライナー機能
- シーンをサイドバーの階層リストで表示，編集できる
執筆機能
- シーンコンポーネント内で，本文の執筆・編集ができる
- 本文中に特定のコンポーネントの参照を埋め込むことができる
状態管理機能
- ユーザーがストーリーボード上のシーンを選択すると，それまでの設定や物語の進行をシミュレートし，その時点での全コンポーネントの状態（スナップショット）を計算する
- 計算されたスナップショットを専用のサイドバー領域に表示する
プロジェクト管理機能
- プロジェクト全体を単一ファイルとして保存・読み込みができる
被機能要件
パフォーマンス
- 数千規模のコンポーネントやシーンを扱っても，UIの描画や操作が遅延なく行える
- 状態シミュレーションの計算が1秒以内に完了する
ユーザビリティ
- プログラミングの知識がないユーザーでも，コンポーネントの作成やストーリーボードの操作が直感的に行えること
開発・実行環境
- フロントエンド開発環境には，Vite, React, TypeScriptを使用する
- Webサービスとして利用できる
まとめ
- Reactの勉強のために，「物語執筆支援エディタ」を作ることにした
- エディタの要求定義と要件定義を終えた
- 次からは，本題の「React」を用いたUI開発に取り掛かる
コメント