Frappe Ganttを日本語化して日付表示を設定する方法
v1.2.2対応・動くデモ付き

結論：languageとdate_formatを指定する

Frappe Gantt v1.2.2で日本語表示にしたい場合は、CDNをバージョン固定で読み込み、language: 'ja' と date_format: 'YYYY年MM月DD日' を指定します。タスクデータの start と end は YYYY-MM-DD のままにして、画面表示だけを日本語に寄せるのが扱いやすいです。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/frappe-gantt.css">

<div id="gantt-chart"></div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/frappe-gantt.umd.js"></script>
<script>
var tasks = [
  { id: 'requirements', name: '要件整理', start: '2026-08-03', end: '2026-08-07', progress: 100 },
  { id: 'design', name: '画面設計', start: '2026-08-10', end: '2026-08-19', progress: 65 },
  { id: 'development', name: '実装', start: '2026-08-20', end: '2026-09-04', progress: 30 }
];

new Gantt('#gantt-chart', tasks, {
  view_mode: 'Week',
  scroll_to: 'start',
  language: 'ja',
  date_format: 'YYYY年MM月DD日',
  readonly_progress: true,
  popup: function (context) {
    var task = context.task;
    context.set_title(escapeHtml(task.name));
    context.set_subtitle(formatJaDate(task.start) + ' から ' + formatJaDate(task.end));
    context.set_details('<p>進捗: ' + escapeHtml(String(task.progress || 0)) + '%</p>');
  }
});

function formatJaDate(value) {
  var date = value instanceof Date ? value : new Date(value);
  if (Number.isNaN(date.getTime())) return String(value);
  return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
}

function escapeHtml(value) {
  return String(value)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}
</script>

Frappe Ganttの公式設定には、表示日付用の date_format と、ローカライズ用の language があります。公式ドキュメントでは language はISO 639-1形式のコード、既定値は en と説明されています。CDNはN5-2のガントチャート事例と同じ [email protected] に揃えています。

日本語化前後の比較デモ

同じタスク配列を使い、左は英語表示、右は日本語化した表示にしています。右側は language と date_format に加え、ポップアップの日付も日本語で整えています。タスクバーをクリックして違いを確認できます。

設定の役割

日本語化で見るべき設定は多くありません。まずは次の3つを押さえれば、画面表示の大半を日本語向けにできます。

ここで大事なのは、タスクデータそのものはISO形式の日付文字列で持つことです。start: '2026-08-03' のように保存し、表示時だけ YYYY年MM月DD日 に変換すると、API連携や並び替えで余計な変換が増えません。

ポップアップの補完

language と date_format で基本の表示は整います。ただし、プロジェクトの見せ方によっては、ポップアップの文言や期間表示を自分で決めたい場面があります。その場合は popup オプションを使います。

new Gantt('#gantt-chart', tasks, {
  language: 'ja',
  date_format: 'YYYY年MM月DD日',
  popup: function (context) {
    var task = context.task;

    context.set_title(escapeHtml(task.name));
    context.set_subtitle(formatJaDate(task.start) + ' から ' + formatJaDate(task.end));
    context.set_details('<p>進捗: ' + escapeHtml(String(task.progress || 0)) + '%</p>');
  }
});

popup にはタスク情報と、タイトル・サブタイトル・詳細を書き換える関数が渡されます。タスク名のようにデータ由来の文字列をHTMLへ入れる場合は、上の例のようにエスケープしてから渡してください。業務アプリではタスク名がユーザー入力から来ることがあるため、ここを雑に扱わないほうが安全です。

よくあるハマりどころ

CSSを読み込んでいない

Frappe GanttはJavaScriptだけでなくCSSも必要です。frappe-gantt.umd.js だけを読み込むと、ガントチャートは描画されてもバーや時間軸の見た目が崩れます。N5-2の事例ページでも同じ注意点を入れています。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/frappe-gantt.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/frappe-gantt.umd.js"></script>

データ側の日付まで日本語にしてしまう

start や end に 2026年8月3日 のような文字列を入れると、ブラウザや実行環境によって日付解釈が不安定になります。タスク配列では 2026-08-03 のような形式を使い、表示だけを date_format や自作の整形関数で変えるのが無難です。

バージョンを固定していない

Frappe Ganttはv1系で設定項目や見た目が変わっています。記事や事例でコピペコードを出す場合は、@1.2.2 のようにCDN URLへバージョンを含めると、あとからライブラリが更新されても掲載コードの挙動が急に変わりません。

一次情報の確認先

この記事では、Frappe Gantt公式ドキュメントの Configuration、Introduction、npmの バージョン一覧、jsDelivrの 配信ページ を確認しています。実装時点ではnpmとjsDelivrで 1.2.2 が配信されており、N5-2のガントチャート事例と同じバージョンに揃えています。

まとめ

Frappe Ganttの日本語化は、まず language: 'ja' と date_format: 'YYYY年MM月DD日' を指定します。タスクデータは YYYY-MM-DD のまま保ち、表示だけを日本語にするのが実務では扱いやすいです。ポップアップまで日本語で整えたい場合は、popup オプションで期間表示を補完します。

基本のガントチャート実装は「ガントチャート（Frappe Gantt）」で、進捗率や依存関係は次の記事「Frappe Ganttで進捗率とタスクの依存関係を表示する方法」で扱います。