Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

状況

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

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

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

tl;dr

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

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

進め方

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

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

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

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

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

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

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

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

4e818391.png

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

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

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

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

おわりに

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

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

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

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

sonicgarden
「お客様に無駄遣いをさせない受託開発」と「習慣を変えるソフトウェアのサービス」に取り組んでいるソフトウェア企業
http://www.sonicgarden.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away