VSCodeのLive Previewを使うと、JavaScript入門書がサクサク進むヨ


こんにちは、JavaScriptが苦手で、何度やっても超入門者の管理人です。

最近、Visual Studio Codeの拡張機能Live Previewを使うと、JavaScript入門書がサクサク進むことに気が付きました。

私と同じように、JavaScriptが苦手で、何度やっても超入門者から進めない…という方は、ぜひやってみてください。

ちなみに私が使っている入門書は、確かな力が身につくJavaScript「超」入門 です。

JavaScript入門書がサクサク進む理由


JavaScript入門書がサクサク進む理由は、わざわざブラウザーの開発者モードを、開かなくてもデバッグコンソールをみることができるからです。

JavaScript入門書で、頻繁にでてくるのがconsole.logメソッドによる出力。

この確認が『とっても面倒だ!』と思っているのは、私だけでしょうか?

というのも、わざわざブラウザーの開発者モードのデバッグコンソールを開かなければならないからです。あれって超超超ーーー面倒ですよね。

実は、VSCodeのLive Previewを使うと、

  1. アイコンをクリックしてLive Previewを起動するだけで、
  2. VSCode内にデバッグコンソールが表示されます。

つまりブラウザーの開発者モードを、わざわざ開く必要がないのです。

もちろんVSCodeのサイドバーにあるデバッグビューの機能を使えば、同じことができます。

が、そのためには「デバッグビューのデバッグ機能の使い方」を覚えなければなりません。JavaScriptの超入門者のわれわれには、ハードルが高いですよね。


JavaScriptの(いつまでたっても?)超入門者である私は、この方法で、確かな力が身につくJavaScript「超」入門 を、2度終わらせました。

その結果、『JavaScript超初心者にとって、VSCodeのLive Previewは、こりゃー便利だなぁ』ということで、今回ご紹介させていただいています。

インストール方法

ということで、まだ拡張機能Live Previewをインストールしていない人は、以下の記事を参考にインストールしてください。(記事内でのインストールする部分だけでOKです)

VSCodeのLive Preview インストール方法・使い方・特徴
Visual Studio Codeに、html & css & JavaScriptのプレビュー確認に便利なMicrosoft純正の拡張機能Live Previewが、公開されました。インストール方法に加えて、使い方・特徴を簡単にご紹介!

拡張機能Live Previewの設定変更


拡張機能Live Previewを使って、VSCode内にデバッグゴンソールを表示させるには、Live Previewの設定を少し変更する必要があります。以下の手順に従って、変更してください。

  1. 設定画面(Ctrl + ,)を開き、
  2. 拡張機能 → Live Preview ヘすすみ、
  3. Live Preview: Auto Refresh Preview を Never にし、
  4. Live Preview: Debug On External Preview にチェックを入れ、
  5. Live Preview: Open Preview Target を External Browser にする

以下、各設定項目の意味を、簡単に補足説明しておきますね。

Live Preview: Auto Refresh Preview とは


Live Preview: Auto Refresh Previewとは、プレビューを自動的に更新する頻度を設定する項目です。

Never にすると、更新アイコンなどをクリックするまで、ブラウザーを更新、つまりJavaScriptを起動させません。

html や cssの場合は、On All Changes in Editor や On Changes to Saved Files の方が便利ですが、JavaScriptの場合は、Never に設定した方が、やりやすいです。

Live Preview: Debug On External Preview とは


Live Preview: Debug On External Previewとは、「外部プレビューの起動時にJavaScripitデバッガーを有効にするか」を設定する項目です。

なのでDebug On External Preview にチェックを入れましょう。

Live Preview: Open Preview Target とは


Live Preview: Open Preview Target とは、プレビューを、埋め込みプレビューにするか、外部プレビューにするか を設定する項目です。

外部プレビューである External Browser を選択しましょう。

実例

では、Live PreviewでVSCodeでデバッグコンソール出力する実例を示しながら、進めていきますね。


htmlファイル内に直接JavaScriptを記載している場合は、エディタ画面右上のアイコンをクリックしてLive Previewを起動させます。JavaScriptを外部ファイルとしている場合は、呼び出しているhtmlファイルを表示させ、エディタ画面右上のアイコンをクリックします。


すると、ブラウザーが開くと同時に、VSCodeの画面下にデバッグコンソールが表示され、console.logメソッドの内容が表示されます。


そう! VSCode内にデバッグコンソールが表示されるので、わざわざブラウザーの開発者モードを開く必要がないのです。これが超便利!


コマンドラインから、console.logメソッドを記載すると、当然デバッグコンソールに表示されます。


サイドバーが、見慣れたエクスプローラビューから、デバッグビューに切り替わっていますが、超入門者のわれわれは、気にせず、このまま進みます。


修正・変更した時は、ファイルを保存後に、


デバッグツールバーの再起動アイコンをクリックすれば、


修正・変更が反映されます。


次の新しいJavaScriptのレッスンへ移るときは、デバッグツールバーの停止ボタンをクリックしてください。ブラウザーが自動で閉じます。


アクティビティバーのエクスプローラをクリックし、見慣れたエクスプローラビューにして、


次の新しいJavaScriptを記述していき、できたら、先ほどと同じようにエディタ画面右上のアイコンをクリックしてLive Previewを起動させます。


すると、先ほどと同じように、ブラウザーが開くと同時に、VSCodeの画面下にデバッグコンソールが表示され、console.logメソッドの内容が表示されます。


今度はサイドバーが、見慣れたエクスプローラビューのままです。どうもVSCode起動後、最初にJavaScriptを動かしたときだけ、デバッグビューに切り替わるみたいです。


あとは、同じようにデバッグツールバーの再起動アイコン・停止アイコンを使いながら、レッスンを進めていって下さい。

ブレークポイントの設定などもできるのですが、まだ私がマスターできていないので、それはまた、私が中級・上級になってきたらお伝えしますね。

まとめ

ということで、今日はVisual Studio Codeの拡張機能Live Previewを使うと、JavaScript入門書がサクサク進むヨ という説明でした。

JavaScript入門書がサクサク進む理由は、わざわざブラウザーの開発者モードを、開かなくてもデバッグコンソールをみることができるからです。

私はこれまでJavaScriptを何度やっても、使えるようになりませんでした。

今度こそは、Visual Studio Codeの拡張機能Live Previewを使って、基本をマスターし、JavaScriptの超初心者を脱したいと思う今日この頃です。

私と同じように、JavaScriptを何度やっても超入門者から進めない…という方は、ぜひやってみてください。

そういえば、確かな力が身につくJavaScript「超」入門 の第2版がでていたんですね。つまり私は第1版が出版された2015年から超初心者のままなのか…ガクッ。今度こそは!

コメント

タイトルとURLをコピーしました