テキストエディタ UTF-8のBOM無しとBOM付きについて雑談程度に触れていきます。UTF-8というのは文字コードの一種で、Web制作業務ではページ作成の際によく使用されます。そして、テキストエディタにおいて文字コードUTF-8でファイルを作成した場合、保存時にBOM無しとBOM付きを選ぶような場面があります。このBOMとは一体何なのか、そして、UTF-8のBOM無しとBOM付きとは何なのかについて触れていきます。
BOM（byte order mark）とは
まず、定義としてBOM（byte order mark、バイトオーダーマーク）とは、Unicodeで符号化したテキストの先頭に付与される数バイトのデータで行われるマークであり、このマークにより「Unicodeのデータであること」と「符号化形式の種類」を示すことができます。
UTF-8
Unicode8ビット符号単位の文字符号化形式（文字コード、文字エンコーディングスキーム）であるUTF-8がよく使用されます。8bit単位の情報を組み合わせて文字を表記するのがUTF-8です。
符号化方式としてUTFには、UTF-8の他にUTF-16、UTF-32という方式があります。それぞれUnicodeを符号化して文字コード（符号化方式）が設定された状態を示します。
UTF-8のBOM付き・BOM無しの違い
UTF-8のBOM付き・BOM無しの違いは、ファイル先頭に「UTF-8ですよ」というマークが付くか否かという点です。
このBOMがあるかないかという点は、場面によって吉と出ることもあれば凶と出ることもあります。
BOM付きが必ず良いのであればテキストエディタ等で選択を求める必要も生じません。
BOM付きであるからこそ、プログラムが正常に動作しないということもあれば、BOMが無いからこそ文字化けが起こるということもあります。一般的には、BOM無しであるからこそCSVファイルをExcelで開くと文字化けするというようなことも起こります。
テキストエディタによるHTMLファイル作成における保存時
テキストエディタ UTF-8のBOM無しとBOM付き
テキストエディタにて文字コードUTF-8でHTMLファイルを作成にする時の保存時にBOM付き・BOM無しどちらが良いかという点についてですが、一般的にはBOM無しの方が無難です。動的プログラムであるphpを動かす時に不具合が出るケースがあります。
サクラエディタ
テキストエディタであるサクラエディタであれば、文字コードセット「UTF-8」の横にBOMのチェックがあります。
サクラエディタ UTF-8 bom
TeraPad
テキストエディタであるTeraPadの場合は、「文字/改行コード指定保存」において「UTF-8」が「BOM付き」、「UTF-8N」が「BOM無し」です。
メモ帳
Windowsの標準機能である「メモ帳」を使用した場合、文字コードをUTF-8にして保存するとBOM付きになります。BOM無しのファイルをメモ帳で編集して保存するとBOM付きに変更されるため注意が必要です。
ホームページ制作や修正で不具合が出る場合はBOM付き・BOM無しを再確認
ホームページ制作や修正で、それほど何も変えていないのに不具合が出たという場合、UTF-8のBOM付き・BOM無しが問題になっている場合があります。
特に、「簡単な確認と調整をしておこう」と、ちょっとした修正を意図して、該当ファイルを「メモ帳」で編集した場合、意図せずBOM無しがBOM付きに変更されていて不具合が出たという場合があります。
そのような時は、UTF-8のBOM付き・BOM無しを再確認する必要があります。
HTML以外のファイル形式におけるBOM
Webの世界でよく目にするのはHTMLファイルですが、CSSやJavaScriptのファイルもBOMの有無でちょっとしたトラブルを起こすことがあります。例えば、BOM付きのCSSファイルを読み込むと、一部のブラウザでスタイルが適用されなかったり、JavaScriptファイルだとスクリプトが正しく動かなかったり、なんてことも。見た目には変化がないように見えても、裏側で思わぬエラーを引き起こすことがあるんです。
また、データをやり取りする際に使われるXMLファイルやJSONファイルも、BOMが潜んでいることがあります。これらのファイルはプログラムが自動で解析することが多いため、BOMが付いていると解析エラーになってしまい、データの受け渡しがうまくいかない原因になることもあります。
テキストエディタのBOM設定を把握する
現代のWeb開発でよく使われるSublime TextやVS Codeのような高機能なテキストエディタでは、ファイルのエンコーディングやBOMの有無を細かく設定できます。これらのエディタは、プロジェクト全体でエンコーディングのルールを統一できる機能を持っていたり、ファイルの保存時にBOMを自動で削除する設定ができたりと非常に便利です。
プロジェクト全体でのエンコーディング統一
チームで開発を進める際、各メンバーが異なるエンコーディング設定でファイルを保存してしまうと、BOM問題が頻繁に発生しがちです。それを避けるためにも、プロジェクトの初期段階で**「BOMなしUTF-8」**で統一するなどのルールを設け、使用するエディタの設定もそれに合わせるのがおすすめです。
CSVファイルとBOM 文字化けの罠
ホームページ（Webサイト）やプログラムだけでなく、日々のデータ管理で欠かせないCSVファイルにも、BOMがひっそりと潜んでいてトラブルを引き起こすことがあります。特にWindowsのメモ帳でCSVファイルを編集・保存すると、意図せずBOMが付与されてしまい、その後のデータ処理で文字化けしたり、正確に読み込めなくなったりすることがあります。
CSVファイルでBOMが起こす問題
CSVファイルでBOMが起こす問題としては、「Excelで開くと文字化けする」「プログラムでの読み込みエラー」「システム連携時の不具合」などがあります。
Excelで開くと文字化けする
BOM付きのUTF-8形式で保存されたCSVファイルをMicrosoft Excelで直接開くと、文字化けを起こすことがあります。これはExcelがBOMを正しく認識できない、またはデフォルトのエンコーディング設定が異なるために起こる現象です。多くの場合、最初のセルの内容が「_」（アンダースコア）や「ÿþ」（ウムラウトYとソーン）のような記号になってしまったり、データ全体が判読不能になったりします。
プログラムでの読み込みエラー
CSVファイルをプログラム（PythonやPHPなど）で読み込む際、BOMが存在すると、ファイルの先頭に予期せぬデータとして扱われ、パースエラーやインポートの失敗を引き起こすことがあります。例えば、CSVのヘッダー行がずれてしまったり、データが正しくカラムに割り振られなかったりします。
システム連携時の不具合
異なるシステム間でCSVファイルを介してデータを連携する場合、BOMの有無がシステムの解釈に食い違いを生じさせ、スムーズなデータ連携を妨げることがあります。
CSVファイルでのBOM対処法
CSVファイルでBOMによる文字化けやエラーに遭遇したら、次の方法で対処してみてください。
BOMなしでCSVファイルを保存する
これが最も根本的な解決策です。
テキストエディタを使う
Windowsのメモ帳ではなく、サクラエディタやTeraPad、VS Codeのような高機能なテキストエディタを使いましょう。これらのエディタでは、ファイルを保存する際にエンコーディングを「UTF-8（BOMなし）」や「UTF-8N」と明示的に指定できます。
ExcelからUTF-8 CSV（BOMなし）として出力するツールを利用する
Excel自体はBOMなしUTF-8での直接保存オプションがありませんが、CSVファイルをExcelで開いた後、別のテキストエディタにコピー＆ペーストしてBOMなしで保存したり、ExcelのアドインやVBAマクロを使ってBOMなしで出力する、といった工夫をする手もあります。
読み込み時にBOMを考慮する
CSVファイルを読み込むプログラム側でBOMを自動的に無視するよう設定する方法もあります。多くのプログラミング言語のCSV読み込みライブラリには、エンコーディングを指定したり、BOMをスキップするオプションが用意されていますので、ドキュメントを確認してみてください。
既存のBOM付きCSVからBOMを取り除く
もし手元にBOM付きのCSVファイルしかない場合は、先述の「BOMを確実に取り除くには」の項目で紹介した方法（バイナリ表示ができるエディタや、Linuxのsedコマンド、iconvコマンドなど）でBOMを取り除いてから利用するのが確実です。
サーバー環境とBOMの関係
ホームページの表示やプログラムの動作に大きく関わるのが、裏で動いているWebサーバーです。ApacheやNginxといった主要なWebサーバーは、基本的にはBOM付きのファイルでも正しく処理するように作られていますが、特定の状況下では予期せぬ挙動を示すこともあります。
特に、PHPやPythonといったサーバーサイドスクリプト言語で書かれたプログラムでは、BOMの有無が動作に影響を与えることがあります。たとえば、PHPファイルにBOMが付いていると、プログラムの出力の先頭に余分なバイト列が挿入されてしまい、意図しない改行やスペースが生成されたり、セッションがうまく機能しなくなったりすることがあります。これは、HTTPヘッダが送出された後にBOMが出力されてしまうため、ヘッダ送信時にエラーとして扱われるためです。
大規模な事業を支えるBOM対応
多くのユーザーが利用するような大規模なホームページやサービスではCMS（コンテンツ管理システム）が使われていることがほとんどです。WordPressのようなCMSでは、記事の投稿や設定ファイルの保存など様々な場面でファイルが生成されます。これらのファイルにBOMが付いてしまうと表示の乱れや機能の不具合に繋がることがあります。
複数の開発者が関わるチームでの事業では、BOMに関する共通認識とルール作りがとても大切です。もしBOMが付いたファイルが混じってしまった場合でも、すぐに気づいて対処できるよう、ファイルのコミット時にBOMの有無をチェックする仕組みを導入したり、定期的にBOMのチェックを行うツールを活用したりするのも良いでしょう。
BOM問題、解決への具体的な道筋
もしBOMが原因と思われる問題に直面したら、次の手順で冷静に対処してみてください。
BOMが原因であることを見極める
- ソースコードの先頭を確認する： ブラウザの開発者ツールなどで、ページのソースコードを確認し、
<!DOCTYPE html>などの宣言の前に、何も表示されていないはずの場所に余分なスペースや文字がないか確認します。 - エラーログをチェックする： サーバーのエラーログに「Headers already sent」のようなエラーが出ていないか確認します。これはBOMがHTTPヘッダ送信前に出力された際によく出るエラーです。
- ファイルの内容をバイナリで確認する： バイナリ表示ができるエディタやツールを使って、ファイルの先頭に
EF BB BF（UTF-8 BOM）があるかを確認します。
BOMを確実に取り除くには
BOMを削除するには、BOMなしで保存できるテキストエディタを使うのが一番手っ取り早い方法です。もし大量のファイルを処理する必要がある場合は、一括でBOMを削除するツールやスクリプトを利用することもできます。例えば、Linux環境であればsedコマンドやiconvコマンドを使ってBOMを取り除くことができますし、プログラミング言語によってはBOMの有無を判定し、除去するライブラリも用意されています。
エンコーディングの基礎をもう一度
BOMの理解を深めるために、エンコーディングそのものについても少し触れておきましょう。私たちが普段目にする文字は、コンピュータの中では数字の羅列として扱われています。この数字と文字の対応ルールがエンコーディングです。
UTF-8は、世界中の様々な言語に対応できる非常に便利なエンコーディングですが、他にも日本語でよく使われるShift_JISやEUC-JPなどがあります。BOMはUTF-8特有のものでShift_JISなどにはありません。
文字化けは、エンコーディングの指定ミスやファイルと表示環境のエンコーディングの不一致で起こることがほとんどです。もし文字化けが起きたら、まずBOMの有無を疑うのはもちろんですが、ファイルのエンコーディング設定と、それを表示するブラウザやプログラムのエンコーディング設定が一致しているかどうかも確認してみてください。
（初回投稿日 2023年7月26日）
ホームページ修正
ホームページ修正、ページ更新やページ追加、内部の様々な修正・不具合からの復元など、各種ホームページの修正の代行に対応しております。エラー修正やページ内容の変更など、ホームページの更新や修正にかかる単発のご依頼で対応させていただいております。
軽微な修正でもお気軽にご相談ください。
ホームページ集客・Web集客
ホームページ集客・Web集客方法はたくさんありますが、それぞれの方法につき業種や規模、地域特性などによって向きや不向きがあります。弊社では、集客効果が感じられないホームページの改善やリニューアルを手掛けています。
ホームページをすべて作り直さなくても集客効果のあるホームページに改良していくことは可能です。
大掛かりなリニューアルを実施した方が良い場合はハイグレードプランで対応しています。
