Visual Studio Code（VS Code）でプログラムを書いていると、1行が長くなり横スクロールが必要になることがあります。特にJavaScriptのテンプレートリテラルや長い関数、複雑な条件式などは画面内で確認しづらくなりがちです。この記事では、VS Codeで長いコードを見やすく表示する方法や、実際のコード自体を改行して管理しやすくする方法について解説します。
VS Codeの表示上だけ改行する方法（折り返し表示）
VS Codeには、長い行を画面幅に合わせて自動的に折り返して表示する機能があります。この方法はコード自体を変更せず、見た目だけを読みやすくする方法です。
設定するには、VS Codeを開いた状態で「表示」メニューから「外観」→「ワードラップ」を選択します。またはショートカットキーで切り替えることもできます。
Windowsでは「Alt + Z」、Macでは「Option + Z」でワードラップのオン・オフを切り替えられます。この方法を使うと、長いconsole.logやURL、文字列なども画面内で確認しやすくなります。
常に自動折り返しを有効にする設定
毎回ワードラップを切り替えるのが面倒な場合は、VS Codeの設定で常時有効にできます。
左下の歯車アイコンから「設定」を開き、「word wrap」と検索します。「Editor: Word Wrap」という項目を「on」に変更すると、すべてのファイルで長い行が自動的に折り返されます。
設定ファイルで変更する場合は、settings.jsonに以下のように記述します。
{
"editor.wordWrap": "on"
}この設定は表示だけを変更するため、実際のソースコードの1行構造は変わりません。チーム開発でコード形式を維持したい場合にも便利です。
コード自体を複数行に分ける方法
表示だけではなく、実際のコードを読みやすくしたい場合は、処理内容ごとに分割して記述します。長いconsole.logの場合、テンプレートリテラルの中身を変数に分ける方法が一般的です。
例えば、日時表示の処理なら以下のように分けることで、それぞれの役割が分かりやすくなります。
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const time = `${date.getHours()}:${date.getMinutes().toString().padStart(2, "0")}:${date.getSeconds().toString().padStart(2, "0")}`;
console.log(`${year} ${month}/${day} ${time}:時刻`);このように処理を分割すると、後から修正するときにも変更箇所が見つけやすくなります。長い1行を無理に維持するより、意味ごとに分ける方がプログラムとして管理しやすくなります。
JavaScriptで文字列を改行する場合の注意点
JavaScriptでは、単純にコードの途中でEnterキーを押して改行するとエラーになる場合があります。特に文字列や関数の途中では、文法上正しい位置で分割する必要があります。
テンプレートリテラル（バッククォートで囲む文字列）では改行できますが、通常の文字列では「+」で連結する方法や変数へ分割する方法が安全です。
例えば、長いメッセージ表示なら以下のように記述できます。
const message = "現在時刻: " +
`${date.getHours()}:${date.getMinutes()}`;
console.log(message);ただし、読みやすさを優先する場合は、1行を無理に短くするより、役割ごとに変数や関数へ分ける方が保守性は高くなります。
コード整形機能を使って自動的に整える方法
VS Codeでは拡張機能を利用することで、コードを自動的に整形できます。代表的なものとしてPrettierがあります。
Prettierを導入すると、保存時にインデントや改行位置を自動調整できるため、長いコードを手動で整える手間を減らせます。
例えば複雑なJavaScriptコードでも、保存するだけで一定のルールに従った読みやすい形式へ変更できます。複数人で開発する場合にもコード品質を統一しやすくなります。
表示だけの改行とコード変更を使い分けることが重要
VS Codeで長いコードを扱う場合、目的によって方法を使い分けることが大切です。確認作業だけならワードラップ、コード管理を改善したいなら実際の分割や整形を行います。
例えば学習中に長いコードを見る場合はワードラップで十分ですが、仕事や長期間管理するプログラムでは変数化や関数分割を行った方が安全です。
見た目を整えることと、コード構造を改善することは別の問題なので、それぞれ適した方法を選ぶことで快適に開発できます。
まとめ：VS Codeの長いコードは目的に合わせて改行しよう
VS Codeで横に長いコードを見やすくするには、まずワードラップ機能を利用するのが簡単です。表示だけ変更したい場合はショートカットの「Alt + Z」などで素早く切り替えられます。
一方で、実際のコードを読みやすくしたい場合は、変数化や関数分割、コード整形ツールを利用することがおすすめです。
長い1行のコードを無理に維持するより、他の人が読んだ時にも理解しやすい形へ整理することが、プログラミングでは重要になります。
コメント