web-dev-qa-db-ja.com

JavaScriptツールチェーンには何が含まれていますか?

Web上で実行するJavaScriptで洗練されたアプリケーションを書き始めたいと思っています。私は以前、DOMを直接使用し、jQueryを少し使用して、JavaScriptで使い捨てコードを少し作成しました。しかし、ブラウザで実行する本格的なアプリケーションを作成するのはこれが初めてです。

ですから、JavaScriptで本格的な開発を行うために人々が好むツールチェーンは何か疑問に思っています。特に、以下に関心があります。また、実行したコンポーネントを選択した理由と、それらすべてがワークフローにどのように適合するかについての情報もあります。

  • どのエディターとエディタープラグイン/モード/スクリプトを使用していますか?私は一般的にEmacsユーザーであり、現在js2.elを使用していますが、他の設定について聞きたいと思っています。
  • なんらかのIDE(Aptana、Dashcodeなど)を使用していますか?
  • どのJavaScriptライブラリまたはフレームワークを使用していますか?
  • JavaScriptにコンパイルされる言語(GWT、haxe、Objective-J)を使用していますか?
  • どのユニットテストフレームワークを使用していますか?どのようにそれらを呼び出しますか?エディター/ IDE、コマンドライン、Webページのブラウザー、JavaScriptデバッガーから呼び出すことができますか?
  • どの自動ユーザーインターフェイステストツールを使用していますか(Selenium、Watir、Sahiなど)?繰り返しますが、これらはどのように呼び出すことができますか? (ビルドボットを実行する場合、コマンドラインから単体テストとインターフェイステストを呼び出すことができると非常に便利です)
  • 他にどのようなコード品質ツールを使用していますか(JSlint、コードカバレッジツール、またはその他の種類のもの)?
  • デバッグ環境(Firebug、WebKitインスペクターなど)には何を使用しますか?エディターまたはIDEと統合されていますか?
  • コードをデプロイする前に、コードに対してどのような後処理を実行しますか(難読化ツール、ミニファイア、あらゆる種類のオプティマイザー)?
  • モジュールの依存関係を管理したり、必要に応じてコードを動的にロードしたりするためのツールはありますか?私が書いているアプリケーションは大量のコードで動作し、ロード時間を短縮したいので、必要なモジュールを追跡したり、オンデマンドでコードをロードしたりするためのツールが役立ちます。
  • ツールチェーンに他に不可欠なツールはありますか(ブラウザーベースのアプリケーションのJavaScript開発に固有です。私はすでに完全に優れたバージョン管理システムやバグトラッカーなどを持っています)。

ここでは、「使用できるものがたくさんあります」(利用可能なツールがたくさんあることを知っています)のリストや、実際に実際に使用するスタックとそのすべてがどのように適合するかについてはあまり興味がありません。一緒。これを主にクライアント側のアプリケーションとして開発したいと考えています。サーバーは認証とデータの保存と取得に使用されるだけなので、クライアントに不可欠でない限り、どのサーバー側のフレームワークを使用するかは興味がありません。何らかの方法でサイドコード。

編集:ユニットとユーザーインターフェイスのテストフレームワーク、およびそれらを自動化する方法に特に興味があります。コマンドラインから1つの「maketest」または「raketest」タスクを実行して、プロジェクトのすべてのテストを実行し、テストの成功または失敗に応じてステータスを返すことができるようにしたいと思います。これにより、buildbotとの統合がはるかに簡単になります。また、ブラウザーに依存しないコードについて、ブラウザーの外部(Rhino、spidermonkey、v8など)で実行できる単体テストを誰かが作成して、サブセットのターンアラウンドを高速化できるかどうかにも興味があります。テスト。

57
Brian Campbell

どのエディターとエディタープラグイン/モード/スクリプトを使用していますか?私は一般的にEmacsユーザーであり、現在js2.elを使用していますが、他のセットアップについて聞きたいと思っています。

私は通常 Textmate を使用します( JavaScriptjQuery 、および Prototype バンドルを使用)。 HTML、CSS、JavaScriptファイル間をすばやくタブで移動する重いフロントエンド開発を行うときは、vimの分割パネルビューを選択します。その際、気分に応じて macvim またはTerminal + Visor のいずれかを使用します。明らかに、私はMacユーザーです。

