見出し画像

【じっくりSw1ftUI 15】Essentials第４章〜Playgroundで遊ぼう①基本的な動かしかた

M_Kaku堂

さてと、前回

でPlaygroundで遊ぶ準備まで整ったところで、やっとこ

Swiftプログラミングの本編に入ってく〜〜〜〜

と、ここでひとつお断りなんだけど、

本のコードをまんまここに載せるのは流石に、著作権なんかに絡んでくるので、

オイラなりに作った似たようなコードを作成

今後は、ここに載せてくね〜〜〜〜

早速、第４章をじっくり読んでいこう

まずは、

Playgroundっちゃあ、Syntax＝コードの文法を学ぶためのツール

だよ〜〜〜ってことが書いてあって、キャプチャはないけども、

でやったPlaygroundファイルを作る操作方法を説明してるね👀その後に、
各テンプレートの違いについて説明していて、

違いとしては、

  • Blank：Swift コーディングを試す

  • Game：SpriteKit フレームワークを試すことができる、事前構成されたプレイグラウンドを用意

  • Map：iOS MapKit フレームワークを試すことができる、事前構成されたプレイグラウンドを用意

  • Single View ：ユーザー インターフェイス レイアウトを必要とするコードを試すためのビュー コントローラー環境を提供

てことらしい。

この解説、ものすごく重要じゃね👀？

（＊日本語の本だと、まず、Playgroundになぜかそこまで重きを置いてない本ばかりで、こんな解説は、６年くらい前からSwiftやってるけど初めて知ったレベル💦）

その後に、色々と前回示したウィンドウの構成の話をしてて、一番シンプルなコードの話をしてるので、早速、コードを打って、デバッグしてみよう🕺

//iOSAppsDevsEssentials第４章
var greeting4_1 = "Let's Playground"
print(greeting4_1)

ってコードを追加

てな感じで〜〜〜

実行すると、、、

ちゃんと文字列が出てきた

次に、実行結果をインスペクターに表示させてみよう

使うコードは、繰り返し文なんだけど、

var x4_2 = 1
for idx4_2 in 1...2300 {
    let y4_2 = idx4_2 * x4_2
    x4_2 += 1
}

てな感じで、実行ボタンを押した後で、右端にある

目のマーク（Quick Look）をクリックすると、、、
てな
感じで、確認できる

次はコメントの入れ方を書いていて、

//　１行コメント
/* 
複数行コメント 
*/

を解説してる🌱さっきのコードにそれぞれコメントを使ってみると、、、

//iOSAppsDevsEssentials第４章
//一番シンプルなコード
var greeting4_1 = "Let's Playground"
print(greeting4_1)

/*
 繰り返しを使って
 Quick Look機能で処理結果の推移
 を確認できる
 */
var x4_2 = 1
for idx4_2 in 1...2300 {
    let y4_2 = idx4_2 * x4_2
    x4_2 += 1
}

みたいな感じかな🧐さらに、リッチなコメントを入れてみると

/*:
 # Welcome to iOS17AppsDevsEssentials
 *ここからは、*Essentials*のコード練習で使ってるぞ🕺
 * 色々なコードをじっくり学んで、 **iOS17AppsDevsEssentials**
 * 面白いアプリがいっぱい作れるといいなあ
 */
を追記して、再生マークをクリックしても
結果は何も変わらない、、、💦

っと、実は、

Editor＞Show Rendered Markupをクリックしないと、、、
出てこないだけ！てゆー👀
/*
 # Welcome to iOS17AppsDevsEssentials
 *ここからは、*Essentials*のコード練習で使ってるぞ🕺
 * 色々なコードをじっくり学んで、 **iOS17AppsDevsEssentials**
 * 面白いアプリがいっぱい作れるといいなあ
 */

で最初の:を外すと、同じ操作をしてもダメ変わらないので、オイラのコメントは、

//: が１行コメント

/*:
複数コメント
*/

でやる方がリッチテキストでのマークアップまで考えると正確なのね💦
知らなかった👀

