見出し画像

.bubble完全攻略ロードマップ

ほうた

こんにちは！NoCodeエンジニアのほうた（@Houta_NoCode）です！

今回は初心者が.bubbleでアプリ開発をできるようになるまでの最短の勉強手順である「.bubble完全攻略ロードマップ」を解説していきます！
この通りに勉強すれば、必ず最短で.bubbleを習得することができます！

僕がなぜこのような記事を書こうと思ったかというと、僕自身が.bubbleの勉強方法が分からなくて悩んだ経験があったからです。
現在、.bubbleの勉強資料は昔に比べてどんどん増えています。しかし、勉強資料が増えただけで「どのようにして勉強すればいいか」について書かれている記事はひとつもありません。

その結果.bubbleを始めたけど挫折してしまう人が出てきてしまいました。
そして思いました。

俺が「.bubble完全攻略ロードマップ」書けばいいやん！って

ということでめちゃくちゃ時間をかけて書きました(笑)

完全攻略ロードマップと言っているだけあって、初心者だけでなく.bubbleを勉強するすべての人にとって参考になるように作ったので、ぜひ最後まで見てみてください！

0．初めに

.bubbleを勉強していると、必ず分からない部分が出てきます！
なので最短で習得するには質問できる環境を用意しておくことが必須になります！
なのでいずれはオンラインサロンに入ることをおすすめします！
以下にオンラインサロン比較の記事を貼っておくので読んでみてください！
(めっちゃ詳しく書かれているので、本格的にNoCodeを学びたいと思ってから検討するのがおすすめです！)

また、.bubbleのことで質問する際には「質問方法」が非常に大事になってくるので、「質問方法」についてまとめてくれている記事も貼っておきます！

そしてNoCodeを学んでいく上では、NoCodeの概要やメリット、上手く利用する方法なども知っておいた方が良いので、NoCodeについてまとめた記事も貼っておきます！

では、.bubbleを学んでいきましょう！！！

1．最初はIT用語をチェック！

最初はよく使われるIT用語をチェックしましょう！
ただ、初めに見てもよく分からないと思うのでざっと目を通すだけでOKです！10分くらいみたら次にいきましょう！

2．初心者が最初に見るべき教材(NoCode Ninja)

初心者の方が最初に見るべき教材はこちらです！NoCode Ninjaさんの.bubble解説動画です！

Ninjaさんの動画は.bubbleの教材の中で1番初心者に優しい説明になっており、とにかく分かりやすい！
僕自身もこの動画からスタートして.bubbleにはまりました(笑)

なので、「初めに何からスタートすれば良いか分からない」って方はこの動画からスタートしてみてください！動画は20個ほどありますが、とにかく分かりやすいのでサクサク勉強することができます！

ちなみにですが、初心者の方が絶対にしてはいけない勉強法があります。それは「.bubbleの公式チュートリアルをすること」です！英語なのでマジで分かりづらいです(笑)　なので必ずこちらの動画から始めましょう！

また、以下に.bubbleのエディタの各エレメントの説明の記事も貼っておくのでこちらも見てみてください！エレメントを使いこなせればできることが増えるのでめっちゃ重要です！

3．初心者が次に見るべき教材(ノーコードスクール)

初心者が次に見るべき教材はこちらです！ノーコードスクールさんの.bubble解説動画です！

こちらの動画はNinjaさんの動画に比べて少し難しいですが、幅広く説明しているのでとてもタメになります！
少し説明が被っているところもありますが、こちらの動画は補足情報が非常に多いので復習がてら全ての動画を見ることをおすすめします！

注意点としては、たまに難しい説明があるので3回くらい聞いて分からなかったら飛ばしましょう。勉強していくにつれて分かることもどんどん増えていくので絶対に大丈夫です。気にせずにいきましょう！

また、以下に主要な右クリックの操作をまとめた記事を貼っておきます！.bubbleでは右クリックを使いこなせるかどうかで作業効率が格段に変わってくるので、各機能については頭の片隅に置いておいてください！

４．Twitterで有益なアカウントをフォローしよう！

これから本格的に.bubbleを習得しようと思っている人は、この先絶対に情報収集が不可欠になってきます！なので.bubbleについて有益な情報を発信しているアカウントを今のうちからフォローしておきましょう！

以下に「.bubbleを勉強するならフォロー必須のTwitterアカウント5選！」という記事を貼っておきます！
これらのアカウントさえフォローしておけば.bubbleの重要な情報は網羅されるので必ず全員フォローしておきましょう！

＜2020 2/23　追記＞
ノーコードらーめんさんという方が「1291種類の.bubbleのプラグインの一覧表」を無料で配布しているのでそのツイートを載せておきます！
この時点ではまだ使わないと思いますが、今後必ず役に立つ時が来ると思うので.bubbleを勉強している方は全員受け取っておきましょう！

