はじめに
TypeScriptで簡単な挙動確認をしたいときに作業中のプロジェクトの中でコードを書くのは少々億劫で、そういうときはブラウザ上でTypeScriptを実行できるサービスを使ってテストをしていました。
その中で一番の候補に上がるであろうTypeScript公式のPlaygroundというサービスがあるのですが、当時は使いにくかったのでCodeSandboxなどで代用していました。
しかし最近ふとPlaygroundを使ってみたところ、サービスが刷新されて使いやすくなっていたのでその点を簡単な解説付きで共有したいと思います。
Typescript Playground
http://www.typescriptlang.org/play/
結論
まずどう変わったかというと「実行環境が新規ページから現在のページ」に変わりました。
これは一長一短あると思うのですが、TypeScriptの挙動を確認したいだけであれば圧倒的にメリットの方が勝ると思います。
古いPlaygroundを知らないと何を言っているのかさっぱりだと思うので簡単に解説します。
以前までのPlayground
PlaygroundのExampleにはまだいくつか古い記述が混じっており、例えば「Classic JavaScript」を生成するとこんな感じです。
function Greeter(greeting) {
this.greeting = greeting;
}
Greeter.prototype.greet = function() {
return "Hello, " + this.greeting;
};
// Oops, we're passing an object when we want a string. This will print
// "Hello, [object Object]" instead of "Hello, world" without error.
let greeter = new Greeter({ message: "world" });
let button = document.createElement("button");
button.textContent = "Say Hello";
button.onclick = function() {
alert(greeter.greet());
};
document.body.appendChild(button);
これはボタンを生成してbodyタグに追加している処理ですが、現在のPlaygroundでは実行しても見た目上はなにも起こりません。
古いPlaygroundでは、実行すると新規のクリーンなhtmlページを生成 => 新規ページ上で上記が実行されて結果が見えるという流れになっていたので成り立っていたサンプルになります。
ちなみにdevtoolsで見ると一応現在のページに生成されていることを確認できます。
新規ページが生成されるのでhtmlを扱った処理を自由に書け、ある種メリットではありましたが、TypeScriptを試したいだけの私にとってはわざわざ別ページに飛ばされるのは煩わしさしかなかったです。
さらにconsole.logでチェックしようとすると新規ページを開く => devtoolsを開くという手順を毎回踏まないといけないため、トライ＆エラーが辛かった記憶があります。
新しいPlayground
結論でお話した通り、新しいPlaygroundでは「現在のページ」で実行されるようになったので、現在のページのConsoleから簡単に動作確認できるようになっています。
めっちゃ便利！
というか最初からこれを求めてた。。。
最後に
機能を削ったことでユーザビリティを上げるというあまり見ない例かもしれませんね。
個人的には大変使いやすくなったと思うので、これからは純正のPlaygroundで色々テストさせてもらおうと思います。