6日でできる 新HTML&CSS入門｜VSCodeへ日本語化パックのインストール

6日でできる 新HTML&CSS入門｜VSCodeへ日本語化パックのインストール

VS Codeの画面を日本語に切り替えて、迷わずコードを書ける学習環境を整えよう。

Visual Studio Codeは、HTMLやCSSをはじめ、さまざまな言語のコードを編集できる便利なコードエディターです。一般にはVS Codeという略称で呼ばれています。

VS Code本体は英語を既定の表示言語として提供しており、日本語などの表示言語はLanguage Packと呼ばれる拡張機能によって追加します。ただし、日本語に設定されたOSで初めて起動した場合は、VS CodeがOSの表示言語を検出し、日本語言語パックのインストールを提案することがあります。

英語表示のままでもHTMLやCSSは問題なく編集できます。しかし、メニュー、設定画面、確認メッセージなどを日本語で読めるようにすると、それぞれの機能を理解しやすくなります。特にVS Codeを使い始めたばかりの段階では、操作方法を調べる負担も減らせるでしょう。

VS Codeの日本語化に使用するのは、Japanese Language Pack for Visual Studio Codeです。Microsoftが提供する日本語用の公式言語パックで、VS Codeのメニューや設定画面などを日本語表示へ切り替えます。

ここでは、拡張機能の基本的な役割を確認したうえで、日本語言語パックの検索とインストール、表示言語の変更、英語表示へ戻す方法、日本語にならないときの確認方法までを順番に解説します。

VS Codeの拡張機能とは

拡張機能は、VS Codeへ新しい機能を追加するための仕組みです。

VS Codeにはコード編集に必要な基本機能が用意されていますが、すべての言語や開発作業に必要な機能が最初から組み込まれているわけではありません。

利用者は、作業内容に合わせて必要な拡張機能を追加できます。VS Codeの拡張機能はVisual Studio Marketplaceで公開されており、VS Codeの画面内から検索、インストール、管理を行えます。

日本語言語パックは、Language Packに分類される拡張機能です。

PythonやJavaなどのプログラミング言語を使用できるようにする拡張機能とは役割が異なります。日本語言語パックをインストールしても、Pythonの実行環境やHTMLの新しい機能が追加されるわけではありません。

日本語言語パックで変わる部分

Japanese Language Pack for Visual Studio Codeを有効にすると、VS Code本体の主な画面が日本語表示になります。

一方、作成したHTMLのタグ、属性、ファイル名、コードの内容が日本語へ変換されることはありません。

たとえば、html要素、head要素、body要素などはHTMLで定められた名前なので、日本語言語パックを入れた後も同じように記述します。

また、Microsoft以外の開発者が提供している拡張機能は、日本語表示に対応していないことがあります。その場合、VS Code本体が日本語になっていても、その拡張機能の設定やメッセージは英語で表示されることがあります。

日本語化はコードの文字コードとは異なる

VS Codeの日本語化と、HTMLファイルの文字コードは別の設定です。

日本語言語パックをインストールしても、HTMLファイルが自動的にUTF-8へ変換されるわけではありません。

反対に、HTMLファイルをUTF-8で保存していても、VS Codeのメニューが自動的に日本語になるとは限りません。

VS Codeの画面表示と、編集中のファイルに使う文字コードを分けて理解しておきましょう。

図1：VS Codeの拡張機能と日本語言語パック

この図から分かること

VS Codeでは、利用目的に合わせてさまざまな拡張機能を追加できます。

プログラミング言語の入力を支援する拡張機能、画面の配色を変えるテーマ、コードを整えるフォーマッターなど、それぞれ役割が異なります。

日本語言語パックは、VS Codeの画面表示を日本語へ切り替える拡張機能です。HTMLのタグやコードを翻訳するものではなく、メニュー、設定、通知などを日本語で読みやすくするために使用します。

日本語言語パックをインストールする前の確認

インストールを始める前に、VS Codeが正常に起動し、インターネットへ接続できることを確認します。

拡張機能はVisual Studio Marketplaceからダウンロードされるため、インターネット接続が必要です。会社や学校のネットワークでは、プロキシサーバや組織の管理設定によって、Marketplaceへの接続や拡張機能のインストールが制限されていることがあります。

すでにVS Codeの画面が日本語になっている場合は、日本語言語パックがインストール済みである可能性があります。

