RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

【初心者向け】VSCodeのインストールと日本語化の手順(Windows・Mac別)

f:id:itoken1013:20201009200346p:plain

はじめに

こんにちは、itoken1013です。すっかり秋ですね!
今回は近年エンジニアに大人気のエディタである Visual Studio Code(以下、VSCodeとします)のインストールから表記の日本語化の手順を示し、 入門者がいち早く開発のスタートラインに立てるようにご説明していきたいと思います。

VSCodeラクスでも支持者が多く、実際の開発業務でも十分活用していけるツールです。
一方で世界中で利用されているVSCodeはインストール直後では英語表記となっており、入門者には若干の使いづらさを感じさせる見た目となっています。
今回はWindowsMacOS別に日本語化の手順を示していきますので、どちらのユーザーの方も安心して読んでいただければと思います!

tech-blog.rakus.co.jp

手順のご紹介

手順1. VSCodeのインストール

それでは早速手順を紹介してまいります!
WindowsMacに関係なく、まずはVSCodeインストーラおよびパッケージの入手が必要となります。
まずはVSCodeの作成元であるMicrosoft社のページにアクセスしてください。
ページにアクセスすると、中央にVisual Studio Codeのダウンロード案内が確認できます。
visualstudio.microsoft.com

Windowsの場合

Visual Studio Codeのダウンロード」の右端にある下矢印マークをクリックし、「Windows x64」をクリックするとVSCodeインストーラのダウンロードが開始されます。 f:id:itoken1013:20201009171341p:plain

ダウンロード完了後、インストーラをクリックして起動しましょう。
最初の「使用許諾契約書の同意」を「同意する(A)」に変更する以外はデフォルトの状態で進み、インストールを実行してください。

f:id:itoken1013:20201009172433p:plain

インストールが進むと最後に「Visual Studio Codeを実行する」がチェックONの状態となります。
このまま「完了」をクリックし、VSCodeが起動すればインストール完了です!

f:id:itoken1013:20201009172806p:plain

Macの場合

Visual Studio Codeのダウンロード」の右端にある下矢印マークをクリックし、「mac OS」をクリックするとVSCodeのパッケージがダウンロードされます。 f:id:itoken1013:20201009181834p:plain

次にFinder上でダウンロードフォルダへ移動し、「Visual Studio Code」をアプリケーションフォルダへドラッグしてください。
これでMac上でVSCodeを起動する準備ができました。
f:id:itoken1013:20201009185438p:plain

あとはアプリケーションフォルダ上で「Visual Studio Code」をダブルクリックし、
VSCodeが起動すればインストール完了です!

手順2. VSCodeの日本語化

次に日本語化の手順を説明します。
VSCodeではインターネット上の Marketplace という場所から「拡張機能」をインストールし、様々な機能を追加してカスタマイズを加えていくことができます。
日本語化も「Japanese Language Pack for Visual Studio Codeという拡張機能をインストールすることで、VSCodeの日本語化を実現できます。

ここから先の手順はWindowsでもMacでも共通となりますので、 1つの手順として日本語化を紹介していきます。

手順2-1. 「Extension」を表示する

VSCodeを起動し、左側のアクティビティバー一番下にある「Extension」をクリックします。
クリック後、インストール可能な拡張機能が表示されます。

※アクティビティバーが表示されていない場合、上部にあるメニューバーから以下の手順で表示させてください。 View > Appearance > Show Activity Bar

f:id:itoken1013:20201009191417p:plain

手順2-2. Marketplaceから日本語用の拡張機能を探す

次に表示されたテキストボックスに「Japanese Language Pack」と入力すると、今回のインストール対象の日本語化の拡張機能「Japanese Language Pack for Visual Studio Code」が表示されます。
名称を確認の上、「Japanese Language Pack for Visual Studio Code」の右下にある「Install」をクリックしてください。これで日本語化の拡張機能がインストールされます。

f:id:itoken1013:20201009191953p:plain

手順2-3. 日本語化の設定に変更する

インストールが完了すると、手順2-2では「Install」と表記されていた箇所が歯車マークに変わります。
マークの変更を確認後、次にVSCodeの日本語化用に表記設定を変更します。
Windowsの方は「Control + Shift + P」、Macの方は「Command + Shift + P」でコマンドパレットを起動し、「Configure Display Language」と入力してEnterキーを入力してください。
f:id:itoken1013:20201009194138p:plain

次に言語の選択が求められます。
「en」と「ja」が表示されますので、「ja」を選択してEnterキーを入力してください。
これで日本語化になるよう、VSCode内で設定が変更されます。
f:id:itoken1013:20201009194456p:plain

手順2-4. VSCodeを再起動する

この後、「A restart is ~ 」という表記のダイアログが表示されますので、「Restart」を選択してください。(「言語の切り替えには、VSCodeの再起動が必要です」という案内になります)
再起動後、無事に各箇所が日本語化されているはずです。

f:id:itoken1013:20201009192416p:plain

無事に日本語化されましたか?
これで今回の作業は完了です!お疲れ様でした!

終わりに

いかがでしたでしょうか?
終了してしまえば簡単な作業だったかもしれませんが、何のガイドラインもなく、英語のままで日本語化の操作をするのは少しハードルが高く感じてしまう方が多いのではないかと思います。
VSCodeには日本語化の他にも便利な拡張機能が豊富に用意されており、皆さんの開発を手助けする便利ツールに溢れています。
無料で使えて超便利なVSCodeを使いこなし、上級者への道を進んでいただければと思います!
それではまた次回の記事でお会いしましょう!

Copyright © RAKUS Co., Ltd. All rights reserved.