/*:
 # Welcome to iOS17AppsDevsEssentials
 *ここからは、*Essentials*のコード練習で使ってるぞ🕺
 * 色々なコードをじっくり学んで、 **iOS17AppsDevsEssentials**
 * 面白いアプリがいっぱい作れるといいなあ
 */

に解説も入れとくと、

/*:内の
*はイタリック文字
**で太字

なのね💦

いやあ〜勉強になるわ🕺

例えば、

/*:
 # 新装開店　M_Kaku堂定食へようこそ
 * ○月×日に新装開店しました
 * 当店の売りは **SwiftUI定食　（ご飯の量は選べます）　デザート付きで、2000円**
 * お問い合わせ先は、*profile*　をご確認ください
 */
て感じで、レンダリングすると、、、
でけた〜〜〜〜🕺
イタリック表記は英語表記じゃないと意味ない様子👀💦

＊詳細は、、、

を見ろってことらしい、、、💦

で次にSwiftUIのコードをPlaygroundで実践的に使えるように

とりあえずファイルを２つ追加しろってことみたいだから、

てな感じでページを追加して
追加後〜〜〜
名前を適当に2ページ目は変更してと、、、
追加した１ページ目に
import PlaygroundSupport

を追加👀して、適当に、

struct RectangleView: View {
    var body: some View {
        VStack{
            Rectangle()
                .fill(Color.yellow)
                .frame(width: 300, height: 300)
            Button(action: {
                
            }){
                Text("オイラの四角形")
            }
        }
        .padding()
    }
}

PlaygroundPage.current.setLiveView(RectangleView().padding(100))

を追加して〜〜〜

再生マークをクリック〜〜〜
何も変わらない、、、💦

とここで、一旦停止して、

コイツをクリックすると、、、
なんか表示が変わったぞ👀
再生ボタンをクリックすると、、、
おお出来た！
よし、停止して〜〜〜

さっきのコードをもう一つのページの方に丸っとコピーして、下のコードに変換

import UIKit
import SwiftUI
import PlaygroundSupport

struct RectangleView: View {
    var body: some View {
        VStack{
            Circle()
                .fill(Color.green)
                .frame(width: 300, height: 300)
            Button(action: {
                
            }){
                Text("オイラのサークル")
            }
        }
        .padding()
    }
}

PlaygroundPage.current.setLiveView(RectangleView().padding(100))
表示でけたど〜〜〜

と、最後に、１ページ目に戻って、面白いので、下のコードに変更

struct RectangleView: View {
    
    @State private var rotation4_3: Double = 0
    
    var body: some View {
        VStack{
            Rectangle()
                .fill(Color.yellow)
                .frame(width: 300, height: 300)
                .rotationEffect(.degrees(rotation4_3))
                .animation(.bouncy(duration: 2), value: rotation4_3)
            Button(action: {
                rotation4_3 = (rotation4_3 < 360 ? rotation4_3 + 45 : 0)
            }){
                if rotation4_3 < 90 {
                    Text("オイラの四角形")
                        .foregroundColor(Color.red)
                } else {
                    Text("オイラの四角形")
                        .foregroundColor(Color.green)
                }
            }
        }
        .padding()
    }
}

PlaygroundPage.current.setLiveView(RectangleView().padding(100))

動かすと、

１回目ボタンクリック＝90度未満の回転までは、テキストが赤文字
90度以上回転だと、緑文字に変化した🕺

っと、最後に色々と管理が今後面倒くさくなりそうなので、

コードをわかりやすいように修正しとこう

今回のコード（まとめ）

◼️Untitled Page

//最初からあるコード
import UIKit
//じっくり１４で追加
import SwiftUI
//じっくり１5で追加
import PlaygroundSupport

//最初からあるコード
var greeting = "Hello, playground"
//じっくり１４で追加
print(greeting)

//じっくり１5で追加
//iOSAppsDevsEssentials第４章
//一番シンプルなコード
var greeting4_1 = "Let's Playground"
print(greeting4_1)

/*
 繰り返しを使って
 Quick Look機能で処理結果の推移
 を確認できる
 */
