フェンリルの SwiftUI の研修を覗いてみる / Fenrir SwiftUI Training

ϑΣϯϦϧͷ 4XJGU6*ͷݚमΛ೷͍ͯΈΔ .PCJMF"DU ೥݄೔ ۚ

໨తΈΜͳͷ4XJGU6*εΩϧΛఈ্͍͛ͨ͠ w ۀ຿࣌ؒ಺ʹͰ͖ΔΩϟονΞοϓ΋ݶք͕͋Δ w ϓϥΠϕʔτͷ࣌ؒΛ࢖͑ͳ͍ਓ΋͍Δ

λʔήοτ ॳڃ தڃ ্ڃ ͳΜͱͳ͘Ͱ4XJGU6*Λ࢖͍ͬͯΔ 4XJGU6*ͷ࢓૊Έɾਖ਼͍͠࢖͍ํΛ஌͍ͬͯΔ ϓϩδΣΫτʹ͓͚Δ4XJGU6*ͷํ਑ΛཱͯΒΕΔ ॳڃˠதڃʹҾ্͖͍͛ͨ

·ͣ͸৽ଔJ04ϝϯόʔ޲͚ʹ࣮ࢪ ݄ ݄ ݄ ৽ଔݚम ݄ ͜͜Ͱ4XJGU6*ͷݚमΛ೔࣮ؒࢪ

ͲΜͳݚम಺༰ʹ͠Α͏🤔 ஫৽ଔ޲͚ʹಛԽͯ͠࡞ΔΘ͚Ͱ͸ͳ͍

νϡʔτϦΞϧΈ͍ͨͳ಺༰ʹ͸ͨ͘͠ͳ͍ w νϡʔτϦΞϧ͸͢Ͱʹ"QQMF͕࡞ͬͯ͘Ε͍ͯΔ w νϡʔτϦΞϧϨϕϧͰ͋Ε͹Θ͟Θ͟ݚमͳͯ͘΋͍͚Δ w ΋ͬͱ࣮ફతͳ಺༰ʹ͍ͨ͠

4XJGU6*ͷ࢓૊ΈΛڭ͍͑ͨ w 4XJGU6*͸ͱ͖ͬͭ΍͍͢෼ͳΜͱͳ͘Ͱ࢖͑ͯ͠·͏ w ͔ͦ͠͠ͷ··ͩͱࢥΘ͵᠘ʹϋϚͬͨΓԠ༻͕ޮ͔ͳ͔ͬͨΓ͢Δ w ͳͷͰͪΌΜͱ࢓૊ΈΛཧղͯ͠΋Β͍͍ͨ

4XJGU6*ͷ࢓૊ΈΛڭ͍͑ͨ w εϧʔͯ͠͠·͍͕ͪͳجૅ஌ࣝΛԡ͑͞Δ w ϨΠΞ΢τγεςϜʢαΠζͷܾ·ΓํɺҐஔͷܾ·Γํɺ"MJHONFOUʣ w 7JFXͷण໋ʹ͍ͭͯ !4UBUF΍!4UBUF0CKFDUͷอ࣋ظؒͳͲ w
7JFX*EFOUJUZ w 4XJGUࣗମͷݴޠػೳʢQSPQFSUZ8SBQQFS ,FZ1BUIͳͲʣ w ͳͲ

ͲΕ͔ΒखΛ͚͍͍͔ͭͯΘ͔Βͳ͍ w νϡʔτϦΞϧ΍ϦϑΝϨϯε΍88%$ͷηογϣϯɺΠϯλʔωοτ ্ͷهࣄͱ͍ͬͨ৘ใ͸ͨ͘͞Μ͋Δ w ͔͠͠ͲΕ͔Βֶ΂͹͍͍͔Θ͔Βͳ͍ w ಛʹࠓ͸J04 Ͱ/BWJHBUJPO4UBDL 0CTFSWBUJPO͕ొ৔ͯ͠৽چ
ͷ΍Γํ͕ࠞࡏ͍ͯ͠Δঢ়ଶ

