JavaScript プログラマの方にお聞きします。


近頃注目を集めている JavaScript ですが、どのような開発環境で開発していますでしょうか。(ブラウザ、デバッガ、エディタ、ブラウザのプラグイン、そのほか)

サードパーティ製のツールなどをお使いの方は、できればそれがどんなものか、なぜそれがいいのかも教えてください。

ちなみに僕は Firefox の JavaScript コンソールと Emacs の java-mode というとてもしょぼい感じですw

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/08/05 16:30:40
  • 終了:--

ベストアンサー

id:typester No.6

たいぷすた回答回数3ベストアンサー獲得回数12005/08/05 19:51:54

ポイント12pt

Emacs(ecma-script-mode)とFirefox(JavaScriptコンソール+JavaScript Shell)

です。


JavaScript Shellはページ上でBookmarkletとして起動し、そのページのスクリプト空間でのシェルとなるものです。

これを使う前はちまちまjavascript:スキームからalertしたりして値を確認したりしていたので、それを考えれば非常に楽になりました。

id:naoya

おお、ありがとうございます。ecma-script-mode も JavaScript Shell も初耳です。試してみまっす。

2005/08/05 22:51:36

その他の回答(18件)

id:rokichan No.1

rokichan回答回数38ベストアンサー獲得回数02005/08/05 16:40:05

ポイント13pt

> どのような開発環境で開発していますでしょうか。

素直にテキストエディタですね。

んで、実際にブラウザ上で動かしてみて動作するか。


JavaScriptは各ブラウザ毎に実装が異なるので

完璧なデバッガはないと思っています。

動作するかしないか。それがすべてだと思っています。


ちなみに、

> 近頃注目を集めている JavaScript ですが

そ、そうなんですか?

注目とは知らなかった・・・。

もっと情報を仕入れなければ・・・。

id:naoya

ありがとうございます。

知人のスーパーハカーも Firefox + エディタでした。も少し楽できんものかなと..。

2005/08/05 16:41:57
id:andi No.2

andi回答回数448ベストアンサー獲得回数02005/08/05 16:57:02

ポイント13pt

http://ameblo.jp/hrc/entry-10002745932.html

JavaScript の強力なデバッガ”Venkman”|HardReggaeCafe@Ameblo.jp

私自身もブラウザ+エディタでコーディングする派ですが、困るのはやはりデバッグだと思って検索してみて良さげなFireFoxプラグインを見つけました。

ステップ実行できるだけでもかなり楽になりそうですね~。

id:naoya

ありがとうございます。デバッガの Venkman ですか、使ってみます。

シェルなんかから js ファイルを実行してエラーだとエラーだっていう旨を吐いてくれるツールとかがあればいいんですけど、JavaScript の実装上難しそうだなあ。

2005/08/05 17:04:04
id:junglejungle No.3

junglejungle回答回数21ベストアンサー獲得回数02005/08/05 17:14:52

ポイント12pt

通常のtextエディタとIEでやってます。

alert()でデバッグしてます。

テストはJSunitを使ってます。

id:naoya

ありがとうございます。ユニットテストのフレームワークがあるんですね、見てみます。

2005/08/05 17:17:14
id:dungeon-master No.4

dungeon-master回答回数571ベストアンサー獲得回数402005/08/05 17:19:58

ポイント12pt

コーディングはテキストエディタ。

テスト環境は、ターゲットとなるブラウザを、製品毎に数バージョン用意。

必要ならWebサーバーも置きます。

私のところでは、企業内システム向けで特定のバージョンに絞って開発することが多いですが、

コンシューマ向けだと、OSの差異も考慮する必要があると思います。

最終的に動作の差異が吸収できないところは個別のルーチンが動くようにして逃げます。


スクリプト自体の文法チェックなどは、事前に行います。

変数名、件数名、オブジェクト名とかは、一覧にしてチェックします。

そのためのツールを作ったりもしました。


デバッグは、地道に各ブラウザ上での動作を確認して行くのが、遠回りな様で近道です。

複雑なものでは、サーバー側でJavascript込みのHTMLを吐くことがあり、