なんらかのIDE(Aptana、Dashcodeなど)を使用していますか?

いいえ。以前は Coda を使用していましたが、そのテキストエディタ機能にはまだまだ多くの要望があります。私も エスプレッソ をいじってみましたが、これは面白いです...でもまあ。

どのJavaScriptライブラリまたはフレームワークを使用していますか?

プロジェクトのニーズに応じて、 jQueryPrototype の両方を使用します。それぞれのフレームワークの長所を説明するために、jQueryをDOM操作フレームワークおよびプロトタイプスクリプトフレームワークと呼びます。 。したがって、私はマークアップに焦点を当てたプロジェクトでjQueryを使用し、より高度にスクリプト化されたアプリケーションタイプのプロジェクトでプロトタイプを使用する傾向があります。

JavaScriptにコンパイルされる言語(GWT、haxe、Objective-J)を使用していますか?

絶対にありません-私はそのようなフレームワークに哲学的な不満を持っています。サーバーサイドコードとは異なり、フロントエンドコードは、制御できない環境でユーザーのブラウザーで実行されます。そのため、可能な限り最高のコードを作成するのはJavaScript開発者の責任だと思います。最適ではないコードはパフォーマンスに影響を与える可能性があり、Objective-J(私が使用したリストの中で唯一のもの)などの言語でコンパイルされたJavaScriptは、強力なJavaScript開発者によって作成されたコードほどタイトになることはありません。

どのユニットテストフレームワークを使用していますか?どのようにそれらを呼び出しますか?エディター/ IDE、コマンドライン、Webページのブラウザー、JavaScriptデバッガーから呼び出すことができますか?

私は QUnit 、jQueryユニットテストフレームワークの大ファンです。 Dojoの DOHユニットテスト もいいです。

お見逃しなく FireUnit 、ユニットテスト用の気の利いたFirebug拡張機能。

Razor も参照してください。

どの自動ユーザーインターフェイステストツールを使用していますか(Selenium、Watir、Sahiなど)?繰り返しますが、これらはどのように呼び出すことができますか? (ビルドボットを実行する場合、コマンドラインから単体テストとインターフェイステストを呼び出すことができると非常に便利です)

必要に応じて Selenium を使用しますが、これはまれです。

他にどのようなコード品質ツールを使用していますか(JSlint、コードカバレッジツール、またはその他の種類のもの)?

私は使って大好きです JSLint

Firebugには素晴らしい コードカバレッジ拡張 があり、 HRCov は最高の品種であると広く考えられています。私の日常のJavaScript作業のほとんどでは、コードカバレッジの用途はあまりありません。

デバッグ環境(Firebug、WebKitインスペクターなど)には何を使用しますか?エディターまたはIDEと統合されていますか?

私の知る限り、FirebugはJavaScript開発のキラーアプリです。いくつかの便利なデバッグ機能:

  • 可変ツールチップ
  • ブレークポイントと条件付きブレークポイント
  • パフォーマンスプロファイラー
  • 非常に気の利いた コンソールAPI
  • 表情を見る
  • スタックトレース
  • JiffyFireCookieFireQuery などの便利なプラグイン。

WebKit Inspectorは素晴らしく、 DragonFlyDebug Bar はバグの追跡に役立ちますIEバグ...しかしFireBugがその1つです私のために。

コードをデプロイする前に、コードに対してどのような後処理を実行しますか(難読化ツール、ミニファイア、あらゆる種類のオプティマイザー)?

私は非常に意図的に後処理ツールを使用していません。JavaScriptの優れた側面の1つはそのオープン性であり、駆け出しのJavaScript開発者が私の仕事から学ぶことをより困難にしたくありません。難読化されたJavaScriptを再構築するのは非常に簡単であることは言うまでもありません。

帯域幅を節約するためにJavaScriptを縮小する必要があったのは1つだけです。その場合、私は SVN post-commit hook を設定して、Doug Crockfordの優れた JSMin を実行します。

