Posts Tagged ‘Editor’

最強のJavaScript IDE 「WebStorm」を使ってみた

10月 27th, 2010

JavaScript対応のIDEをまとめてみたの続きのようなもので、その中で紹介していたWebStormが素晴らしいので別途紹介。
WebStormはHTML(5)+CSS+JavaScriptに対応してるIDEで、Windows, Mac OS、Linux上で動作します。
有料のソフトウェアですが、オープンソースライセンスがあったり体験版は45日間使えるのでとりあえず試してみましょう。

特徴

とにかく膨大な機能が載ってるので全てを紹介するのは無理があるため、凄いと思ったところを掻い摘んで紹介。
主にJavaScriptを書くエディタとして使っていますが、CSSやHTMLも普通のIDEより書きやすいです。
基本的にWebStormで日本語に関する問題は少なめです。一部IMEの変換候補が出てくる場所がずれたり、プラグインで日本語がダメだったりするものがありますが、殆ど問題ではない程度です。文字コードはShift_JIS(windowsだとwindows-31j)も対応しているので問題にはならないと思います。

優秀なコード補完機能

WebStormはソースコードを自動的にコ－ド解析(静的解析?)してるようで、JavaScriptの構造を認識してコード補完を行えます。
例えば@teramakoさんがKomodo Edit が面白いで言っていたような

var container = {
  init: function() {},
};
container.obj = (function(){
  var privateProp = null;
  var namager = {
    publicMethod: function(){ },
  };
  return namager;
})();

というコードの場合container.obj.pu と書くとちゃんとpublicMethodも補完候補に表示されます。
さらにpublicMethodはメソッドなのでcontainer.obj.publicMethod()という形で補完されて、今は仮引数がないのでカーソルの位置は)の→になります。仮引数があると()の中にカーソルが置かれます。

ネイティブの補完候補もHTML5,ECMA,DOMCoreや結構細かいものも対応していて補完でアレが出てこないって事はかなり少ないです(ブラウザ拡張開発用とかは除いて)
補完候補は開いているディレクトリ以下のファイルを全部解析して表示してくれるので、ファイルをまたいだメソッドなども候補に表示されます。
今まで触ったJavaScriptエディタ、IDEで補完は最も素晴らしいと感じました。

JavaScript以外のHTMLタグやCSSも補完を行え、1つのファイルにHTML、JavaScriptなどが混在していた場合も正しく認識して補完が行える。HTML, CSS, JavaScript editing in an intelligent environment :: WebStorm Featuresで特徴がいろいろ紹介されています。

コ－ド解析による良さ


右サイドに警告レベル毎の表示

右サイドに警告レベル毎の表示


上でコ－ド解析してるのでインテリセンスみたいな事が凄くできるよと書きましたが、
他にもCtrl+クリックで関数宣言にジャンプ(Tipsで設定の変更方法が記載してあります)する機能や、リファクタリングで特定の変数名や関数名をリネームする機能(その名前を使ってるもの全部を変えてくれる)、Structureパネルでコードのアウトラインを表示できたりします。

後、文法が間違ってる場合などは警告なども表示できその設定も警告レベルから決められてかなり細かな指定が行えます。(JSLintみたいなもの?)

自動整形機能

個人的にIDEと言ったらコードの自動整形機能です。CodeメニューのReformat codeから実行できます。(ショートカットからもできる)
自動整形のルールはOptionのCode Styleからかなり細かく設定できるので、自分ルールに合わせて整形させる事ができます。


他にもページがあるぐらい多い

他にもページがあるぐらい多い


ショートカットキーはkeymap>Reformat codeで変更できます


E4X対応

Firefoxユーザー向けですが、構文解析がE4Xの記法に対応しています。
普通なら上記の自動整形でE4Xが混じってると崩れてしまって残念になりますが、E4Xもちゃんと扱えるので崩れません。
Firefox向けのコード、Greasemonkeyなどを書く人に使ってもらいたいところ。
(分割代入の記法にはまだ対応してなかったのはちょっぴり残念)

標準でバージョン管理機能がある


Gitのメニュー

Gitのメニュー



Vision Contorolメニューを有効にすると標準でローカルなバージョン管理が行えます。
デフォルトだと差分やrevertがができるLocal Historyが機能しますが、外部のバージョン管理ソフトと連携してSVN、Gitが使用できます。(Mercurialは標準ではなくhg4idea-luciadプラグインによって使用できます)
コミットやpushなどはIDE上からその場でできて、マージや差分表示などもできるので結構便利です。

JavaScriptデバッガー

Local JavaScript debuggingで紹介されてるようにFirefoxアドオンと連携したIDE上で動くデバッガが付いています。
他にもFirebugと連携して機能するプラグインなどもあったりしてFirefoxとの親和性は少し高め。

使い勝手