Javascript部分が一定しないためツールを使ったデバッグが困難になってしまいます。

あるブラウザではツールでデバッグできてOKになっても、

別のブラウザでは結局動かないままということも多いです。

…なんか愚痴のようになってしまってすみません。


>近頃注目を集めている

余談ですが、どういう注目なのかぜひ教えてください。

id:naoya

ありがとうございます。わりとブラウザでデバッグしてるという方が多いですね。

注目というのは、例えば Ajax、Greasemonkey なんかのための user script の影響が大きいようで、その流れで JavaScript でアプリケーションの使い勝手を良くしましょうみたいな風潮になってきているとか、その辺ですね。

2005/08/05 17:24:06
id:blr No.5

blr回答回数18ベストアンサー獲得回数02005/08/05 18:09:15

ポイント12pt

ホームページビルダー+秀丸などのエディターです。


ホームページビルダーである文法程度のチェックを行ってくれます。

id:naoya

ありがとうございます。

2005/08/05 18:18:24
id:typester No.6

たいぷすた回答回数3ベストアンサー獲得回数12005/08/05 19:51:54ここでベストアンサー

ポイント12pt

Emacs(ecma-script-mode)とFirefox(JavaScriptコンソール+JavaScript Shell)

です。


JavaScript Shellはページ上でBookmarkletとして起動し、そのページのスクリプト空間でのシェルとなるものです。

これを使う前はちまちまjavascript:スキームからalertしたりして値を確認したりしていたので、それを考えれば非常に楽になりました。

id:naoya

おお、ありがとうございます。ecma-script-mode も JavaScript Shell も初耳です。試してみまっす。

2005/08/05 22:51:36
id:hnml999 No.7

hnml999回答回数1ベストアンサー獲得回数02005/08/05 21:22:37

ポイント12pt

http://s.drmg.net/chd/others/htm/1_6_iedominspector.htm

[Others] IEで使えるDOMインスペクタっぽいツール

主にテキストエディタ+DOMインスペクタです。


他には、VisualStudio.netをインストールしていると

IEエラー時に起動して来てデバッガの様な事が、

出来る様ですが、あまり詳しくありません。


DOMインスペクタについては、

Mozilla系は、インストール時に選択すれば使える様に、

Opera,Safariは、探し中です、

IEは↓が参考になりました。

id:naoya

ありがとうございます。DOMインスペクタは便利ですよねー。

2005/08/05 22:51:58
id:y_yanbe No.8

つづきはid:yanbeで!回答回数3ベストアンサー獲得回数12005/08/05 21:25:57

ポイント12pt

EclipseのExadel Studioプラグインに付属しているJavaScript Editorで開発しています。Exadel Studio Proは有料ですが、Exadel Studioは無料で使えます。


【主な機能】

・キーワードハイライト

・Javascript DOMのコード補完

 -ちゃんと再帰的に補完してくれます

 -補完時にIE,Netscapeの対応状況をアイコンで表示

・関数・変数アウトライン表示

 -ネストされた関数にも対応

・アウトラインをクリックで該当関数にジャンプ

【注意】

・XML DOM(ActiveXObjectやXMLHttpRequest)はコード補完の対象外


多分現存するJavascriptエディタの中ではかなり機能的にリッチな方ではないかと。


過去に公開されていたものを含めると、以下のものが一番便利っぽいのですが、現在ダウンロードできなくなっているようです。

http://www.ee.ryerson.ca/~hkataria/

(スクリーンショットあり)

id:naoya

Exadel Studio 便利そうですねえ。久々に Eclipse も試してみます。

2005/08/05 22:52:58
id:asakura-t No.9

浅倉卓司回答回数150ベストアンサー獲得回数22005/08/05 22:59:27

ポイント12pt

http://www.keynavi.net/ja/tipsj/debug.html

「JavaScript@Keynavi.Net」 デバッグなど開発効率を上げるための工夫

 1年くらい前にJavaScriptのことを調べた時に見つけたサイトの中では、ここがわりと参考になりました。

(ライブラリも充実してますし)


 他にもどこかでデバッグ用のJSライブラリを見かけた気がするんですが、そっちは忘れてしまいました……。

