인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
Programming

/

Mobile Application Development

Part2：超中級iOSインスタグラムクローン（SwiftUI、MVVM、Firebase、2024）

Instagramアプリに従いながら学ぶ 本番SwiftUI講義

（5.0）受講レビュー 15件

受講生 146名

iOS
SwiftUI
MVVM
Firebase

初級者のための講座です。

こんなことが学べます

  • MVVM

  • SwiftUI

  • Firebase

  • Instagram

Instgram Clone川のリリース!!!!

前回の講義以来、多くの方が待っていたMVVM、Firebaseを利用した

Instagram Clone講義をいよいよリリースしました。

すべてのコードにMVVM構造を適用する

MVVMパターンがどのように生まれたのか、なぜ書いて、どの部分を気にして使うべきかなど

MVVMパターンの詳細な使い方を学び、その方法でコーディングを進めます。

（↓↓↓授業で使われるキーノート画面キャプチャ↓↓↓）


すべての機能に Firebase を適用

Firebaseサーバーを一緒に作成して使用します。

（Firebaseとは、Googleが提供する非常に簡単なサーバーを意味します。）

Instagramからアップロードした投稿情報、写真、ユーザー情報などをこのFirebaseに保存し、他の複数の機器からインポートできます。


Instagram Cloneの機能例

（下記のすべての機能を講義で実装します。）

1. 会員登録機能の実装


Email、Password、name、usernameを入力して、Firebaseサーバーにその会員情報を登録します。

2. ログイン機能の実装


会員登録されたEmail、password情報を通じて該当会員情報でログインできます。

3. プロファイル、プロファイル編集機能の実装


現在ログインしているアカウントの会員情報を編集できます。

4. 投稿アップロード機能の実装


Instagramのメイン機能である投稿をアップロードできます。

投稿をアップロードすると、フィードビュー（1タブ）とプロフィールビュー（5タブ）で投稿を確認できます。

また、5タブのユーザー投稿数のカウントも増加します。

5. 検索タブの実装


[検索]タブで、メンバーになっている他のユーザーを検索できます。

6. フォロー機能の実装


別のアカウントをフォローできます。

フォローすると、ターゲットアカウントのフォロワーと現在のアカウントのフォロー数が1ずつ増えます。

7.良い機能の実装


良い機能も実装します。

その投稿のハートボタンをクリックして、お気に入りを表示できます。

その投稿の累積的なお気に入り数も確認できます。

8. コメント機能の実装


コメントページを作成して、その投稿に残されたすべてのコメントを確認できます。

また、現在のユーザーの新しいコメントも登録できます。

9. すべての機能は Firebase サーバーとの通信で行われます。


上記のgifで示したすべての機能は、Google Firebaseサーバーとの通信を通じて実装されました。

iPhoneデバイスで変更されたすべてのデータはGoogle Firebaseに送信され、変更された内容がiPhoneデバイスから再ロードされます。 （↓↓↓Firebaseと通信する様子↓↓↓）

電話で作成された情報がサーバーに反映されている様子

Aフォンで投稿したコメントやコメントをBフォンで確認できる様子

これらのことを学ぶ

#Swift中級文法

基礎 Swift 文法に続いて、より複雑な構造を理解して使用できるさまざまな Swift 文法について学びます。

  • オプション： if-let、guard-let、オプションのバインディング、nil-coalescing

  • Error Handling: try, try?, try!, do-catch

  • Async-Await: Task, async, await, async-let (同時実行)

  • 拡張

  • 列挙

  • static function, static variable

  • switch-case

  • ...

＃さまざまなSwiftUI機能

講義の重要なテーマである様々なSwiftUIフレームワークの機能を勉強します。

