レビュー:6つの最高のJavaScript IDE

今日、JavaScriptはさまざまな種類のアプリケーションに使用されています。ほとんどの場合、JavaScriptはHTML5およびCSSと連携して、Webフロントエンドを構築します。しかし、JavaScriptはモバイルアプリケーションの構築にも役立ち、Node.jsサーバーの形でバックエンドに重要な場所を見つけました。幸いなことに、JavaScript開発ツール(エディターとIDEの両方)は、新しい課題に対応するために台頭しています。

エディターの代わりにIDEを使用するのはなぜですか?主な理由は、IDEがコードをデバッグし、場合によってはプロファイリングできることです。IDEはALMシステムもサポートしており、バージョン管理のためにGit、GitHub、Mercurial、Subversion、Perforceなどと統合されています。しかし、より多くの編集者がこれらのシステムにフックを追加するにつれて、ALMサポートは差別化要因ではなくなりつつあります。

JavaScript開発ツールを備えたEclipse2018

Java Swingが新しくてエキサイティングだった昔、私はJava開発にEclipseを使用することを楽しんでいましたが、すぐに他のJavaIDEに移行しました。5年以上前、Eclipseを使用してAndroidの開発を行ったとき、その経験は問題ないが、気まぐれでした。2014年にJavaScript開発のためにJSDTでEclipseLunaを使用しようとすると、JSHintを通過した有効なコードに対して常に誤検知エラーが表示されていました。

関連ビデオ:JavaScriptとは何ですか?クリエイターのブレンダンアイクが説明します

JavaScriptプログラミング言語の作成者であるBrendanEichが、この言語の使用方法と、その使いやすさでプログラマーの間で依然として人気がある理由について説明します。

幸いなことに、それ以来、いくつかのベンダーとオープンソースプロジェクトがプレートにステップアップしています。JavaScript開発ツールを備えたEclipse2018には、まともなJavaScriptエディターとChromeベースのデバッガーがありますが、Angularで使用されるTypeScriptや、Reactで使用されるES6ファイルとJSXファイルについては認識していません。

Eclipseは常にプラグインの巨大な市場を楽しんできました。TypeScriptについては、無料のTypeScript1.0.0プラグインを検討してください。Angular、TypeScript、およびES6の場合は、商用のAngular IDE(CodeMix、以前はWebclipseによる)を検討してください。JSXファイルを使用するReactプロジェクトの場合は、オープンソースのTypeScriptIDEを試してください。複数追加する場合は、TypeScriptファイルを編集する必要があるという論争を解決する必要がありますが、それは大したことではありません。

CodeMixツールは、EclipseにVisual Studio Codesmartを追加するものとして請求されます。ほとんどのEclipseプラグインとは異なり、CodeMixによるAngular IDEは無料ではありませんが、45日間の無料トライアルがあります。Visual Studio Codeが無料であることを考えると、AngularIDEにお金を払う前にそれを検討したいと思います。

費用:無料; CodeMixによるAngularIDE、年間29ドル(個人)または48ドル(商用)。プラットフォーム:Windows、MacOS、およびLinux。

ActiveState Komodo IDE

私は2001年に最初に導入されて以来KomodoIDEのユーザーであり、ファンです。VisualStudioCodeやWebStormなどの新しい製品は一部の領域でそれを上回っていますが、それでも優れたエディターおよびIDEです。

Komodo IDEは、高度なJavaScript編集、構文の強調表示、ナビゲーション、およびデバッグを提供しますが、JavaScriptコードチェックは含まれていません。そのために、いつでもシェルでJSHintを実行できます。

Komodoは、数十のプログラミング言語とマークアップ言語をサポートしています。リファクタリング、デバッグ、プロファイリングなど、幅広いプログラミングとマークアップ言語のサポートを備えたKomodo IDEは、オープンソース言語でのエンドツーエンド開発に最適です。

Komodoには、コードインテリジェンスを提供するすべての言語(PHP、Perl、Python、Ruby、Tcl、JavaScript、Node.js)用のコードリファクタリングモジュールがあります。残念ながら、このアプローチの「最小公分母」の性質により、変数とクラスメンバーの名前を変更したり、コードをメソッドに抽出したりする機能が制限されます。それにもかかわらず、これらは最も有用なケースのいくつかです。

Komodo IDEには、列の編集と複数の選択肢の両方があります。これにより、一括編集に関する限り、SublimeTextおよびTextMateとほぼ同等になります。比較を行っている限り、KomodoはIDEに近いのに対し、SublimeTextははるかに高速です。また、パフォーマンスについて説明している限り、画面の描画、検索、構文チェックにおいて、Komodoの速度は以前のバージョンと比較して著しく向上しています。

Komodo IDEには、ほとんどの競合製品にはない機能がいくつかあります。1つはHTTPインスペクターで、Ajaxコールバックのデバッグに最適です。もう1つは、Rx(正規表現、またはregex)ツールキットです。これは、JavaScript、Perl、PHP、Python、およびRubyの正規表現を構築およびテストするための優れた方法です。

