5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

VSCodeを使っているフロントエンドエンジニアがWebStormについて調べてみた

Last updated at Posted at 2022-06-20

本記事について

何の迷いもなく、フロントエンドエンジニアとしてVSCodeを2年間使っていたのですが、
たまたまWebStormについて調べる機会があったので、まとめてみました!
VSCodeにはなさそうな便利機能をざっくりご紹介できればといった感じです。

そもそもIDEとは

統合開発環境(:Integrated Development Environment)のこと

IDEの特徴

  • 起動遅め
  • メモリ大量に使いがち
  • プラグインなしでも色んな事出来ちゃう

具体的には

  • IntelliJ IDEA
  • WebStorm
  • Eclipse
  • Android Studio
  • Visual Studio
  • PyCharm

などなど

対して、テキストエディタとは

テキストエディタの特徴

  • 起動はやい
  • 動作も軽い
  • 標準で出来ることが少ない(裏を返せば、自分好みにカスタマイズできる)

具体的には

  • Visual Studio Code
  • Atom
  • Vim
  • Emacs

などなど。

本題) WebStormについて

WebStormは、JavaScript およびその関連テクノロジでコーディングするための統合開発環境です。
IntelliJ IDEA や他の JetBrains IDE と同様に、WebStorm は開発体験をより楽しくし、日常業務を自動化し、複雑なタスクを簡単に処理できるようにします。

とのこと。
参考) WebStorm

概要

開発は、JetBrains
費用は、法人で年間14,900円(1年目。2年目は20%オフ、3年目は40%オフ)

参考) 購入 WebStorm

VSCodeと違って、無料ではないです。
が、30日間は無料で使うことが出来るようなので、試してみました。

VSCodeと比較したときの便利機能3選

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

VSCodeだと、Ctrl + fで文字列検索ができると思いますが、
WebStormでは、コード解析機能があるので、同じ文字列でも別物として扱ってくれた上で、使用箇所を表示してくれます。

②TODO管理が出来る

// TODO : ~~~~~

と書くことで、IDE内のTODOパネルで管理できるようになります。

image.png

VSCodeでも、やらなきゃいけないことをコメントで書いたりしていたのですが、
何かを書いた記憶だけはあるけど、どこに書いたかがパッと思い出せず、直近で更新したファイルを探しまくる無駄な時間を生み出していたりしていました。。

この機能があると、ファイル単位で管理できるだけじゃなくて、プロジェクト単位でTODOを管理できるので、めちゃくちゃ便利そうです。

③データベース管理機能

データベースの照会、作成、管理ができます。
個人的に一番刺さった機能です。
(VSCodeでもプラグインインストールで、類似の機能は実現できそうですが…)

具体的には

  • MySQL
  • PostgreSQL
  • Microsoft SQL Server
  • SQLite
  • MariaDB
  • Oracle
  • Apache Cassandra

などのサポートがあります。

まずは、データソースへ接続

今回はMySQLへ接続してみようと思います。

  1. 表示 > ツールウィンドウ > データベース

  2. データソースおよびドライバーダイアログのデータソースタブで、追加アイコン(+)をクリックし、MySQL を選択
    image.png

  3. 接続したいDBの接続情報を入力
    image.png

  4. 下部にある「接続のテスト」をクリックして、「成功」が出たらOK

早速、クエリコンソールを使ってみた

クエリコンソールとは、

SQL ステートメントを作成および実行できる SQL ファイルです。スクラッチファイルとは異なり、コンソールはデータソースにアタッチされます。ターミナルを使用するのと同じ方法でクエリコンソールを使用できます。コードを入力して実行するだけです。

クエリコンソールを使って、SELECTやINSERT等なんでも書いて実行することができますが、勿論

  • テーブルやカラムの補完が効く
  • フォーマットしてくれる

だけでなく、

  • テーブルにカーソルを当てると、カラムの情報が表示されて、テーブルプレビューもできる
    • テーブルプレビューでは、テーブルに入っている最初の10行を表示できる
  • SELECT文で抽出したデータを、WebStorm上でcsvやtsv形式でローカルエクスポートできる

など大分便利な機能がついておりました。
わざわざmysqlコマンドを使う必要もなく、WebStormでデータソースに接続するだけで、色々出来ちゃうのは便利ではないですか??

ざっくりの感想・まとめ

  • WebStormは、VSCodeと比べると起動がめちゃめちゃ遅い。
    • が、一度開いちゃえば気にならない感じ。
  • DB関連の機能がめっちゃ便利そう
  • そして、THE日本人の私からすると、ドキュメントが日本語であるのは超絶ありがたい。

といった感じです。
今後も使っていきたいなぁという気持ちになったものの、お金がかかってしまうのですよね…。
VSCodeに不満があるわけでもないので、このままVSCodeを使い続けることにはなりそうです…笑

何か気になる点などある方は是非コメントなどお願いいたします!

5
1
0

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
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?