HTMLコーダーよSwiftUIれ〜型を制する者はすべてを制す〜

ʙܕΛ੍͢Δऀ͸͢΂ͯΛ੍͢ʙ ど ͜ で ൃද͢Ε ば ͍͍ͷ͔Θ͔Βͳ͍ٕज़-5ձ ZVNFNJ )5.-ίʔμʔΑ4XJGU6*Ε

໊લ ZVNFNJʢΏΊΈʣ ࢓ࣄ 6*σβΠϯ αʔϏεσβΠϯ σβΠϯίϯαϧςΟϯά ࢿ֨ )5.-ϓϩϑΣογϣφϧೝఆϨϕϧ ΍͍͖ͬͯ )5.-
$44 +BWB4DSJQU 7VFKT 4XJGU 4XJGU6* 3VCZPO3BJMT 1ZUIPO

IUUQTHJUIVCDPNOZVNFNJIVNBOJUJFTMU@XFC

IUUQTHJUIVCDPNOZVNFNJIVNBOJUJFTMU@TXJGUVJ

શମ var body: some View { HStack { Text("TODO") .font(.title)
.fontWeight(.bold) Spacer() } .padding() HStack(alignment: .center, spacing: 8) { TextField("΍Δ͜ͱ", text: $text) .textFieldStyle(RoundedBorderTextFieldStyle()) Button(action: { addTodo() }){ Text("௥Ճ") } .buttonStyle(primaryButtonStyle()) } .padding() List { ForEach(todos.indices, id: \.self) { index in HStack { Text(todos[index]) Spacer() Button(action: { removeTodo(index: index) }){ Text("׬ྃ") } .buttonStyle(primaryButtonStyle()) } } } } } <body> <div id="app"> <header class="header"> <h1 class="title">TODO</h1> </header> <main class="main"> <div class="add-todo"> <input class="todo-text" type="text" placeholder="΍Δ͜ͱ" v-model="newTodo"> <input class="button" type="button" value="௥Ճ" v-on:click="addTodo"> </div> <ul class="list-todo"> <li v-for="(todo, index) in todos" v-bind:key="todo.id"> <p class="text">{{ todo.text }}</P> <button class="button" v-on:click="removeTodo(index, todo)">׬ྃ</button> </li> </ul> </main> </div> </body> JOEFYIUNM $POUFOU7JFXTXJGU

var body: some View { HStack { Text("TODO") .font(.title) .fontWeight(.bold)
Spacer() } .padding() HStack(alignment: .center, spacing: 8) { TextField("΍Δ͜ͱ", text: $text) .textFieldStyle(RoundedBorderTextFieldStyle()) Button(action: { addTodo() }){ Text("௥Ճ") } .buttonStyle(primaryButtonStyle()) } .padding() List { ForEach(todos.indices, id: \.self) { index in HStack { Text(todos[index]) Spacer() Button(action: { removeTodo(index: index) }){ Text("׬ྃ") } .buttonStyle(primaryButtonStyle()) } } } } } <body> <div id="app"> <header class="header"> <h1 class="title">TODO</h1> </header> <main class="main"> <div class="add-todo"> <input class="todo-text" type="text" placeholder="΍Δ͜ͱ" v-model="newTodo"> <input class="button" type="button" value="௥Ճ" v-on:click="addTodo"> </div> <ul class="list-todo"> <li v-for="(todo, index) in todos" v-bind:key="todo.id"> <p class="text">{{ todo.text }}</P> <button class="button" v-on:click="removeTodo(index, todo)">׬ྃ</button> </li> </ul> </main> </div> </body> JOEFYIUNM $POUFOU7JFXTXJGU શମ

<header class="header"> <h1 class="title">TODO</h1> </header> HStack { Text("TODO") .font(.title) .fontWeight(.bold)
Spacer() } .padding() JOEFYIUNM $POUFOU7JFXTXJGU λΠτϧ .header > .title { font-size: 1rem; font-weight: 700; } DPNNPODTT

<div class="add-todo"> <input type="text" class="todo-text" placeholder="΍Δ͜ͱ" v-model="newTodo"> <button class="button" v-on:click="addTodo">௥Ճ</button>
</div> HStack(alignment: .center, spacing: 8) { TextField("΍Δ͜ͱ", text: $text) .textFieldStyle(RoundedBorderTextFieldStyle()) Button(action: { addTodo() }){ Text("௥Ճ") } .buttonStyle(primaryButtonStyle()) } .padding() JOEFYIUNM $POUFOU7JFXTXJGU ೖྗͱϘλϯ

<ul class="list-todo"> <li v-for="(todo, index) in todos" v-bind:key="todo.id"> <p class="text">{{
todo.text }}</P> <button class="button" v-on:click=“removeTodo(index)">׬ྃ</button> </li> </ul> List { ForEach(todos.indices, id: \.self) { index in HStack { Text(todos[index]) Spacer() Button(action: { removeTodo(index: index) }){ Text("׬ྃ") } .buttonStyle(primaryButtonStyle()) } } } JOEFYIUNM $POUFOU7JFXTXJGU Ϧετ

΄΅΄΅͍ͬ͠ΐ΍Μ͚ ŋТŋ