ツールチェーンに他に不可欠なツールはありますか(ブラウザーベースのアプリケーションのJavaScript開発に固有です。私はすでに完全に優れたバージョン管理システムやバグトラッカーなどを持っています)。

31
c_harm

この質問をした時点では、 Googleのクロージャーコンパイラ は競合していませんでした。
これは、JavaScriptを他の多くのツールよりも優れた方法で最小化する非常に優れたツールです。 ページ速度 で実行して、既存のWebサイトを分析できます。デッドコードや参照などの検出など、他にも多くの機能が組み込まれています。

8
Cherian
  • 編集用のIntelliJIDEA/RubyMine。
  • rubyと類似しているためjQuery +プラグイン
  • JavaScriptにコンパイルされる言語(GWT、haxe、Objective-J)を使用していますか?
  • Blue Ridge(Railsパッケージ)を備えたJSUnitですが、Seleniumテストにさらに依存しています
  • ペアプログラミングとテスト以外のコード品質ツールはありません
  • 主にFirebugでデバッグする
  • スペースを削減するためにgzip圧縮に依存する
  • 小さなモジュラーJSファイルをたくさん作成する
  • Railsを使用して、必要に応じてこれらのファイルを静的に結合し、自動的に含めます。これはカスタムコードですが、ブログに書いています。これにより、開発の成長に合わせてモジュール化を維持できます。
  • サイト上のウィジェットを管理するためにかなりの数のjQueryプラグインを構築します
3
ndp

RubyMineをJavaScriptIDEとして使い始めたばかりで、純粋にJavaScriptをサポートするためのものです。これはかなり良いことです。 IntelliJIDEAと同じです。

私の意見では、Firebugは最近少し下り坂になっていますが、デバッグに関しては、明らかに必須です。私はデバッガーよりもロギングを使用する傾向があるので、log4javascriptは非常に便利です(おそらく私が指摘する必要がありますがそれを書いた)。また、WebKitのインスペクターとIE 8のデバッガーを時々使用し、VisualStudioのデバッガーを以前のバージョンのIEで使用します。

コードの品質については、JSLintを手動で使用しますが、推奨事項のいくつかに同意できない場合もあります。 RubyMine/IntelliJには、コードの記述時にコードを分析し、コードの横に警告を生成するJSの「検査」も多数あります。これは便利です。

私は個々の縮小されていないスクリプトを含むいくつかの開発ページで開発する傾向があり、ビルドを作成するときに、バージョン管理からコードをチェックアウトし、個々のスクリプトを連結し、ログを削除し、呼び出しのデバッグ、コードの最小化/圧縮(JSMinまたはYUICompressorを使用)、および単体テストの実行。私のユニットテストスクリプトは私自身のものであり、それほど派手なものではありません。

それはかなりうまく機能しますが、完璧ではありません。

3
Tim Down

私はまだJavascriptで巨大なものを何も書いていません(私の最新のプロジェクトでは約3000行)が、コードをJSLintして、デプロイ/ビルドスクリプトで必要なすべてのライブラリと縮小/結合します。私のビルドスクリプトは、HTMLをスクリプトとライブラリを直接インポートすることから、本番圧縮コードをインポートすることにも変更します。そうすれば、ビルドスクリプトを実行して、開発の変更を確認する必要がなくなります。これは不可欠です。

YUI Compressor は、特にJVMを起動して実行するため、かなり低速ですが、ジョブは完了します。すべてのコメントを削除するには、デプロイスクリプトで何らかの縮小が不可欠です。グローバル変数を回避すると、意味のある量の識別子名の長さの圧縮も得られますが、gzipの後であまりメリットはありません。おそらく、console.debug行やその他のデバッグコードを削除するための別の手順が必要になるでしょう。

デバッグについては、FireBug。 Webkitデバッガーも問題ないと確信しています。

開発のために、改良されたjsインデントスクリプトといくつかのjs変更を加えたctagsを備えたvim。実際のIDEにはどのような利点があるのか​​わかりませんが、いくつかあると確信しています。VimはデフォルトでJavaScript文字列内のHTMLの構文強調表示を行いませんが、 どうやら に設定できます。