拡張機能ビューでJapanese Language Pack for Visual Studio Codeを検索し、Installではなく歯車の管理ボタンが表示されていれば、すでにインストールされています。

拡張機能ビューを開く

最初にVS Codeを起動します。

画面左端にあるアクティビティバーから、四つのブロックを組み合わせた形のExtensionsアイコンを選択します。

キーボードを使って開く場合は、次のショートカットを使用できます。

VS Codeの公式ドキュメントでも、アクティビティバーのExtensionsアイコンまたはショートカットから、拡張機能ビューを開く方法が案内されています。

拡張機能ビューを開くと、サイドバーに検索欄と拡張機能の一覧が表示されます。

japaneseと入力して検索する

拡張機能ビュー上部の検索欄に、次の文字を入力します。

japanese

検索結果には、日本語に関係する複数の拡張機能が表示される場合があります。

音声認識用の言語パック、入力支援、辞書、文章校正など、名前にJapaneseを含む別の拡張機能もあるため、検索結果の先頭だけを見て選ばないようにします。

日本語化に使用する拡張機能は、次の内容です。

Microsoftが提供する公式Marketplaceページでも、この拡張機能はVS Codeへ日本語のローカライズされたUIを提供するLanguage Packとして案内されています。

提供元を確認する理由

Visual Studio Marketplaceには、Microsoftだけでなく、さまざまな企業や個人が作成した拡張機能が公開されています。

拡張機能は、VS Codeと同じ権限でファイルの読み書き、ネットワーク通信、外部プログラムの実行などを行える場合があります。そのため、インストール前に提供元や拡張機能IDを確認することが大切です。

日本語化では、提供元がMicrosoftになっているJapanese Language Pack for Visual Studio Codeを選択します。

よく似た名前の拡張機能が表示された場合は、次の点を確認しましょう。

Installを選択する

正しい日本語言語パックを選択すると、拡張機能の詳細画面が表示されます。

詳細画面にあるInstallを選択します。

日本語以外の表示言語になっている場合は、同じボタンが別の言語で表示されることがあります。英語表示ではInstallです。

インストールが完了すると、Installボタンが管理用の歯車ボタンへ変わります。これは、拡張機能がVS Codeへ追加されたことを示しています。

表示言語を日本語へ変更する

日本語言語パックのインストール後、画面右下などに表示言語の変更や再起動を案内する通知が表示されることがあります。

通知にChange Language and RestartやRestartなどのボタンが表示された場合は、そのボタンを選択します。

通知が表示されない場合や、閉じてしまった場合は、コマンドパレットから日本語を選択できます。

WindowsとLinuxの場合

次のキーを押してコマンドパレットを開きます。

Ctrl+Shift+P

macOSの場合

次のキーを押します。

Shift+Command+P

コマンドパレットの入力欄へ、次のコマンド名を入力します。

Configure Display Language

検索結果に表示されたConfigure Display Languageを選択します。

言語の一覧が表示されたら、日本語またはJapaneseを選択します。日本語のロケール識別子はjaです。公式ドキュメントでは、Configure Display Languageから表示言語を選択し、異なる言語を選んだ後にVS Codeを再起動する流れが案内されています。

VS Codeを再起動する

表示言語の変更を反映するには、VS Codeの再起動が必要です。

再起動の案内が表示された場合は、その案内から再起動します。

案内が表示されない場合は、編集中のファイルを保存してからVS Codeを一度終了し、もう一度起動します。

単にウィンドウを最小化しただけでは再起動になりません。VS Codeを終了してから起動し直してください。

再起動後、メニューバーが次のように変わっていれば、日本語化は成功です。

VS Codeのバージョンや使用しているOSによって、メニューの位置や一部の表現が異なることがあります。

図2：日本語言語パックをインストールする手順

この図から分かること

日本語化は、拡張機能ビューから公式の日本語言語パックを検索し、インストールすることで行えます。

検索結果には日本語に関係する複数の拡張機能が表示される可能性があるため、名前だけでなく、提供元がMicrosoftであることと拡張機能IDを確認することが大切です。

インストールしただけで表示が変わらない場合は、Configure Display Languageから日本語を選び、VS Codeを再起動します。

コマンドパレットから直接日本語を選ぶ方法

