環境
- Nodejs v22
やりたいこと
複数行の文字列を変数として持っておきたいので、ここではテンプレートリテラルを使う。テンプレートリテラルは、JavaScript（およびTypeScript）の便利な機能で、複数行の文字列を簡潔に扱える。この機能の主なメリットは以下の通りだ。
可読性の向上: コードをそのまま書けるため、文字列の内容を確認しやすい。通常の文字列とは異なり、改行やインデントもそのまま表現できる。
変数埋め込みが簡単:
${}の形式を使うことで、文字列内に変数や式を埋め込むことができ、動的な文字列生成が容易になる。長いメッセージやテンプレートの管理が改善: HTMLやMarkdownなどの長い文を管理する際に、テンプレートリテラルを使うと、コードがすっきりする。
例えば以下のTypeScriptコードがあったとする。
const hogehoge = ()=>{return`複数行でインデントが入ってる文章複数行でインデントが入ってる文章 `; }; console.log(hogehoge());
インデント揃えるとそれも反映されてしまう問題
上のサンプルコードでは、テンプレートリテラルを使って生成した文字列には、インデントがそのまま出力に反映されてしまう。この場合、意図しない空白が入ってしまうことがある。
❯ npx -y tsx ./src/scripts/dedent.ts 複数行でインデントが入ってる文章 複数行でインデントが入ってる文章
解決方法
TypeScriptなので、ts-dedentを使う
インストール
npm install ts-dedent
使い方
テンプレートリテラルのバッククオート前に「dedent」と書くだけ。さっきのサンプルコードに反映させてみる。
import dedent from'ts-dedent'; const hogehoge = ()=>{return dedent`複数行でインデントが入ってる文章複数行でインデントが入ってる文章 `; }; console.log(hogehoge());
するとちゃんと不要な空白をトリムしてくれて本来出力したかったテキストになっている。
❯ npx -y tsx ./src/scripts/dedent.ts 複数行でインデントが入ってる文章 複数行でインデントが入ってる文章
注意点
ts-dedentを使用する際の注意点は、使用するテンプレートリテラルの内容によっては、期待通りに動作しない場合があることだ。特にインデントの管理においては、どの程度の空白を取り除くかを必ず確認する必要がある。意図しないトリミングが発生することもあるため、特に注意して扱うこと。
dedentは非常に便利なツールだが、使い方を誤ると意図しないフォーマットで出力される原因となるため、しっかりとテストしてから運用することが望ましい。