JavaScript Tips | 文字列ユーティリティ：業務用 － HTML タイトル生成

JavaScript JavaScript
スポンサーリンク

何をしたいユーティリティか：「HTML タイトル生成」

ここでの「HTML タイトル生成」は、<title>〜</title> に入れる文字列を、毎回バラバラに組み立てるのではなく、共通ルールで生成するユーティリティです。

ブラウザのタブ、検索結果、SNS のプレビューなどで一番目立つのが「タイトル」です。
業務システムでも、

  • 画面ごとに分かりやすいタイトルを出したい
  • でも「サービス名 | 画面名」のようなルールは統一したい

ということがよくあります。

だからこそ、

buildTitle("ユーザー一覧");          // "ユーザー一覧 | 管理システム"
buildTitle("受注詳細 #12345");      // "受注詳細 #12345 | 受注管理システム"
buildTitle();                       // "管理システム"
JavaScript

のように、「タイトルはこの関数を通す」と決めてしまうのが大事です。

HTML タイトルに入れたい情報を整理する

基本の構成要素

多くの業務システムでは、タイトルはだいたい次のような構成になります。

  • ページ固有のタイトル（画面名・内容）
  • サイト名・システム名

これを「区切り文字」でつなぐのが定番です。

例：

  • "ユーザー一覧 | 管理システム"
  • "受注詳細 #12345 | 受注管理システム"
  • "ログイン | 顧客ポータル"

この「順番」と「区切り文字」をユーティリティで固定してしまうと、
全ページのタイトルが一気に整います。

一番シンプルな HTML タイトル生成関数

基本実装

const DEFAULT_SITE_NAME = "管理システム";
const DEFAULT_SEPARATOR = " | ";

function buildTitle(pageTitle) {
  if (!pageTitle) {
    return DEFAULT_SITE_NAME;
  }

  return `${pageTitle}${DEFAULT_SEPARATOR}${DEFAULT_SITE_NAME}`;
}
JavaScript

重要なポイントをかみ砕いて説明する

サイト名と区切り文字を「定数」にする

const DEFAULT_SITE_NAME = "管理システム";
const DEFAULT_SEPARATOR = " | ";
JavaScript

ここがめちゃくちゃ大事です。

「サイト名」「区切り文字」をあちこちにベタ書きすると、
途中で「サービス名が変わった」「区切りを - にしたい」となったときに、
全ファイルを探して置換する羽目になります。

定数にしておけば、ここを変えるだけで全ページのタイトルが変わります。
「ルールを 1 箇所に閉じ込める」という設計の基本パターンです。

ページタイトルがないときの扱い

if (!pageTitle) {
  return DEFAULT_SITE_NAME;
}
JavaScript

ログイン画面やエラーページなど、
「特にページ固有のタイトルを付けない」ケースもあります。

そのときに " | 管理システム" のような不自然なタイトルにならないよう、
ページタイトルが空なら「サイト名だけ」を返すようにしています。

テンプレート文字列で組み立てる

return `${pageTitle}${DEFAULT_SEPARATOR}${DEFAULT_SITE_NAME}`;
JavaScript

ここはシンプルですが、
「ページタイトル → 区切り → サイト名」という順番を固定しています。

逆にしたい（"管理システム | ユーザー一覧"）なら、
ここを 1 箇所変えるだけで全ページのタイトルの順番が変わります。

実際の動きを例で確認する

buildTitle("ユーザー一覧");
// "ユーザー一覧 | 管理システム"

buildTitle("受注詳細 #12345");
// "受注詳細 #12345 | 管理システム"

buildTitle();
// "管理システム"

buildTitle("");
// "管理システム"
JavaScript

この文字列を、そのまま document.title に入れれば OK です。

document.title = buildTitle("ユーザー一覧");
JavaScript

もう少し柔らかくする：オプション対応版

サイト名や区切りを変えられるようにする

プロジェクトによっては、「管理画面」と「フロントサイト」でサイト名を変えたい、
「一部のページだけ区切りを変えたい」などの要件も出てきます。