//じっくり１5で追加
var x4_2 = 1
for idx4_2 in 1...2300 {
    let y4_2 = idx4_2 * x4_2
    x4_2 += 1
}
//じっくり１5で追加

/*:
 # 新装開店　M_Kaku堂定食へようこそ
 * ○月×日に新装開店しました
 * 当店の売りは **SwiftUI定食　（ご飯の量は選べます）　デザート付きで、2000円**
 * お問い合わせ先は、*profile*　をご確認ください
 */
struct RectangleView4_3: View {
    
    @State private var rotation4_3: Double = 0
    
    var body: some View {
        VStack{
            Rectangle()
                .fill(Color.yellow)
                .frame(width: 300, height: 300)
                .rotationEffect(.degrees(rotation4_3))
                .animation(.bouncy(duration: 2), value: rotation4_3)
            Button(action: {
                rotation4_3 = (rotation4_3 < 360 ? rotation4_3 + 45 : 0)
            }){
                if rotation4_3 < 90 {
                    Text("オイラの四角形")
                        .foregroundColor(Color.red)
                } else {
                    Text("オイラの四角形")
                        .foregroundColor(Color.green)
                }
            }
        }
        .padding()
    }
}

PlaygroundPage.current.setLiveView(RectangleView4_3().padding(100))

◼️SwiftUITraining

//: [Previous](@previous)
import UIKit
import SwiftUI
import PlaygroundSupport

struct CircleView4_3: View {
    var body: some View {
        VStack{
            Circle()
                .fill(Color.green)
                .frame(width: 300, height: 300)
            Button(action: {
                
            }){
                Text("オイラのサークル")
            }
        }
        .padding()
    }
}

PlaygroundPage.current.setLiveView(CircleView4_3().padding(100))
//: [Next](@next)

今回の個人的なポイント

Playgroundだけでもすでにかなり内容が濃い感じで

色々できるってことがわかるね👀

前々回

で名前の付け方をやったと思うんだけど

章の中で何個目のコードかって感じで、

var x4_2 = 1

みたいな感じで、番号を振っておくと、

Playgroundで動かすときにはかなり便利。単純に、

var x = 1

だと、他のサンプルコードで、

同じxが出てきたときにどうする？

って話だし、見ただけで、

その章の何個目のサンプルコードかわかる

からね🕺

さてと後は、記事公開後に、前々回でやった作業をやって完了

動作確認
コード
ポイント
参考リンク

記事公開後のXcode側のコード

🔶Essentials4ファイル

import SwiftUI
import WebKit

struct Essentials4: View {
    var body: some View {
        VStack{
            TabView {
                Essentials4Contents()
                    .tabItem {
                        Image(systemName: contentsImageTab)
                        Text(contentsTextTab)
                    }
                Essentials4Code()
                    .tabItem {
                        Image(systemName: codeImageTab)
                        Text(codeTextTab)
                    }
                Essentials4Points()
                    .tabItem {
                        Image(systemName: pointImageTab)
                        Text(pointTextTab)
                    }
                Essentials4WEB()
                    .tabItem {
                        Image(systemName: webImageTab)
                        Text(webTextTab)
                    }
            }
        }
    }
}

#Preview {
    Essentials4()
}

struct Essentials4Contents: View {
    @State private var rotation4_3: Double = 0
    
    var body: some View {
        VStack{
            Rectangle()
                .fill(Color.yellow)
                .frame(width: 300, height: 300)
                .rotationEffect(.degrees(rotation4_3))
                .animation(.bouncy(duration: 2), value: rotation4_3)
            Button(action: {
                rotation4_3 = (rotation4_3 < 360 ? rotation4_3 + 45 : 0)
            }){
                if rotation4_3 < 90 {
                    Text("オイラの四角形")
                        .foregroundColor(Color.red)
                } else {
                    Text("オイラの四角形")
                        .foregroundColor(Color.green)
                }
            }
        }
        .padding()
    }
}

#Preview {
    Essentials4Contents()
}