5．Twitterクローンを作ってみよう！

次はいきなりですが、ノーコードラボさんのTwitterクローンを作ってみましょう！

これは結構しっかりしたアプリなので作成するのに少し時間はかかりますが、このアプリを作れるようになるだけでめちゃくちゃ力がつきます！つまづくところもあると思いますが、頑張れば絶対に誰でもできるようになるので頑張りましょう！

この動画で「.bubbleって短時間でこんなアプリまで作れるんや！」というやばさを実感できると思います。

＜2020 2/23　追記＞
フォローフォロワー機能の作り方についての記事を更新しました！
これは少し難しめの記事なので飛ばしてもらっても大丈夫ですが、なかなか面白いと思うので是非やってみてください！
Listがどうのこうの言っているところは無視してもらってOKです！2ヶ月くらい勉強したら意味が分かってくると思います(笑)

また、アプリを開発する際にはWebアプリを公開するためにデプロイという操作を行う必要があるのですが、その内容を詳しく以下の記事にまとめたので見てください！ここはマジで大事なので絶対に覚えておきましょう！

そして、以下に「初心者あるある」という記事を載せておきます！これは僕が過去にした初歩的なミスをまとめています！
アプリ開発する時はこの記事にあるようなうっかりミスでめっちゃ苦しめられるので絶対に見てください！

俺のしかばねを超えてゆけ！！！！！！

6．レスポンシブデザインの基礎をマスターしよう！

次は、レスポンシブデザインの基礎を徹底的にマスターしましょう！

.bubbleではデータベースの設計やシステム設計などが難しい印象があるのですが、実はレスポンシブデザインの取り扱い方もめちゃくちゃ難しいです！

レスポンシブデザインの概要を知らずに開発すると、UI/UXが悪くなってしまうので結果的に出来の悪いアプリになってしまいます。そうならないためにもこの記事で書いてあることは使いこなせるようにしましょう！

ただ、レスポンシブデザインの取り扱いは上級者の場合でも苦労することがあるので完璧にはマスターしなくて大丈夫です！しっかり勉強していればどんどん上達していきます！

僕の場合は上級者の方にレスポンシブの方法を直接伝授してもらった結果しっかり扱いこなせるようになったので、師匠的存在の人と仲良くなってみっちり教えてもらうのも良いと思います！

また、NoCodeはGoogle拡張機能を使うことによって効率よく作業できるようになることもあるので、以下に「NoCodeを使うならインストールすべきGoogle拡張7選！」という記事を貼っておきます！

7．元号ジェネレーターを作ってみよう！

次は元号ジェネレーターを作ってみましょう！

こちらの記事は「画像を作成するアプリ」の作り方が書いてあります。
こちらも少し難しいところはありますが、それさえ乗り越えればしっかり自分の力にすることができるので頑張りましょう！

注意点としてはフォントの設定などは結構難しいので3回読んでも分からなければ飛ばして誰かわかる人に聞きましょう(笑)
僕は自力でやってめっちゃ苦労しました(笑)

また、画像化する際に「Element to Image」というプラグインを使っていますが、不具合が起きてしまうので以下の記事のプラグインを使いましょう。最後の文字を縦書きにするところも、以下の記事にある「Vertical Writing」を使いましょう。

8．OGP画像作成機を作ろう！

次はこちらのOGP画像作成機を作ってみましょう！

bosyuって何やねん！？って思うかもしれませんが、そこは気にせずにいきましょう(笑) 

この記事でできることはとにかくおもしろいです！.bubbleでこんなこともできるんや！って感じでびっくりしたことを今でも覚えています(笑)

どんどんアプリを作っていくことによって知識が広がって、自分が作れるアプリの幅が広がっていくのでとにかく記事を参考にアプリを作っていきましょう！

9．四択クイズを作ってみよう！

次はこちらの四択クイズを作ってみましょう！

こちらの記事も難しいところはありますが、頑張れば絶対に大丈夫です！「Custom state」という概念が少し難しいと言うこともあるかもしれませんが、この機能はめちゃくちゃ便利なのでしっかり身につけておきましょう！

補足ですが、これくらいのアプリを作れるようになると友達は家族に見せた際に「すげぇ」っていう反応をもらえるので少しモチベーションが上がります(笑)

また、このアプリを作るくらいから「何故か上手く動作しない」などの悩みが出てくると思うので、こちらの記事も読んでおきましょう！このデバッガーを使いこなせるかどうかで問題解決のスピードが10倍くらい変わってくるので絶対にマスターしておきましょう！

10．じゃんけんゲームを作ってみよう！

