【前編】Swiftで「iPhoneアプリ作り体験」ハンズオン！

オープニングは参加者同士で自己紹介

最初にTECH PLAY運営事務局から、二日間のスケジュールや注意事項が説明された後、参加者同士で、「名前・普段何をしている人なのか・ハンズオンで学びたいこと」について、各テーブルごとに自己紹介が行われました。

Alt text

続いて、主催の仙台市産業振興課・荒木田理さんから、『SENDAI X-TECH Innovation Project』について、これまでの取り組みが紹介されました。

「仙台市にはIT企業がたくさんありますが、最新技術などを学ぶ場が少なかったことから、本プロジェクトを昨年度から立ち上げました。さらにエンジニアがチャレンジできる機会創出も行っており、楽天野球団の新サービスを提案するオープンイノベーションプロジェクトなども実施しています。ぜひ、一緒に仙台市でもコミュニティや勉強会を盛り上げていきましょう」

Alt text
▲仙台市経済局産業振興課荒木田理さん

「SwiftでiPhoneアプリ作り体験ハンズオン」スタート！

今回のハンズオンで学ぶ「SwiftUI」は、2019年6月の「WWDC19」で発表された、Swift言語を用いて効率的にユーザーインターフェイスを定義できるUIフレームワーク。SwiftUIを用いると、UI開発が簡単にできるようになります。ただし、SwiftUIで作ったアプリはiOS 13以降でしか動きません。

ハンズオンの講師は、「風呂グラマー」などの相性でお馴染みの増井雄一郎さん。広部一弥さん、高允澈さんにチューターを務めていただきました。

Alt text
▲左から、広部一弥さん、増井雄一郎さん、高允澈さん

まずは、講師の増井さんからSwiftUIに関する基礎知識と注意事項が説明されました。 iPhoneのアプリケーションは、Xcodeという統合開発環境で開発を行いますが、SwiftUIはXcode11からアプリが書けるようになります。OSも最新のCatalinaでないと、全部の機能が使えません。

また、Live Previewという実際にコードを書くと、リアルタイムにパソコン（Mac)の上でどんな画面になるか、確認ができる機能を使うために、最新OSに上げる必要があります。まだできることは少なく、UIKit（iOSのUIコンポーネント）でできることがすべてできるわけではないのですが、「今から慣れておけば1年後には必ず役に立つはず」と、増井さんは言います。

Alt text

iOSの新たなユーザーインターフェースについて

iOS（iPhone, iPad, AppleWatch, macOSなど）はフラットデザインという白が基調であまり素材感がないユーザーインターフェースを使っています。2013年にiOS7で装飾を排したフラットデザインになったのですが、「これが今までで一番大きなデザイン変更のルールだった」と、増井さん。

それまでのスキューモーフィズムでリッチなグラフィックから、意味や構造をシンプルに表すデザインにしましょうというフラットデザインに移行。SwiftUIもシンプルな部品を集めて構造を作るUIになっています。iPhone, iPad, AppleWatch, macOSなど、デバイスの画面サイズが違っても同じことができるように、ユーザーインターフェースが統一化されているのです。

iOS 13からサポートされたのが、背景色を暗くする「Dark mode」と、iPadで複数のアプリを画面上に同時に起動・操作できる「Split screen」。これまでアプリによって色が決まっていた背景色をアプリの利用シーンによって、色を変えられるようになった。増井さんは、「デザイナーには、色を決めるといった見た目やグラフィカルなデザインではなく、機能を意味としてデザインしてほしい」という意図からではないかと推測しています。

Alt text

増井さんは家の間取り図がSwiftUI、家具はComponentと、家のデザインにこれを例え、「今までは絵を描くようにデザインしていたものが、既製品を合わせてレイアウトすることでデザインする。同じブランドの家具を使っても部屋のレイアウトは人によって全然違うように、同じパーツを使っても、全然受ける印象が違う。足りないものに関しては作るけど、既製品がある場合はなるべく使うというデザインの方向性になる」といいます。

SwiftUIは標準部品だけを使うので、ユーザーにとっていいことは、ボタンが同じデザインなので迷わなくなること。デザイナーは標準部品の中で作ることができるので楽になる。理解していないと実装が大変ですが、理解していればとても楽になるというのが特徴。

一方、Androidはスキューモーフィズムとフラットデザインの間を狙ったマテリアルデザイン。入力欄に影や枠を入れたりなど、セミフラットデザインとも言われています。

UI定義をコードで書く宣言的UI

SwiftUIは、HTMLのように、テンプレートエンジンのようなコードを書いていくとそのままUIになり、定義することができるようになります。

「今までUIを作るときは、Interface Builderというツールを使い、Xcodeではお絵描きソフトのようにパーツを載せて、線を引いてプログラムを追加していくUIを作っていた。だが、SwiftUIはそういったGUI機能がなくなった代わりに、Swiftを使って画面UIを作ることができるようになった。非常にシンプルなソースコードだけでUIが作れるようになったことが今回の大きな特徴です」（増井さん）

Alt text

宣言型UIと言われるコードを使ってUIを構築していく手法は、ここ最近（2013年くらいから）の流行で、React.jsやVue.jsのようにJavaScriptを使って画面を構築していくことが増えてきたのだそう。

「他のプログミング言語を使ったことがある人は、Swiftでそんなに悩むことはないと思います。良くも悪くもあまり特徴のない言語。Xcodeがよくできているので、触ってみるのが一番。まずはXcodeを起動してみてください」（増井さん）

Swiftは型付けが強いオブジェクト言語

さらに講義は技術的な内容に進み、コードを書きながらの説明が続きます。Version11.2.1になっているか、XcodeのSwiftの動きを試してみる機能「playground」が使えることや、実行結果が右側に表示されることなどを確認します。

Alt text

Swiftは型をしっかりもったオブジェクト指向言語で、型推論という機能がついています。この型推論はコンピュータが推測してくれる便利な機能があり、よく使うキーワードが画面上に出るので、プログラミングがすっきりしているように見えます。一方で、コンパイルが遅くなってしまうというデメリットも。良くも悪くも型が強い言語の特徴を備えています。

型の基本や、変数のvarと定数のletの違いなどについても説明されました。言語によって意味が違うので混乱することもありますが、varが変数定義、letが定数定義と覚えるとよいというアドバイスも。メモリ管理については、ガベージコレクションで行います。Swiftは特循環参照が起こるときに、自分でメモリを解放しなければならないなど、注意点も伝えられました。

For文、Dictionary、Class / Structなど、増井さんのライブコーディングとともに他言語との違いやSwiftの特徴などが解説され、参加者も手を動かし、コード入力を実践します。

Alt text

公式チュートリアルに従い、SwiftUIでアプリを作成してみよう

昼食後は、いよいよSwiftUIの公式チュートリアルをもとにアプリを作成するハンズオンへ。チュートリアルのファイルをダウンロードし、Xcodeの環境設定を行い、SwiftUIを選択。プロジェクトの保存先を選択してCreateボタンをクリック。プロジェクトを作成すると、ContentView.swiftが開きます。

Alt text