id:naoya

ありがとうございます。デバッグ TIPS という感じですね。

2005/08/06 10:38:54
id:faerie No.10

faerie回答回数1ベストアンサー獲得回数02005/08/06 01:44:48

ポイント12pt

http://www.mozilla-japan.org/rhino/

Rhino - Java による JavaScript

Rhino を愛用しています。Java で書かれた JavaScript インタプリタです。

対話式に使うこともできて便利なのですが、WWW ブラウザ上の JavaScript アプリの開発にはあまり役に立たないでしょうね。

id:naoya

ありがとうございます。シェルみたいなのがあるのかな?

2005/08/06 10:40:00
id:wacky No.11

わっきー回答回数54ベストアンサー獲得回数12005/08/06 05:58:21

ポイント12pt

私も多くの方と同様テキストエディタでコーディング→ブラウザで動作確認としています。

テキストエディタは色分けが自分でカスタマイズできるものを選んでいます(今はサクラエディタ)。

デバッグはalertかwindow.statusですね。


またJavaScriptやDOMのリファレンスは、必ずローカルで参照できるものをダウンロードしておきます。

http://www.microsoft.com/downloads/details.aspx?FamilyID=4a8e8cf...

Download details: Comprehensive DHTML, HTML, and CSS Reference

id:naoya

リファレンスを手元に、というのは意外と忘れがちですがあると便利ですよね。

2005/08/06 10:40:59
id:y_yanbe No.12

つづきはid:yanbeで!回答回数3ベストアンサー獲得回数12005/08/06 11:59:26

ポイント12pt

id:asakura-tさんがおっしゃってるのは、参考URLにあるdebug.jsのことだと思います。これもデバッグに重宝する場面があるかと思います


以下、リンク先から引用


>皆さんは、JavaScriptのデバッグにalert(???)を使っていませんか?

>forループ内で使った日にや、いちいちOKボタンを押さなくてはならず、面倒ですね。

>そこで作ったのが、debugオブジェクトです。

>デバッグ情報をまとめて別Windowに表示します。

id:naoya

debug TIPS は色々ありますよね。はてなスタッフのひげぽんも自分で編み出した技を使ってる様子。

2005/08/06 12:19:54
id:luvtechno No.13

luvtechno回答回数10ベストアンサー獲得回数12005/08/07 04:05:31

ポイント12pt

ちょっと質問の趣旨とは違いますが、少し前にJavaScriptのデバッグに使えそうなツールをリストアップしたので参考までに。海外のものも調べてみましたが、これといった定番はないようです。


私自身は、etoさんのDebugWindowを使っています。機能はシンプルなのですが、ファイル1つで使い始めるまでが簡単でした。

http://eto.com/d/0503.html#DebugWindow

id:naoya

ありがとうございます。eto さん作のデバッガは人気がありますねー。

2005/08/07 09:11:33
id:Wacky No.14

Wacky回答回数1ベストアンサー獲得回数02005/08/07 20:19:56

ポイント12pt

http://andore.com/inami/mtarchives/002506.html

アメリカでがんばりましょう: JavaScript Debugger って便利

Mozilla系だと、 id:andi さんの挙げておられる、Venkman が良いように思います。

紹介と和訳サイトのURLを付けておきました。


IE系だと、MS社 謹製が良いかな?という気がします。

自分が試したときは、VS.NET 2003を起動し、メニューの「ツール」→「オプション」→「デバッグ」→「Just-In-Time」の「Script」のチェックボックスを有効にしてデバッグしてました。

(環境のせいか、MS Script Debuggerが動いてくれなかったので…)

id:naoya

Venkman ユーザー結構多いみたいですね。

2005/08/08 09:21:32
id:junjun777 No.15

水無回答回数14ベストアンサー獲得回数02005/08/09 11:02:48

ポイント12pt

http://www.browsercam.com/Features.aspx

BrowserCam : BrowserCam usability, cross-platform testing, and remote access

ちょっと違うかもしれませんが、ブラウザについてです。

いろんなブラウザを用意するのは、結構大変ですが、上記URLのサービスを利用すれば、いろいろなOSとブラウザで確認できます。有料ですが、、、。