struct Essentials4Code: View {
    var body: some View {
        ScrollView{
            Text(codeEssentials4)
        }
    }
}

#Preview {
    Essentials4Code()
}

struct Essentials4Points: View {
    var body: some View {
        ScrollView{
            Text(pointEssencials4)
        }
    }
}

#Preview {
    Essentials4Points()
}

struct Essentials4WebView: UIViewRepresentable {
    let searchURL: URL
    func makeUIView(context: Context) -> WKWebView {
        let view = WKWebView()
        let request = URLRequest(url: searchURL)
        view.load(request)
        return view
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        
    }
}

struct Essentials4WEB: View {
    private var url:URL = URL(string: urlEssentials4)!
    var body: some View {Essentials4WebView(searchURL: url)
    }
}

#Preview {
    Essentials4WEB()
}

🟧CodeManageFile

Playground側の以下を追加

let codeEssentials4 = """
◼️Untitle Page
//最初からあるコード
import UIKit
//じっくり１４で追加
import SwiftUI
//じっくり１5で追加
import PlaygroundSupport

//最初からあるコード
var greeting = "Hello, playground"
//じっくり１４で追加
print(greeting)

//じっくり１5で追加
//iOSAppsDevsEssentials第４章
//一番シンプルなコード
var greeting4_1 = "Let's Playground"
print(greeting4_1)

/*
 繰り返しを使って
 Quick Look機能で処理結果の推移
 を確認できる
 */
//じっくり１5で追加
var x4_2 = 1
for idx4_2 in 1...2300 {
    let y4_2 = idx4_2 * x4_2
    x4_2 += 1
}
//じっくり１5で追加

/*:
 # 新装開店　M_Kaku堂定食へようこそ
 * ○月×日に新装開店しました
 * 当店の売りは **SwiftUI定食　（ご飯の量は選べます）　デザート付きで、2000円**
 * お問い合わせ先は、*profile*　をご確認ください
 */
struct RectangleView4_3: View {
    
    @State private var rotation4_3: Double = 0
    
    var body: some View {
        VStack{
            Rectangle()
                .fill(Color.yellow)
                .frame(width: 300, height: 300)
                .rotationEffect(.degrees(rotation4_3))
                .animation(.bouncy(duration: 2), value: rotation4_3)
            Button(action: {
                rotation4_3 = (rotation4_3 < 360 ? rotation4_3 + 45 : 0)
            }){
                if rotation4_3 < 90 {
                    Text("オイラの四角形")
                        .foregroundColor(Color.red)
                } else {
                    Text("オイラの四角形")
                        .foregroundColor(Color.green)
                }
            }
        }
        .padding()
    }
}

PlaygroundPage.current.setLiveView(RectangleView4_3().padding(100))
◼️SwiftUITraining
import UIKit
import SwiftUI
import PlaygroundSupport

struct CircleView4_3: View {
    var body: some View {
        VStack{
            Circle()
                .fill(Color.green)
                .frame(width: 300, height: 300)
            Button(action: {
                
            }){
                Text("オイラのサークル")
            }
        }
        .padding()
    }
}

PlaygroundPage.current.setLiveView(CircleView4_3().padding(100))
//: [Next](@next)

"""

🟩PointManageFile

let pointEssencials4 = """
Playgroundだけでもすでにかなり内容が濃い感じで
色々できるってことがわかるね👀
前々回で名前の付け方をやったと思うんだけど
章の中で何個目のコードかって感じで、
var x4_2 = 1
みたいな感じで、番号を振っておくと、
Playgroundで動かすときにはかなり便利。単純に、
var x = 1
だと、他のサンプルコードで、
同じxが出てきたときにどうする？
って話だし、見ただけで、
その章の何個目のサンプルコードかわかる
からね🕺
"""

以外は、節や章見出しを各ファイルに同じ要領で増やしたのみ🕺

Apple公式サイト

さてと、次回は、

第４章まで完了したので、

💃第５章を進めてく〜〜〜🕺
また、週末に進めまする🧐

いいなと思ったら応援しよう！