LoginSignup
26

More than 5 years have passed since last update.

WebStorm9の新機能(Deep Dive into WebStorm 9's New Features)

Last updated at Posted at 2014-10-31

先日9.0.0にアップデートされたWebStormの新機能についてJetBrainsの中の人が生放送で解説するウェビナー、「Deep Dive into WebStorm 9's New Features」が、10月30日17:00-18:00(日本時間10月31日2:00-3:00)に開催されました。その中で紹介された新機能・Tipsと質疑応答の中から興味深いものをまとめます。

ウェビナーの様子は近日中に動画がアップされます。

[追記]
公式ブログに動画と記事が投稿されました
http://blog.jetbrains.com/webstorm/2014/10/webinar-recording-a-deep-dive-into-webstorm-9s-new-features/

React and JSX

最初に紹介された新機能はReactJSXについてです。

ReactはUI構築のためのJavaScriptライブラリで、JSXはその記述をサポートするライブラリです。

環境構築

まずは空のプロジェクトを作って、Reactをインストールしましょう。

bower install react

index.htmlを作り、ReactとJSXを使うためのライブラリと自分のスクリプトを読み込むところまでやるとこんな感じです
react_1.PNG

Tips: Class Name Completion

scriptのsrcでいちいち階層ごとに補完させて入力しなくても末尾のファイル名だけでパスを補完できます。デフォルトではCtrl+Alt+Spaceです。
reactjs.gif

JSXを有効にする

app.jsにいきなりJSXを書いてみましょう

React.render(<h1>Hello World!</h1>, document.getElementById("app"));

まだJSXは有効になっていないのでエラー表示されます。エディタの上部にJSXを使うかどうかのポップが出るので、Switchをクリックしましょう。
reactjs_2.gif

index.htmlにReactと接続するためのノードを追加し、app.jsのtypeをtext/jsxに変更したら完成です。
react_2.PNG

キャプチャ.PNG

Reactのコンポーネントを使う

React.createClassを使うと、独自のコンポーネントを作ることができます。作ったコンポーネントはWebStorm上で独自のタグと解釈され、定義元へのジャンプが可能になります。
reactjs_3.gif

Tips: Save As Live Template

よく使うスニペットはLive Templateとして登録すると便利です。メニューの[Tool]>[Save As Live Template]を使うと簡単にLive Templateを追加できます。

reactjs_4.gif

$name$はユーザー定義の変数です。ユーザー定義の変数をすべて埋め終わった後にカーソルを合わせたい場所に$END$を書いておくと便利です。

Meteor

次はMeteorフレームワークのサポートです。

環境構築

Meteorのインストールはこちらを参考にしてください。インストールが完了したら、WebStorm 9の新規プロジェクトからMeteor JS Appを選択しましょう。
meteor_1.gif

デバッグ実行

Meteorアプリケーションを実行するにはMeteor用のプロファイルを用います。[Run]>[Edit Configurations]から、Meteorプロファイルを追加しましょう。実行時に自動でブラウザとデバッガが立ち上がるようにしておくと便利です。このデバッガ起動のチェックはクライアントサイドにだけ作用します。プロファイルをデバッグ実行することで、同時にクライアントサイドとサーバーサイドどちらのコードでもデバッガがブレークポイントで停止するようになります。
meteor_1.PNG

Spy-js

Spy-jsの基本的な使い方はこちらを参考にしてください。今回はWebStorm 9で新たに追加された機能についての解説です。

Spy-jsでトレースした結果から補完候補を作ることができます。この機能を有効にするには、Spy-jsを実行したあと、Spy-jsウィンドウの設定からEnable spy-js autocomplete and magnifierをオンにします。その後トレースを行うと補完候補にspy-jsのおじさん(Spy Guyというらしい)が出てきて、そのオブジェクトが実際に持っていたメンバーが表示されます。
spy-js_2.gif

Tips: Cyclic Expand Word

文字列リテラルの中身など、静的解析では補完できないものを補完するのに便利な機能です。ファイル中の単語を順番に補完してくれます。前方一致も可能です。デフォルトではAlt+/に割り当てられています。
spy-js_1.gif

Gulp

Gulpのサポートも追加されています。プロジェクト中のgulpfile.jsを右クリックすると"Show Gulp Tasks"が出てきます。Gulpウィンドウでは定義されているタスクを一覧し、タスクの実行、ソースへのジャンプが可能です。
gulp_1.gif
また、GulpのタスクはSearch Everywhereで検索可能です。
gulp_2.gif

EditorConfig

EditorConfigもWebStorm9からサポートされました。プロジェクト内にある.editorconfigを解釈し、コードフォーマッティングに利用します。機能を有効にするには設定の[Editor]>[Code Style]からチェックボックスをオンにします。
edtcfg_1.PNG

Postfix Completion

最後はPostfix Completionです。IntelliJ IDEAなどではすでに導入されていてお馴染みの機能ですが、ついにWebStormでも利用可能になりました。
オブジェクトなどの後ろに.<postfix>と書いてTabで補完することで面倒な記述を自動でやってくれます。例として.log.ifなどがあります。現時点では独自のPostfixを作ることはできません。
post_1.gif

post_2.gif


以下は質疑応答の一部です。

Q. Emberはサポートされますか?
A. WebStorm 10でサポートすることは決めてますが具体的な計画はまだ決まってません。

Q: EXT JS v5はサポートされますか?
A: まだサポートの計画はないです。追加してほしい機能はイシュートラッカーに( http://youtrack.jetbrains.com )で提案してくれると嬉しいです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26