無料お試しが、1日可能です。


開発は、Venkmanが一番便利かと思います。

ただ、ちょっとやりたい、くらいなら、debug.jsもかなり有力です。

Visual Studio の Visual InterDevでもデバッグ可能です。(InterDevからブラウザプロセスにアタッチする)

ただし、多分IE Only。

id:naoya

これは色んなブラウザになってスクリーンショットを撮って見せてくれるサービスですよね。JavaScript の開発にも役に立つというのは目からうろこですね。

やっぱり Venkmakn がイチオシ、ですかあ。

2005/08/09 11:05:37
id:t-uchima No.16

t-uchima回答回数7ベストアンサー獲得回数02005/08/09 19:25:05

ポイント12pt

・実行環境に FireFox

http://www.mozilla-japan.org/products/firefox/


・実行環境のコントロールに Web Developer Extension

http://extensionroom.mozdev.org/more-info/webdeveloper


・コード整形に JavaScript Code Improver

http://www.jcay.com/javascript-code-improver.html


・functionテストに JavaScriptUnit

http://yusuke.homeip.net/diary/archives/000175.html


JavaScriptUnitはリアルタイムHTMLエディタ「そば」の作者さんがBlogで公開しているものです。


ふと今思ったんだけどxUnitでテストを書くようになってからデバッガを使う機会が極端に減ったような。Venkmakn を最後に立ち上げたのっていつだったかな・・・

id:naoya

ありがとうございます。 Code Improver と JavaScriptUnit は必見ぽいですね。

2005/08/09 20:18:41
id:ent No.17

ent回答回数14ベストアンサー獲得回数02005/08/11 15:10:43

ポイント12pt

http://emeditor.com/jp/

EmEditor テキスト エディタ - 速くて使いやすいテキスト エディタ!

エディタにはEmEditorを使って、基本的にFirefoxのコンソール、キリのいいところでIE・Operaで検証するといった感じで作業しています。

デバッグには大抵alert()ですね。

あと、インデントが自動挿入だったりJavaScript用の色分けがあったりすると多少ですが簡単な間違いには気がつきやすくなると思います。

id:naoya

ありがとうございます。

2005/08/11 15:17:30
id:izariuo440 No.18

izariuo440回答回数1ベストアンサー獲得回数02005/08/11 22:57:22

ポイント12pt

3年ほど前にJavaScript、Flash Player、Media Player、Real Playerを組み合わせたシステムを作ったときの経験をもとに書きます。


ブラウザはIEのみで、エディタはEmEditor、デバッガはMicrosoft Script Debugger、プラグインは使っていませんでした(当時はほとんどプラグインがありませんでした)。


Netscapeでの対応も行いましたが、主要ターゲットブラウザでないため、IEでの対応ほど機能がなかったため、デバッガは使わずに必要に応じてalertを使いました。


IEの場合、デバッガはJITデバッグでのみScript Debuggerを使いました。これは、コードのバグの箇所と原因を突き止めるために使いました。プログラムの状態の出力などは、自作したデバッグウィンドウを使いました。

これでほとんど事足りました。Script Debuggerは確かステップ実行、変数のウォッチもありましたが、ほとんど使った記憶がありません。

id:naoya

ありがとうございます。僕もデバッグは正直 break point を設定できるかどうかより、単純に syntax error とか typo を検知できるだけで嬉しいですね。

2005/08/12 11:05:30
id:nazoking No.19

nazoking回答回数4ベストアンサー獲得回数02005/08/12 14:37:43

ポイント12pt

http://nazo.yi.org/nazonojs/?name=objectdump

nazono.objectdump [javascript] nazoking

拙作の objectdump もどうぞ

* オブジェクトを見やすい形に表示します。

* クリックする毎に階層をたどるので、かなり深いものでも大丈夫

id:naoya

ありがとうございます。

こりゃ便利ですね。Perl の Data::Dumper みたいに JavaScript のデータ構造の形(JSON)で出力して eval で使えたりすると面白いかも。(笑)

2005/08/12 14:42:51

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません