JavaScript用エディタ「JavaScriptist」

By , 2009年9月8日

オンラインJavaScriptエディタ
今回はJavaScript専用のエディタ&書いたスクリプトをすぐ実行できるWebサービス「JavaScriptist」を紹介致します。

皆さんも、スクリプトを書いているときに「簡単にスクリプトの結果を表示できないかな~」と思っている方は多いはず・・・そんなときに便利なのがこの「JavaScriptist」というオンラインエディタです。

オンラインエディタという名が付くとおり、ブラウザからそのままスクリプトを書き込んで実行することが出来ます。
ちょっとした、スクリプトの確認や動作チェックをしたいときなどに便利だと思います。それでは、詳細は続きから

~使い方~

使い方はとっても、シンプルです。
http://javascriptist.net/exec/のサイトにアクセスします。

1.適当なJavaScriptのコードを書きます。
スクリプト

2.「スクリプトを実行」をクリックします。

3.スクリプトがそのまま実行されます。
実行結果アラート
実行結果テキスト

・・・という感じに、ブラウザ上で、簡単にJavaScriptを実行することが出来ます。・・・が、書いていて誰しもが疑問に思うと思いますが、

ブラウザごとにこのオンラインJavaScriptエディタは依存するんですか?

というところが、気になると思います。実際に管理人が調べてみました。上記の画像はそのためのものです。
ここでは、上記のスクリプトの「getYear」プロパティの部分に注目してみましょう。

dd=new Date();
yy=dd.getYear();
document.write(yy);

の構文の部分は、ブラウザごとに返される値が違います。getYear()の値はFirefoxの場合は返される値は現在の西暦から1900年引いた値「2009年なので109」が返されますが、IEなどの場合は、そのまま「2009」の西暦の値が返されます。

この値を各ブラウザで実行させてしまえば、このオンラインJavaScriptエディタは「ブラウザの環境に依存するかどうか?」を調べることが出来ます。

それでは早速、IE8にてこのようなスクリプトを実行してみました。
IE8での表示

<script type=”text/javascript”>
<!–
alert(“実行を押せばこんな風に動作するよ”);
document.write(“テキストの出力は下に出るよ<br>”);
dd=new Date();
yy=dd.getYear();
document.write(dd+”<br>”);
document.write(yy);
aa=navigator.appName;
document.write(aa);
//–>
</script>

別にDateオブジェクトの各プロパティの数値をピンポイントで調べなくても、navigatorオブジェクトのみ表示させればいいんじゃない?と思う方もいるかと思いますが、ブラウザごとのスクリプトの解釈の違いをしっかりと認識しているかどうかの簡易テストでもあります。

出力結果:
出力結果
テキストの出力は下に出るよ
Tue Sep 8 17:14:15 UTC+0900 2009
2009Microsoft Internet Explorer

このように、getYearプロパティでIEで返される値である、「2009」が値として帰ってきました。とりあえず、このオンラインエディタはブラウザごとのスクリプトの解釈の違いもはっきりと認識してくれるorJavaScriptエディタはブラウザの使用環境に依存するということがわかりました。navigatorオブジェクトのappNameプロパティの値もしっかりと各ブラウザごとの値(文字列)が帰ってきました。

ちなみに、getYearプロパティにて、ブラウザごとの解釈の違いをまとめるとこのようになっております。
NN2.* 1900年からの差分
NN3.0~NN4.05 4桁の西暦
NN4.06~ 1900年からの差分
Firefox.* 1900年からの差分
IE3.* 1900年からの差分
IE4.*~ 4桁の西暦
Opera.*~4桁の西暦という感じになっています。解釈が違うといっても、Dateオブジェクトに関しては、現在で普及しているブラウザごとの解釈の違いがあっても、
同じ数値を返すスクリプトはこんな感じに書きます。

dd=new Date();
dd=dd.getYear();
mm=dd.getMonth()+1;
dd=dd.getDate();
if(yy<2000){yy+=1900;}
if(mm<10){mm=”0″+mm;}
if(dd<10){dd=”0″+dd;}
document.write(yy+”-”+mm+”-”+dd);

これで、ブラウザごとに解釈が違っても同じ数値を返してくれるようになります。便利で簡単ですね。

さて、少し話がずれてしまいましたが、このオンラインJavaScriptエディタについて気になったことを記述していきたいと思います。

・インデントが使えない
実際に使ってみるとわかると思いますが、{}などの自動インデントが使えません。インデントするときはTABキー一回一回を押す必要があるのですが、
その肝心のタブキーを押すと「スクリプトを実行」のボタンにフォーカスが移ってしまい、インデントをすることが出来ません。これはかなり残念・・・

・エスケープ文字が使えない
\n – ニューライン(改行文字)
\f – フォームフィード
\b – バックスペース
\r – キャリッジリターン(復帰文字)
\t – タブ文字
\’ – シングルクォート(’)
\” – ダブルクォート(”)
\\ – バックスラッシュ(\)

以上のような、プログラミング上ではお馴染みのエスケープ文字が使用出来ません。
試しにdocument.write(“テキストの出力は下に出るよ\n”);と入力してみたのですが、\が\にサニタイジング(無害化)されてしまい、実行することが出来ませんでした。
う~ん、セキュリティ上仕方がないことですが、エスケープ文字が使えないのはちょっと残念ですね。

※ここのブログでも上記の記述がサニタイジングされました^^;

・文字にカラー(色)がつかない
「ちょっと、贅沢すぎませんか?^^;」と言われそうですが、管理人はオンラインJavaScriptエディタと言われるからには、もしかしたらスクリプトごとにカラー表示になるかも!?

こんな感じにカラー表示
↑こんな感じに

と思っていましたが、実際は全て同じ文字(黒文字)でした。これは、管理人が勝手にそういう機能あったらいいな~と、思い込んでいただけなので、特に気にしないで下さい。

総評すると・・・

簡単にスクリプトの構文をチェックしたいときにはとても重宝できると思います。ただし、本格的にスクリプトを書きたい場合は、各種持っているエディタ(管理人は秀丸エディタ)などで、JavaScriptを書きやすい、エディタに仕上げて、実際に書いてローカルからブラウザで実行させて、Firebugなどのスクリプトデバックツールを使って、「ブレークポイント」の指定や「ウォッチ」などで、変数の数値や流れをチェックしてみるといいと思います。

上記で説明したとおり、インデントやエスケープ文字が使えないため、実際に本格的な構文を書く場合は、やや不向きとなっております。

自身の開発しようとする、スクリプトに合わせて、使い分けていくと良いと思います。

余談・・・ちなみにこのオンラインJavaScriptエディタのサイトの上には

Javaスクリプト
http://javascriptist.net/

という、便利なJavaScriptのリファレンスや逆引きサイトにもなっています。興味のある方は是非一度訪問してみることをオススメ致します。


コチラもあわせてどうぞ!
  1. JavaScriptメモ帳、その2
  2. JavaScriptデバッグ中のエラーの種類について
  3. 高機能なJavaScriptエディタ「Overbyte」
  4. JavaScriptメモ帳、その1
  5. サイトにプログラムコードを貼り付けるpreタグのCSS

Leave a Reply


OfficeFolders theme by Themocracy