そのために、オプションを受け取れるようにしておくと便利です。

function buildTitleAdvanced(pageTitle, options = {}) {
  const {
    siteName = DEFAULT_SITE_NAME,
    separator = DEFAULT_SEPARATOR,
  } = options;

  if (!pageTitle) {
    return siteName;
  }

  return `${pageTitle}${separator}${siteName}`;
}
JavaScript

実際の使い方

buildTitleAdvanced("ユーザー一覧");
// "ユーザー一覧 | 管理システム"

buildTitleAdvanced("ダッシュボード", {
  siteName: "管理コンソール",
});
// "ダッシュボード | 管理コンソール"

buildTitleAdvanced("商品詳細", {
  siteName: "ECサイト",
  separator: " - ",
});
// "商品詳細 - ECサイト"
JavaScript

基本は buildTitle を使い、
特殊なケースだけ buildTitleAdvanced を使う、という運用もアリです。

HTML 的に気をつけたいポイント

タイトルは「短く・意味が分かるように」

<title> は、ブラウザのタブや検索結果に表示されます。
あまり長すぎると途中で切られてしまうので、

  • ページ固有の部分は簡潔に
  • サイト名は短めに

を意識すると、見栄えがよくなります。

画面の「見出し」と揃える

画面の中の <h1> やページヘッダと、
<title> の内容があまりにも違うと、ユーザーが混乱します。

例えば、

  • <title>："ユーザー一覧 | 管理システム"
  • 画面の見出し："ユーザー管理"

のように、「一覧」と「管理」が混ざると分かりにくいです。

buildTitle("ユーザー一覧") の "ユーザー一覧" を、
そのまま <h1> にも使う、という運用にすると、
タイトルと画面の見出しが自然に揃います。

実務で意識してほしい設計のポイント

「タイトルのルール」をコードで表現する

仕様書に「タイトルは『ページ名 | サイト名』とする」と書くだけでは、
実装がバラバラになりがちです。

ユーティリティとして

export function buildTitle(...) { ... }
JavaScript

を用意し、
「タイトルを変えたいときは必ずこれを通す」と決めることで、
仕様がそのままコードに落ちてきます。

これが、業務システムを長く運用するときの強さになります。

フレームワークとの相性を考える

React / Vue / Next.js / Nuxt などを使っている場合、
タイトルはフレームワークの仕組みで設定することが多いです。

例（React Helmet 風）：

<Helmet>
  <title>{buildTitle("ユーザー一覧")}</title>
</Helmet>
JSX

例（Vue + vue-meta 風）：

export default {
  metaInfo() {
    return {
      title: buildTitle("ユーザー一覧"),
    };
  },
};
JavaScript

どのフレームワークでも、「最終的に <title> に入れる文字列」を作るのは同じなので、
そこにこのユーティリティを挟むイメージです。

少し手を動かして感覚をつかむ

コンソールで、次のようなコードを実際に打ってみてください。

buildTitle("ユーザー一覧");
buildTitle("受注詳細 #12345");
buildTitle();

buildTitleAdvanced("ダッシュボード", { siteName: "管理コンソール" });
buildTitleAdvanced("商品詳細", { siteName: "ECサイト", separator: " - " });
JavaScript

返ってきた文字列を、実際にブラウザのコンソールで

document.title = buildTitle("ユーザー一覧");
JavaScript

のように設定してみて、
タブの表示がどう変わるかを確認してみてください。

そのうえで、自分のプロジェクトに

export const DEFAULT_SITE_NAME = "...";
export function buildTitle(...) { ... }
export function buildTitleAdvanced(...) { ... }
JavaScript

を置き、

「HTML のタイトルを決めたくなったら、必ずこの“HTML タイトル生成ユーティリティ”を通す」

というルールを作ってみてください。
それだけで、あなたのシステムのタイトルは、場当たり的な文字列連結から、
意図と一貫性を備えた「業務レベルのタイトル設計」に変わっていきます。

スポンサーリンク
タイトルとURLをコピーしました