はじめに

エディタ、IDE は何を使いますか？
React や Vue.js, TypeScript などを扱う方は、VSCode を利用することが多いのではないでしょうか。

WebStorm 自体、聞いたことがない方もいるかもしれません。

知らない、使ったことがない方には、是非知ってほしい WebStorm の素敵な機能たちを紹介します。

WebStorm とは

JetBrains 社製の IDE (統合開発環境) です。
あらかじめ色々な環境が用意されているのですぐにフロントエンド開発を始められます。

公式サイトの紹介欄

※ 最近まで有料だったのですが、非商用利用は無料になりました。

Git クライアント

個人的には JetBrains といえば、Git 機能をゲキ推ししたいです。
CLI での操作は一切必要なく、GUI だけで Git 操作が完結します。
視覚的に扱える機能が多いので、ミスが減り、効率もUP間違いなしです。

Github との連携

公式ドキュメントに詳しく書いてあるので割愛しますが、簡単に連携できます！

日常の操作

便利度: ★★★★★

`git fetch` 的な操作

ボタンを押すだけで fetch を実行します。
このあたりは VSCode と同じかもしれません。

`git pull` 的な操作

git pull もボタン一つで実行されます。

`commit` ログの表示

変更の差分を表示することができます。
必要なファイルだけチェックを入れて、 Commit することができます。

Mac: command + k
Windows: ctrl + k

チェックボックスをONにするだけで、 amend commit もできるのが便利です。

`push` 作業

Mac: command + shift + k
Windows: ctrl + shift + k

commit のリセット

cherry-pick とか

cherry-pick も GUI で一瞬で完了です。

merge or rebase

GUI ですぐにできます。

スカッシュなどもできます

このコミットいらないなー

そんなときはコミットの破棄も簡単に実行できます。

シェルブ機能

便利度: ★★★★★

修正中の変更を退避することができます。
退避したファイルなどは、シェルブタブから確認することができます。

右クリック > アンシェルブ ですぐにファイルを作業時の状態に戻すことが出来ます。

Git stash に似ていますが、シェルブは IDE の保存領域を使うので、ローカルで完結します。
以下みたいなケースのときによく使います。

機能開発中に、コードレビューの依頼が来て、一旦退避したいとき
機能を作ってみたけど、しっくり来ないとき

便利なのは、一部だけを適用することができます。

差分画面から<<で一部だけを取り込む事もできます。

これ本当に便利です。
ローカルだけで気軽に変更を退避したり、戻したり出来るので、ヘビーユーズしています。

コンフリクト修正

便利度: ★★★★★

コンフリクト修正を GUI で簡単に行うことができます。
コンフリクトしている箇所は、赤。
コンフリクトしていない箇所は青で差分が表示されます。

左右で見比べながら、変更を修正できるので、コンフリクトしても焦ることなく作業できます。

ローカルとリモートのコンフリクトしていない青い差分は、下記のボタンを押下することで一気に取り込むことが出来ます。

この差分が0になればコンフリクト解消となります。

Code With Me

便利度: ★★★

コードシェアもできます。
VSCode Live Share と同じような機能です。

そして、この記事を執筆しながら知ったのですが、Code With Me はライブシェア内で通話もできるようです。

ただ私の周りは、みんな VSCode や Cursor を使っているので、Code With Meしたことがありません。やってみたいです。

AI Assistant

便利度: ★★★

Github Copilot のような機能です。有料機能です。
2024/12/19 現在は税込み1430円です。

わたしは、会社の経費で利用させていただいております。ありがとうございます！！

Chat形式で OpenAI-gpt-4oや、gemini-pro-1.5 などのモデルが利用可能です。

#を活用することで、より多くのコンテキストを与えることができます。

command	説明
#thisFile	現在開いているファイルを参照します。
#selection	エディターで現在選択されているコードの一部を参照します。
#localChanges	コミットされていない変更を指します。
#commit	プロンプトにコミット参照を追加します。呼び出されたポップアップからコミットを選択するか、コミットハッシュを手動で書き込むことができます。
#file	現在のプロジェクトからファイルを選択できるポップアップを呼び出します。ポップアップから必要なファイルを選択するか、ファイル名 (例: #file:Foo.md) を入力します。
#symbol	プロンプトにシンボルを追加します (例: #symbol:FieldName)。
#schema	データベーススキーマを参照します。データベーススキーマをアタッチすると、スキーマのコンテキストで生成された SQL クエリの品質を向上させることができます。

予測入力機能もあります。
予測入力の精度は、肌感で Github Copilot のほうが良い気がしています。

選択項目に対して、リファクタリングの提案や、Docsの追加、ユニットテストの生成なども実施してくれます。

DB 操作

便利度: ★★★★

これは最近無料になりました！
IntelliJ には標準搭載されていましたが、ついに WebStorm でも無料で使えるようになり嬉しい限りです。

IDE 上で直接 DB も操作できてしまうのです。

データソースの登録

ホスト名、ユーザー名、パスワードなどを入力し、Test Connectionでつながっていることを確認します。

JDBC を使って接続するようですね。

データの表示

色々な形式でテーブルを表示することが出来ます。

Table

Tree

Text

フィルタリング

行のフィルタリングも簡単にGUIで実行できます。

クエリの実行

IDE上でSQLのエディターを開き、クエリを実行することができます。

インポート/エクスポート

インポートはCSVやSQLファイル、表データから行うことが出来ます。

エクスポートはCSVやSQL Scriptsなど形式を選んでエクスポートすることが可能です。

おわりに

今回は、私が WebStorm で愛用している機能を紹介しました。
IDE だけで完結でき、様々なツールを行き来する必要がないので、大変開発しやすいと感じています。

この記事では書いていませんが、他にもエディターの機能や、テスト機能、スクリプト実行など便利な機能が備わっています。

ぜひ、WebStorm に触れてみてください！