コラボレーションは、Komodo IDEのもう1つの差別化要因であり、コード用のGoogleドキュメントと考えてください。ファイルのグループのセッションを作成し、共同編集者としてセッションに連絡先を追加してから、ほぼリアルタイムの同期を使用して、同じファイルで同時に作業することができます。

コラボレーションはソースコード管理に代わるものではありませんが、便利な補足です。Komodo IDEは、CVS、Subversion、Perforce、Git、Mercurial、およびBazaarを使用してソースコード管理を統合します。基本的なバージョン管理操作のみがサポートされています。分岐などの高度な操作は、別のソースコード管理クライアントを使用して実行する必要があります。

Komodoには独自のJavaScriptドキュメントフォーマッターはありませんが、この目的のために最高の無料のオープンソースを利用しています。箱から出して、JavaScriptファイルのデフォルトのフォーマッターはJS Beautifierですが、ドロップダウンメニューから別の9つのオプションを利用できます。

Komodo IDEは、Chromeでのクライアント側JavaScriptのデバッグをサポートしており、Node.jsをローカルとリモートの両方でデバッグできます。また、Perl、Python、PHP、Ruby、Tcl、およびXSLTをデバッグします。

Komodo IDEには、XMLおよびHTMLドキュメントを折りたたみ可能なツリーとして表示できるDOMビューアがあります。また、XPath検索を実行してツリーをフィルタリングすることもできます。

KomodoのコードプロファイリングおよびユニットテストモジュールはJavaScriptをサポートしていません。ただし、JavaScriptとNode.jsはどちらも、コードブラウジング、オートコンプリート、コールチップを実装するKomodoのコードインテリジェンスモジュールでサポートされています。

Komodo IDEは、FTP、SFTP、FTPS、またはSCPを介してファイルのグループを公開できます。Komodoは、ファイルを同期し、他の人の変更を上書きする可能性のある潜在的な公開の競合を検出することもできます。

全体として、Komodoは優れているが優れていないJavaScript IDEであり、優れているが優れていないJavaScriptエディターです。ただし、特にPerl、Python、PHP、Ruby、Tcl、またはXSLTを使用している場合は、ニーズに十分に対応できる可能性があります。

費用:295ドルに加えて、アップグレードとサポートのために年間87ドル。プラットフォーム:Windows(7以降)、MacOS(10.9以降)、Linux。

Apache NetBeans

NetBeansは、WebプロジェクトでJavaScript、HTML5、およびCSS3を非常によくサポートしており、JavaScriptベースのモバイルアプリケーションを構築するためのCordova / PhoneGapフレームワークをサポートしています。NetBeansは、ブロック上で最速のIDEではありませんが、より完全なIDEの1つです。そしてもちろん、価格は正しいです。NetBeansはオープンソースライセンスの下で無料で利用できます。

NetBeans JavaScriptエディタは、期待どおりに、構文の強調表示、オートコンプリート、およびコード折り畳みを提供します。JavaScript編集機能は、PHP、JSP、およびHTMLファイルに埋め込まれたJavaScriptコードでも機能します。jQueryのサポートはエディターに組み込まれています。NetBeans 8.2では、Node.jsとExpress、Gulp、Grunt、AngularJS、Knockout.js、Jade、Mocha、およびSeleniumのサポートが新規または改善されています。

編集時にコード分析がバックグラウンドで実行され、警告とヒントが提供されます。デバッグは、組み込みWebKitブラウザおよびNetBeansコネクタがインストールされたChromeで機能します。デバッガーは、DOM、行、イベント、およびXMLHttpRequestブレークポイントを設定でき、変数、ウォッチ、および呼び出しスタックを表示します。統合されたブラウザログウィンドウには、ブラウザの例外、エラー、および警告が表示されます。

NetBeansは、無料でダウンロードできるJAR(Javaアーカイブ)ファイルであるJsTestDriverを使用して単体テストを構成および実行できます。「サービス」ウィンドウでJsTestDriverを構成するときに、JsTestDriverブラウザーの1つとしてChrome with NetBeans Connectorを指定すると、単体テストのデバッグが自動的に有効になります。

NetBeansコネクタを使用してChromeでWebアプリケーションをデバッグし、Chrome開発者ツールからCSSを編集する場合、変更はNetBeansによってキャプチャされ、CSSファイルに保存されます。ただし、CSSファイルがLessまたはSassスタイルシートから生成された場合、CSSファイルは単にコンパイルされた出力であるため、ソースシートを手動で更新する必要があります。

組み込みWebKitブラウザおよびNetBeansコネクタがインストールされたChromeでは、NetBeansネットワークモニタを使用して、REST通信の要求ヘッダー、応答、およびコールスタックを表示できます。WebSocket通信の場合、ヘッダーとテキストフレームの両方が表示されます。全体として、NetBeansは、Firebugを使用したFirefoxよりもChromeでわずかに優れたデバッグエクスペリエンスを提供します。

