【中級者でもやりがち】Bubble開発者が避けるべきミス5選
Bubbleの大きな魅力として、機能の実装がとても容易に出来る点がありますね。ですがその反面、気づかないうちにミスが積み重なっている可能性があります。
ぱっと見ると同じ機能を実装出来ている様に見えても、片方はユーザーやデータが増えた際にアプリが使い物にならなくなり、もう一方はノーコードで開発されたのが気づかないほどパフォーマンスがいいアプリになるということは、開発者次第で簡単に起こり得ます。
そこで今回の記事では、中級者以上の方でもしてしまいがちな、Bubbleでの開発におけるミスを紹介していきたいと思います。
ミス1：不必要な箇所でのSearchのネスト
Searchのネストとは
BubbleにおけるSearchのネストというのは、「Searchの条件式の中に更に別のsearchがあること」を意味しています。
具体的な事例
具体的な例を見てみましょう。
・学校(クラスをリストで持つ)
・クラス(学校に紐づけ)
・生徒(クラスに紐づけ)
というデータ構造を持ったアプリを想像してみましょう。
例えばここで、「ある学校に在籍する生徒の一覧」を取得したいとします。
この場合、下記のように検索を行うことが出来ます。
①Search forでStudentsを指定(=search for students)
②Constraintに、「ある条件で得られたクラス一覧に、生徒が属するクラスが含まれる」(=Class is in Search for Classes)とする
③Search for ClassのConstraintを、「このページの学校に属するクラス」(=School = Current page's School)とする(ページ自体に特定の学校データが設定されていることが前提)
これで「ある学校に在籍する生徒の一覧」を取得することが出来ました。
ですがこの実装方法では後々、アプリの挙動が遅くなることが懸念されます。理由は避けられる箇所でSearchのネスト、つまり非効率的なSearchを行っているためです。
上の検索方法では、
①ある学校のクラス一覧をまず取得
②その次に、①で取得したクラスの中に属する生徒を取得
と、学校 → クラス → 生徒という段階を踏んで最終的に生徒の一覧を取得しています。このネストが、後にデータが膨れ上がった際にパフォーマンス悪化の原因になってしまうわけです。
ネストを解消する改善案
こういったネストの代わりに、Studentデータに、Classに加えてSchoolを紐付け、Studentデータから直接Schoolを参照できるようにすることで、下記のようなよりシンプルな検索が可能になります。
このようにすれば、ネストを解消しシンプルな条件で同じく「ある学校に属する生徒の一覧」を取得することが可能です。
実装のテストをしている段階ではわかりにくいですが、データがより複雑化し多くなると明らかな違いが出ますので、Searchがネストした場合は、DB設計を含めてもっとシンプルに実装する方法はないか？と考えるのがベストです。
ミス2：サーバーサイドで行う処理をフロントで行っている
前提：サーバーで処理する方が速い
大前提として、速度に関しては原則、
サーバー側で行われる処理 > サーバーからデータを受け取った後に行われるフロントでの処理
と考えて差し支えありません。なぜこうなるのかに関しては、また別の記事で解説したいと思います。
Advanced filterを用いた具体的な例
Advanced filter、使っている方は多いかと思います。これ自体が駄目なわけではないですが、使い方を間違えると一気にパフォーマンス悪化の原因となってしまうくせ者です。
例えば下記のような、「名前」「カテゴリー」「タグ」を情報として持つイベントを閲覧出来るサイトを想定します。
この機能をAdvanced filterを乱用して実装してみましょう。
filterの内容は、
・inputから得たキーワードとEventデータのNameが部分一致する
・Dropdownで選択されたCategoryがEventのCategoriesに含まれる
・Dropdownで選択されたTagがEventのTagsに含まれる
というふうに、Regexなどの複雑な式を用いた実装をしています。
基本的にはサーバー側でデータの処理がされる方が速いということを思い出すと、なぜこの実装方法が後々スピードの低下に繋がるかがわかると思います。
例えばEventが10,000件あった場合、この実装方法ですと、
①10,000件のデータをサーバーにリクエストし取得
②10,000件の中から条件にあったデータを抽出
という段階を踏んで最終的にページ上にデータが表示されます。
仮に結果として1個のデータだけが表示される場合でも、1度10,000件のデータを受け取ってから処理が行われると言うことです。
改善例
下記が改善された例です。
Advanced filterがフロントで処理されたのに対して、Search forの条件として設定するこれらの値は全て、サーバー側で処理されます。
これを用いて、データベースにEventが10,000件登録されているケースを再度Advanced filterで実装したパターンと比べてみると、
Advanced filterを用いる場合：一度10,000件サーバーからデータを受けとり、その後条件に合致するかを調べる
Search forの条件のみで完結する場合：10,000件の中から条件に合致するデータのみサーバーから受け取る
という大きな違いが生まれます。
場合によってはフロントで処理するのが適している場合や、そうせざるを得ない場合もありますが、可能であればサーバー側でデータの処理が行われるようにしましょう。
ミス3：ハードコーディング
ハードコーディングとは
プログラムやソフトウェアの中で、データなどを直接書き込むことを意味します。これだけだと意味がわからないと思うので、具体例を見てみましょう。
Bubbleでの具体例
下記は、「イベント一覧をDropdownで選んだカテゴリーでフィルター出来る」という機能を2つのパターンで実装した例です。
左の例では値を直接書き込んでいるのに対して、右の例ではOption setsで設定したカテゴリーを選択出来るように設定してあります。
左の例の何が問題なのでしょうか。
ハードコーディングの問題点
結論から言うと、左の例が良くない理由は、今後値を変更する際や別の場所で再利用したい場合などに、使い勝手が非常に悪くなるからです。
例えば「カテゴリーを基にイベントをフィルター出来る」という機能があるページが5つあるとします。
カテゴリーを追加/編集/削除をしなければいけない場合、これら全てのページで再度直接書き直さないといけない事になります。
Option setsやData typesを使いましょう
これに対して上記の様にOption setsに値を設定し、どこからでも参照出来る様にすることで、追加/編集/削除をしなければいけない場合でも、Option setsだけ修正すればいいので、工数を大きく省くことが出来ます。
ミス4：プラグインに頼りすぎてしまう
Bubbleのプラグイン、非常に便利ですよね。ですが、プラグインの使いすぎは禁物です。
プラグインを使いすぎるのが良くない理由
理由1：いつサポートやメンテナンスが終了するかわからない
Bubbleには、第三者が作成したプラグインが豊富に存在します。
非常に便利なものが多いですので、何か機能が欲しくなるとプラグインを使いたくなるのはわかりますが、プラグインを使用するということは、その分アプリのプラグインに対する依存度が増すこと意味します。
サポートの終了、開発者が更新を止める、など様々な理由でプラグインが機能しなくなることも考えられます。
理由2：Bubbleのスキルが育たない
これは私の意見ですが、少し難しい機能の実装を考えた際に、すぐにプラグインを使用する癖が付いてしまうと、Bubbleのスキルが付きにくくなるのでは、と考えています。
Bubbleで提供されている機能を、少しクリエイティブに使うだけで、「実装できない」と思った機能でも実は実装出来る、というケースがあります。すぐにプラグインを使う癖がついていると、こういったケースでBubbleのスキルを向上する機会が無くなってしまうのではないでしょうか。
ミス5：重複が多い
本来は1つにまとめることで効率よくリソースを抑えて実装できるはずなのに、同じ様なものを重複して使っているケースは非常に多いと思います。
抽象的な説明をしてもわかりにくいので、具体例を見てみましょう。
Popupを用いた具体例
「ユーザーがイベントの作成/編集が出来る」という機能を想定しています。その際のデータの入力には、Popupを使うことが一般的かと思います。
この際に、
・イベント作成用のPopup
・イベント編集用のPopup
を別々で作成するケースをよく見かけます。
必ずしもミスとは言えないかもしれませんが、出来る限りリソースを抑えて実装するという観点から考えると、改善の余地があります。
[作成用のPopup]
[編集用のPopup]
重複を防ぐ改善案
これを一つのPopupで実装する方法として、
下記の様にPopup自体にDataTypeを指定し、
「イベントを作成する」「イベントを編集する」
「作成」「更新」
など作成、編集によって文言が変わる箇所を、下記のような条件分岐を用いてテキストを変更することで、その時々によって必要なパターンのPopupが表示されるようになります。
Workflowも同様に条件を設定することで、イベントの作成・編集に応じて実行される内容を使い分けます。
こうすることで重複を減らし、リソースを抑えつつスリムな実装が出来るようになります。
この他にも同様に、
・Custom event
・API workflow
・Reusable element
などを用いて、重複を無くし効率のいい実装が出来るようになりますが、詳しくはまた別の記事で解説したいと思います。
まとめ
今回の記事では、Bubble開発者が避けるべきミスについて解説しました。
最近はWUの導入もありましたので、ミスを減らすことでパフォーマンスが改善するだけでなく、アプリを運用する費用も削減することが出来ます。
ここで取り上げていないことで何かあれば、ぜひコメント等で教えてください。
最後まで読んでいただきありがとうございました。
この記事の執筆には下記のサイトを参考にしています。
https://docs.airdev.co/canvas/
---------------------------------------------------------------------------------------
Bubbleを用いることで、費用や開発期間を大きく削減しつつも、非常に質の高いwebアプリの制作が可能です。
弊社では、Bubbleを用いた受託開発を行っておりますので、「こういったものを開発したい」といったご相談があれば、お気軽にご連絡ください。
Bubbleを利用したスタートアップ 成功事例7選
この記事では、ノーコードツールBubbleを開発ツールとして採用している国内外のスタートアップについて紹介していきたいと思います。
成功事例
国内
リモートHQ
- 2021年創業
- 合計資金調達額9億円
リモートHQは、リモートワークを実施している企業において、
・従業員が自宅で使用できる備品等を利用できるサービス
・従業員のインターネット代、電気代を非課税で会社負担にするサービス
などの、新しい福利厚生サービスを提供している会社です。
引用：note
ABABA
- 資金調達額6,000万円
「企業の最終面接まで進んだが不採用となってしまった就活生」向けに、お祈りメールを登録することで他社の採用担当者からスカウトを受け取れるサービスです。
引用：プレスリリース
ブラリノ
- 国内初？Bubbleアプリ売却事例
招待状の作成、オンラインご祝儀、事前引き出物選択、写真共有など、結婚式の準備を管理出来るサービスです。
2021年に株式会社Relief Innovationに事業譲渡されたとのことで、恐らく国内では初のBubbleで開発されたサービスの売却事例となったのではないでしょうか。
引用：プレスリリース
海外
BetterLegal
会社設立時における煩雑な書類作成を自動化するサービスで、2017年サービス開始から、現在では年商3億円超とのことです。
これまで月々800万円~1,000万円程度を開発チームに投下し開発・保守をしていたシステムを、たった1ヶ月でBubbleで再構築し、現在もBubbleを継続して利用しています。
引用：Bubble公式HP
Cuure
- 2019年設立
- 資金調達額10億円+
- 従業員30名
カスタマイズされたサプリメントをオンラインで販売するECを展開する企業です。アイディア構想からたった3ヶ月で開発、売上を上げるまでのスピード感で事業を成長させた事例です。
引用：Bubble公式HP
Good Course
- YCombinator採用企業
- 資金調達額1億円+
GoodCourseは、企業や教育機関向けに、コンプライアンスやハラスメントに関する研修をなどを動画を用いて提供するサービスを展開しています。
Bubbleで開発されたサービスを展開する企業がYCombinatorによって採用されることで、ますます多くのスタートアップにおいて、Bubbleが開発手段として受け入れられることになりそうですね。
引用：Bubble公式HP
byword_
- 開発期間4週間
- ユーザー数4,000+
- 生成された記事は10万以上
キーワード等を指定するだけで自動でSEO最適化された記事を生成するサービスです。
BubbleとAIを接続することでこの仕組みを可能にしており、すでに数十万の記事がこのサービスを介して生成されたそうです。
これまでは、
・AIモデルの構築
・モデルを使用できるサービスの開発
を同時にこのスピード感で行うことはほぼ不可能だったのではないでしょうか。AI×ノーコードの優位性がわかる事例でもありますね。
引用：Bubble公式HP
まとめ
今回は、Bubbleを開発手段として利用しているスタートアップの成功事例7選を紹介しました。
国内外で様々な事例が出てきており、Bubbleに対する熱が感じられるようになってきました。
Bubbleを用いることで、費用や開発期間を大きく削減しつつも、非常に質の高いwebアプリの制作が可能です。
弊社では、Bubbleを用いた受託開発を行っておりますので、「こういったものを開発したい」といったご相談があれば、お気軽にご連絡ください。
最後まで読んでいただきありがとうございました。
