4日目 WebStorm 編「WebStorm は全部盛りなので楽」 2017年圧倒的成長振り返り一人アドベントカレンダー


この記事は ” 2017年圧倒的成長振り返り一人アドベントカレンダー ” の 4日目です

https://adventar.org/calendars/2747

アドベントカレンダーに乗り遅れ、参加できそうなものがなかったので行われる、孤独な一人アドベントカレンダー。4日目の今日は、WebStorm 編です。

通算 10 記事、WebStorm について書きました。

  1. webstorm 差分チェック(diff)のショートカット 2017年12月1日
  2. webstorm standard js成形 2017年10月16日
  3. Webstorm reformat codeの設定 2017年6月7日
  4. WebStorm の設定を複数の端末で共有する 2017年4月8日
  5. WebStorm Bitbucket 2017年3月26日
  6. Webstorm EAP 版が Vue.js をサポートしたので使ってみました 2017年3月16日
  7. WebStormでコードをチェックする 2017年1月19日
  8. WebStormのエディターの色を変える 2017年1月19日
  9. WebStormのKeymapを他のパソコンに移行させる 2017年1月13日
  10. WebStormのショートカットキー 2016年11月19日

元々は Atom を使っていたのですが、沖さんが JetBrains 製品を使われていたので、私も便乗して WebStorm にしました。自分の周りの強いウェブ開発者は、WebStorm (もしくはその上位バージョンにあたる IntelliJ IDEA) か VSCode を使っています。

VSCode はやはり軽いです。また無料なので、今からウェブ開発を始める人には VSCode をおススメさせていただいています。非力なパソコンでもサクサク動きます。

WebStorm は全部盛りで、プラグインの追加や設定をせずとも、最初から必要なものが揃っています。また Version Control を WebStorm ないでできるのが便利です。

Version Control

差分をいつもエディターないで簡単に見れて、今見ているファイルをエディターで開く、なんてことが簡単にできるのが連携しているポイントだと思います。SourceTree のほうが高機能な部分もありますが、(例えばファイル全体ではなくて、特定の行だけをコミットに取り出すなど) いつものエディターでコミットできて、差分をチェックできて、連携しているからこそ実現できる一発で差分が生じている行に移動ができる、というのはかなり快適です。

npm script の実行

package.json に書かれた npm スクリプトを実行するための機能があります。これをつかえば、毎回 npm start とか npm run build とか打たなくていいので楽です。

あと地味にいいのは、例えば package.json が開発ディレクトリの直下にない場合、プロジェクトを開くたびに、毎回 cd fornt とかって移動してから npm コマンドを叩くことになるわけですが、WebStorm ならそれも必要ないです。package.json のある場所を指定してあげれば、この機能でそのままアクセス可能です。

また、プロジェクトを開いた時に絶対実行するスクリプトを登録しておけば、自動的に実行してくれます。地味に楽です。

他にも次の記事が参考になります。

ウェブ制作にはWebStormがお勧め! 使いこなせば操作が爆速になる機能のまとめ

http://ceblog.mediba.jp/post/143350750932/webstorm%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E5%BF%AB%E9%81%A9web%E9%96%8B%E7%99%BA%E3%81%AE%E3%82%B9%E3%82%B9%E3%83%A1

常に使っている機能

  • cmd + shift + O → ファイル検索
  • cmd + 数字でタブを切り替える。1 プロジェクト、4 run、9 バージョンコントロール
  • esc → エディターウィンドウに戻る
  • alt + F12 ターミナルを開く
  • cmd + b → JS の変数、関数、CSS のクラスの宣言元に移動する。宣言の場所でもう一度ショートカットキーを実行することで、使用している変数・関数へジャンプする。
  • cmd + K → コミット
  • cmd + shift + K → プッシュ
  • cmd + T → アップデートプロジェクト
  • cmd + i (に自分で設定)→Select in Project View(今見ているファイルを左側のプロジェクトタブで開く)

知っているはショートカットを忘れてしまっていつも使えていない機能

  • Option+F7 → 変数・関数の使用箇所を一覧表示
  • Command+Option+O → 変数名・関数名・クラス名を検索
  • Command+Shift+Delete → 最後に編集した行に移動
  • Command+Shift+V → 文字列をコピーした履歴からペーストする
  • alt + 上下 → 単語単位で選択範囲を広げる
  • Shift+F6 → リネーム

今後使いたい機能

REST Client

今は Google 拡張の Restlet Client を使っていて、これもいいのですが、WebStorm 内にあるのであればこれを使っていきたいなと。

Debug を WebStorm から

https://www.jetbrains.com/help/webstorm/debugging-javascript-in-chrome.html

Chrome でいつもはデバッグしていたのですが、なんと WebStorm 内でデバッグ可能。現在レンダリングされている HTML も見れる。もちろん Node で立てたサーバー内でも実行可能。使えたら便利そうです。

比較系

WebStorm/PhpStormが備える差分抽出(Diff)機能まとめ

  • ローカル履歴と現在のファイルを比較する。
  • ブランチごとの比較。

  • Deployment(Automatic Upload)
  • Directoies ディレクトリの役割を決める。ルートパスなど。
  • JavaScript Libraies 外部のJavaScriptライブラリを読み込んでコード補完を行えるようにする機能。

今後もガンガンウェブストームの機能を覚えて、自動化できることは自動化していきたいと思います。

VSCode 使っている人をみていて軽そうで羨ましいというのはありますが、むしろ最速のパソコンを買えばいい。毎年最速のパソコンが買えるように稼ぎたいと思います。

一人アドベントカレンダーはまだまだ続きます。

Leave a Reply

Your email address will not be published. Required fields are marked *