NetBeansは、ソースコード管理をGit、Subversion、Mercurial、およびCVSと統合します。Gitのサポートは、グラフィカルなDiffビューアとIDE内のシェルフシステムによって強化されています。NetBeansは、ファイルのGitステータスを色分けし、すべてのファイルのリビジョン履歴を表示し、バージョン管理されたファイルの各行のリビジョンと作成者の情報を表示します。NetBeansは、Subversion、Mercurial、およびCVSと同様の統合を行っていますが、私はGitのみをテストしました。

NetBeansは、問題追跡をJiraおよびBugzillaと統合します。NetBeansタスクウィンドウでは、登録済みのタスクリポジトリでタスクの検索、検索の保存、タスクの更新、およびタスクの解決を行うことができます。NetBeansには、Kenaiインフラストラクチャを使用するサイト用のチームサーバー統合もあります。

私が判断できる限り、NetBeansにはJavaScriptプロファイリングがありませんが、JavaアプリケーションとEJBモジュールをプロファイリングすることはできます。また、NetBeansはJavaとPHPをリファクタリングできますが、JavaScriptをリファクタリングすることはできません。

全体として、NetBeansは、特にサーバー上でJava、PHP、またはC ++の開発も行っている場合、クライアント側のJavaScript、HTML5、およびCSS3の開発に適した候補です。WebStormの予算がなく、Microsoftが嫌いな場合は、急いでいない限り、NetBeansがその仕事をしていることがわかります。

費用:無料。プラットフォーム:Windows、Solaris、MacOS、Linux。 

Microsoft Visual Studio 2017

Visual Studio 2017の完全なレビューでは、JavaScriptへの参照をいくつか含めて、製品全体について説明しました。ここで強調を逆にします。

全体として、Visual Studio2017はJavaScriptIDEとして非常によく機能しますが、.Net IDEの方が優れており、WebStorm forJavaScriptほど優れていません。JavaScriptエディターとしても非常によく機能しますが、C#エディターとしては優れており、JavaScript用のSublimeTextほど優れていません。

以下のスクリーンショットでわかるように、Visual Studio 2017は、JavaScript構文の色付けとコード折り畳みでうまく機能します。また、JavaScriptコードナビゲーションでもうまく機能します。関数またはメンバー名を右クリックすると、定義に簡単にジャンプしたり、すべての参照を見つけたりできます。定義の確認が終わったら、インターフェースの上部にある戻る矢印を押して、元の場所に戻ることができます。

スニペットを簡単に挿入し、HTMLや文字列変数のURLエンコードなどの適切なコードで選択範囲を囲むことができます。JavaScript、HTML、CSSに加えて、Markdownファイルを編集して、レンダリングされたMarkdownを確認したり、TypeScriptを操作したりできます。

さらに、もちろん、任意の.Net言語、C ++、およびPythonでコーディングできます。また、Visual Studioの場合と同様に、IDEから直接データベースを操作できます。Visual Studioは、SQLServerデータベースを操作するときに特に強力です。開発者として実行したいデータベース操作の大部分には、SQL Server ManagementStudioの代わりにVisualStudioを使用する必要があります。

Visual Studio 2017は、モバイルデバイスやエミュレーターのブラウザーを含め、スローしたいほとんどすべてのブラウザーでのデバッグをサポートしています。また、独自の2つのブラウザーがあります。InternetExplorerのバージョンである(驚いたことに)プレーンな内部Webブラウザーと、レンダリングされたページをすべてのソースとスタイルとともに表示するページインスペクターです。 Page Inspectorは、ページの設定に時間のかかるリバースエンジニアリングを行う可能性がありますが、一度ページに入ると、Visual Studio、ブラウザー、およびブラウザーの開発ツールを操作しなくても、そこにとどまることができます。 。

Visual Studio 2017のパフォーマンスは、十分なメモリとCPUパワーを与えれば通常はかなり良好ですが、かなりのリソースを必要とする傾向があります。 Visual Studio 2017には、アプリケーションの優れたパフォーマンス診断機能がありますが、概して、ブラウザーの奥深くで実行される通常のJavaScriptコードにはそれほど役立ちません。 Visual Studioには、特定のJavaScript関数のタイミング、HTML UIの応答性、およびJavaScriptメモリツールがありますが、これらはJavaScriptベースのユニバーサルWindowsプラットフォームプロジェクトにのみ適用され、JavaScriptを使用するWebプロジェクトには適用されません。

Visual Studio 2017には、優れたNode.jsアプリケーション編集、IntelliSense、プロファイリング、NPM統合、TypeScriptサポート、ローカルおよびリモート(Windows、MacOS、Linux)でのデバッグ、Azure WebAppsおよびAzureCloudServicesでのデバッグが含まれています。また、CSS、HTML、JavaScript、TypeScript、CoffeeScriptなどもサポートしています。これには、入力時にJSHintを実行すること、コンテキストメニューからJavaScriptファイルを縮小できること、保存時にCoffeeScriptファイルを自動的にコンパイルして、生成されたJavaScriptのプレビューを並べて表示することが含まれます。