2020/7/29 DIST.32 「JetBrainsな夜」 発表資料

自己紹介

• 鹿野 壮（かのたけし）

  

• Twitter

  • https://twitter.com/tonkotsuboy_com

• JavaScriptコードレシピ集

  • https://ics.media/entry/19765/

はじめに

• プログラミングを効率化したい
  • 作業時間の短縮、ケアレスミスの防止、そしてストレスの軽減につながる
• WebStormには、作業効率化のためのさまざまな機能がある
• JavaScript・TypeScriptの作業効率化のために便利なものを紹介する
• WebStormの話ですが、他JetBrains製品でも使えます

作業効率化集

1. アロー関数への変換
   • functionは基本的に使わない（this問題、巻き上げ）
   • function宣言の手動変換は面倒
   • WebStormのアロー関数変換のintentionで一発置換
   • intention機能
     • あなたが書きたいコードはこれじゃないですか？とWebStormが提案してくれる
2. オブジェクトの分割代入
   • 分割代入への手動で切り替えるのは面倒
   • WebStormの分割代入用intentionを使う
   • 多階層の分割代入もらくらく
     • https://twitter.com/tonkotsuboy_com/status/1286228062799945729
3. 関数の切り出しと移動
   • だらだら長い処理は罪である。適宜コードを分割すべき
   • 関数の切り出し + 別ファイルへの移動
     • https://twitter.com/tonkotsuboy_com/status/957821154990768128
   • 類似機能
     • Reactのコンポーネント切り出し
       • https://twitter.com/tonkotsuboy_com/status/1263337914336866304
     • vueのコンポーネント切り出し
       • https://twitter.com/tonkotsuboy_com/status/959304907919536128
4. 早期return
   • ネストの深いコードは罪である。早期returnを心がけるべき
   • 既存のネストが深いコード
     • if/elseのintentionで浅くする
   • 新規の早期return
     • 真偽値.null+[enter]
     • https://twitter.com/tonkotsuboy_com/status/1255775355735928832
   • postfix completion機能
     • .のあとに式を入力することでテンプレートを入力できる
     • カスタマイズも可能
5. ヒント機能
   • TypeScriptの型推論結果を常に把握したい
   • または、推論結果から型注釈を行いたい
   • 設定画面からヒントを表示する
     • https://twitter.com/tonkotsuboy_com/status/1257966968851673089
   • 関数のパラメータのヒント機能も便利
     • https://twitter.com/tonkotsuboy_com/status/1037890528803606528

まとめ

• 「今やっている作業を少しでも効率化できないかな？」という意識を常に持つ
• 困ったらintention（alt + enter）を押す
• Intention、Postfix Completionで何ができるかを一通り把握するだけで、作業効率が上がる