Hello! - SwiftUI でプログラミング。 - 1

アップルが公開しているチュートリアルです。すごく丁寧に解説してありますが英語なので少し説明を加えてみます。

Hello, SwiftUI | Apple Developer Documentation

今回はXcodeを使わずSwiftPlaygrounds でやってみようと思います。SwiftPlaygroundsはiPadとMacで無料でダウンロードできます。

Swift Playgrounds

さっそく順番にやっていきます。

Create a new project

ここではまずプロジェクトを作っていきます。がXcodeで作ってありますのでSwiftPlaygroundsでは一瞬です。プラスボタンを押すだけで何も考えずに出来上がりです。

Explore your project

ここでは画面の構成を見ていきます。

左側にあるナビゲーションエリアではContentViewが選択されていてそのコード、プレビューがそれぞれの画面で表示されています。

Explore your code

次はコードエリアに書かれているコードの中身を見てみます。

書かれているコードはオープンソースでアップルが開発を進めている Swift と SwiftUI で自然言語のように読めるように設計されています。

Swift はプログラミング言語で、アプリの動作等を決めていくことになります。 SwiftUI は、Swiftをもとにアプリの操作画面を作成するための表示や操作の方法、配置など実際にアプリを使い易いように設計できるフレームワークです。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
    }
}

このコードの中では命令のために使われている要素については英語の単語が使われます。

例えば"Image"、"Text"、"Image"の下の.imageScale。これらは画面表示に必要な命令の単語となっています。

記述の方法ではキャメルケースと呼ばれる単語の連結方法があります。ここでは

imageScale　　　image  + scale　・・・　2つ目の単語の先頭を大文字に

が使われています。

次にコードの中に括弧"()"が使われていることがわかると思いますが、これは直前のコードに関連する情報が含間れています。そして中括弧"{}"は囲われているコードが２行になっていてもひとまとめであることを理解するのに役立ちます。

次にインデントについて説明します。インデントなしでコードを表示します。

struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
}
}
}

先に出しているコードと比べて文章の行頭に空白がなく見にくい印象があると思います。空白を挿入(インデント)して、先頭の文字を右に押しやることで見やすく、理解し易い形にしています。ただ、インデントのないコードでも問題なく実行されます。

次にシンタックスハイライトについて紹介します。コードエリアにコードを書いていくとある一定のルールで文字色が変わっていることがわかると思います。その単語の役割ごとに自動で色の変化をつけわかりやすくしています。
例えばvarやstruct などは Swift のキーワードですが、Image 、Textなどは SwiftUI の機能ということが示されています。

"Hello, world!"という文字がコードの中にありますが、ここではオレンジっぽい色が付けられ引用符がついているのが文字、Swiftでは"string"という表現をします。