唐突ですが、ウェブ上で利用するための JavaScript の開発環境を整えた話を書いていこうと思います。
なぜ？
私はこの記事を書いている現在、Blogger というブログサービス用のブログテーマを作っています。最初は外観を作ろうとしていたのが、いつの間にか機能を追加しようという流れに変わってきた今、 Blogger のテーマ編集画面で直接 JavaScript を編集しているのがなにか違うと思うようになりました。JavaScript 部分を開発するだけならテスト用の簡素な HTML も使って動作確認しながら作りたいので、テーマの外観（XML）とは別に JavaScript ファイルを用意した方が便利だと思うようになりました。
そのため、Blogger の HTML 編集でスクリプトを直接書くのではなく、個別の外部ファイルとしてプログラミングするためのきちんとした開発環境を整えようと思い立ち、 Visual Studio Code を使いはじめました。
Visual Studio Code とは？
Visual Studio Code （以下、 VSCode と呼びます）は、 Microsoft 社が無償で提供してくれているテキストエディタです。プログラミング業界では有名な統合開発環境 Visual Studio シリーズの弟分みたいなものです。 |
| Visual Studio Code 公式サイト |
Visual Studio のようにプログラミングのための各種GUIツールが含まれた大型なソフトウェアではなく、最低限のプログラミングのための機能を備えたまま、とにかく軽量で、コーディングすることだけに焦点を当てられています。
プログミング向けのショートカットキーや、各種操作が可能なコマンドパレットがあったり、拡張機能も豊富で、デバッグやビルド、 Git のコミット操作などの機能も用意されていて、慣れると快適にコーディングができる便利ツールです。
しかも Windows だけではなく、クロスプラットフォームで動くようになっているんだとか。 PC と mac など、複数のマシンを使い分けている人には特に便利ですね。
私の使い方としては、JavaScript をガリガリ書いた後、ボタン一つで Chrome を立ち上げて動作確認し、問題なければ Git を使ってコミットします。また、 VSCode とは別に jsdoc をインストールし、JavaScript を文書化するバッチを書いて簡単にAPI説明書を作成できるようにしてます。
ただ、世界中で拡張機能が開発されているので、拡張機能の説明などは英語です。英語が得意じゃない人には拡張機能が導入しにくいのが難点ですね。
カスタマイズ！
VSCode は配色テーマも変更することができます。私は「Dark+」というテーマを使っています。 |
| 配色テーマ「Dark+」 |
テキストの領域が広いので、白系のテーマだと眩しく感じてしまいます。なので、眩しくないように黒系のテーマを利用しています。別にかっこいいからではありませんよ！
あと、拡張機能は Debugger for Chrome, Material Icon Theme, Complete JSDoc Tags をインストールしています。左側のなにやら四角いボタンで拡張機能メニューが表示されるのですが、そこで検索すれば出てきます。それぞれ少し説明します。
Debugger for Chrome
Debugger for Chrome は「デバッグ開始」で Chrome を立ち上げてファイルを開き、ステップ実行ができたり、コンソール出力が見れるツールです。わざわざ Chrome で開発者ツールを立ち上げなくても良くなるので、便利です！Material Icon Theme
Material Icon Theme はファイル名の頭にファイル種別ごとのアイコンがつくというものです。通常は何も表示されないのでファイルの拡張子を見ない限りは何のファイルなのかわからないのですが、これがあるとファイルの種類がひと目で分かります。Complete JSDoc Tags
Complete JSDoc Tags も JSDoc のコメントを入力しやすくするために導入しています。他にも JSDoc のコメント入力を支援してくれる拡張機能はあるのですが、一番癖がないものだと思ったので利用しています。もちろん、 JSDoc を使わないのでしたら必要ありません。JavaScript の開発準備
まずはフォルダが必要
まず、適当な場所にワークスペース用のフォルダを一個作り、それを Visual Studio Code で開きます。 |
| エクスプローラーを開くボタン |
左にアイコンが並んでいる部分がありますね。そのうちの一番上にある、紙の右上を折ったようなアイコンをクリックするとエクスプローラーが表示されるので、そこから「フォルダを開く」で開きます。今回は sample というフォルダを作ったので、それを開くと以下のようになります。
 |
