Firestoreに登録したデータがマークダウン形式であると認識されずハマったため、備忘録としてまとめます。

問題

Vue.jsとFirebaseのFirestoreを使い、個人開発でクイズアプリを作っています。

こちらの記事で実装したマークダウンエディタを用いて、クイズデータをマークダウン形式でFirestoreに保存しています。

いま、Firestoreに以下のクイズデータを登録しました。

次のコードの出力結果として正しいものを選びなさい。なおto_sメソッドはオブジェクトの内容を文字列化するメソッドです。
```ruby
irb(main):001:0> nil.to_s
=> ?
```

Firestoreには以下のように保存されています。

次のコードの出力結果として正しいものを選びなさい。なおto_sメソッドはオブジェクトの内容を文字列化するメソッドです。\n```ruby\nirb(main):001:0> nil.to_s\n=> ?\n```

マークダウンエディタにより改行している箇所に\nが挿入されていますね。

一方でデータを取得する際は、登録時のように構造化された状態で取得されるつもりでいました↓

次のコードの出力結果として正しいものを選びなさい。なおto_sメソッドはオブジェクトの内容を文字列化するメソッドです。
```ruby
irb(main):001:0> nil.to_s
=> ?
```

しかし、実際に取得されたのは以下のデータです。

次のコードの出力結果として正しいものを選びなさい。なおto_sメソッドはオブジェクトの内容を文字列化するメソッドです。\n```ruby\nirb(main):001:0> nil.to_s\n=> ?\n```

\nが改行を意味する特殊文字として機能しておらず、マークダウン形式として構造化されていません、、。

なぜこうなってしまうのか、理由がわからずハマりました、、。

解決策

結論として、FirestoreはJSON形式でデータを保存するため、特殊文字はエスケープされてしまいます。

つまり、\nが改行を意味する特殊文字としてではなく、ただの「\n」という文字列として扱われるのです。

なので、Firestoreから取得したデータに対して、改行とエスケープ処理を挟むことで、マークダウン形式に変換できました。

const formatMarkdown = (markdown: string): string => {
  // 不適切な改行とエスケープを修正する処理
  return markdown.replace(/\\n/g, '\n').replace(/\\/g, '');
}

取得したデータを引数に↑の関数を実行したところ、きちんと構造化された状態でデータが表示されました！

おわりに

Firestoreは難しいですが、使いこなせるようになればフロントエンド側だけで簡単なアプリが作れるので、なんとか頑張りたいです。