ユーザー情報を編集（データの更新）をしよう！

こんにちは！🐶

今まではデータの送信・読み取りについて学んできましたが、今回はデータの更新について学んできます！

#下準備
今回は前回作ったユーザー情報の編集をすることでデータの更新について学んでいきます！そのために、まずユーザープロフィール画面を作りましょう！👇新しくViewContorollerを配置し、TabBarControllerにつないでください！
[スクリーンショット 2021-06-09 14.47.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694910/b5475d6f-1e93-73b3-e309-1fad8037a16a.png)

#データを読み取ろう!

ユーザープロフィールを作る為に、まず、ユーザー情報を読み取りそれプロフィール画面に入れてあげなければなりません。
ここは、もう今までのおさらいですね！こんな感じでプロフィール画面にコードを書いていきましょう！

```php:ProfileViewController
import UIKit
import Firebase
import FirebaseAuth
import Nuke

class ProfileViewController: UIViewController {
    
    
    @IBOutlet weak var userImageView: UIImageView!
    @IBOutlet weak var userNameLabel: UILabel!
    @IBOutlet weak var introductionTextView: UITextView!
    
    //Firestoreのデータベース
    let db = Firestore.firestore()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        loadUser()
    }
    
    //ユーザー情報読み取り
    func loadUser() {
        //Userコレクションから自分のユーザーIDと一致するドキュメントを持ってくる
        db.collection("Users").document(Auth.auth().currentUser!.uid).getDocument { (result, error) in
            if error != nil {
                print("ユーザー情報取得失敗")
            }
            print("ユーザー情報取得成功")
            let data = result?.data()
            let user = User(userName: data!["userName"] as! String, profileImage: data!["profileImage"]  as! String, introduction: data!["introduction"] as! String)
            //ユーザーネーム設定
            self.userNameLabel.text = user.userName
            //自己紹介文があったら、introductionTextViewにテキストを入れる
            if user.introduction != "" {
                self.introductionTextView.text = user.introduction
            }
            //ユーザー画像が設定されていたらNukeを使って、ユーザー画像を入れる
            if user.profileImage != "" {
                Nuke.loadImage(with: user.profileImage as! ImageRequestConvertible, into: self.userImageView)
            }
        }
    }
    
}


```

はい！まだ自己紹介分とユーザー画像は設定していないので、出ないですが、ユーザーネームは読み取れていますね！
![スクリーンショット 2021-06-09 14.31.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694910/74fab45a-4a06-8127-38aa-d56bdcdb034f.png)

では、このユーザー画像も設定できるように、データを更新していきましょう！

＃データを更新しよう！
ではユーザー情報を編集できる画面を作りましょう。
ユーザープロフィールの編集ボタンから編集画面に繋げてください！
![スクリーンショット 2021-06-09 14.35.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694910/3f0fe8b1-8e2a-fb4c-2773-098f706a2f01.png)

ではユーザープロフィール編集のクラスを作り、これも今までと一緒でまず、データを読み取るコードを書いてあげましょう！

```php:EditProfileViewController

import UIKit
import Firebase
import FirebaseAuth
import Nuke

class EditProfileViewController: UIViewController {
    
    @IBOutlet weak var userImageView: UIImageView!
    @IBOutlet weak var userNameTextField: UITextField!
    
    @IBOutlet weak var introductionTextView: UITextView!
    
    let db = Firestore.firestore()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        loadUser()
    }
    
    //ユーザー情報読み取り
    func loadUser() {
        //Userコレクションから自分のユーザーIDと一致するドキュメントを持ってくる
        db.collection("Users").document(Auth.auth().currentUser!.uid).getDocument { (result, error) in
            if error != nil {
                print("ユーザー情報取得失敗")
            }
            print("ユーザー情報取得成功")
            let data = result?.data()
            let user = User(userName: data!["userName"] as! String, profileImage: data!["profileImage"]  as! String, introduction: data!["introduction"] as! String)
            //ユーザーネーム設定
            self.userNameTextField.text = user.userName
              //自己紹介文があったら、introductionTextViewにテキストを入れる
            if user.introduction != "" {
                self.introductionTextView.text = user.introduction
            }
            //ユーザー画像が設定されていたらNukeを使って、ユーザー画像を入れる
           if user.profileImage != "" {
                let userImageUrl = URL(string:user.profileImage)
                Nuke.loadImage(with: userImageUrl as! ImageRequestConvertible, into: self.userImageView)
            }
        }
    }

   //編集ボタン
   @IBAction func EditButton(_ sender: Any) {
    }
    
}

```
![スクリーンショット 2021-06-09 14.43.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694910/91783891-9e5c-6364-40b1-5f292e8e36bb.png)


では、更新ボタンを押すと、記入したものが更新されるコードを書いていきます！コードは以下になります👇

見てもらったらわかるとおり、ほとんど投稿画面と一緒です！笑
違うポイントはここですね！👇

```php:EditUserProfile
func saveUserProfile(profileImageUrl:String){
        //userNameTextFieldにテキストが入っていたら
        guard let text = userNameTextField.text else {return}
        db.collection("Users").document(Auth.auth().currentUser!.uid).updateData(["userName" :userNameTextField.text,"profileImage":profileImageUrl,"introduction":introductionTextView.text]) { (error) in
                   if error != nil {
                       print("ユーザー情報更新失敗")
                   } else {
                        print("ユーザー情報更新成功")
                       self.dismiss(animated: true, completion: nil)
                   }
               } }
```

普通にデータを送信するときは、db.collection("Users").document(Auth.auth().currentUser!.uid).addDataになりますが、このaddDateのところが、updeteDataになっています！
このupdeteDataがFirestoreの更新するコードになります！

では実際に、データを更新してみましょう！
今の画面はこちら。
![スクリーンショット 2021-06-09 14.31.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694910/74fab45a-4a06-8127-38aa-d56bdcdb034f.png)

編集画面で、編集していき、更新ボタンを押して、プロフィール画面を見てみましょう！
![スクリーンショット 2021-06-09 15.19.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694910/6557c767-5a1d-daa7-f6dd-f8b181360dd8.png)

はい！しっかりデータが更新されプロフィールに反映されてますね！こんな感じで、データの更新はあっという間に出来ちゃいました！
皆さんは、以前にデータの送信・読み取りをやってきたので、変わるところはほどんどなかったですね！

#お疲れ様でした！
今回は、データの更新について学んできました！
次回は、いいね機能を実装していきたいと思います！