JSLintはRhinoで簡単に実行できますが、スパイダーモンキーはJVMを起動する必要がないため、約3倍の速度で実行されます。 Crockfordはその配置をサポートしていませんが、なんとか機能させることができました。

2
gravitation

私はわずかに異なるテクノロジースタック(asp.net mvc)を使用していますが、次のようになります。

  • IDE:Visual Studio 2008 + ReSharper、Asp.Net MVC
  • 編集者:Notepad ++(私の時間のほとんどはVSですが、Notepad ++はJavaScriptの構文の強調表示が優れています)
  • 開発ブラウザ:FireFox + Firebug + YSlow + PageSpeed + FireCookie開発者ツールバーも追加
  • その他のブラウザ:IE8、Chrome 3、Safari、Opera(めったに使用されない))、仮想マシン経由のIE6およびIE7(Microsoftから無料でダウンロード可能なVirtual PCイメージ) 。
  • 後処理:JLintおよびYUIコンプレッサー。 YUIコンプレッサーの部分をビルドタスクで実行します。
  • JavaScriptフレームワーク:JQuery + JQuery UI
  • その他のもの:JQuery検証、JSON2
2
Chris Brandsma

Web Techは少し進んだので、2017年にこの質問を見た人のために、いくつかの優れた最新のツールとフレームワークについて言及したいと思いました。

どのエディターとエディタープラグイン/モード/スクリプトを使用していますか?

Atom は私の選択したテキストエディターであり、MSエコシステムにいるので、Visual Studio2013はIDE使用していますが、JavaScript開発ではVSを避けています。私はJavaScript開発のほとんどすべてを、可能な限りAtomでのみ行います。

ワークフローに役立つプラグインがかなりあります。

  • atom-beautify これは、発生する可能性のあるスタイリングの問題をクリーンアップするために使用します。これは保存時に実行されるため、保存とチェックインを頻繁に行うので簡単です。
  • atom-easy-jsdoc これにより、ホットキーコンボを使用してjsdocコメントを挿入できます。これにより、コードのドキュメントを自動的に生成できるため、特にAPI開発に役立ちます。
  • atom-ternjs はJavaScriptコード補完に使用するパッケージです。これはあまり必要ありませんが、持っていると便利です。
  • minimap は、特定のドキュメント内のすべてのコードの詳細なアウトラインを表示できるプラグインです。スクロールバーよりも使いやすいと思います。 YMMV。
  • pigments は、テキストの背後にあるCSSで16進色を検出したときに色をレンダリングするプラグインです。調整して結果をすばやく確認する必要がある場合に便利です。

なんらかのIDE(Aptana、Dashcodeなど)を使用していますか?

上記を参照 :)

どのJavaScriptライブラリまたはフレームワークを使用していますか?

私は家庭のプロジェクトや職場の社内モジュールローダーにRequireJSを使用する傾向があります。私は通常、プロジェクトでライブラリとフレームワークを使用しませんが、使用する場合はAngularJS(1.x)にかなり偏っています。それはすべて私がしていることに依存します。

JavaScriptにコンパイルされる言語(GWT、haxe、Objective-J)を使用していますか?

いいえ。

どのユニットテストフレームワークを使用していますか?どのようにそれらを呼び出しますか?エディター/ IDE、コマンドライン、Webページのブラウザー、JavaScriptデバッガーから呼び出すことができますか?

Node.jsKarma テストランナーをテストランナーとして使用します(誰がそれをサンクしましたか?)、 Jasmine をテストフレームワークとして使用します- sinonJS テスト開発用のスタブ/モックライブラリとして。

Karmaは、ファイルシステムの変更を監視するように構成でき(または、ファイル監視プラグインを使用したgruntのようなタスクランナーも機能します)、ファイルが保存されるたびにすべてのテストを実行します。複数のブラウザに対して同時にテストを実行できるという追加の利点があります。したがって、IE、Edge、Chrome、Firefox、PhantomJSなどに対してJSをテストします...これは非常に便利です。

Jsプロジェクトをセットアップしてgruntタスクを実行します。私は通常、コマンドプロンプト/ターミナルから「gruntdevmode」を実行するだけで、テストが実行されます。コミット時の継続的インテグレーションのために、テストを1回だけ実行する別のgruntタスクがあります。家庭で使用する場合は、プッシュが発生するたびにTravisCIにそのタスクを実行させます。

