文字列の切り詰め

テキストを指定された長さで切り詰める処理。表示領域やデータベースの制限に合わせて使用される。

文字列の切り詰め (トランケーション) とは、テキストを指定された長さで切り詰める処理です。表示領域の制限、データベースのカラムサイズ、API のレスポンスサイズなど、さまざまな制約に合わせてテキストを短縮する必要がある場面で使用されます。Web の UI 設計からバックエンドのデータ処理まで、ソフトウェア開発のあらゆる層で登場する基本的な操作です。

UI における切り詰めの代表的な手法は、省略記号 (...) を付加する方法です。CSS では text-overflow: ellipsisoverflow: hiddenwhite-space: nowrap を組み合わせることで、1 行テキストの自動省略が実現できます。複数行の省略には -webkit-line-clamp プロパティが使われます。JavaScript で文字列を切り詰める場合は、単純に str.slice(0, maxLength) とするだけでなく、単語の途中で切れないよう最後のスペース位置で切る配慮が必要です。

日本語テキストの切り詰めには特有の注意点があります。サロゲートペア (絵文字や一部の漢字) の途中で切ると文字化けが発生します。結合文字 (基底文字 + 濁点など) の途中で切ると表示が崩れます。JavaScript では Array.from(str)[...str] でコードポイント単位に分割してから切り詰めることで、サロゲートペアの分断は防げます。ただしコードポイント単位でも、家族や肌の色を表す絵文字のように複数の文字を結合子でつないだ並びは途中で切れる余地が残ります。表示上の 1 文字 (書記素) を崩さずに切りたい場合は Intl.Segmentergranularity: 'grapheme' で区切るのが確実です。また、「。」や「、」の直前で切ると不自然な印象を与えるため、句読点の位置を考慮した切り詰めが望ましいです。

検索エンジンにおける切り詰めも重要なテーマです。Google はメタディスクリプションの長さに上限はないとしつつ、検索結果のスニペットは必要に応じて、通常は端末の表示幅に合わせて切り詰めると説明しています。つまり「何文字までなら全部出る」という固定の閾値は公表されておらず、同じ文章でもデスクトップとスマートフォンで切れる位置が変わります。タイトルも表示幅に応じて切り詰められるため、重要なキーワードや結論は冒頭に置き、末尾は切れても意味が壊れない補足に充てるのが実務的な設計です。なお、スニペットの最大長を自分で指定したい場合は max-snippet の指定が用意されています。

データベースにおける切り詰めは、データの損失につながるため特に注意が必要です。MySQL の場合、VARCHAR(255) のカラムに 256 文字以上を挿入すると、ストリクトモードが有効ならエラーになりますが、無効な場合は値が調整されて警告どまりになります。つまり設定次第で、気付かないうちに末尾が欠けたデータが保存され続ける状態になり得ます。また VARCHAR(255) の 255 は文字数の指定であってバイト数ではない一方、行サイズやインデックスのキー長にはバイト単位の上限があります。日本語は UTF-8 で 1 文字 3 バイト、絵文字などは 4 バイトを占めるため、文字数ベースの制限とバイト数ベースの制限を混同しないことが重要です。絵文字を含むテキストを扱うなら、4 バイト文字に対応した文字セット (MySQL では utf8mb4) を選ぶ必要もあります。

文字数カウントとの関連では、切り詰めは「文字数制限」と表裏一体の概念です。文字数カウントツールで現在の文字数を確認し、制限を超えている場合に切り詰めを行うという流れが一般的です。切り詰め後のテキストが意味を保っているか、省略記号を含めた文字数が制限内に収まっているかを確認することが、実務では欠かせません。

この記事を共有