第1章 JavaScriptでのブラウザ版VSCode入門
VSCode（Visual Studio Codeの略）は、メモ帳のような文字を書くためのテキストエディタに、コードを書く時の支援機能を網羅したものです。
文字を色分けして見やすくなっていたり、スペルミスがあれば教えてくれたり、コードを書いている途中で候補を表示してくれて入力の効率を上げてくれたりなど、様々な支援をしてくれます。
マイクロソフト製であり無料で公開されています。Facebook（現Meta社）でも社内開発環境に正式採用されています。
本来このVSCodeはパソコンにインストールしてから使うものですが、これのブラウザ版があります。
ブラウザ版はChromeかEdgeどちらかのブラウザであればhttps://vscode.devにアクセスするだけですぐに使え、インストール不要です。
ご自身のパソコンの環境に左右されることなく、どこでもすぐに使えるので学習環境に最適だと思います。
今回はブラウザ版のVSCodeの使い方をご紹介します。
目次
動作確認用のファイルの準備
VSCodeの動作確認用のファイルをこのサイトのサーバーに用意していますのでダウンロードして使ってください。
第1章の動作確認用ファイル(chapter01.zip)をダウンロード
ダウンロードフォルダにchapter01.zipというファイルがダウンロードされます。
zipとは、ファイルやフォルダをひとつのファイルに圧縮したファイルなので展開(解凍ともいう)してください。
zipファイルの展開(解凍)方法
chapter01.zipを選択してから右クリックして、「すべて展開」をクリックします。
このようなダイアログが表示されるので「展開」をクリックします。
ファイルの拡張子を表示する方法
chapter01というフォルダが新たに作成され、その中にindex.htmlというファイルがあります。
「.html」の部分を拡張子といいます。ファイルの中身がどの種類に属するのかを識別するためのものです。
これが表示されていなくて単に「index」とだけ表示されている場合は、
これからプログラミングを志す人は拡張子を常に表示するのは必須ですので、拡張子を表示するように設定を変更してください。
Windows11の場合だと、エクスプローラーの、表示▶表示▶ファイル名拡張子にチェックを入れると拡張子が表示されます。
Windows10の場合だと、エクスプローラーの、表示▶ファイル名拡張子のチェックを入れると拡張子が表示されます。
元に戻したい時はチェックを外すだけです。
ブラウザ版のVSCodeの使い方
ファイルをブラウザ版VSCodeで開く
次に、パソコンのブラウザ(ChromeかWindows標準のEdge)でhttps://vscode.dev/にアクセスしてください(リンクをクリックすればこのページとは別のタブで開きます)
※ FirefoxとSafariはフォルダを開けないようです。
いくつか不要なのがありますので消していきます。
まず、一番上にこのようなのが表示されていたら右の☓で閉じます。
次に、「ようこそ」タブ。毎回起動するたびに開かれるので、下側にある「起動時にウェルカムページを表示」のチェックをはずし、次回起動時から表示されないようにします。
ちなみにもしウェルカムページの内容を後で確認したかったらメニュー▶ヘルプ▶ようこそで開けます。
「ようこそ」タブは不要ですのでxをクリックして閉じます。
「フォルダを開く」をクリックして、chapter01フォルダを選択して開いてください。
このようなダイアログが表示されたら、「ファイルを表示する」をクリックしてください。
VSCodeでファイルを開くその初回時のみこのようなダイアログでの許可が必要になります。
VSCodeでchapter01フォルダが開けました。index.htmlをクリックして開いてください。
ファイルにブラウザ版VSCodeで入力する
右側にindex.htmlが開かれるので、「h」とかなんでも良いので一文字だけ入力してみましょう。
すると、
のようなダイアログが表示されるので「変更を保存」ボタンをクリックします。このダイアログも初回のみです。
VSCodeのファイル操作関連の通知について
フォルダやファイルを触るたびに、警告ダイアログが出ますが正常な動作です。VSCodeが安全を担保しようとがんばっているからです。
なので今後、たまにファイル保存時などにこのようなダイアログがVSCodeの右下に現れることがあるので、
「再試行」ボタンを押して進んでください。
あと、「ファイルの作成者を信頼しますか？」という警告ダイアログも出ることがありますので「はい」で進んでください。
本題に戻りまして、
入力したのを一旦全部消してから、「ht」と入力しなおしてください。
表示される候補から「html:5」をクリックしてください。
コードがいっきに自動的に入力されます。
上記画像の矢印部分がenになっていたらjaに「半角」で書き換えてください。
enはenglishの、jaはjapaneseの略です。jaに変更することで「日本語サイトを作成しますよー」という宣言になります。
<body> ~ </body>の間に「ようこそ」と入力してください。
Ctrlキーを押しながらSを同時に押して変更を保存します。(これを一般にCtrl + Sと表記します)
htmlファイルをブラウザで開く方法
Windowsのエクスプローラーでこのindex.htmlを選択してから右クリックして、「プログラムから開く」からブラウザを選んで開いてください。
このように、ブラウザに「ようこそ」と表示されればOKです。
VSCodeにPrettier拡張機能を導入する
Prettierは自動的にコードを整える機能を持つアプリのようなものです。VSCodeにPrettierを追加します。
ちなみに、PrettierのようにVSCodeに後から機能を追加できるものを、「機能を拡張する」ので「拡張機能」といいます。
① 拡張機能のボタンをクリックして
② 検索窓に「prettier」と入力します。全部入力しなくても「pret」まででもいいです。
③ Prettierというのが候補の先頭に表示されますので、矢印の場所付近をクリックします。
※似たようなのがいくつかあるのでここではまだインストールはクリックしません。
エディター領域にクリックした拡張機能の説明のタブが開きますので、発行者がPrettierになっているのを確認してからインストールボタンを押します。
数秒でインストールが完了します。下の画像のように「無効にする」「アンインストール」となっていればインストール完了しています。
インストールの確認が済めばこのPrettierのタブは不要なのでxで閉じます。
それと、下の画像の赤い矢印が示すアイコンをクリックして検索窓に入力した文字を消して検索結果一覧をクリアしてください。
「インストール済み」という枠内にPrettierだけが残って表示されます。
Prettierでコードを整形してみよう
コード整形の機能を体感するために、下の画像のように、<body>の前に半角空白をたくさん入力して<body>を右にズラして整形を乱してから、エディター内で右クリックして2つある上の方の「ドキュメントのフォーマット」をクリックしてください。
※ フォーマットとは、プログラミングのコードを特定のルール通りに整形してくれる機能のことです。
このようなダイアログが表示されたら構成ボタンを押して、
VSCodeの上部に表示される一覧からPrettierをクリックします。
これは、元々VSCode内蔵のフォーマットがあって、新たにPrettierを追加したことでフォーマットが２つになったからVSCodeが「どっちでフォーマットするか決めて」と催促されたということです。
すると、乱したものが元に戻ります。
保存時に自動的に整形されるように設定する
いちいち「右クリック→フォーマット」とするのも面倒なので、ファイル保存時に自動的に整形されるように設定を変更します。
VSCode左下の歯車アイコンをクリックして「設定」をクリックします。
検索窓に「default formatter」と入力して、Editor: Default FormatterをPrettierに切り替えます。
※ 似たような項目が並んでいるので注意してください。
検索窓に「format on save」と入力して、Editor: Format On Saveにチェックを入れます。
ミニマップを非表示にする
コード整形とは無関係ですが、邪魔になるのでミニマップを非表示にします。
ミニマップとは、エディターの右側に表示される縮小されたコードのことを指します。
index.htmlを開いているならその右に表示されていると思います。
これは、行数が多くて縦に長いコードの全体の構造を一目で把握するのに役立ちますが、入門編ではそのような何千行もの巨大なコードは書かないので、エディターの横幅を圧迫するデメリットしかないので非表示にします。
検索窓に「minimap enabled」と入力して、Editor> Minimap: Enabledのチェックを外します。
これでミニマップが表示されなくなりました。
使わない電球アイコンを非表示にする
VSCodeでコードを書いていると電球アイコンが浮き出てきて、コード入力の邪魔になるときがあります。
この電球アイコンを押すと、色々なヒントをVSCodeが提示してくれるのですが、まず使わないので非表示にします。
検索窓に「editor.lightbulb」と入力して、Editor> lightbulb: Enabledをoffに切り替えます。
プレビューエディターを無効にする
ファイルをいくつ開こうとも、ひとつのタブを使いまわして開くモードがプレビューモードです。
この講座ではファイルは別々のタブで開いてほしいのでプレビューモードを無効にします。
検索窓に「editor.enablePreview」と入力して、Workbench>Editor: Enable Previewのチェックを外します。
VSCodeのプレビューモードについては、以下の記事が参考になります。
VS Codeでファイルを常に新しいエディタに開くには：Visual Studio Code TIPS - ＠IT
VSCodeの個人設定はsettings.jsonに保存されている
今回変更した設定はすべてsettings.jsonというものに書き込まれています。
設定ページの右上にある、下の画像で赤く囲ったアイコンをクリックすると、
settings.jsonを開くことができます。
入門講座ではあまりここをこれ以上イジることはありませんが、例えばチームで開発しているなどでVSCodeの設定を同じに揃えたい時に活躍するファイルです。プログラマーとしてVSCodeを使っていればお世話になるファイルなのでこういうファイルがあることだけでも覚えていて損はありません。
これで設定完了しましたので設定タブをxをクリックして閉じます。
Prettierの設定が反映されているかテストします。
また、<body>の前に半角空白をたくさん入力して<body>を右にズラして整形を乱してから、
Ctrl + Sを押して保存するとPrettierによって整形されます。
このVSCodeはクラウドで動いているので多少のタイムラグがあるようで、整形されない時は少し待つか再度Ctrl + Sで保存をかけてみてください。
今回学んだことをクイズゲームで確認しよう！
このページで解説したことを全問のクイズ形式のゲームにしました。
ゲーム感覚で復習すると記憶に定着する助けになります。
下の「クイズを開始」ボタンでゲームを開始すると「YES」「NO」ボタンが現れますので、上から降ってくる問題が正しければ「YES」を、間違っているなら「NO」ボタンを押してください。
まとめ
この記事では、VSCodeのブラウザ版の基本的な使い方と、コードの整形に役立つPrettier拡張機能の導入および設定方法について解説しました。クラウドベースのVSCodeを利用することで、ブラウザとネット環境さえあれば使う場所やデバイスに関係なく学習環境を整えることができます。
また、Prettierを使用することで、一貫したコードスタイルを簡単に維持でき、読みやすく保つことができます。