他にどのようなコード品質ツールを使用していますか(JSlint、コードカバレッジツール、またはその他の種類のもの)?

JSLintよりもうるさくないので、私はJSHintを使用します。コードカバレッジには、ユニットテストが実行されるたびに偶然に実行されるイスタンブールを使用します。これは非常に便利です。

デバッグ環境(Firebug、WebKitインスペクターなど)には何を使用しますか?エディターまたはIDEと統合されていますか?

問題のあるWebブラウザを使用します。サーバー側の場合、例:ノード、Atomから直接デバッグできるので node-debugger を使用します。

コードをデプロイする前に、コードに対してどのような後処理を実行しますか(難読化ツール、ミニファイア、あらゆる種類のオプティマイザー)?

私は一般的にこれをしません、それはウェブプロジェクトにとって理想的にはミニファイアと醜いものだと言いました。

モジュールの依存関係を管理したり、必要に応じてコードを動的にロードしたりするためのツールはありますか?私が書いているアプリケーションは大量のコードで動作し、ロード時間を短縮したいので、必要なモジュールを追跡したり、オンデマンドでコードをロードしたりするためのツールが役立ちます。

うん! RequireJS AMD実装を使用します。選択したパッケージマネージャーとして npm を使用しますが、Visual Studioを使用している場合は、nugetを使用します。

ツールチェーンに他に不可欠なツールはありますか(ブラウザーベースのアプリケーションのJavaScript開発に固有です。私はすでに完全に優れたバージョン管理システムやバグトラッカーなどを持っています)。

質問を理解できるかどうかはよくわかりませんが、自宅のプロジェクトにはGitを、職場ではTFSを、リポジトリのホストにはGitHubを、継続的インテグレーションにはTravisCIを、Coveralls(Gitリポジトリのコードカバレッジレポーター)を使用しています。

2
Daniel Lane
  • エディター:メモ帳または構文が強調表示されたその他のテキストエディター

  • IDE:個人的な好みに応じて、Dreamweaver、Aptana、Netbeansにすることができます。

  • Javascriptフレームワーク:私はjQueryに慣れていますが、それでもjQueryをお勧めします。
    jQueryにいくつかの「プラグイン」を追加することを検討できます。いくつかは本当にクールです。 Faceboxのように( http://famspam.com/facebox )-使いやすいjQueryFacebookのようなポップアップボックス。またはjQueryCookieプラグイン

  • デバッグ:Firebug(FireCookie、Page Speed、YSlow)-IDEとの統合はありませんが、ブラウザーでは魔法です。ブラウザー間のデバッグが必要な場合は、FirebugLiteを使用できます。

    アラートの代わりにconsole.log()を簡単に使用してデバッグできます(特に、大量のコールバック、タイマー、AJAXなど。アラートが不要なjavascriptを実行している場合)。本来あるべき姿を破る声明。

  • 後処理:パッカー- http://dean.edwards.name/packer/

1
mauris

私はDashcodeを使用してMacウィジェットを開発しています。そのため、それは「OK」であり、ウィジェット指向の機能がたくさんありますが、それ以外はTextMateです。

1
PurplePilot

Google WaveはGWTを利用しています したがって、より大きなアプリには適しているようです。

1
Piotr Czapla

私が持ち歩きがちなのは、DOMを簡単に操作できるjQueryだけですが、それは必須ではありません。私はフレームワークやその他のものに依存していません。何かを書く必要がある場合は、vimまたは利用可能なテキストエディタで書くだけです(IDEは怠惰な人や企業/企業環境の人向けだと思う​​ため)。フレームワークを使用する必要がある場合は、私がたまたま持っている目的に関係なく、外に出てフレームワークを探します。しかし、結局のところ、私はJavascriptを書くだけです。フレームワークはすべて最終的に古いニュースになるため、私はフレームワークを専門とはしていません。ダン言語がどのように機能するかを知っているだけで、フレームワークやライブラリの有無にかかわらず、あらゆるコンテキストや状況で機能できるようになると、より強力になります。

0
ozzmotik