はじめに
bubbleで開発をしてリリースするために、開発工程で何回も動作に不具合はないか、しっかりと思い描いているような動きをしているのかという検証を行うかと思います。今回紹介するデバッカーという機能は、開発工程で欠かすことができないバクを修正する検証を行う上で、とても重要な役割を担っています。しかし、以前の私もそうであったように、bubbleを学習している初学者にとってはあまりなじみのない機能ではないでしょうか。
デバッカーとは
まず初めにデバッカーとは、コンピュータープログラムの誤り・不具合・欠陥といったバグを探して取り除き、修正する（デバッグする）作業を専門に行うソフトウェア、または作業者。（引用：https://kotobank.jp/word/%E3%83%87%E3%83%90%E3%83%83%E3%82%AC%E3%83%BC-6384）のことを意味します。
つまり、バグを見つけて修正する機能であり、作業者であるという二つの意味を含みます。ではここで、なぜデバッカーが重要なのかについて一言で表現すると、フローの検証で必要不可欠な要素だからです。先ほども述べたように、開発段階のサービスでは、多くのバグや不具合が発生します。
そのバグの種類もいろいろあり、単純にシステムとして機能しなかったり、設定した方法ではデータベースに反映されていなかったなどworkflowの設定ミスだったりなど様々です。特に後者の場合、Previewで実際にフローの検証を行ったとしたとて、なぜうまく動いていないのか判断するのは難しいことと思います。つまり、デザインがどのように変化しているのかについては視覚的に判断できたとして、裏のバックエンドでどのような動きをしているのかまったく把握することができません。このようにバグや不具合がどこでどういった原因で起きているのかを把握するためにデバッカーという機能がとても重要になります。
デバッカーの機能
長々とデバッカーの重要性について説明してきました。改めてデバッカーの機能について説明すると、workflowの動きを確認する機能、elementがどのような設定なのかを把握する機能の2つが主な機能としてあげられる。下記の画像はToDoアプリのデバッカーモードですが、workflowの流れを瞬時に把握できます。
画像の例では、ボタンを押したときに、inputに反映された新しい情報を追加するというフローになります。次に実際に値を入力した画面で、elementがどのような設定なのかについてみていきましょう。
先ほどの画像とは違い、データベース上にUserが入力した情報がしっかりと反映されていることがわかると思います。その情報がどこのelementの設定なのかを把握する方法が右に表示されている情報になります。画像の情報ですと、Multilineinput Parent group’s 今月の達成2といelementに値が入っていると把握することができます。このように、workflowの動きや、elementがどのような設定なのかを把握するときに、デバッカー機能はとても便利な働きをしています。
まとめ
いかがだったでしょうか。今回は開発工程で便利なデバッカー機能について解説しました。開発を何回も経験しているエンジニアにとっては当たり前の話かもしれませんが、bubbleを学習し始めた初学者の方やまだ実際にサービスをリリースしたことがない方にとっては、あまりなじみのない話だったかと思います。実は僕もつい最近まで知りませんでした。ですが、学習ハードルはそれほどないにも関わらず、とても便利な機能になりますので、是非ご活用ください！
<div class="hs-cta-embed hs-cta-simple-placeholder hs-cta-embed-135159095325"
style="max-width:100%; max-height:100%; width:210px;height:60.78125px" data-hubspot-wrapper-cta-id="135159095325">
<a href="https://cta-service-cms2.hubspot.com/web-interactives/public/v1/track/redirect?encryptedPayload=AVxigLL1zNYGQ6A%2BfrWgxqEpKFmoAwuY36ZOowC2YzLlhuIaA9TOlIntI0OhikeqPZpshUd1yTncGP4E%2FC00SNTlS8j%2Fwp1vywjgtpCOQ6LGjwAbfbITPY2uM3LDmqHO6mLDJ%2FbJx4BrJJN3Xa3A4VWGIOKIgclmvc5Q7rTF62C9knmzIxRUmr5J&webInteractiveContentId=135159095325&portalId=5234691" target="_blank" rel="noopener" crossorigin="anonymous">
<img alt="パワープラットフォームが気になる" loading="lazy" src="https://no-cache.hubspot.com/cta/default/5234691/interactive-135159095325.png" style="height: 100%; width: 100%; object-fit: fill"
onerror="this.style.display='none'" />
</a>
</div>