JavaScript で関数単位で細かく実行確認をしながら開発するには

はじめに

会社の先輩からいただいたアドバイスがとても参考になったので、簡単に記事にまとめたいと思います。

状況

JavaScript のテストフレームワークをまだ導入できていないアプリを開発していました。

RSpec の model spec のように、関数単位で動作を確認するということはしておらず、画面確認で複数の関数が動作していることを確認していく、という方法をとっていました。

テストフレームワークを導入をするという選択肢もあるとは思うのですが、当時は機能開発を優先する状況だったので、導入していない状況でどうスムーズに開発していくかを考えていくというところでした。

tl;dr

そんな中会社の先輩とペアプロしたときに、いただいたアドバイスは以下でした。

• 試したい処理を関数に切り出す
• その関数に window. をつけてグローバルから参照できるようにする
• デベロッパーコンソールからその関数を実行しつつ修正していく
• 開発が終わったらwindow. を外す

進め方

試したい処理を関数に切り出す

まず、開発中の機能を関数に切り出します。

const sampleFunction = () => {
  return 'sample function'
}

関数に window. をつけてグローバルから参照できるように

次に、開発している関数をグローバルから参照できるようにします。これにより、ブラウザ上で関数を参照できるようになります。

window.sampleFunction = () => {
  return 'sample function'
}

デベロッパーコンソールからその関数を実行しつつ修正していく

その後、ブラウザのデベロッパーコンソール上で該当の関数を実行して確認します。ここで想定と違う動作をしている場合などは、debugger をつけてデバッグすることもできると思います。

開発が終わったらwindow. を外す

window. がついている状態ですと、いつでも該当の関数を実行できる状態になってしまいます。

開発が終わったら、忘れずにその関数をグローバルに定義した状態から元の状態に戻しましょう。

const sampleFunction = () => {
  return 'sample function'
}

おわりに

方法としてはとても簡単なのですが、自分としてはとても JavaScript の開発がしやすくなりました。

テストフレームワークを使うのが本来あるべきではあると思いますが、今回それが無くても、開発単位を小さくして、開発・確認のサイクルを高速に回す考え方は適用できる、ということを改めて実感しました。

今後 JavaScript の開発でなくても同じ状況に直面したときは、開発・確認を細かくしていく方法を調べて実践できればと思いました。

アドバイスをくださった @mat_aki さんありがとうございました！