| フォルダを開いたまっさらな状態 |
テスト用のファイル構成を作っておく
エクスプローラーの SAMPLE と書かれたところにマウスカーソルをやるとメニューが表示されるので、「新しいフォルダー」や「新しいファイル」を使って自分の好きなフォルダ構成を作って下さい。今回はとりあえず、以下のようにしたとします。
- sample
- src
- sample.js
- test
- index.html
 |
| HTMLの中身。sample.js を読み込むだけ。 |
デバッガーの設定をする
同じく左のアイコンが並んでいるところで、虫のシルエットと通行止めの道路標識が重なったようなアイコンをクリックすると、デバッグ用のメニューが表示されます。デバッグとは虫を取り除くという意味ですので、虫さん通行止めマークなんですね。某ゴーストバスターズのマークと同じ発想ですね！
 |
| デバッグアイコン |
冗談はさておき、以下のような画面が表示されますので、「デバッグ」の文字の横にある歯車マークをクリックします。
 |
| デバッグ画面 |
そしたら上からコマンド入力できる場所が下りてくるので、「Chrome」と入力します。インストールされてるデバッガーのリストが出ていると思うので、普通にマウスやカーソルキーで選んでもいいです。
すると lanch.json というファイルの編集画面に入ります。 url の中身を表示したい HTML の URL に変えましょう。ファイルプロトコルも使えますので、とりあえずサーバーを立てずにやりたいのであれば file:///<ファイルパス> と入力すればいいです。
というわけで、今回は url を以下のように入力します。
"url": "file:///${workspaceRoot}/test/index.html",
${workspaceRoot} は、今開いているフォルダのパスです。これを使わずに完全パスで指定してもいいですが、バージョン管理とかチーム開発とかの場合にフォルダの完全パスが変わって使えなくなる可能性がありますので、このように相対パスにしておく癖を付けておくと便利です。
さて、一旦保存したら F5 キーを押してみます。
 |
| HTML が Chrome で表示された。 何も書いてないので真っ白 |
こうなりました！
Chrome が自動的に開き、HTML の内容が表示されます。……真っ白ですね！
せっかくだから何か表示させておけばよかったなーと思いましたが、とりあえず Chrome の起動と表示ができたということで、これでデバッグの設定は完了です。
デバッガーを動かしてみる
とりあえず、何か短いプログラムを書いてみようと思います。
document.addEventListener("DOMContentLoaded", function(){
console.log("I am a sample!");
});
書きました。ドキュメントのロードが完了したら 「I am a sample!」 というログを出力するプログラムです。
さて、まずはログ出力やエラーメッセージが表示されるように、デバッグコンソールを表示しましょう。上のメニューから、「表示」→「デバッグコンソール」を選択します。
次に、お好みでソースコードにブレークポイントをセットしましょう。ブレークポイントというのは、プログラムのここで一旦止まって下さいね、という指示です。
ソースコードの左にある余白をクリックすると、赤い丸が付きます。ブレークポイントを外したい場合は同じように赤い丸をクリックすると消えます。
 |
| ブレークポイントを付けた箇所 |
 |
| 最初にデバッグの開始ボタンをおした時。 画面上にぴょこっとデバッグ操作のボタンが表示される |
デバッグコンソールを見てみると、「I am a sample!」というログが表示されました！ ……あれ？ ブレークポイントで止まってくれませんでしたね。
もう一度、再起動ボタンを押してみます。丸くループするような矢印のアイコン、または Ctrl + Shift + F5 です。
 |
| 再起動ボタンを押すと、今度はブレークポイントで止まってくれた |
おお、できました！
最初に開始ボタンを押したときはブレークポイントで止まってくれないみたいですね。ちょっと謎です。
この状態で続行（F5）かステップオーバー（F11）、またはステップアウト（Shift + F11）を押せば、 「I am a sample!」 もきちんとデバッグコンソールに出力されます。また、停止（Shift + F5）を押すと Chrome が閉じられます。
Chrome の開発者ツールと同様、デバッグ画面では変数の値やウォッチ式、コールスタックなども確認することができます。というわけで、開発もデバッグもできちゃう高機能コードエディタ、 Visual Studio Code を使い始めましたよ、というご報告でした。
これがあれば、 JavaScript の開発も若干やりやすくなるんじゃないかな～と思います！
0 件のコメント :
コメントを投稿