この記事は Holmes Advent Calendar 2020 - Qiita 4 日目の記事です。
ここ数日、アンプ購入をきっかけにギター熱が再燃している田中です。
JetBrains 社の提供する IntelliJ IDEA 等の製品は強力な補完を行うことができる高機能な IDE です。
言語ごとに細かなセッティングができ、痒いところに手が届くのでファンも多い IDE かと思います（私もその一人です）
一方で高機能ゆえに、「使いこなせていないなぁ」と感じる方も多いのではないでしょうか。
Holmes では Vue.js を利用しているので、IntelliJ IDEA で Vue.js を書くときに知っておくと良いことを紹介したいと思います。
前提
当たり前ですが公式の Vue プラグインは入れておきましょう！
Extract Vue Component を使う
あまり知られていないですが、IntelliJ の機能で単一ファイルコンポーネントの切り出しができます。
Vue.js—IntelliJ IDEA | Vue working with VueComponents extract component
- template 内を範囲選択
- Alt + Enter or 右クリック →Refactoring
- Extract Vue Component
とすることで選択した範囲の html、関連する要素を別ファイルに切り出してくれます。
なんという神機能！
優秀なポイントとして、関連する script 内の data や computed を良い感じに props で受け取れるようなコンポーネントにしてくれます。
更に、style タグの中身が pure な css の場合、要素の class や id の style ごと移植してくれます（これだけのために SCSS での BEM 記法を辞めても良いと思えるほど…）
ロジックの実装に熱中していたり、リファクタリングの時間が無いと、ついついモノリシックなコンポーネントが出来上がりがちです。
- 責務
- 再利用性
- テスト容易性
の観点からコンポーネントは小さくしてなんぼです。ガンガンコンポーネントを切り出しましょう！
vcomputed 等の LiveTemplate を使う
LiveTemplate や Postfix completion をよく使う方はご存知かもしれません。
computed: {
someComputedValue() { }
}
や、
data() {
return { }
}
等は、Vue において頻出イディオムと言えます。
IntelliJ ではこれらの入力を補助する LiveTemplate があります。
vcomputedorvdataと入力する- Tab or Enter
で上記のイディオムを挿入することができます。
他にもテンプレートや Vuex 用の LiveTemplate があるので眺めてみると良いと思います。
余談ですが、LiveTemplate は頻出イディオム集なので、初めて触る言語の LiveTemplate を眺めると言語のコツがつかみやすいです。
IntelliJ 上でフロントエンドのデバッグをする
通常フロントエンドのデバッグ、簡単なものであれば console.log 、入り組んだものになると ChromeDevTool や VueDevTool で行うことが多いです。
ですが、可能であればエディタ上でブレークポイントを貼ることができれば直感的だと思います。
IntelliJ では npm script を Debug 実行することでフロントエンドのデバッグを IntelliJ 上で行うことができます。
- 開発モードが有効になっている Vue の devserver 起動コマンド or それを登録した npm script を IntelliJ 上でデバッグ実行
- デバッグ実行でターミナル上に表示される localhost の URL を Shift + Cmd を押しながらクリック
- IntelliJ のデバッガーと接続している Chrome が立ち上がるので、IntelliJ 上でお好みの位置にブレークポイントを貼る
Vue.js—IntelliJ IDEA | Vue running and debugging
これで IntelliJ 上から出ることなくデバッグができますね。
ただし、Nuxt 固有の SSR でのみ実行されるライフサイクル(asyncData や fetch)ではブレークポイントに引っかかりませんでした。
SSR では設定にひと手間いるようです。
まとめ
これらの機能を使いこなせるようになると実装スピードがグンと上がると思います。
特に、 Extract Vue Component は億劫になりがちなリファクタリングを助けてくれる神機能だと思います。ガンガン使って効率化していきましょう！！