現在のVS Codeでは、拡張機能ビューから先に言語パックを検索しなくても、Configure Display Languageから利用可能な言語を選択できます。

日本語言語パックがまだインストールされていない状態で日本語を選択すると、VS Codeが必要なLanguage Packをインストールし、表示言語として適用します。

手順は次のとおりです。

1. コマンドパレットを開く
2. Configure Display Languageを実行する
3. 利用可能な言語から日本語を選択する
4. 日本語言語パックのインストールを待つ
5. 再起動の案内に従う
6. メニューが日本語になったことを確認する

この方法は、日本語言語パックの名前をMarketplaceで検索する手間が少ないため、操作を簡単に済ませたい場合に便利です。

一方、拡張機能ビューから検索する方法には、インストールする拡張機能の名前、提供元、説明、拡張機能IDを自分で確認できる利点があります。

教材では、拡張機能の仕組みも理解できるように、拡張機能ビューから検索する方法を覚えておくとよいでしょう。

表示言語の一覧にあるjaとは

VS Codeでは、表示言語をロケールという識別子で管理しています。

日本語のロケールはja、英語はenです。公式の表示言語一覧でも、日本語にはjaが割り当てられています。

Configure Display Languageで日本語を選択すると、VS Codeの表示言語設定にjaが指定されます。

通常は設定ファイルを直接編集する必要はありません。コマンドパレットから選択すれば、VS Codeが必要な設定を行います。

日本語化後に確認する場所

VS Codeを再起動したら、画面の各部分を確認します。

一部の項目が英語のままでも、必ずしもインストールに失敗しているとは限りません。

拡張機能が独自に表示している文章、技術用語、ファイル名、プログラミング言語の名前などは、英語のまま表示されることがあります。

日本語表示にならない場合の確認

日本語言語パックをインストールしても画面が英語のままの場合は、次の項目を順番に確認します。

日本語言語パックがインストールされているか確認する

拡張機能ビューを開き、Japanese Language Pack for Visual Studio Codeを検索します。

Installと表示されている場合は、まだインストールされていません。

歯車の管理ボタンやUninstallが表示されている場合は、インストール済みです。

表示言語として日本語が選ばれているか確認する

コマンドパレットを開き、Configure Display Languageを実行します。

一覧の中で日本語が選ばれているか確認します。現在使用中の言語は強調して表示されます。

英語が選択されている場合は、日本語を選び直します。

VS Codeを完全に再起動する

表示言語の変更後は再起動が必要です。

複数のVS Codeウィンドウを開いている場合は、すべてのウィンドウを閉じてから起動し直します。

編集中のファイルがある場合は、終了前に保存しておきましょう。

日本語言語パックが無効になっていないか確認する

拡張機能は、インストールされていても無効にできる場合があります。

日本語言語パックの管理メニューを開き、Enableや有効にするという項目が表示されていないか確認します。

無効になっている場合は有効にし、VS Codeを再起動します。

VS Codeを更新する

古いVS Codeを使っている場合は、言語パックとの組み合わせによって問題が起こる可能性があります。

ヘルプメニューなどから更新を確認し、利用可能な更新があれば適用します。更新後はVS Codeを再起動します。

ネットワーク環境を確認する

検索結果が表示されない、Installを押しても進まない場合は、Visual Studio Marketplaceへ接続できていない可能性があります。

会社や学校のネットワークでは、拡張機能のインストールを制限していることがあります。管理されたパソコンでは、設定を無理に変更せず、管理担当者へ確認してください。

コマンドが見つからない場合

コマンドパレットへDisplay Languageと入力しても該当するコマンドが見つからない場合は、入力内容を短くして検索します。

英語表示では、次の単語を入力します。

display

日本語表示では、次の単語で検索できます。

表示言語

コマンド名は、VS Codeのバージョンや現在の表示言語によって、次のように表示されることがあります。

Configure Display Language

表示言語を構成する

完全な名前を最初から入力しなくても、displayやlanguageなど一部の文字を入力すれば候補を絞り込めます。

日本語言語パックを再インストールする

設定を確認しても日本語にならない場合は、日本語言語パックを一度削除してから入れ直す方法があります。

1. 拡張機能ビューを開く
2. Japanese Language Pack for Visual Studio Codeを検索する
3. 歯車の管理ボタンを開く
4. Uninstallを選択する
5. VS Codeを再起動する
6. 同じ言語パックをもう一度検索する
7. Microsoft提供であることを確認する
8. Installを選択する
9. Configure Display Languageで日本語を選択する
10. VS Codeを再起動する

