Swift & SwiftUIで自分だけのSNSを作る

# はじめに
Swiftの学習を兼ねて、簡単なSNSアプリを作ってみました。

Xcodeが必要なので、環境はmacOSです。

# 要件
 - 投稿できる
 - 投稿したら、いいねがたくさん付く
 - いいねの数は、10〜10,000の間でランダム

# 準備
プロジェクトの作成方法は、[Swift & SwiftUIでタロットカードアプリを作る](https://qiita.com/yam_dev/items/871b47c1065f570ff17a) を参照してください。

User Interfaceは`SwiftUI`を選択しました。

### 今回のディレクトリ構成
ContentViewだけ修正してます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407770/1af2f7dc-ef71-df29-f539-df02027b0892.png" width="60%" />

# 実装
今回はこれだけです。
```swift:ContentView.swift
//
//  ContentView.swift
//  MyPiyotter
//

import SwiftUI

struct ContentView: View {
    @State private var showingInputView = false
    @State private var posts: [Post] = []

    var body: some View {
        NavigationView {
            List {
                ForEach(posts) { post in
                    PostView(post: post)
                }
            }
            .navigationTitle("MyPiyotter")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                        showingInputView = true
                    }) {
                        Text("🐥")
                            .font(Font.system(size: 70)) // 大きめにする
                    }
                }
            }
            .sheet(isPresented: $showingInputView) {
                InputView(isPresented: $showingInputView, posts: $posts)
            }
        }
    }
}

struct InputView: View {
    @Binding var isPresented: Bool
    @Binding var posts: [Post]
    @State private var inputText = ""

    var body: some View {
        NavigationView {
            VStack {
                TextEditor(text: $inputText)
                    .padding()
                Spacer()
            }
            .navigationTitle("新規投稿")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button("キャンセル") {
                        isPresented = false
                    }
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("ポストする") {
                        let newPost = Post(content: inputText, likes: Int.random(in: 10...10000))
                        posts.insert(newPost, at: 0)
                        inputText = ""
                        isPresented = false
                    }
                }
            }
        }
    }
}

struct PostView: View {
    let post: Post

    var body: some View {
        VStack(alignment: .leading) {
            Text(post.content)
                .padding(.bottom)
            HStack {
                Image(systemName: "heart.fill")
                    .foregroundColor(.red)
                Text("\(post.likes)")
            }
        }
        .padding()
    }
}

struct Post: Identifiable {
    let id = UUID()
    let content: String
    let likes: Int
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

```

# 動作確認

それでは、動かしてみましょう！

起動直後の状態。
右上のひよこマークをタップすると、入力画面に遷移します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407770/4b376e10-ef58-7274-19b3-11cc7a50046e.png" width="60%" />

入力画面。
頭に浮かんだことを入力して、ポストします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407770/f2f7a8aa-b83d-5522-6c8a-d41e2a4f74d8.png" width="60%" />

いいねがたくさん付きました！
どんどんポストしてみましょう！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407770/20368206-3135-2d95-38cd-f3709612d439.png" width="60%" />

これだけいいねしてもらえると、気分がいいですね😃

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407770/db08e277-6ab5-332b-0f3d-7170c87e6d9d.png" width="60%" />

目指せ、1万いいね！

# まとめ
今回は、絶対に炎上しない、自分専用のSNSを作ってみました。
何を書いても褒めてもらえるので、気分転換に使うといいかもしれません。

まだまだ改良の余地があるので、また別の機会にチャレンジしてみようと思います。

みなさんも一緒にがんばりましょう🙂