Holmes開発者ブログ

契約マネジメントシステム「ホームズクラウド」の開発者ブログです

IntelliJでVueコンポーネントを書くときに知っておきたい機能3選

この記事は Holmes Advent Calendar 2020 - Qiita 4 日目の記事です。


ここ数日、アンプ購入をきっかけにギター熱が再燃している田中です。

JetBrains 社の提供する IntelliJ IDEA 等の製品は強力な補完を行うことができる高機能な IDE です。

言語ごとに細かなセッティングができ、痒いところに手が届くのでファンも多い IDE かと思います(私もその一人です)

一方で高機能ゆえに、「使いこなせていないなぁ」と感じる方も多いのではないでしょうか。

Holmes では Vue.js を利用しているので、IntelliJ IDEA で Vue.js を書くときに知っておくと良いことを紹介したいと思います。

前提

当たり前ですが公式の Vue プラグインは入れておきましょう!

f:id:s_tanaka:20201204094014p:plain
Preference > Pluginから入れておきましょう

Extract Vue Component を使う

あまり知られていないですが、IntelliJ の機能で単一ファイルコンポーネントの切り出しができます。

Vue.js—IntelliJ IDEA | Vue working with VueComponents extract component

  1. template 内を範囲選択
  2. Alt + Enter or 右クリック →Refactoring
  3. Extract Vue Component

とすることで選択した範囲の html、関連する要素を別ファイルに切り出してくれます。

f:id:s_tanaka:20201204094821g:plain
ListをVueComponentに切り出している

なんという神機能!

優秀なポイントとして、関連する script 内の data や computed を良い感じに props で受け取れるようなコンポーネントにしてくれます。

更に、style タグの中身が pure な css の場合、要素の class や id の style ごと移植してくれます(これだけのために SCSS での BEM 記法を辞めても良いと思えるほど…)

ロジックの実装に熱中していたり、リファクタリングの時間が無いと、ついついモノリシックなコンポーネントが出来上がりがちです。

コンポーネント指向のフレームワークにおいては

  • 責務
  • 再利用性
  • テスト容易性

の観点からコンポーネントは小さくしてなんぼです。ガンガンコンポーネントを切り出しましょう!

vcomputed 等の LiveTemplate を使う

LiveTemplate や Postfix completion をよく使う方はご存知かもしれません。

computed: { 
  someComputedValue() { }
}

や、

data() {
   return { }
}

等は、Vue において頻出イディオムと言えます。

IntelliJ ではこれらの入力を補助する LiveTemplate があります。

  1. vcomputed or vdata と入力する
  2. Tab or Enter

で上記のイディオムを挿入することができます。

f:id:s_tanaka:20201204095025g:plain
vdataでdata optionを挿入

他にもテンプレートや Vuex 用の LiveTemplate があるので眺めてみると良いと思います。

余談ですが、LiveTemplate は頻出イディオム集なので、初めて触る言語の LiveTemplate を眺めると言語のコツがつかみやすいです。

f:id:s_tanaka:20201204095123p:plain
LiveTemplateの編集画面

IntelliJ 上でフロントエンドのデバッグをする

通常フロントエンドのデバッグ、簡単なものであれば console.log 、入り組んだものになると ChromeDevToolVueDevTool で行うことが多いです。

ですが、可能であればエディタ上でブレークポイントを貼ることができれば直感的だと思います。

IntelliJ では npm script を Debug 実行することでフロントエンドのデバッグIntelliJ 上で行うことができます。

  1. 開発モードが有効になっている Vue の devserver 起動コマンド or それを登録した npm script を IntelliJ 上でデバッグ実行
  2. デバッグ実行でターミナル上に表示される localhost の URL を Shift + Cmd を押しながらクリック
  3. IntelliJ のデバッガーと接続している Chrome が立ち上がるので、IntelliJ 上でお好みの位置にブレークポイントを貼る

Vue.js—IntelliJ IDEA | Vue running and debugging

これで IntelliJ 上から出ることなくデバッグができますね。

ただし、Nuxt 固有の SSR でのみ実行されるライフサイクル(asyncData や fetch)ではブレークポイントに引っかかりませんでした。

SSR では設定にひと手間いるようです。

Nuxt.js Debugging with WebStorm. Get Nuxt.js debugging up and running… | by Fernando Alvarez | Medium

まとめ

これらの機能を使いこなせるようになると実装スピードがグンと上がると思います。

特に、 Extract Vue Component は億劫になりがちなリファクタリングを助けてくれる神機能だと思います。ガンガン使って効率化していきましょう!!