【体験談】NoCodeツールBubbleのチュートリアルをやってみた！
皆様こんにちは、taku（@takuNoCode1）です！
平素より格別のご高配を賜り厚く御礼申し上げます。
今回は、NoCodeツールBubbleのチュートリアルで学べることをまとめてみました！
NoCodeツールBubbleの概要につきましては、次の記事で解説しましたので、まずはこちらをご覧ください。
結論から申し上げますと、実際にやってみて非常に有意義なチュートリアルであると感じましたので、その概要と学べることを解説していきます。
1. チュートリアルの概要
Bubbleのホームページで、12個のチュートリアル （LESSONS）が準備されています。全て無料で、1つのチュートリアルは平均5分でクリアすることができ、Bubbleの基本的な機能を学ぶことができます。
1つの操作ごとに、赤い矢印アイコンで指示が出されるので、それに従ってドラッグアンドドロップを行ったり、データを入力したりする流れです。
1度クリアすると「Hard mode」になりますが、内容は同じで、赤い矢印アイコンが隠れている状態でチュートリアルが進みます。分からなくなったら、矢印を表示することができます。
2. チュートリアル学習のメリット
・バックエンドの知識が深まる
・プラグインの使い方が分かる
・実際にサンプルを作成するので、イメージしやすい
2-1. バックエンドの知識が深まる
Bubbleにおいて、バックエンド （データベース周り）で重要となるのが、「Workflow（ワークフロー）」 です。
プログラミングでいうところのコントローラーの役割を果たし、データベースにデータを保存したり、データを変更したりなどの「処理」を作成することができます。
このチュートリアルでは、Workflowの学習がメインとなっておりますので、全てクリアする頃には、簡単な機能を持ったWebアプリは作れるようになると思います。
2-2. プラグインの使い方が分かる
プラグインとは、機能を拡張するためのプログラムのことです。複雑なコードを書かなければ実装できないような機能も、このプラグインをインストールして設定を行うだけで、初心者でも簡単に実装することができます。
チュートリアルの中で、プラグインを使って外部サイトのデータを取得したり、簡単なグラフを作ったりする学習が準備されています。
プラグイン無しでのWebアプリの開発は考えられないほど便利なものなので、必須の学習項目であると思います。
2-3. 実際にサンプルを作成するので、イメージしやすい
ログインシステムやTo-doリストなど、簡単なサンプルを作成しながらの学習であるため、このパターンでは、この機能を使うといったようなイメージができるようになります。
NoCode学習では、何かを作りながら学ぶということが最も良い学習方法であると言われておりますので、効率良くBubbleの機能を学んでいくことができると思います。
3. チュートリアル学習のデメリット
・フロントエンドの学習ができない
・初心者向けの丁寧な解説ではない
3-1. フロントエンドの学習ができない
メリットの1つとして挙げた通り、バックエンド（データベース周り）の学習がメインであるため、フロントエンド（見た目の部分）の解説はほとんどありません。
モバイル版ではヘッダーにハンバーガーメニューを設置したり、コンテンツが綺麗に表示されるように調整したりというような、Webアプリ開発で特に重要なレスポンシブについてはこのチュートリアルでは学ぶことができませんので、別の方法で学ぶ必要があります。
3-2. 初心者向けの丁寧な解説ではない
1つの操作ごとに指示があり、簡単なマウス操作だけで学習できるので、直感的には理解しやすくなっていると思いますが、プログラミング未経験の方にとっては少し難易度が高いように感じます。
コードは書きませんが、データベースの概念など、プログラミング思考が必要になってきます。
4. チュートリアルで学ぶこと
Saving Data
住所をデータベースに保存し、それらを地図上に表示
・入力フォームの値をデータベースに保存
・保存した住所を地図上に表示
Building a sign-up system
簡易的なログインシステムの構築
・新規登録及びログイン機能の実装
・ログイン後にユーザー情報を表示
・ログアウト機能の実装
Saving and modifying data
都市投票アプリを作成
・都市名をデータベースに保存し、投票数の降順で表示
・それぞれの都市名にデフォルトで投票数 1 を設定
・ハートボタンをクリックすると投票数＋1
Building a slideshow
プラグインを導入し、スライドショーを作成
・プラグイン（Slick Slideshow）の導入
・画像のアップロード
Sending data to pages
新規ページへの画像データ受け渡し機能を実装
・画像タイトルをデータベースに保存
・画像をアップロードし、データベースに保存
・画像タイトルにリンクを設定し、新規ページに画像を表示
Using conditions
テキストをマウスオーバーで色変更、フォームに対してアラートを表示
・テキストに対する条件定義
・アラートの作成
・フォームに入力がある場合のみ、アラートを表示
Defining a field as a list of things
各ユーザーごとに買い物リストを作成
・各ユーザーごとにリストを作成
・フォームに入力された値をリストに追加
・アイコンクリックでデータをリストから削除
Using APIs and sending data to groups
プラグインを導入し、GIPHYからGIF画像を検索する機能を実装
・プラグイン（Giphy）の導入
・GIPHYから検索したGIF画像を、静止画像として一覧で表示
・クリックした静止画像を、アニメーションを再生して下部に表示
Using external APIs
プラグインを導入し、iTunesから楽曲を検索する機能を実装
・プラグイン（iTunes）の導入
・iTunesから検索した楽曲タイトルを、リンクとして一覧で表示
・楽曲タイトルをクリックすると、iTunesのページへ移動
Using the chart element
プラグインを導入し、2種のデータからチャートを作成
・プラグイン（Chart Element）の導入
・2種のデータをデータベースに登録
・データの紐づけを行い、チャートを作成
Login with Facebook
プラグインを導入し、Facebookログイン機能を実装
・プラグイン（Facebook）の導入
・OAuthによるFacebookログイン機能の実装
・Facebookアカウント情報を表示
※ 別途Facebook側での設定が必要であるため、このチュートリアルだけでは完全な実装はできない
Graduation lesson: a to-do app
最低限の機能を持ったTodoアプリの作成
・Todoをデータベースに保存
・期日をデータベースに保存
・Doneボタンをクリックすることでリストから削除
5. まとめ
最後に、この記事の要点をまとめます。
・チュートリアルはバックエンド重視で、初心者にはやや難易度高め
・サンプルを作成しながら、機能の実装やプラグインの導入を学ぶ
・フロントエンドの学習はチュートリアルでは不十分である
実際に、Bubbleを使ってチュートリアルを行ってみた感想ですが、コードを書いて機能を実装するよりも、迅速かつ容易であると感じました。
本来であれば何ヶ月もかかるような実装が、Bubbleを使えば数週間でできてしまうようなイメージです。
是非チュートリアルに挑戦し、Bubbleの素晴らしさに触れてみてください。
この記事が気に入ったらサポートをしてみませんか？