次はこちらのじゃんけんゲームを作ってみましょう！

この記事には「Option set」という新しい概念が登場します！
少し難しいかもしれませんが、この機能を使えるようになればできることの幅が増えるので絶対に覚えておきましょう！

後ほど紹介しますが、僕が「オセロのクローンアプリ」を作った際もOption setはめちゃくちゃ使ったので、僕自身が本当に重宝している機能です！

11．Figmaのインポート方法について知ろう！

次はこちらの記事を読みましょう！

.bubbleは実はFigmaというデザインを作るアプリと連携することができます！やり方は随時この記事を見れば良いですが、Figmaと連携すればデザインをより簡単にできるということは必ず覚えておきましょう！
このおかげでデザイナーとも協力しやすくなりました(笑)

12．プライバシーロールを設定しよう！

次はこちらのプライバシーロールについて理解しましょう！

プライバシーロールは個人情報流出を防ぐために必須の設定になっています！
これを知っていなければ個人情報を取り扱うサービスは一切作れません(笑) 難しいかもしれませんが絶対に覚えておきましょう！

13．Stripe決済に挑戦してみよう！

次はStripe決済に挑戦しましょう！

アプリ開発をする上で絶対に必要となってくるのが決済システムの構築です！決済周りは誰もが苦戦する場所です。マジで苦戦する場所です(笑)

めっちゃ難しいので完璧に覚える必要はありませんが、今の段階では大まかには覚えておきましょう！安心してください、僕でもある程度はできるようになったので大丈夫です(笑)

余裕があれば以下の記事も読んでおきましょう！Stripe connectは特定の場所でしか使われませんが覚えておくに越したことはありません！なので頭の片隅においておきましょう！もちろん3回くらい読んで分からなけれな一旦飛ばしてください(笑)
Stripe との違いはこちらにまとめられているので読んでくださいね！

14． ノーコードラボさんのブログをやりまくろう！第一弾

これまでにもノーコードラボさんの記事をめちゃくちゃ紹介してきましたが、ラボさんの記事は超有益なのでどんどん記事を読んで実践していきましょう！

量もめちゃくちゃ多いですが、これらの記事を全て身につければ見違えるほどにできることの幅が広がります！なのでとにかくやっていきましょう！
以下にこの段階で読むべき記事を貼っておきます！

15．小技テクニックを知ろう！

次は小技テクニックを習得していきましょう！

アプリをある程度作れるようになったらショートカットやテクニックを覚えて作業効率をどんどん上げていくことが重要になっていきます！

これらの小技テクニックは知っているだけで作業効率を向上させることができるので絶対に覚えておきましょう！

16．メッセンジャーもどきを作ってみよう！

次はメッセンジャーもどきを作ってみましょう！こちらの記事では初級者向けと書かれていますが、割と難しいので個人的には中級者向けかなと思っています(笑)

この記事を理解できればチャットアプリの基礎が理解できるのでアプリ開発の幅が広がります！結構複雑なところもありますが、しっかり扱えるようになっておきましょう！

ちなみに6,7個目の記事は応用の部分があるので余裕があればで大丈夫です！僕は飛ばしました！(笑)

17．NoCode学生会のYouTubeでアプリを作りまくろう！

ここでここまで来たらひたすらアプリを作って、引き出しを増やしていきましょう！作ったアプリが多ければ多いほどできることが広がっていきます！

また、僕たちのYouTubeではアプリを作っている作業風景も動画にしているので、盗めるところはどんどん盗んでいきましょう！
以下に見るべきYouTube動画をまとめましたのでご覧ください！
YouTube動画がアップロードされ次第、どんどん追加していきます！

17.1 買い物リストを作ろう！

こちらの動画で買い物リストを作りましょう！

.bubbleのプラグインを使うことによってこんな機能も実装することができます！このようなプラグインでできることに関しては知っているか知っていないかだけで決まるので、非常に重要な項目になっています！

17.2 税金計算機を作ろう！

次はこちらの動画で税金計算機を作っていきましょう！

こちらの動画ではInputエレメントををただの計算のために使う方法を紹介しています！
この方法は結構使うので絶対にマスターしてください！実は意外と知らない人が多いテクニックになります(笑)

17.3 オセロクローンを作ろう！

次はこちらの動画でオセロクローンを作っていきましょう！

1つ目の動画ではCustom stateの応用の使い方やOption setsの使い方を学ぶことができます！ちょっとした工夫で日常で使われているようなゲームやアプリを作れてしまうのが.bubbleの面白いところですね(笑)

2つ目の動画では、Repeating GroupとList of numberという多くの人が使いこなせていない機能を応用しているので、是非マスターしてください！

17.4 じゃんけんゲームを作ろう！