w ͳΜͰ͜Μͳϥϑ͔Β࣮૷Ͱ͖ͨΜͩΖ͏ w ͳΜͰಈ͖·Ͱ૝૾Ͱ͖ΔΜͩΖ͏ w ͳΜͰ)5.-Ͱ΋4XJGU6*Ͱ΋࡞ΕͨΜͩΖ͏ ͯΏʔ͔ɺͦ΋ͦ΋Ͱ͢Α

w ͳͥίʔμʔ͸Χϯϓ͔Β࣮૷Ͱ͖Δͷ͔ w ͳͥσβΠφʔ͸;Θ;ΘͳҊ͔݅ΒσβΠϯͰ͖Δͷ͔ w ͳͥϢʔβʔ͸ॳΊͯݟͨΞϓϦΛૢ࡞Ͱ͖Δͷ͔ ΋ͬͱɺͦ΋ͦ΋Ͱ͢Α

6*ʹ΋ܕ͕͋Δ ͻͱ͸໨ʹݟ͑Δ΋ͷΛʰͳʹ͔ʱͱͯ͠ೝࣝ͢Δɻ ҙຯෆ໌ͳҊ݅ͷͳ͔ͰɺσβΠφʔ͸ೝࣝ͢΂͖ܗΛ͜ͷੈʹఏࣔ͢Δɻ ্ख͍ίʔμʔ͸ɺఏࣔ͞Εͨ΋ͷ͕ʮ͜Ε͸Ϣʔβʔʹͱͬͯͳʹ͔ʯΛߟ࣮͑ͯ૷͢Δɻ ܕΛ஌Βͳ͍ίʔμʔ͸EJWͱTQBO͚ͩͰੜ͖Δɻ σʔλʹܕ͕͋ΔΑ͏ʹɺ6*ʹ΋ܕ͕͋Δɻ 6*ͷܕͱ͸ɺͻͱͼͱʹΑͬͯ͞ΕΔڞ௨ͷೝࣝͷ࢓ํͰ͋Δɻ ͦ͏͍͏Θ͚ͰίʔμʔΑʂ6*ͷܕʹ໨֮ΊΑ͏ʂ4XJGU6*Λ΍Ζ͏ʂ ʢٯ΋Մʣ ㅟ
ㅟ ㅟ ㅟ ㅟ ㅟ ㅟ ㅟ ㅟ ㅟ ㅟ ㅟ ㅟ ㅟ

HTMLコーダーよSwiftUIれ〜型を制する者はすべてを制す〜

HTMLコーダーよSwiftUIれ〜型を制する者はすべてを制す〜

ゆめみん

More Decks by ゆめみん

Other Decks in Programming

Featured

Transcript

ʙܕΛ੍͢Δऀ͸͢΂ͯΛ੍͢ʙ ど ͜ で ൃද͢Ε ば ͍͍ͷ͔Θ͔Βͳ͍ٕज़-5ձ ZVNFNJ )5.-ίʔμʔΑ4XJGU6*Ε

໊લ ZVNFNJʢΏΊΈʣ ࢓ࣄ 6*σβΠϯ αʔϏεσβΠϯ σβΠϯίϯαϧςΟϯά ࢿ֨ )5.-ϓϩϑΣογϣφϧೝఆϨϕϧ ΍͍͖ͬͯ )5.-

IUUQTHJUIVCDPNOZVNFNJIVNBOJUJFTMU@XFC

IUUQTHJUIVCDPNOZVNFNJIVNBOJUJFTMU@TXJGUVJ

શମ var body: some View { HStack { Text("TODO") .font(.title)

var body: some View { HStack { Text("TODO") .font(.title) .fontWeight(.bold)

<header class="header"> <h1 class="title">TODO</h1> </header> HStack { Text("TODO") .font(.title) .fontWeight(.bold)

<div class="add-todo"> <input type="text" class="todo-text" placeholder="΍Δ͜ͱ" v-model="newTodo"> <button class="button" v-on:click="addTodo">௥Ճ</button>

<ul class="list-todo"> <li v-for="(todo, index) in todos" v-bind:key="todo.id"> <p class="text">{{

΄΅΄΅͍ͬ͠ΐ΍Μ͚ ŋТŋ

w ͳΜͰ͜Μͳϥϑ͔Β࣮૷Ͱ͖ͨΜͩΖ͏ w ͳΜͰಈ͖·Ͱ૝૾Ͱ͖ΔΜͩΖ͏ w ͳΜͰ)5.-Ͱ΋4XJGU6*Ͱ΋࡞ΕͨΜͩΖ͏ ͯΏʔ͔ɺͦ΋ͦ΋Ͱ͢Α

w ͳͥίʔμʔ͸Χϯϓ͔Β࣮૷Ͱ͖Δͷ͔ w ͳͥσβΠφʔ͸;Θ;ΘͳҊ͔݅ΒσβΠϯͰ͖Δͷ͔ w ͳͥϢʔβʔ͸ॳΊͯݟͨΞϓϦΛૢ࡞Ͱ͖Δͷ͔ ΋ͬͱɺͦ΋ͦ΋Ͱ͢Α

HTMLコーダーよSwiftUIれ 〜型を制する者はすべてを制す〜

HTMLコーダーよSwiftUIれ 〜型を制する者はすべてを制す〜

More Decks by ゆめみん

Other Decks in Programming

Featured

Transcript

HTMLコーダーよSwiftUIれ〜型を制する者はすべてを制す〜

HTMLコーダーよSwiftUIれ〜型を制する者はすべてを制す〜