受講する皆さんが新しいアプリを作る際に必要な機能を最大限押して講義を構成しました。

  • NavigationStack 、 NavigationLink ：画面を移動する

  • LazyVStack （LazyHStack）：1列リストビュー

  • LazyVGrid （LazyHStack）、GridItem：n列リストビュー

  • TextField 、 SecureField (パスワード入力時)

  • 。 refreshable : ドラッグしてリフレッシュ

  • 。 task 、 。 onAppear 、 onChange ：画面の変化を検出

  • 。 sheet : モーダルウィンドウ

  • 。 searchable (検索ウィンドウ)

  • List vs LazyVStack vs ForEachの違いの比較

  • scaledToFit , scaledToFit , aspectRatio : イメージ塗りつぶし方式の比較

  • @State 、 @Binding 、 @Bindable 、 @Environment ：データフロープロパティラッパー

  • PhotosPicker ：携帯電話に保存されている画像から写真を選ぶ


  • ...

#外部ライブラリの使用

他の人が事前に組み立てたコードなどをプロジェクトに追加して、プロジェクトにさまざまな機能を実装します。

また、非同期とキャッシュを正確に理解するために

Kingfisher vs AsyncImage vs同期方式のイメージロード

これら3つをそれぞれ実行して比較してみます。

  • KingFisher : 画像を非同期にダウンロードしてキャッシュする外部ライブラリ

  • Firebase 、 FireStore 、 FirebaseAuth ：プロジェクトに外部サーバーを追加して、さまざまなデータを外部に保存します（投稿情報、アカウント情報、画像情報）。

講義別に分かれたサンプルコード

最終的な完成コードのみを提供するのではなく

各1講義ごとに割れた講義コードを提供します。

コードの異なる部分を簡単に見つけることができます。

（↓↓↓実際の例コードキャプチャ↓↓↓）


選手講義

以下の講義を聞いて現在の講義を聞くことをお勧めします。

もしSwiftとSwiftUIの基本的な知識を持っているなら、この講義をすぐに聞いても大丈夫ですが、難しい部分があるかもしれません。

（もしこの講義だけを聞く方は下記の講義の目次を確認し、講義で説明するSwift、SwiftUIの概念を熟知しているかどうかチェックしてください。）

本物の王初歩iOSを学ぶ（SwiftUI、SwiftData、2024）


わかりやすい講義を作ってみました。


私も初心期があり、難しい概念を学ぶたびに大変だった時期がありました。

その時の記憶を蘇らせ、講義から省略された概念がないように、できるだけ気にしました。

難しい場合でも、できるだけ講義に出てくるすべてのコードについて説明しようとしました。

複製するコードは最小限に抑えられ、受講生たちが理解しやすいようにコードを一緒にタイプして説明します。


前回の講義でもこの部分をたくさん知っていただきありがとうございました。

今回の講義でも皆さんのSwiftUI学習にアシスタントになるよう努めました。

（↓↓以前シリーズの王初歩iOS講座のレビュー↓↓）



Q. 受講期間の制限はありますか？

A. いいえ、一度の購入で生涯学習が可能です。

受講期限の制限はありません。いつでも再復習できるように、私のすべての講義は受講期限が無制限です。


Q. Firebase サーバーの作成には費用がかかりますか？

A. いいえ、私の講義で使用される機能はすべて無料です。


Q. 初心者でも簡単に聞けますか？

A. 開発を初めて学ぶ方には難しいかもしれません。しかし、Part1：本当の初心者iOSを学ぶ（SwiftUI、SwiftData、2024）レッスンを最初に学んだら、このレッスンは十分に理解できるように構成しました。

こんな方に
おすすめです！

学習対象は
誰でしょう？

  • 本番で学ぶSwiftUIコード学習

  • MVVMを学びたい人

  • Firebaseで独自のサーバー通信を作成したい人

前提知識、
必要でしょうか？

  • 選手講義：本物の王初歩iOSを学ぶ（SwiftUI）

こんにちは
です。

627

受講生

55

受講レビュー

76

回答

5.0

講座評価

4

講座

안녕하세요 😀

누구나 쉽게 iOS 개발을 할 수 있도록 돕고 싶은

iOS 개발자 애구마입니다.

강의에 필요한 예제 만드는것을 좋아하고, 입문자에게 필요한 강의를 만들기 위해 연구합니다.

 

 agmma5000@gmail.com 

カリキュラム

全体

79件 ∙ (10時間 20分)

講義資料（こうぎしりょう）:

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価を受けていない講座です。
みんなに役立つ受講レビューを書いてください！