先日、名前変換スクリプトCharm.jsのご利用者様から、名前変換とブラウザの仕組みについて、ご質問のメッセージをいただきました。ご質問ありがとうございます。
ご質問要約
小説ページの「ソースを表示」では変換前のテキストになっているけど、ブラウザの検証モードで見ると名前変換済みのテキストになっている。この違いはどこからくるもの？
実際のご質問はもっとステップがあったのですが、本質的なところはこの点かと思います。
例えばこうですね。名前を登録してあっても、違いが出るんです。
ページのソースを見る：変換前のテキストになっている
<span class="charmname1">名前</span>
検証ツールの要素（Elements）タブ：変換後のテキストになっている
<span class="charmname1">ラナマ</span>
他にも気になっている方がいらっしゃるかもしれないので、スクリプトとブラウザの仕組みについて少しお話します！
※この記事はWeb技術の細かい解説ではなく、イメージを掴んでいただくための緩め解説です。専門的なレベルで知りたい方は各参考リンクをご覧ください。
※JavaScriptでもサーバーサイドレンダリングできますとかそういう話もしませんよ
どうして差が出るのか？
どのタイミングのHTMLなのか、の違い
一見同じように見えるHTMLのコードに見えますが、「どのタイミングのHTMLなのか」が違います。
- ページのソースを見る → サーバから届いた時点のHTML（変換前）
- 検証ツールの「要素」タブ → JavaScript実行後のHTML（変換後）
全てのブラウザで確認したわけではありませんが、WindowsのChromeブラウザに限らず、有名どころで新しいブラウザはこのようになっていることが多いです。MacのSafariの開発メニューのソースと要素でも、それぞれこのようになっています。
参考リンク：Search Consoleヘルプ レンダリングされたページのソースを表示する
↑のページは本来はSearch Consoleの利用者向けの文脈なのですが、書かれていることはWeb全般に共通することなのでご紹介しています。
JavaScriptによる名前変換を使うと、ページのソースと検証ツールの内容に差が出るのはブラウザとWebの仕様です。
もう少し詳しくお話します。
Webページを表示する仕組みの順番について
ひとつひとつのファイルを手動でアップロードしているサイト運営者さんは、HTML、CSS、JavaScript、（人によっては）PHPをFTPアプリ等でレンタルサーバに置いている方が多いかと思います。
レンタルサーバ上に全部置いているし、アップロード前の自分のパソコン上での確認のときは、パソコンの中でまるごと動いているし……ということであまり意識しないでも動かせるのですが、それぞれのコードがどのタイミングで処理されるかは決まった順番があります。
たとえばブラウザがページを表示するまでの流れは、大まかにこんな感じです。
- ブラウザでURL先のサイトへアクセスする
- サーバから、閲覧している人のパソコンやスマホへHTMLが届く（この時点ではまだ名前は「変換前」）
- HTMLの中でCSSやJavaScriptなどのリソースを読み込む
（HTMLに書かれたパスを読み込んで、CSSやJavaScriptのファイルの中身をサーバから取得する） - サーバから届いたJavaScriptがブラウザの中で動き、ページ内の特定の表示を書き換える（名前変換）
- ブラウザが最終的に表示する内容が完成する
Webページを表示するまでには、ざっくりとこんな順番で処理が行われています。
- ソースを表示で見るHTML → 2の時点のコード
- 検証ツールに表示するHTML → 5の内容
Charm.jsはJavaScriptファイルのため4のタイミングで動くので、同一のページのHTMLでも差が発生するというわけです。
つまり、「ページのソースを見る」の時点で名前変換済みにしておく必要がある場合、基本的には1～2の間で動くサーバーサイド（※）のプログラミングが必要です。
※サーバーサイドプログラミング……個人サイト作成者さん向けに言うと、閲覧者さんのパソコンやスマホ上ではなく、URL先のレンタルサーバ会社のコンピュータ上で動くプログラミング。PHPやRubyなど。
サーバーサイドのプログラミング
PHPに限ったものではありませんが、サーバーサイドの言語を使うとHTMLを部分的に動的（そのときどきによって中身が変わること）にすることができます。
閲覧者さんから入力されたデータを受け取って、そのデータによって違うHTMLを作ることができたり、データベースと連携してWordPressのようなブログを作ったり、お買い物サイトを運営することができます。
URL先のコンピュータ上のみ動くサーバーサイド言語は、外側の閲覧者さんから見えません。処理した結果のHTMLだけが閲覧者さんに送られます。なので、特定の条件でのみ閲覧できる鍵ページを作るのにはとても便利です。
タイミングや処理が見える/見えない以外にも違いはあります。
JavaScriptは閲覧者さんのブラウザで動きますが、PHPのようなサーバーサイド言語は、必ずURL先（レンタルサーバ等）のコンピュータ上で動作します。
そのため、閲覧者さんのデータを動的に表示するには、何らかの手段でURL先のコンピュータへデータを渡す必要があります。
代表的な手段でいうと、Cookie、POST、セッション、URLパラメータなど。
参考：HTTP Cookie の使用（MDN Web Docs）
近年のレンタルサーバのほとんどはセキュリティで対策していますが、ネットワーク上でデータをやりとりするため、データが盗まれないようにHTTPS（暗号化通信）を使用する等、気をつけた方がよい点がいくつかあります。
もちろん、サーバーサイドに限らず、プログラミングやサイト作り全般でも同じです。セキュリティ面の対策はサイト運営者さんの考え方や使い方次第なところがあります。
内容はケースバイケースなので、気になる方は「Web サイト セキュリティ」などで検索して、ご自身の環境に合った情報を調べてみてください。
（この記事はセキュリティが主旨ではないので、ちょっと概要に触れるのみにしておきます）
おわりに
Charm.js（とBerrycake.js）は全員に同じ汎用的なHTMLを届けて、お名前データはパソコンやスマホの外部に送信せず、閲覧者さんの手元で完結してもらう作りになっています。
そのため、
「ソースを表示」では変換前のテキスト、ブラウザの検証モードで見ると名前変換済みのテキスト
こちらは、Charm.jsの仕様です！
Charm.jsをご利用いただきありがとうございます。機能をフル活用していただいたり、応援のwaveboxをいただけるのはとても嬉しいです。
今後ともLanamaとスクリプトをよろしくお願いいたします！
専門的な意味合いで参考になりそうなページ
ドキュメントオブジェクトモデル (DOM)（MDN Web Docs）
ドキュメントオブジェクトモデルの使用（MDN Web Docs）
【広告あり】Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説（coliss）
