みなさんはウェブサイト制作で、どのテキストエディターを使用していますか? 弊社ではHTMLやCSS、JavaScriptを扱うウェブ制作ソフトとして「WebStorm(ウェブストーム)」を採用しています。WebStormは有料のソフトウェアですが、HTMLコーディングに便利なショートカットやJS開発の機能が豊富に搭載されていて値段以上の価値があります。

今回はWebStormの魅力について、「WebStormの概要」「web制作に便利な使い方」「コードリーディングに重宝する機能」「コーディングの助けになる機能」の4点から紹介します。

※ 本記事はWebStormにて検証していますが、開発元のJetBrains社が提供しているIntelliJ IDEAPhpStorm、その他のIDE(統合開発ソフト)で同様のショートカットや機能を使用できます。
※ 本記事の機能はWebStorm 2016.1、Windows 10およびOS X El Capitanにて動作検証を行いました。

WebStormの概要

WebStormの操作画面

WebStormとはJetBrains社が開発しているHTML、CSS、JavaScriptに対応した統合開発ソフトです。HTMLやCSSやJSの強力なコード補完や、リアルタイムでのJSエラーの検知、デッドコードの検出、リファクタリングが可能です

また、フロントエンドエンジニアに役立つ機能も充実しています。Node.js(npm script)やタスクランナーのGulpとGruntの実行もWebStormから実行可能です。WebStorm内にコマンドライン機能が入っているため、「ターミナル.app」や「コマンドプロンプト」を起動する必要がなく、web制作のほとんどの作業がWebStorm内で完結します

※ Node.js、TypeScript、CoffeeScript、Sass、Less、Stylus、AngularJS、Angular2、React、Gitなど様々なテクノロジーをサポートしています。

基本操作の便利な使い方を覚えよう!

ドラッグ&ドロップでプロジェクトを開く

WebStormのプロジェクトはフォルダー単位で管理されます。WebStormを起動してからプロジェクトを開けますが、次のようにフォルダーをドラッグ&ドロップすると、素早くプロジェクトへアクセスできます。

▼ Windows:WebStormのショートカットに向かってフォルダーをドラッグ&ドロップ

WebStormでプロジェクトを開くGIFアニメ(Windowsにて)

▼ OS X:DockにWebStormを配置してフォルダーをドラッグ&ドロップ

WebStormでプロジェクトを開くGIFアニメ(OS Xにて)

※ プロジェクトとしてフォルダーを開くとWebStormの設定ファイルの.ideaフォルダーが作成されます。

ファイルごとの編集履歴が簡単に確認できる

WebStorm内では初期設定でファイルの編集履歴が保存されています。比較的頻繁に編集履歴が保存されていて、WebStormを終了させた後でも編集履歴は残っています。たまたまGitでコミットせず古い状態に戻したくなった場合でも、すぐに戻せて便利なので覚えておくとよいでしょう。

  1. [Project]パネル内のファイルを選択し、右クリックメニューから[Local History]→[Show History]を選択
  2. 戻したいファイルを選んで右クリック後[Revert]を選択

160729_webstorm_history

▲ ファイルごとの更新履歴が残っているので便利! DIFF(更新差分)で編集した箇所もわかりやすい

コードリーディングに重宝する機能を覚えよう!

CSSのクラス定義やJSの変数・関数の宣言元へコードジャンプ

CSSのクラス定義や、JavaScriptの変数や関数の宣言へ移動する機能があります。例えばHTMLでclassのCSSを編集するときに、さくっと移動できるので便利です。次のショートカットで移動できるため、コードを探す手間が激減します。

  • Windows:Ctrl+Bキー、もしくはCtrl+クリック
  • OS X:Command+Bキー、もしくはCommand+クリック

WebStormの検索窓が出てきて様々な検索ができる

※ 宣言の場所でもう一度ショートカットキーを実行することで、使用している変数・関数へジャンプできます。

変数・関数の使用箇所を検索

上記の[コードジャンプ]機能で変数や関数への移動はできますが、一覧でじっくり見たい場合もあります。そういった場合は[Find]パネルを開くと便利です。ここでの検索は単純な文字列での検索ではなく、WebStorm内のコード解析機能によって適切にコードが検索されます

  • Windows:変数(関数)を選んだ状態でAlt+F7キー
  • OS X:変数(関数)を選んだ状態でOption+F7キー
  • メニューから[Edit]→[Find]→[Find Usage]

WebStormのFindパネル

ショートカットでファイルを開く

ファイルを開くときわざわざファイルツリーから目的のファイルを探すのは手間です。WebStormではショートカットを打つだけで目的のファイルを検索して開けます。検索時に入力する文字列は「部分一致検索」といって、ファイル名の先頭からの入力だけでなくファイル名の途中部分からの検索に対応しています。

  • Windows:Ctrl+Shift+Nキー
  • OS X:Command+Shift+Oキー

ファイルの検索

※「piyo」を検索する場合、「iy」としても部分一致で検索が可能です。

変数名・関数名・クラス名を検索

シンボル検索という機能ですが、ショートカットでシンボル名(変数名、関数名、クラス名)を検索できます。[ファイルの検索]と同様に「部分一致検索」に対応しています。

  • Windows:Ctrl+Alt+Shift+Nキー
  • OS X:Command+Option+Oキー

なんでも検索

[Search Everyone]機能を使うとプロジェクト内のさまざまなテキストを検索できます。上記で紹介した方法でファイル名や変数名、関数名、クラス名の検索は可能ですが、「Shiftキーを2回押す」だけで探せるので、このショートカットを覚えておくだけでも充分に便利です。イチバンのオススメです。

  • Windows:Shiftキーを2回連続で押す
  • OS X:Shiftキーを2回連続で押す

WebStormの検索窓が出てきて様々な検索ができる

▲ 検索窓が表示され、さまざまな検索が可能

「あとで作る」の一覧を表示

TODOというフォーマットでテキストを残しておくことで、[TODO]パネルに一覧として表示できます。「あとで作る」箇所のメモとしてTODOをコメントとして残しておくと便利です。

// TODO

操作方法は、メニューから[View]→[Tool Windows]→[TODO]で[TODO]パネルを表示します。

WebStormのTODOリストの表示

▲ [TODO]パネル内にプロジェクト内のTODOが表示されている

ソースコードとプロジェクトパネルの連携

[Project]パネルの[Autoscroll from Source]という設定をオンにすると、現在選択しているソースコードに追従して[プロジェクト]パネル内がスクロールされます。

▼[Project]パネルの、[歯車]アイコン→[Autoscroll from Source]をクリックし、チェックマークを入れます。

WebStormのAutoscroll from Sourceの設定

▼[Project]パネル内が自動スクロールされ、選択されているファイルの位置に移動する

WebStormのパネル内が自動スクロールされ、選択されているファイルの位置に移動する(OS X)

次のページでは「コーディングの助けになる機能」について紹介します。