bubbleチュートリアル(旧)

こちらは旧バージョンです。

bubbleチュートリアルver1へようこそ。このサイトでは、ノーコードツールbubbleを使ったSNSアプリの作成方法について解説しています。丁寧に解説をしていくので、初心者の方でも問題ありません。ぜひ最後まで一緒に頑張っていきましょう。

最新版（ver2）はこちら

第1章 bubbleについて(bubbleの基礎知識からアカウントの作成、アプリ開発まで)

このコースを進めるにあたって必要な基礎知識と、その流れを記しました。 これからの長い道のりの心強い武器になるはずです！ぜひ実際の開発を始める前に一読してください！

1. はじめに
2. bubbleとは
3. 学習ロードマップで「全体像」を押さえよう
4. さっそく触ってみる
5. bubbleの使い方
6. 最初のアプリケーション
7. 最後に

第2章 かんたんなアプリケーションを作成

開発に必要となる基礎知識は1章で記述しました。本章では実際にアプロケーションの作成に取り組んでみましょう！

1. アプリケーションの全体像について
2. 投稿データの定義
3. 最後に

第3章 ページレイアウト(UIデザイン)を作成

本章ではページレイアウトを実際を作成してみます。他の章に比べて長く時間がかかりますが、最後まで頑張ってください！

1. bubbleの主要なエレメントとレスポンシブについて理解する
2. ヘッダーの作成
3. 新規会員登録ページの作成
4. ログインページの作成
5. タイムラインページの作成
6. マイページの作成
7. ユーザーの一覧ページの作成
8. メールアドレス認証ページの作成
9. パスワードリセットページの作成・最後に

第4章 データベースの設計

本章はデータベースについて学びます。内容自体は短いですが、非常に重要な内容なのでしっかり理解するまで熟読することをお勧めします！

1. bubbleのデータベース設定について理解する
2. ユーザーテーブルの設計
3. 投稿テーブルの設計
4. 最後に

第5章 ユーザー登録、ログインを試してみる

本章ではユーザー登録の動作・処理について学びます。ECサイトやSNSツールなどの様々なシステムにおいて基本的な動作です。その流れについて理解を深めましょう！

1. ユーザーの一覧ページにユーザーを表示させてみる
2. ユーザー登録処理を実装
3. ユーザー情報が不適切な場合のバリデーションを作成
4. 最後に

第6章 ユーザーログイン時の処理を実装してみる

本章ではログイン・ログアウト処理の実装について学びます。前章と同様に様々なシステムで必要となる動作です。引き続き取り組んでみましょう！

1. ログインページからログイン処理を実装
2. ログイン時のみタイムライン、マイページに接続できるようにバリデーション
3. マイページにログアウト処理を実装
4. 最後に

第7章 ユーザー情報を更新、削除(退会、解約)できるようにしてみる

本章ではユーザー情報の更新と削除について学びます。データの編集と削除の取り扱いについて実践してください！

1. マイページにユーザー情報の編集処理を実装
2. マイページにユーザー情報の削除処理を実装

第8章 メールアドレス認証を実装してみる

本章では新規ユーザー登録時に必要なメール認証の実装に取り組みます。メールを利用するためのワークフローや条件分岐について理解を深めましょう！

1. 新規ユーザー登録時にメールアドレス認証の処理を実装
2. 認証メールの内容を編集
3. 未認証のユーザーがログインした際にメールアドレス認証・送信ページに遷移させる
4. 最後に

第9章 パスワードの再設定、パスワードリセット機能を実装してみる

本章ではパスワードリセット時の動作について学びます。内容は短いですが、この実装を入れなければパスワードを忘れた時にログインできなくなってしまいます。しっかり理解を深めましょう！

1. パスワードリセット・送信ページでパスワードリセット処理を実装
2. 最後に

第10章 ユーザーがツイートできるようする

ユーザーの投稿がタイムラインに正しく表示されるための処理について記述しています。データやページ遷移の取り扱いに気を付けていきましょう！

1. タイムラインページで投稿を表示させる
2. タイムラインページで投稿処理を実装
3. 投稿処理に画像添付機能を追加実装
4. 最後に

第11章 ユーザーのフォロー機能、タイムライン表示機能をつくってみる

フォローやフォロー解除の具体的な実装について学びます。どのユーザーに表示させる、あるいはさせないのかの関係について学習していきましょう！本章までで具体的な機能の実装は一通り終わります。

1. リレーションシップ（フォロー／フォロワー）テーブルの作成
2. フォローユーザーの一覧タブ／フォロワーユーザーの一覧タブにフォローしている＆されているユーザーを表示してみる
3. フォロー機能を実装
4. フォロー解除機能を実装
5. ユーザー検索を実装する
6. タイムラインページの投稿表示をフォローしているユーザーの投稿に限定して表示させる
7. 最後に

終章 まとめ

これで全ての実装が完了しました。お疲れ様です。ここまでを振り返りを行い、今後の開発に活かしていきましょう！

1. まとめ