naoya回答ポイント 230ptウォッチ 11

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

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

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

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

• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• たいぷすた2005/08/05 19:51:54

  満足12pt

  http://www.emacswiki.org/cgi-bin/wiki/ECMAScriptMode

  EmacsWiki: ECMAScriptMode

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

  です。

  
  

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

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

  http://www.squarefree.com/shell/

  JavaScript Shell

  http://www.squarefree.com/bookmarklets/webdevel.html

  Web Development Bookmarklets

  スター

  • naoya 2005/08/05 22:51:36

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

その他の回答

• rokichan2005/08/05 16:40:05

  満足13pt

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

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

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

  
  

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

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

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

  
  

  ちなみに、

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

  そ、そうなんですか？

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

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

  スター

  • naoya 2005/08/05 16:41:57

    ありがとうございます。

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

andi2005/08/05 16:57:02

満足13pt

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

JavaScript の強力なデバッガ”Venkman”｜HardReggaeCafe＠Ameblo.jp

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

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

スター

• naoya 2005/08/05 17:04:04

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

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

junglejungle2005/08/05 17:14:52

満足12pt

http://www.edwardh.com/jsunit/

JsUnit

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

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

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

スター

• naoya 2005/08/05 17:17:14

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

dungeon-master2005/08/05 17:19:58

満足12pt

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

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

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

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

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

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




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

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

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




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

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

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

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

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

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




>近頃注目を集めている

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

スター

• naoya 2005/08/05 17:24:06

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

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

blr2005/08/05 18:09:15

満足12pt

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




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

スター

• naoya 2005/08/05 18:18:24

  ありがとうございます。

hnml9992005/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は↓が参考になりました。

スター

• naoya 2005/08/05 22:51:58

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

つづきはid:yanbeで！2005/08/05 21:25:57

満足12pt

http://www.exadel.com/exadelstudio/help/jsEditor.html

Exadel Studio : www.exadel.com

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/

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

http://www.exadel.com/

スター

• naoya 2005/08/05 22:52:58

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

浅倉卓司2005/08/05 22:59:27

満足12pt

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

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

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

（ライブラリも充実してますし）




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

スター

• naoya 2005/08/06 10:38:54

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

faerie2005/08/06 01:44:48

満足12pt

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

Rhino - Java による JavaScript

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

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

スター

• naoya 2005/08/06 10:40:00

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

わっきー2005/08/06 05:58:21

満足12pt

http://www.microsoft.com/japan/msdn/scripting/default.asp

Windows Script

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

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

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




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

http://web.archive.org/web/20040211210156/devedge.netscape.com/l...

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

Download details: Comprehensive DHTML, HTML, and CSS Reference

http://www.mozilla.org/docs/dom/

The DOM in Mozilla

スター

• naoya 2005/08/06 10:40:59

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

つづきはid:yanbeで！2005/08/06 11:59:26

満足12pt

http://homepage1.nifty.com/kuraman/js/debug.html

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




以下、リンク先から引用




＞皆さんは、ＪａｖａＳｃｒｉｐｔのデバッグにalert(???)を使っていませんか？

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

＞そこで作ったのが、ｄｅｂｕｇオブジェクトです。

＞デバッグ情報をまとめて別Ｗｉｎｄｏｗに表示します。

http://eto.com/d/0502.html#JavaScript_debug

スター

• naoya 2005/08/06 12:19:54

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

luvtechno2005/08/07 04:05:31

満足12pt

http://luvtechno.net/h/hiki.cgi?JavaScript

luvtechno.net - JavaScript

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




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

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

スター

• naoya 2005/08/07 09:11:33

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

Wacky2005/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が動いてくれなかったので…)

http://skillup.jp/venkman/development/index.html

http://sky.freespace.jp/hatch/scripts/dvlp.htm

Hatch's Attack - Scripts -

スター

• naoya 2005/08/08 09:21:32

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

水無2005/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。

スター

• naoya 2005/08/09 11:05:37

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

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

t-uchima2005/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 を最後に立ち上げたのっていつだったかな・・・

スター

• naoya 2005/08/09 20:18:41

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

ent2005/08/11 15:10:43

満足12pt

http://emeditor.com/jp/

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

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

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

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

スター

• naoya 2005/08/11 15:17:30

  ありがとうございます。

izariuo4402005/08/11 22:57:22

満足12pt

http://www.microsoft.com/Japan/msdn/Scripting/navigation.htm?/ja...

Microsoft Scripting Technologies

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




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




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




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

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

スター

• naoya 2005/08/12 11:05:30

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

nazoking2005/08/12 14:37:43

満足12pt

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

nazono.objectdump [javascript] nazoking

拙作の objectdump もどうぞ

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

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

スター

• naoya 2005/08/12 14:42:51

  ありがとうございます。

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

• その他の回答を読む

この質問へのコメント

質問の情報

登録日時

2005-08-05 16:30:40

終了日時

--

回答条件

回答にURL必須 1人2回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…匿名質問者112日前
• 不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者112日前
• 日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者20時間前
• 共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者120時間前
• 内定してほしいポケモンはいますか？匿名質問者21時間前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