他の機能紹介はWebStorm Featuresやヘルプなどを見てもらうとして、使った感覚としてはそこまで重くは無いです。
起動はIDEらしくちょっとかかりますが(コード解析もあったりするので)、太ったEmacsの起動を我慢できるなら問題ない。
Aptanaみたいに長いコードだと極端に重くなるとかはないので、大規模なものでも扱えると思います(構造もみやすいし)
ショートカットはEclipse、NetBeans、Emacs、Visual Studio、Mac、GNOME、KDEなどの設定が最初から用意されていて、殆どの操作をカスタマイズできるので、自分好みにする事もできると思います。
Vimのキーバインドは標準ではなくプラグインのIdeaVIMによって使えます。(JetBrainsのIDEなら大体対応してる)
メモリは数十MB～多くても200MBいかないぐらいなので(ステータスバーにメモリ量が表示される)、少し古いPCでも動かせるぐらいです。自分のノートであるCore Duo T2300（1.66GHz）、512MBのPCでも使えるぐらいなので、最近のPCなら問題ないと思います。

UIが完全に英語ですが、設定は検索機能が優秀なので適当な単語からたどり着けることが多いし、表示している項目には全部ヘルプや説明が付いてるぐらいなので、オプションが豊富すぎるぐらいでそこまでつっかかりはないと思います。
(何ができないのかというのが少し分かりにくい感じではある)

Tips

メモみたいな

  • Productivity Tips 動画
    他のソフトだけど大体一緒なので参考になる。主にコード補完系
  • ショートカットキーはkeymapで変更できて、キーだけではなくてマウスクリックなどのショートカットもあります。
  • Ctrl+クリックで関数宣言にジャンプするのは keymap > Go to > declaration で設定変更できる。(デフォルトだとCtrl+B)
  • Find Action (Ctrl+Shift+A)でコマンド検索できる
  • ショートカット一覧(デフォルト)はPDFで配布もしてる WebStorm Resources
  • keymapでcomplete current statement(ctrl+shift+enter)が便利。最後の;が無かったら;を入れてくれて、あったら次の行へ。
    今の行のステートメントを自動的に補完してくれる感じ
  • Editor > Code Folding でコメントがデフォルトでたたまれるのを防止できる
    (Greasemonkeyとかデフォルトだとたたまれちゃうので)
  • File Templeteで${NAME}でファイル名が取れる(大文字区別する)
    適当な変数${test}を書くとファイル作成ダイアログでそれを入力して指定できる。
    例えばGreasemonkeyっぽいテンプレートを書くなら gist: 648943 – WebStormのFile Templete- GitHubみたいな感じ。
  • Editor > Editor Tabsでタブ位置を上下左右に変えられるので、縦置きタブバーも可能
  • JavaScript IntentionPowerPack。if-elseを||にするとか!から始まるifをflipして逆にするとか、リファクタリング関係のものが詰まってる。
  • 変数に下線とかの装飾はEditor > Color & Fonts > JavaScriptあたりから変更できます。
  • 文字コードの変更は画面下にある所をクリックでも変更できる
  • JetBrainsのIDEは大体形が同じ(扱える言語が違う)なので、他の種類のIDEのノウハウが使えることもある。

プラグイン

    から探せる(他にもあると思う)
    手動インストール方法はIntelliJ IDEA Plugin – TeamCity 3.x Documentation – Confluenceに書いてあるように、指定のpluginsフォルダにjarとかプラグインファイルをおいて、設定のpluginsから有効にすればいいみたい。
    けど、他のソフトを対象に書かれたプラグインは動作しない気がする。

  • eSnippet Pro plugin
    スニペットプラグイン。Ctrl+Alt+Spaceで補完のようにスニペットを追加できる。
    スニペットをオンラインに登録して、検索できる
  • CSS-X-Fire
    FirebugのCSSパネルのようにCSSを編集できるプラグイン
  • hg4idea-luciad
    Mercurial統合のプラグイン
    他のバージョン管理はデフォルトで大体ある。
  • デフォルトで入ってるスペルチェッカーは日本語に反応してうるさいので無効にした。

よく分かってないこと

やり方があったら教えて欲しいです。

  • いつでも参照できる補完候補の追加方法→実装されたWebStormのコード補完に新しく候補を追加する方法
  • WebStormを開いてる状態で、もう一回WebStormを開くと複数のウィンドウになるのをタブにまとめる方法→WebStorm-EAP-98.458でタブで開くようになった
  • 分割代入が整形機能で崩れる
  • 配列の最後に,がある時に警告がでるのを消す方法
  • 他のJetBrainsIDEのプラグインの入れ方がよく分からない(対応してないだけ?)

感想

とにかく機能が多くて、まだまだ使いきれない感じでさらにもうすぐ2.0がリリースされるので成長も早いIDEだと思います。
体験版が45日間と長いと思ったけど、1ヶ月使ってもまだ底が見えないので妥当な日数だと分かった。
珍しくタイトルが誇大っぽいけど、(現時点では)最強のJavaScript IDEは「WebStorm」だと言い切れるぐらい圧倒的できの良さ。
周りのJavaScript対応IDEと差がかなり大きいと思うので、後1-2年は追いつけるレベルのものが出てこない予感。
日本でのユーザ数がとっても少ない感じがするので、使ってどんどんブログなどに情報を書いてくれるともっと発展できるソフトウェアだと思うよ。