次はこちらの動画でじゃんけんゲームを作っていきましょう！

こちらの動画ではワークフローの使い方など、たくさんのことを学べます！このアプリを作れるようになればコンピューターと対決する系のゲームなら割と作れるようになります！

さらにHP系の機能も搭載しているので、ポケモンみたいなアプリも作れるようになります！(笑)

18．ブログやnoteなどで情報収集しまくろう！

ここまでこれば、とにかく情報収集してスキルを身につけていきましょう！
以下に絶対に読むべきブログやnoteをまとめたので、必ず目を通すようにしてください！

18.1 NoCode学生会のnoteをやりまくろう！

NoCode学生会の記事もやりまくりましょう！以下に今の段階でやるべき記事を貼っておきます！
今は記事が少ないですが、どんどん更新していきます！

18.2 ノーコードラボさんのブログをやりまくろう！第2段

ノーコードラボラボさんの記事はやりまくって損することはないのでやりまくりましょう！以下にこの段階で読むべき記事を貼っておきます！

18.3 あぽとさんのnoteをやりまくろう！

こちらは.bubbleエキスパートのあぽとさんのnoteです！

こちらのnoteもとにかくめっちゃ有益です！
さすが.bubbleエキスパートって呼ばれるだけあるわって感じの記事ばかりです！たまにアニメの記事が出てきますが...(笑)
とにかく全てに目を通して全て吸収しちゃいましょう！

ちなみにあぽとさんはYouTubeもやっているので見てみてください！
個人的に好きなポッキーゲームの動画を載せておきます(笑)

18.4 けいさんのnoteをやりまくろう！

こちらは.bubbleエキスパートのけいさんのnoteです！

この方のnoteも超有益です！
.bubbleでサービスを開発する際の基礎的かつ超大事なところを簡潔にまとめてくれています！こちらも全ての記事に目を通して全て吸収しちゃいましょう！

また、けいさんの記事の中でも絶対に活用して欲しい記事を以下に貼っておきます！こちらの記事は全てのbubblerが読むべき記事です！控えめに言って超有料級です(笑) これを活用しないのは損でしかありません(笑)

18.5 .bubbleプラグインりょうさんの記事をやりまくろう！

こちらは.bubbleエキスパートのRyoさんのブログになります！

この方は.bubbleのプラグインに関して超有益な記事を書いているブログになります！

.bubbleプラグインをしっかり使いこなすことによって、応用できる幅は圧倒的に広がるので、前Bubblerが絶対に読むべき記事になっています！

僕自身も「.bubbleでこんなことができるんだ！」という驚きが起こってしまうような情報がたくさん載っているので、初心者の方も上級者の方にも是非見てほしいと思います！

19．テンプレートで勉強しよう！

ここまできたらテンプレートを使って勉強しましょう！
テンプレートは.bubbleのアプリ選択画面から「Marketplace」クリックして、その画面で「See all」をクリックします。すると、テンプレートがたくさん出てきます。そして「Category」などから自分の欲しいテンプレートを検索することができます。

画像1

画像2

画像4

テンプレートの勉強の方法としては、まずそのテンプレートがどのような機能が実装されているのかを確認します。そしてどうやって実装されているのか分からなかった部分をエディターで確認します。それをひたすら繰り返していきます。

また、機能以外にもレスポンシブデザインについても非常に学べることが多いので、どのように各々の画面サイズに対応させているのかというところにも着目して勉強しましょう。
テンプレートの勉強は本当に学べることが多いので、たくさんやることをおすすめします！

20．ノーコードラボさんの記事をやりまくろう！第三弾

これで最後です！ここからはマジで難しいけど有益なノーコードラボさんの記事を紹介していきます！
これらの記事をやれば他のbubblerと差別化できること間違いなしなので.bubbleを極めたい方は是非チャレンジしてみてください！

番外編 (コーチング)

コーチングサービスを使うとさらに爆速で.bubbleを習得することができます！お金はかかってしまいますが、それでもとにかく最短で.bubbleをマスターしたいという方は検討してみてください！

以下にNoCodeのコーチングサービスをまとめた記事を貼っておきます！

最後に

「.bubble完全攻略ロードマップ」はどうだったでしょうか？

この通りに勉強すれば絶対に圧倒的に効率よく.bubbleを習得することができます！

やることは多いですが、プログラミングと違って.bubbleであれば本気で勉強すれば1ヶ月である程度習得することができるので諦めず取り組んでほしいと思います！

今後もNoCodeの有益な情報をTwitterやnoteで発信していくので、是非フォローしていただけると幸いです！

皆さんが.bubbleを使いこなせるようになることを心から応援しています！

最後までお読みいただき本当にありがとうございました！

いいなと思ったら応援しよう！