現代の開発チームでは、コードエディターを使用しないプロジェクトマネージャー、クライアント、監査担当者、教育者などと JavaScript または JSX ソースコードを共有する必要があることがよくあります。しかし、生の .js および .jsx ファイルは VS Code や WebStorm などのツール以外ではレビューが難しく、手動でコードを Word ドキュメントにコピーすると、インデント、書式、可読性が損なわれることが頻繁にあります。
Spire.Doc for Python と Pygments を組み合わせることで、開発者は Python で JavaScript を Word に変換 でき、構文ハイライトとカスタマイズ可能なドキュメント書式を実現できます。この自動化アプローチは、技術文書作成、コンプライアンスアーカイブ、教育資料、コードレビュー、クライアント向け納品物などに役立ちます。
本記事では、Spire.Doc for Python を使用して Python で JavaScript および JSX ファイルを Word ドキュメントに変換する方法を解説します。基本的な変換、高度な書式設定テクニック、バッチ処理、PDF エクスポートなどを含みます。
クイックナビゲーション
1. 変換ワークフローの理解
変換プロセスでは、Pygments を使用して構文ハイライト付き HTML を生成し、Spire.Doc の HTML インポート機能を使用してこの HTML を Word ドキュメントにインポートします。
.jsまたは.jsxファイルからソースコードを読み取る- Pygments の
highlight()関数を使用して構文ハイライト付き HTML を生成する AppendHTML()を使用して HTML を Word にインポートする
このアプローチにより、Pygments の組み込みスタイルを通じて構文カラーリングが提供され、Spire.Doc は余白、ヘッダー、フッター、複数形式のエクスポートを含むドキュメント構造を処理します。変換プロセスを自動化するためのシンプルで柔軟な API が提供されます。
2. 前提条件
Python で JavaScript ファイルを Word ドキュメントに変換する前に、Spire.Doc for Python と Pygments をインストールする必要があります。
pip install spire.doc
pip install pygments
パッケージが利用可能であることを確認します。
import spire.doc
from pygments import highlight
from pygments.formatters import HtmlFormatter
または、Spire.Doc for Python をダウンロード してプロジェクトに追加することもできます。
3. 基本実装
次の例では、JavaScript ファイルを構文ハイライト付きで Word ドキュメントに変換します。
from spire.doc import *
from pygments import highlight
from pygments.lexers import JavascriptLexer
from pygments.formatters import HtmlFormatter
def convert_js_to_word(input_file: str, output_file: str) -> None:
"""JavaScript ファイルを構文ハイライト付きで Word ドキュメントに変換する"""
with open(input_file, "r", encoding="utf-8") as file:
js_code = file.read()
document = Document()
section = document.AddSection()
section.PageSetup.Margins.All = 50
title_paragraph = section.AddParagraph()
title_text = title_paragraph.AppendText(f"ソースコード: {input_file}")
title_text.CharacterFormat.FontName = "Yu Gothic UI"
title_text.CharacterFormat.FontSize = 14
title_text.CharacterFormat.Bold = True
title_paragraph.Format.AfterSpacing = 10
html_formatter = HtmlFormatter(
nowrap=True,
style='colorful',
noclasses=True
)
highlighted_html = highlight(js_code, JavascriptLexer(), html_formatter)
code_paragraph = section.AddParagraph()
code_paragraph.AppendHTML(f'<pre style="font-family: Consolas; font-size: 10pt;">{highlighted_html}</pre>')
document.SaveToFile(output_file, FileFormat.Docx)
document.Close()
print(f"{input_file} を {output_file} に変換しました")
convert_js_to_word("app.js", "JavaScriptCode.docx")
主要コンポーネント
- Document – セクション、段落、コンテンツを含む Word ドキュメントコンテナ
- Section – ページ設定プロパティ（余白、向き）を持つドキュメントセクション
- Paragraph – 書式設定オプションを持つテキストコンテナ
- AppendHTML() – カラーやフォントのインラインスタイルを含む HTML コンテンツを段落にインポート
- highlight() – 構文ハイライト付き出力を生成する Pygments 関数
- HtmlFormatter – インラインスタイル付き HTML を生成する Pygments フォーマッター（
noclasses=Trueを使用） - JavascriptLexer – JavaScript 構文要素を識別する Pygments レキサー
Spire.Doc は Pygments によって生成された構文ハイライト付き HTML をインポートできるため、JavaScript コードの書式と色が Word ドキュメントで保持されます。
4. 高度なシナリオ
JSX ファイルの変換
JSX ファイルの場合、コンポーネントタグや埋め込み JSX 式のより正確な構文ハイライトを実現するために、JavascriptLexer の代わりに JsxLexer を使用することをお勧めします。
JSX 入力例（App.jsx）：
import React, { useState } from 'react';
const TodoList = () => {
const [todos, setTodos] = useState([]);
const addTodo = (text) => {
setTodos([...todos, { id: Date.now(), text }]);
};
return (
<div className="todo-container">
<h1>My Tasks</h1>
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
</div>
);
};
export default TodoList;
構文ハイライト付き HTML を生成する際に JsxLexer を使用します。
from pygments.lexers import JsxLexer
highlighted_html = highlight(
jsx_code,
JsxLexer(),
html_formatter
)
その後、同じ AppendHTML() ワークフローを使用してハイライト付き JSX コンテンツを Word に変換します。
convert_js_to_word("App.jsx", "ReactComponent.docx")
変換結果は次のようになります。
JsxLexer は標準の JavaScript レキサーと比較して、JSX タグ、属性、埋め込み式の認識が向上しており、生成された Word ドキュメントでより正確な構文カラーリングが実現されます。
複数ファイルのバッチ変換
多数の JavaScript または JSX ファイルを変換する必要がある場合、フォルダーをスキャンして Word ドキュメントを一括生成することでプロセスを自動化できます。
import os
from pathlib import Path
def batch_convert_js_files(source_folder: str, output_folder: str) -> None:
"""フォルダー内のすべての JavaScript ファイルを Word ドキュメントに変換する"""
Path(output_folder).mkdir(parents=True, exist_ok=True)
js_extensions = ('.js', '.jsx', '.mjs')
converted_count = 0
error_count = 0
for filename in os.listdir(source_folder):
if filename.lower().endswith(js_extensions):
input_path = os.path.join(source_folder, filename)
base_name = os.path.splitext(filename)[0]
output_path = os.path.join(output_folder, f"{base_name}.docx")
try:
convert_js_to_word(input_path, output_path)
converted_count += 1
except Exception as e:
print(f"{filename} の変換エラー: {str(e)}")
error_count += 1
print(f"\nバッチ変換完了:")
print(f" 変換済み: {converted_count} ファイル")
print(f" エラー: {error_count} ファイル")
batch_convert_js_files("src/scripts", "output/docs")
行番号の追加
行番号は、コードレビュー、監査、技術文書作成時の可読性を向上させることができます。Word の HTML レンダリングは Pygments の組み込み行番号レイアウトを完全にサポートしない可能性があるため、実用的なアプローチとして、構文ハイライト後にカスタム行番号を前置する方法があります。
html_formatter = HtmlFormatter(
nowrap=True,
noclasses=True,
style="colorful"
)
highlighted_html = highlight(
js_code,
JavascriptLexer(),
html_formatter
)
highlighted_lines = highlighted_html.splitlines()
numbered_lines = []
for index, line in enumerate(highlighted_lines, start=1):
numbered_line = (
f'<span style="color: gray; font-weight: bold;">'
f'{index:4d} '
f'</span>{line}'
)
numbered_lines.append(numbered_line)
combined_html = (
'<pre style="font-family: Consolas; '
'font-size: 10pt; line-height: 1.4;">'
+ '\n'.join(numbered_lines) +
'</pre>'
)
paragraph.AppendHTML(combined_html)
行番号付きで生成された Word ドキュメントは次のようになります。
ヘッダーとフッターの追加
ヘッダーとフッターは、タイトル、ページ番号、ドキュメントメタデータを追加することで、生成された Word ドキュメントの整理に役立ちます。これは正式なレポートやエクスポートされた技術文書で特に有用です。
def add_document_metadata(section: Section, document_title: str) -> None:
"""ドキュメントセクションにヘッダーとフッターを追加する"""
header = section.HeadersFooters.Header.AddParagraph()
header_text = header.AppendText(document_title)
header_text.CharacterFormat.FontName = "Yu Gothic UI"
header_text.CharacterFormat.FontSize = 10
header_text.CharacterFormat.TextColor = Color.get_Black()
header.Format.HorizontalAlignment = HorizontalAlignment.Left
header.Format.TextAlignment = TextAlignment.Top
header.Format.Borders.Bottom.BorderType = BorderStyle.Single
header.Format.Borders.Bottom.Color = Color.get_Black()
footer = section.HeadersFooters.Footer.AddParagraph()
footer.Format.HorizontalAlignment = HorizontalAlignment.Center
footer.Format.TextAlignment = TextAlignment.Bottom
page_field = footer.AppendField("page", FieldType.FieldPage)
page_field.CharacterFormat.FontName = "Yu Gothic UI"
page_field.CharacterFormat.FontSize = 9
footer.AppendText(" / ")
total_pages_field = footer.AppendField("numPages", FieldType.FieldNumPages)
total_pages_field.CharacterFormat.FontName = "Yu Gothic UI"
total_pages_field.CharacterFormat.FontSize = 9
document = Document()
document.LoadFromFile("CodeWithLines.docx")
section = document.Sections[0]
add_document_metadata(section, "JavaScript ソースコードドキュメント")
document.SaveToFile("CodeWithHeadersFooters.docx", FileFormat.Docx)
ヘッダーとフッター付きで生成された Word ドキュメントは次のようになります。
より高度なカスタマイズオプションについては、Python で Word ドキュメントにヘッダーとフッターを追加する方法 のガイドを参照してください。
PDF 形式へのエクスポート
DOCX 出力に加えて、Spire.Doc は構文ハイライト付き JavaScript コードを直接 PDF 形式にエクスポートできます。これは読み取り専用の文書を配布する場合や、Microsoft Word 環境外でコードを共有する場合に役立ちます。
def convert_js_to_pdf(input_file: str, output_file: str) -> None:
"""JavaScript ファイルを直接 PDF に変換する"""
with open(input_file, "r", encoding="utf-8") as file:
js_code = file.read()
document = Document()
section = document.AddSection()
section.PageSetup.Margins.All = 50
html_formatter = HtmlFormatter(noclasses=True, style='colorful')
highlighted_html = highlight(js_code, JavascriptLexer(), html_formatter)
paragraph = section.AddParagraph()
paragraph.AppendHTML(f'<pre style="font-family: Consolas; font-size: 10pt;">{highlighted_html}</pre>')
document.SaveToFile(output_file, FileFormat.PDF)
document.Close()
convert_js_to_pdf("app.js", "JavaScriptCode.pdf")
レイアウト制御やドキュメント書式設定を含む、より高度な PDF 変換テクニックについては、Python で Word ドキュメントを PDF に変換する の詳細ガイドを参照してください。
構文ハイライトスタイルのカスタマイズ
Pygments は複数の組み込みカラースキームを提供します。
def convert_with_custom_style(input_file: str, output_file: str, style_name: str = 'monokai') -> None:
"""カスタムハイライトスタイルで JavaScript を Word に変換する"""
with open(input_file, "r", encoding="utf-8") as file:
js_code = file.read()
document = Document()
section = document.AddSection()
section.PageSetup.Margins.All = 50
html_formatter = HtmlFormatter(
noclasses=True,
style=style_name,
nowrap=True
)
highlighted_html = highlight(js_code, JavascriptLexer(), html_formatter)
paragraph = section.AddParagraph()
paragraph.AppendHTML(f'<pre style="font-family: Consolas; font-size: 10pt;">{highlighted_html}</pre>')
document.SaveToFile(output_file, FileFormat.Docx)
document.Close()
convert_with_custom_style("app.js", "CodeMonokai.docx", style_name='monokai')
利用可能なスタイルには 'monokai'、'colorful'、'vim'、'vs'、'tango'、'friendly'、'default' などがあります。
5. よくある落とし穴
HtmlFormatter 構成の欠如
問題: デフォルトの HtmlFormatter は外部スタイルシートなしでは Word が処理できない CSS クラスを生成します。
解決策: 常に noclasses=True を使用します。
html_formatter = HtmlFormatter(noclasses=True, style='colorful')
highlighted_html = highlight(js_code, JavascriptLexer(), html_formatter)
特殊文字によるエンコーディングエラー
問題: UTF-8 エンコーディングを指定せずにファイルを読み取ると、一部のプラットフォームで文字化けが発生します。
解決策: UTF-8 エンコーディングを明示的に指定します。
with open(input_file, "r", encoding="utf-8") as file:
js_code = file.read()
BOM（バイトオーダーマーク）付きファイルの場合は utf-8-sig を使用します。
with open(input_file, "r", encoding="utf-8-sig") as file:
js_code = file.read()
インデントの消失
問題: ハイライト付きコードを <pre> タグでラップしないと、インデントが失われます。
解決策: 構文ハイライト付き HTML を <pre> タグでラップします。
highlighted_html = highlight(js_code, JavascriptLexer(), html_formatter)
paragraph.AppendHTML(f'<pre style="font-family: Consolas;">{highlighted_html}</pre>')
ModuleNotFoundError
問題: 現在の Python 環境にパッケージがインストールされていません。
解決策:
pip install spire.doc
仮想環境の場合は、インストール前に有効化を確認します。
source venv/bin/activate # Linux/Mac
venv\Scripts\activate # Windows
pip install spire.doc
大きなファイルでのパフォーマンス問題
問題: 非常に大きな JavaScript ファイル（10,000 行以上）では変換が遅くなる可能性があります。
解決策: ファイルをチャンク単位で処理します。
def convert_large_file(input_file: str, output_file: str, chunk_size: int = 500) -> None:
"""大きな JavaScript ファイルをチャンク単位で変換する"""
with open(input_file, "r", encoding="utf-8") as file:
lines = file.readlines()
document = Document()
section = document.AddSection()
section.PageSetup.Margins.All = 50
html_formatter = HtmlFormatter(noclasses=True, style='colorful')
for i in range(0, len(lines), chunk_size):
chunk = ''.join(lines[i:i + chunk_size])
highlighted_html = highlight(chunk, JavascriptLexer(), html_formatter)
paragraph = section.AddParagraph()
paragraph.AppendHTML(f'<pre style="font-family: Consolas; font-size: 10pt;">{highlighted_html}</pre>')
document.SaveToFile(output_file, FileFormat.Docx)
document.Close()
まとめ
本記事では、Spire.Doc for Python と Pygments を使用して Python で JavaScript および JSX ファイルを Word ドキュメントに変換する方法を解説しました。HtmlFormatter と共に highlight() 関数を使用し、Spire.Doc の AppendHTML() メソッドを活用することで、開発者は構文ハイライト付きでコードドキュメントワークフローを自動化できます。
Spire.Doc for Python は、表作成、画像挿入、ヘッダー/フッター管理、複数形式のエクスポートを含むドキュメント生成機能を提供します。
30 日間の無料ライセンス を申請して、すべての機能を評価できます。
7. FAQ
Spire.Doc は JSX ファイルを Word ドキュメントに変換できますか？
はい。Pygments は JavaScript レキサーを使用して、コンポーネントタグ、props、埋め込み式を含む多くの JSX 構成要素をハイライトできます。ただし、JSX 固有の構文は専用のハイライトカテゴリを受け取らない場合があります。
このソリューションには Microsoft Word のインストールが必要ですか？
いいえ。Spire.Doc for Python は Microsoft Word を必要とせずに独立して動作します。ライブラリは DOCX ファイルを直接生成するため、サーバー環境や CI/CD パイプラインに適しています。
JavaScript を DOCX 以外の形式に変換できますか？
はい。Spire.Doc は複数のエクスポート形式をサポートしています。
document.SaveToFile("output.pdf", FileFormat.PDF)
document.SaveToFile("output.html", FileFormat.Html)
document.SaveToFile("output.rtf", FileFormat.Rtf)
TypeScript ファイル（.ts、.tsx）を処理するにはどうすればよいですか？
TypescriptLexer を使用します。
from pygments.lexers import TypescriptLexer
highlighted_html = highlight(ts_code, TypescriptLexer(), html_formatter)
このアプローチはエンタープライズ規模のプロジェクトに適していますか？
はい。Python 自動化は CI/CD パイプラインやバッチ処理ワークフローと統合できます。ローカル実行により、オンラインコンバーターにソースコードをアップロードするセキュリティリスクが回避されます。大規模な展開では、ログ記録、進捗報告、エラー追跡の実装を検討してください。
構文ハイライトの色をカスタマイズできますか？
はい。Pygments は多数の組み込みスタイルを提供します。
html_formatter = HtmlFormatter(noclasses=True, style='monokai')
利用可能なスタイル: 'monokai'、'colorful'、'vim'、'vs'、'tango'、'friendly'、'default'