ͲΕ͔ΒखΛ͚͍͍͔ͭͯΘ͔Βͳ͍ w ମܥతʹ·ͱΊΔ w ঢ়ଶ؅ཧͷ࢓૊Έʢ!4UBUF !#JOEJOH 0CTFSWBCMF0CKFDU 0CTFSWBUJPOʣ w
/BWJHBUJPO4UBDL/BWJHBUJPO7JFXͷؔ܎ੑ طଘࢿྉͷίϐʔʹͳΒͳ͍Α͏޻෉͢Δ

ௐ΂Α͏ͱ͍͏ൃ૝ʹͳΒͳ͍͜ͱ͸ڭ͍͑ͨ w ྫ w Ξϯνύλʔϯ w 5JQTܥ

ख͸ಈ͔ͯ͠΋Β͍͍ͨ w ࠲ֶ͚ͩͰ͸ͳ࣮͘श՝୊Ͱ࣮ࡍʹखΛಈ͔ͯ͠΋Β͏

ͱ͍͏ͷΛ౿·͑ͯ ΧϦΩϡϥϜΛߟ͑ͨ

೔ͷεέδϡʔϧ ࠲ֶ ࣮श ৼΓฦΓձ

೔ͷεέδϡʔϧ ࠲ֶ ࣮श ৼΓฦΓձ ߨࢣ͸ೋਓମ੍

೔ͷεέδϡʔϧ ࠲ֶ ࣮श ৼΓฦΓձ खΛಈ͔ͯ͠΋Β͏࣌ؒΛͨͬ΀ΓऔΔ

೔ͷεέδϡʔϧ ࠲ֶ ࣮श ৼΓฦΓձ ࡞ͬͨ΋ͷΛൃද

ࢿྉ͸࠶ར༻Ͱ͖ΔΑ͏(JU)VCͰ؅ཧ

࣮ࡍͷ಺༰Λνϥݟͤ🙈

࠲ֶͷྫͦͷ̍ σόοάज़

struct SampleView: View { var body: some View { VStack
{ Text("ABC") .foregroundStyle(.blue) .font(.system(size: 14)) Text("DEF") .foregroundStyle(.blue) .font(.system(size: 14)) Text("GHI") .foregroundStyle(.blue) .font(.system(size: 14)) } } } 5FYU͕ͭ͋Δ

{ Text("ABC") .foregroundStyle(.blue) .font(.system(size: 14)) Text("DEF") .foregroundStyle(.blue) .font(.system(size: 14)) Text("GHI") .foregroundStyle(.blue) .font(.system(size: 14)) } } } ͦΕͧΕʹಉ͡૷০Λద༻͍ͯ͠Δ

{ Text("ABC") Text("DEF") Text("GHI") } .foregroundStyle(.blue) .font(.system(size: 14)) } } ಉ͡Ͱ͋Ε͹਌7JFXʹద༻͢Ε͹ͦͷࢠଙͷ7JFXશͯʹ఻೻͢Δ

{ Text("ABC") Text("DEF") Text("GHI") Text("JKL") .foregroundStyle(.red) } .foregroundStyle(.blue) .font(.system(size: 14)) } } Ұ෦Λม͍͑ͨ৔߹΋ͦͷ৔ॴʹ.PEJ fi FSΛ͚ͭΕ͹ྑ͍͚ͩ શͯͰ͸ͳ͍͕͜Ε͸CVUUPO4UZMF΍NJOJNVN4DBMF'VDUPSͳͲଞͷ.PEJ fi FS΋ಉ༷ ͜͜·Ͱ͸લఏ஌ࣝ ͜ΕΛԠ༻͢Δ