The best HTML, CSS and JavaScript Editor for Web development :: JetBrains WebStorm
http://www.jetbrains.com/webstorm/
HTML, CSS, JavaScript editing in an intelligent environment :: WebStorm Features
http://www.jetbrains.com/webstorm/features/
WebStorm
Posted in javascript, software | Tags: , , , , , | 2 Comments »

JavaScript対応のIDEをまとめてみた

9月 20th, 2010

JavaScriptに対応してるIDEのメモまとめ。

全部試したわけではないですが、個人的にはAptanaやDreamweaverなど有名な所のできは悪くないです。
Aptanaは無料で使えて機能も充実してるので、重くなければもっと使われてる気がします。(JavaScriptだけなら通常のエディタでも十分通用するので好みによりますが)
IDE全般としては、クロスプラットフォームに対応しているのが殆どだったりします。
エディタとIDE、どちらが優れているとかではなくどっちも優れている部分を持っているので使い分けるのが良いと思います。

いろいろ巡った感想としてjQueryをサポートしてますって書いてるものが多いなーと思った。
IxEditとか見てると、JavaScript言語とは別にjQuery言語があるって思われる日がやってきそう。

元ネタ

Good JavaScript IDE with jQuery support – Stack Overflow
http://stackoverflow.com/questions/209126/good-javascript-ide-with-jquery-support
Open Komodo
Posted in javascript, software | Tags: , , , , , , | 4 Comments »

JavaScript向けIDE「Spket IDE」の導入

12月 3rd, 2009

Spket IDEをインストールしてみるメモ。

Spket IDEはJavaScriptのコーディングやXMLなど向けのIDEでAptanaと同様にEclipseのプラグインとしても動作します。
また、Firefox Extension Projectを作成できたりアドオン作成向け機能もある。
今回は単体で動作するスタンドアロンとしてインストールする。

Spket IDEとは何かを詳しく知りたい人は下を読んでみるといいかも。

[Think IT] 第1回：Spket IDEとは何か？ (1/3)
http://www.thinkit.co.jp/free/article/0709/1/1/
Spketを使う | OpenLaszlo JP
http://www.openlaszlo.jp/?q=node/13
ExtJSの開発はSpket IDEがイイ感じ。Eclipseのプラグインでも動く。 – 蜘蛛の糸をつむぐには…
http://djodjo.jp/archives/149
Firefoxアドオン（拡張機能）の作り方
http://masahal.web.fc2.com/addon_lecture/
Eclipse plugin Spket IDE を試してみる – hogehoge
http://d.hatena.ne.jp/teramako/20070409/p1

インストール

上のサイトにインストール手順も書いてあるので重複するけど簡単な流れ

  1. Downloads からSpket IDEをダウンロード
  2. jarファイルなので、java -jar spket-1.6.8.jar みたいな感じでjarファイルを実行してインストーラーを起動
  3. インストーラーでIDEを選びインストール場所とかを決めてインストール
  4. 起動するとWorkspaceを聞かれるので適当に決めて動くか確認。

基本的にはEclipseなので、あんまり問題ないと思います。

日本語化

こちらもEclipseと同じやり方が通用するので簡単な流れ

  1. Pleiades (今回は安定版)をダウンロード
  2. 中身のfeatures、pluginsをSpket IDEに上書き
  3. 起動して日本語になってなければ、Spket IDEフォルダのspket.iniの最後に以下を書き加える
    -javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar=default.splash
  4. 変な動作するなら-cleanオプションを付けて見るといいかも。


日本語化した画面

日本語化した画面

設定

まず最初に設定から文字コードをUTF-8にしておく

メニューより、Windows > Preferences… を選択し、 General > Workspace > Text file encoding において Other をチェックし、 「UTF-8」 を選択する。

Spket IDE, Firebug を使って JavaScript|すぐに忘れる脳みそのためのメモ

感想

  • Aptanaに比べるとかなり軽い
  • コード補完にXPCOMもでてくるのが少しウザイ(拡張機能開発には便利そう)
  • JSDocに対応している
  • アウトラインがわかりやすい
Posted in software | Tags: , , , , | 1 Comment »
プロフィール: azu(ｱｽﾞ)
Firefoxの事やソフトウェアの紹介や使い道、Greasemonkeyの作成
  • OS:Windows Vista, 7
  • ブラウザ:Firefox
  • Twitterのアカウントはこちら
    • azu_re
  • メールアドレス(Twitterの方が確実)
    • info@ドメイン名
リンク

WebMoney ぷちカンパ

^ ページトップへ | このサイトについて | サイト管理
Copyright © 2009 Web scratch. All Rights Reserved.

Powered by WordPress and WordPress Theme created with Artisteer.