トグルホールディングスの鈴木(@suu_dev)です。トグルアドベントカレンダー19日目の記事です。
はじめに
エディタ、IDE は何を使いますか？ React や Vue.js, TypeScript などを扱う方は、VSCode を利用することが多いのではないでしょうか。
WebStorm 自体、聞いたことがない方もいるかもしれません。
知らない、使ったことがない方には、是非知ってほしい WebStorm の素敵な機能たちを紹介します。
WebStorm とは
JetBrains 社製の IDE (統合開発環境) です。 あらかじめ色々な環境が用意されているのですぐにフロントエンド開発を始められます。
公式サイトの紹介欄
https://www.jetbrains.com/ja-jp/webstorm/features/
※ 最近まで有料だったのですが、非商用利用は無料になりました。
Git クライアント
個人的には JetBrains といえば、Git 機能をゲキ推ししたいです。 CLI での操作は一切必要なく、GUI だけで Git 操作が完結します。 視覚的に扱える機能が多いので、ミスが減り、効率もUP間違いなしです。
Github との連携
公式ドキュメントに詳しく書いてあるので割愛しますが、簡単に連携できます！
https://pleiades.io/help/webstorm/github.html
日常の操作
便利度: ★★★★★
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 の保存領域を使うので、ローカルで完結します。 以下みたいなケースのときによく使います。
- 機能開発中に、コードレビューの依頼が来て、一旦退避したいとき
- 機能を作ってみたけど、しっくり来ないとき
便利なのは、一部だけを適用することができます。
差分画面から<<で一部だけを取り込む事もできます。
これ本当に便利です。 ローカルだけで気軽に変更を退避したり、戻したり出来るので、ヘビーユーズしています。
https://pleiades.io/help/webstorm/shelving-and-unshelving-changes.html
コンフリクト修正
便利度: ★★★★★
コンフリクト修正を GUI で簡単に行うことができます。 コンフリクトしている箇所は、赤。 コンフリクトしていない箇所は青で差分が表示されます。
左右で見比べながら、変更を修正できるので、コンフリクトしても焦ることなく作業できます。
ローカルとリモートのコンフリクトしていない青い差分は、下記のボタンを押下することで一気に取り込むことが出来ます。
この差分が0になればコンフリクト解消となります。
Code With Me
便利度: ★★★
コードシェアもできます。 VSCode Live Share と同じような機能です。
そして、この記事を執筆しながら知ったのですが、Code With Me はライブシェア内で通話もできるようです。
ただ私の周りは、みんな VSCode や Cursor を使っているので、Code With Meしたことがありません。やってみたいです。
https://pleiades.io/help/webstorm/code-with-me.html
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の追加、ユニットテストの生成なども実施してくれます。
https://pleiades.io/help/webstorm/ai-assistant.html#install-ai-assistant-plugin
DB 操作
便利度: ★★★★
これは最近無料になりました！ IntelliJ には標準搭載されていましたが、ついに WebStorm でも無料で使えるようになり嬉しい限りです。
IDE 上で直接 DB も操作できてしまうのです。
データソースの登録
ホスト名、ユーザー名、パスワードなどを入力し、Test Connectionでつながっていることを確認します。
JDBC を使って接続するようですね。
データの表示
色々な形式でテーブルを表示することが出来ます。
Table
Tree
Text
フィルタリング
行のフィルタリングも簡単にGUIで実行できます。
クエリの実行
IDE上でSQLのエディターを開き、クエリを実行することができます。
インポート/エクスポート
インポートはCSVやSQLファイル、表データから行うことが出来ます。
エクスポートはCSVやSQL Scriptsなど形式を選んでエクスポートすることが可能です。
https://pleiades.io/help/webstorm/relational-databases.html
おわりに
今回は、私が WebStorm で愛用している機能を紹介しました。 IDE だけで完結でき、様々なツールを行き来する必要がないので、大変開発しやすいと感じています。
この記事では書いていませんが、他にもエディターの機能や、テスト機能、スクリプト実行など便利な機能が備わっています。
ぜひ、WebStorm に触れてみてください！