ྫ͑͹σβΠϯࢦࣔͷจࣈ৭ͱσϑΥϧτͷจࣈ৭ͷ৭͕ࣅ͍ͯΔ৔߹ Α͘จࣈ৭Λઃఆ͠๨Εͯ͠·͍͕ͪ struct ContentView: View { var body: some View
{ VStack { Text("ઃఆࡁΈςΩετ") .foregroundStyle(Color.appText) Text("ઃఆ๨ΕςΩετ") //.foregroundStyle(Color.appText) } .font(.system(size: 25)) .bold() } }

@main struct SwiftUI_TrainingApp: App { var body: some Scene {
WindowGroup { ContentView() .foregroundStyle(.red) // ໨ཱͭ৭Λઃఆ } } } ϧʔτʹ͍ۙՕॴͰGPSFHSPVOE4UZMFΛద༻

ઃఆϛεʹؾ͚ͮΔʂ ʜͱ͍͏5JQTతͳ಺༰

࠲ֶͷྫͦͷ 7JFXͷαΠζͷܾ·Γํ

ϨΠΞ΢τͷϧʔϧ w ਌7JFX͕ࢠ7JFX΁αΠζΛఏҊ w ࢠ7JFX͕ఏҊ͞ΕͨαΠζΛ΋ͱʹࣗ෼ͷαΠζΛܾఆ w ਌7JFX͸ࢠ7JFX͕ܾఆͨ͠αΠζΛ΋ͱʹ഑ஔ

struct ContentView: View { var body: some View { Color.teal
} }

3PPU7JFX $PMPSUFBM

3PPU7JFX $PMPSUFBM ͋ͳͨͷαΠζΛڭ͑ͯ ͪͳΈʹYQU͸Ͳ͏ʁ ˢηʔϑΤϦΞͷαΠζ

3PPU7JFX $PMPSUFBM ͋ͳͨͷαΠζΛڭ͑ͯ ͪͳΈʹYQU͸Ͳ͏ʁ ͡Ό͋YQUʹ͠·͢ ˢ$PMPS͸Ί͍͍ͬͺ͍ ޿͕Ζ͏ͱ͢Δ

3PPU7JFX $PMPSUFBM ͋ͳͨͷαΠζΛڭ͑ͯ ͪͳΈʹYQU͸Ͳ͏ʁ ͡Ό͋YQUʹ͠·͢ ʢࢀߟʣଞͷ7JFXͷ৔߹ *NBHFʜ਌ͷఏҊαΠζ͸ແࢹͯ͠ը૾ͷαΠζݻఆʢσϑΥϧτͰ͸ʣ 5FYUʜจࣈྻʹԠͯ͡αΠζ͕มΘΔ͕਌ͷఏҊαΠζΑΓ͸େ͖͘ͳΒͳ͍ ͳͲ

3PPU7JFX $PMPSUFBM $PMPSͷαΠζ͸YQUͱ͢Δ ͜ΕΛத৺ʹ഑ஔ͢Δ

.frame(width: 100, height: 100) } } GSBNFΛ௥Ճ

.frame(width: 100, height: 100) } } ʮαΠζΛࢦఆ͢Δʯͱ͍͏ ཧղ͸ݫີʹ͸ͪΐͬͱҧ͏

3PPU7JFX $PMPSUFBM GSBNF

3PPU7JFX $PMPSUFBM GSBNF ͋ͳͨͷαΠζΛڭ͑ͯ ͪͳΈʹYQU͸Ͳ͏ʁ

3PPU7JFX $PMPSUFBM GSBNF ͋ͳͨͷαΠζΛڭ͑ͯ ͪͳΈʹYQU͸Ͳ͏ʁ YQUʹ͠·͢

3PPU7JFX $PMPSUFBM GSBNF ͋ͳͨͷαΠζΛڭ͑ͯ ͪͳΈʹYQU͸Ͳ͏ʁ

3PPU7JFX $PMPSUFBM GSBNF ͡Ό͋YQUʹ͠·͢ ͋ͳͨͷαΠζΛڭ͑ͯ ͪͳΈʹYQU͸Ͳ͏ʁ

3PPU7JFX $PMPSUFBM GSBNF ͡Ό͋YQUʹ͠·͢ ͡Ό͋$PMPSΛ GSBNFͷத৺ʹ഑ஔ͠·͢

3PPU7JFX $PMPSUFBM GSBNF ͡Ό͋GSBNFΛ த৺ʹ഑ஔ͠·͢ YQUʹ͠·͢

$PMPS GSBNF φφϝ͔ΒݟͯΔͱࢥͬͯͶ

$PMPS GSBNF GSBNF͸࿮Λ֬อ͍ͯ͠Δ͚ͩͰ $PMPS͕উखʹGSBNFͷதͰ Ί͍ͬͺ͍޿͕͍ͬͯΔ

GSBNF αΠζΛڭ͑ͯ ͪͳΈʹYQU͸Ͳ͏ʁ 􀫊 *NBHF ը૾ͷαΠζʹ߹Θͤͯ YQUʹ͠·͢

GSBNF 􀫊 *NBHF SFTJ[BCMF αΠζΛڭ͑ͯ ͪͳΈʹYQU͸Ͳ͏ʁ SFTJ[BCMF͕͍͍ͭͯΔͷͰ YQUʹ͠·͢

ϨΠΞ΢τγεςϜ w ͜͜·Ͱ͸88%$ͷηογϣϯʹ΋͋Δ৘ใ w ࣮ࡍͷ࠲ֶͰ͸ηογϣϯͰ͸ޠΒΕ͍ͯͳ͍಺༰΋Χόʔ w GSBNFͷNBY NJO JEFBMܥͷҾ਺ w
fi YFE4J[F w BMJHONFOU(VJEF w ηογϣϯͰ͸ܰ͘ྲྀͯͨ͠ͷͰ΋ͬͱৄ͘͠

࣮श՝୊ͷྫ ϦϑΝΫλϦϯάνϟϨϯδ

࣮श՝୊ͷྫϦϑΝΫλϦϯάνϟϨϯδ w ͍͖ͳΓ7JFXΛॻ͍ͯ΋Β͏ͷ͸ϋʔυϧ͕ߴ͍ w ࠷ॳ͸طଘͷίʔυΛվमͯ͠΋Β͏͕ྑͦ͞͏

struct SNSView: View { let posts = [ ... ]
var body: some View { NavigationView { ScrollView { VStack(spacing: 0) { ForEach(posts) { post in HStack(alignment: .top) { Image(systemName: post.avatar) .resizable() .frame(width: 50, height: 50) .clipShape(Circle()) VStack(alignment: .leading) { HStack { Text(post.username) .font(.headline) Text(post.handle) .font(.subheadline) .foregroundColor(.gray) Spacer() Text(formatDate(post.time)) .font(.subheadline) .foregroundColor(.gray) } Text(post.content) .font(.body) if let imageName = post.image { Image(systemName: imageName) .resizable() .aspectRatio(contentMode: .fit) .frame(maxWidth: .infinity) ࣮श՝୊ͷྫϦϑΝΫλϦϯάνϟϨϯδ

var body: some View { NavigationView { ScrollView { VStack(spacing: 0) { ForEach(posts) { post in HStack(alignment: .top) { Image(systemName: post.avatar) .resizable() .frame(width: 50, height: 50) .clipShape(Circle()) VStack(alignment: .leading) { HStack { Text(post.username) .font(.headline) Text(post.handle) .font(.subheadline) .foregroundColor(.gray) Spacer() Text(formatDate(post.time)) .font(.subheadline) .foregroundColor(.gray) } Text(post.content) .font(.body) if let imageName = post.image { Image(systemName: imageName) .resizable() .aspectRatio(contentMode: .fit) .frame(maxWidth: .infinity) ࣮श՝୊ͷྫϦϑΝΫλϦϯάνϟϨϯδ ϋϦϘςͷ7JFXΛ༻ҙ

var body: some View { NavigationView { ScrollView { VStack(spacing: 0) { ForEach(posts) { post in HStack(alignment: .top) { Image(systemName: post.avatar) .resizable() .frame(width: 50, height: 50) .clipShape(Circle()) VStack(alignment: .leading) { HStack { Text(post.username) .font(.headline) Text(post.handle) .font(.subheadline) .foregroundColor(.gray) Spacer() Text(formatDate(post.time)) .font(.subheadline) .foregroundColor(.gray) } Text(post.content) .font(.body) if let imageName = post.image { Image(systemName: imageName) .resizable() .aspectRatio(contentMode: .fit) .frame(maxWidth: .infinity) ࣮श՝୊ͷྫϦϑΝΫλϦϯάνϟϨϯδ શͯͷϨΠΞ΢τΛΘ͟ͱCPEZʹू໿ େମߦ͙Β͍͋Δ

import SwiftUI struct Post: Identifiable { let id = UUID()
let username: String let handle: String let time: Date let content: String let avatar: String let retweets: Int let likes: Int let comments: Int let views: Int let image: String? } struct SNSView: View { let posts = [ Post( username: "John Doe", handle: "@johndoe", time: Date(), content: "μ΢ϯλ΢ϯͷ৽͍͠ΧϑΣͰ࠷ߴͷίʔώʔΛҿΈ·ͨ͠ʂ", avatar: "person.circle", retweets: 12, likes: 34, comments: 5, views: 120, image: nil ), Post( username: "Jane Smith", handle: "@janesmith", time: Date().addingTimeInterval(-3600), content: "࠷৽ͷιϑτ΢ΣΞΞοϓσʔτͷ৽ػೳ͕େ޷͖Ͱ͢ʂ", avatar: "person.circle.fill", retweets: 20, likes: 55, comments: 8, views: 200, image: nil ), Post( username: "Alice Johnson", handle: "@alicej", time: Date().addingTimeInterval(-7200), content: "ࠓ೔ͷϏʔνͰͷඒ͍͠༦೔ɻ", avatar: "person", retweets: 18, likes: 45, comments: 3, views: 180, image: "sun.max" ), Post( username: "Bob Brown", handle: "@bobb", time: Date().addingTimeInterval(-86400), content: "ࠓேͷૉ੖Β͍͠ϫʔΫΞ΢τηογϣϯɻ", avatar: "person.crop.circle", retweets: 10, likes: 30, comments: 2, views: 150, image: "figure.walk" ), Post( username: "Charlie Davis", handle: "@charlied", time: Date().addingTimeInterval(-172800), content: "ྺ࢙ʹؔ͢Δڵຯਂ͍ຊΛಡΜͰ͍·͢ɻ", avatar: "person.crop.circle.fill", retweets: 25, likes: 60, comments: 10, views: 220, image: nil ), Post( username: "Dana Lee", handle: "@danalee", time: Date().addingTimeInterval(-259200), content: "ࠓ೔͸͓͍͍͠ΫοΩʔΛম͖·ͨ͠ɻ", avatar: "person.circle", retweets: 15, likes: 50, comments: 6, views: 170, image: nil ), Post( username: "Evan Green", handle: "@evangreen", time: Date().addingTimeInterval(-345600), content: "ࢁͰϋΠΩϯάʹߦ͖·ͨ͠ɻͱͯ΋ϦϑϨογϡ͠·ͨ͠ʂ", avatar: "person.circle.fill", retweets: 22, likes: 58, comments: 9, views: 210, image: nil ), Post( username: "Fiona White", handle: "@fionawhite", time: Date().addingTimeInterval(-432000), content: "৽͍͠ςϨϏγϦʔζΛݟ͍ͯ·͢ɻຊ౰ʹ໘ന͍Ͱ͢ʂ", avatar: "person", retweets: 30, likes: 75, comments: 12, views: 240, image: nil ), Post( username: "George King", handle: "@georgek", time: Date().addingTimeInterval(-518400), content: "ࠓ໷ͷσΟφʔͷͨΊʹ৽͍͠ϨγϐΛࢼ͍ͯ͠·͢ɻ", avatar: "person.crop.circle", retweets: 14, likes: 40, comments: 4, views: 160, image: nil ), Post( username: "Hannah Scott", handle: "@hannahs", time: Date().addingTimeInterval(-604800), content: "ࠓ೔͸ത෺ؗΛ๚Ε·ͨ͠ɻͨ͘͞Μͷັྗతͳల͕ࣔ͋Γ·ͨ͠ɻ", avatar: "person.crop.circle.fill", retweets: 28, likes: 70, comments: 11, views: 230, image: "building.columns" ) ] var body: some View { NavigationView { ScrollView { VStack(spacing: 0) { ForEach(posts) { post in HStack(alignment: .top) { Image(systemName: post.avatar) .resizable() .frame(width: 50, height: 50) .clipShape(Circle()) VStack(alignment: .leading) { HStack { Text(post.username) .font(.headline) Text(post.handle) .font(.subheadline) .foregroundColor(.gray) Spacer() Text(formatDate(post.time)) .font(.subheadline) .foregroundColor(.gray) } Text(post.content) .font(.body) if let imageName = post.image { Image(systemName: imageName) .resizable() .aspectRatio(contentMode: .fit) .frame(maxWidth: .infinity) .padding(.horizontal) } HStack { Button { } label: { HStack { Image(systemName: "message") Text("\(post.comments)") } } Spacer() Button { } label: { HStack { Image(systemName: "arrow.2.squarepath") Text("\(post.retweets)") } } Spacer() Button { } label: { HStack { Image(systemName: "heart") Text("\(post.likes)") } } Spacer() HStack { Image(systemName: "eye") Text("\(post.views)") } } .foregroundColor(.gray) .padding([.horizontal, .bottom], 10) } } .padding([.horizontal, .top], 10) Divider() } } } .navigationBarTitle("ϗʔϜ", displayMode: .inline) .overlay { HStack { Spacer() VStack { Spacer() Button { } label: { Image(systemName: "plus") .resizable() .frame(width: 24, height: 24) .padding() .background(Color.blue) .foregroundColor(.white) .clipShape(Circle()) .shadow(radius: 10) } .padding() } } } } } func formatDate(_ date: Date) -> String { let formatter = RelativeDateTimeFormatter() formatter.unitsStyle = .short return formatter.localizedString(for: date, relativeTo: Date()) } } #Preview { SNSView() } શ෦ग़͢ͱ͜Μͳײ͡ ͜ΕΛෳ਺ͷ7JFX΍ϑΝΠϧʹ෼ׂͯ͠΋Β͏

࣮श՝୊ͷྫϦϑΝΫλϦϯάνϟϨϯδ w ΍ͬͯΈͨײ૝ w ͳ͔ͳ͔͍͍ڭࡐͩͬͨ w ΈΜͳద੾ͳ7JFXͷཻ౓΍໋໊ʹ͍ͭͯ৭ʑ೰ΜͰ͍ ͨ

࣮श՝୊ͷྫϦϑΝΫλϦϯάνϟϨϯδ w ໛ൣղ౴ΛݟͤΔ΂͠ w ͸͡Ί͸໛ൣղ౴͸༻ҙͯ͠ͳ͔ͬͨ w ͕࣌ؒ༨ͬͨͷͰٸᬎϦϑΝΫλϦϯάΛ࣮ԋͨ͠ w डߨऀͷೲಘؒɾཧղ౓͕ߴ͘ͳΔ

·ͱΊ w ݚमͷޮՌ w 4XJGU6*ͷίʔυϨϏϡʔͷࢦఠ͕গͳ͔ͬͨ🎉 w ΦϯϘʔσΟϯάͷظ͕ؒ୹ॖͰ͖ͨ🎉 w ࠓճͷडߨऀ໊ w
ظؒ೔ w ಺༰࠲ֶ ࣮श

フェンリルの SwiftUI の研修を覗いてみる / Fenrir SwiftUI Training

フェンリルの SwiftUI の研修を覗いてみる / Fenrir SwiftUI Training

More Decks by Studio Rookery

Other Decks in Technology

Featured

Transcript