再インストールするときも、似た名前の別の拡張機能を選ばないように注意します。

英語表示へ戻す方法

日本語言語パックをインストールした後でも、表示言語を英語へ戻せます。

日本語言語パックを削除する必要はありません。VS Codeでは複数のLanguage Packをインストールしたまま、Configure Display Languageから現在使用する表示言語を選択できます。

手順は次のとおりです。

1. コマンドパレットを開く
2. 表示言語またはConfigure Display Languageと入力する
3. 表示言語の設定コマンドを選択する
4. Englishを選択する
5. VS Codeを再起動する

英語のロケールはenです。

再び日本語へ戻したい場合は、同じ手順で日本語を選択します。

日本語言語パックを削除する方法

今後日本語表示を使用しない場合は、日本語言語パックをアンインストールできます。

1. 拡張機能ビューを開く
2. Japanese Language Pack for Visual Studio Codeを検索する
3. 拡張機能の管理メニューを開く
4. Uninstallを選択する
5. VS Codeを再起動する

単に一時的に英語表示へ切り替えたいだけであれば、アンインストールする必要はありません。

Configure Display Languageで英語を選択しておけば、日本語言語パックを残したまま英語表示を使用できます。

ショートカットキーは日本語化しても変わらない

VS Codeの表示言語を日本語へ変更しても、基本的なショートカットキーは変わりません。

画面に表示されるメニュー名は日本語になりますが、キーボード操作はこれまでと同じです。

英語版の解説記事や動画を見ながら操作する場合は、英語と日本語のメニュー名の対応を覚えておくと理解しやすくなります。

図3：日本語化後の確認と表示言語の切り替え

この図から分かること

日本語言語パックをインストールした後でも、VS Codeの表示言語はいつでも変更できます。

Configure Display Languageから日本語のjaまたは英語のenを選択し、VS Codeを再起動すると表示が切り替わります。

日本語にならない場合は、言語パックがインストールされているか、日本語が表示言語として選ばれているか、拡張機能が有効になっているかを順番に確認します。

日本語化しても覚えておきたい英語表記

VS Codeを日本語化すると、基本操作を理解しやすくなります。ただし、Web制作やプログラミングでは、英語の用語を完全に避けることはできません。

HTMLの要素名や属性名、エラーメッセージ、拡張機能の説明、公式ドキュメントなどは、英語で記載されていることがあります。

そのため、日本語表示を使いながら、よく使う英語表記にも少しずつ慣れていくとよいでしょう。

日本語化は、英語を覚えなくてもよくするための機能ではありません。

最初は日本語で各機能の役割を理解し、慣れてきたら英語表記との対応も確認すると、海外の解説や公式情報を読みやすくなります。

拡張機能を増やしすぎないようにする

VS Codeの拡張機能は便利ですが、多くインストールすれば必ず使いやすくなるわけではありません。

同じような機能を持つ拡張機能を複数追加すると、設定が競合したり、どの拡張機能が動作しているのか分かりにくくなったりすることがあります。

拡張機能はVS Code本体と同じ権限で動作できるため、提供元や用途を確認したうえでインストールすることが重要です。Visual Studio Marketplaceではマルウェア検査や署名確認などの保護策が採用されていますが、利用者自身による確認も必要です。

日本語化については、Microsoft提供のJapanese Language Pack for Visual Studio Codeだけを選べば十分です。

日本語化後にHTMLの学習を始める

日本語表示への切り替えが完了したら、VS Codeを使ってHTMLファイルを作成する準備が整います。

最初は次の操作を確認しましょう。

1. ファイルメニューから作業用フォルダーを開く
2. エクスプローラーから新しいHTMLファイルを作る
3. エディターへHTMLを入力する
4. ファイルをUTF-8で保存する
5. ブラウザでHTMLファイルを開く
6. 表示結果を確認する
7. VS Codeへ戻って修正する

日本語化によって、ファイルの作成、保存、設定変更、拡張機能の管理などの操作を理解しやすくなります。

一方で、HTMLのタグや属性は英語の名前で記述します。VS Codeの日本語表示に慣れながら、Web制作で使用する英語の用語も少しずつ覚えていきましょう。