弊社ではHTMLやCSS、JavaScriptを扱うウェブ制作ソフトとして「WebStorm(ウェブストーム)」を採用しています。WebStormは有料のソフトウェアですが、ウェブ制作に役立つ機能が豊富に搭載されていて値段以上の価値があります。今回はWebStormの魅力について、「WebStormの概要」、「ウェブ制作に便利な使い方」、「コードリーディングに重宝する機能」、「コーディングの助けになる機能」の4点から紹介します。IDEAやPhpStorm、その他のIDE(統合開発ソフト)で同様のショートカットや機能を使用できます。5年目のエンジニアが送るWebStormの厳選神業集」では中上級者向けの便利機能を紹介しています。WebStorm経験者は本記事とあわせて続編記事もあわせてご覧ください。WebStormの概要WebStormとはJetBrains(ジェット・ブレインズ)社が提供しているHTML、CSS、JavaScriptの制作ソフトです。HTMLやCSSやJavaScriptの強力なコード補完や、リアルタイムでのJSエラーの検知、デッドコードの検出、リファクタリングが可能です。フロントエンドエンジニアに役立つ機能も充実しています。script)やタスクランナーのGulpの実行もWebStormから実行可能です。WebStorm内にコマンドライン機能が入っているため、「ターミナル。app」や「コマンドプロンプト」を起動する必要がなく、ウェブ制作のほとんどの作業がWebStorm内で完結します。WebStormはフロントエンド制作に必要な技術として、Node.js、TypeScript、JSX、Sass、Angular、React、Gitなどとスムーズに連携できるようになっています。基本操作の便利な使い方を覚えよう!ドラッグ&ドロップでプロジェクトを開くWebStormのプロジェクトはフォルダー単位で管理されます。WebStormを起動してからプロジェクトを開けますが、次のようにフォルダーをドラッグ&ドロップすると、素早くプロジェクトへアクセス可能です。macOS:DockにWebStormを配置してフォルダーをドラッグ&ドロップファイルごとの編集履歴が簡単に確認できるWebStorm内ではコードの編集履歴が保存されています。Gitでコミットせず古い状態に戻したくなった場合でも、すぐに戻せて便利です。ファイルごとの更新履歴が残っているので便利。DIFF(更新差分)で編集した箇所もわかりやすいコードリーディングに重宝する機能を覚えよう!CSSのクラス定義やJSの変数・関数の宣言元へコードジャンプCSSのクラス定義や、JavaScriptの変数や関数の宣言へ移動する機能があります。HTMLでclassのCSSを編集するときに、さくっと移動できるので便利です。次のショートカットで移動できるため、コードを探す手間が激減します。宣言の場所でもう一度ショートカットキーを実行することで、使用している変数・関数へジャンプできます。変数・関数の使用箇所を一覧で見たい場合には[Find]パネルを開くと便利です。ここでの検索は単純な文字列での検索ではなく、WebStorm内のコード解析機能によって調査された使用箇所が表示されます。Usage]ショートカットでファイルを開くファイルを開くときわざわざファイルツリーから目的のファイルを探すのは手間です。WebStormではショートカットを打つだけで目的のファイルを検索して開けます。検索時に入力する文字列は「部分一致検索」といって、ファイル名の先頭からの入力だけでなくファイル名の途中部分からの検索に対応しています。クラス名を検索シンボル検索という機能ですが、ショートカットでシンボル名(変数名、関数名、クラス名)を検索できます。[ファイルの検索]と同様に「部分一致検索」に対応しています。Everywhere]機能を使うとプロジェクト内のテキストを検索できます。「Shiftキーを2回押す」だけで探せるので、このショートカットを覚えておくだけでも充分に便利です。「あとで作る」の一覧を表示TODOというフォーマットでテキストを残しておくことで、[TODO]パネルに一覧として表示できます。「あとで作る」箇所のメモとしてTODOをコメントとして残しておくと便利です。Windows]→[TODO]で[TODO]パネルを表示します。Source]という設定をオンにすると、現在選択しているソースコードに追従して[プロジェクト]パネル内がスクロールされます。Source]をクリックし、チェックマークを入れます。▼[Project]パネル内が自動スクロールされ、選択されているファイルの位置に移動するコーディングの助けになる機能を覚えよう!コードを自動整形して読みやすくしようコードフォーマットを使うと、インデントや空白のそろえ方、その他の記述揺れを修正し、コードを読みやすく整形できます。HTMLやCSS、JavaScriptなどなんでもコードを読みやすくできるので、重宝します。自分が読みやすいコードは、誰が見ても読みやすい。利用するとよいでしょう。Style]→[JavaScript]で変更できます。最後に編集した行に移動コーディング最中、別のファイルを見に行ったあと、元の編集位置に戻りたいことはよくあります。そんなときは次のショートカットを使うと便利です。Location]コメント文の切り替えショートカットキーで特定の行をコメントにでき、再度の実行でコメントを取り消せます。文字列をコピーした履歴からペーストするWebStorm内でコピーの履歴から選んでペーストができます。リネームリファクタリングのリネーム機能を使うことで、CSSのクラス名やJSの変数名や関数名、その他の名前の変更が一括でできます。複数ファイルをまたいでいても問題ありません。右クリックメニューから[Refactor]→[Rename]変数を自動作成JavaScriptのvarや=を自分で入力せずにショートカットで変数を作成できます。Command+Option+Vキーローカルサーバーでの実行JavaScriptでの開発で、ブラウザーによってはローカルファイルへのアクセスが禁止されているため、表示できないことがあります。いった際には「ローカルサーバー」を立てて実行するのが一般的です。WebStormではローカルサーバーを手軽に使えます。HTMLファイルを選択して、右上に表示されるブラウザーのアイコンをクリックするとhttp://localhost:63342/{ルートのフォルダー名}/{HTMLファイル名}というURLで開かれます。うまくローカルサーバーのURLで開かれなかった場合は、一度http://localhost:63342/{ルートのフォルダー名}にアクセスしてください。Chromeとデバッガーの連携Chromeのデベロッパーツールを使わずに、WebStormから直接デバッグが可能です。WebStormからデバッグできることで、コードと実行の結果が結びつきやすくなり、デバッグがよりしやすくなります。拡張機能をインストールすることなく、利用可能です。Chromeとのデバッガー連携の手順は次になります。‘{HTMLのファイル名}’]を選択するウェブ制作ならWebStormを使おう!WebStormは日本語化されていないため不便だと思うこともありますが、それ以上にウェブ制作に便利な機能がそろっているため使用するメリットが大きいです。WebStorm自体の開発スピードがとても早く、TypeScriptやAngular、React(JSX)、Vue.jsなどライブラリー独自記法への対応が早いため、モダンなコーディングを取り入れやすいです。使いこなせば操作が爆速になる機能のまとめ」ではJavaScript開発に役立つ機能を紹介しています。続編記事もあわせてご覧ください。2018.1でも同様に動作することを確認しています。平成30年7月2日に内容をメンテナンスしています。のぞみインタラクティブデベロッパー。好きな生き物はハムスター、好きな食べ物は豚汁です。ツールは使うより作りたい派。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。