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

Last updated at 2024-06-12Posted at 2024-06-12

はじめに

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

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

要件

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

準備

プロジェクトの作成方法は、Swift & SwiftUIでタロットカードアプリを作るを参照してください。

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

今回のディレクトリ構成

ContentViewだけ修正してます。

実装

今回はこれだけです。

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()
    }
}