まえがき
フロントエンドエンジニアとして 2,3 年やってきたが、今年 4 月突如として iOS エンジニアに転向することになったエンジニアによる技術メモです。
なお筆者が初学者のため内容の正しさは保証できません。不正確な情報、また間違い等ございましたらご指摘いただけると幸いです。
GUI の作成方法
通常のWebアプリでは基本的には、HTML による構造化情報と、CSS によるスタイリングによって最終的に画面が作成されていきますが、
iOS アプリにおいてもこれと同じような構成により画面の生成が行われています。
登場する概念
具体的な話を始める前に、このあと登場する概念について先に紹介します。
XIB (Xcode Interface Builder) ファイル
.xib ファイルはその略の通り、UI 作成に関するファイルです。
一般に xib ファイルで再利用を目的として UI 作成を行うため、フロントエンドでいうコンポーネントに近いと思います。
Storyboard ファイル
.storyboard ファイルは.xib の上位互換の立ち位置で、画面遷移情報も入れられます。
なので、xib がコンポーネント的な使い道に対して、一つの画面の構成、または複数画面の構成とその遷移情報の管理として使用するのに適しています。
Interface Builder (以降、IB)
IB とは、Xcode にビルトインされている、UI を視覚的に記述するエディターです。
IB と通して、前述の xib、storyboard ファイルの記述を行います。
Auto Layout
Auto Layout とは、xib や storyboard にて定義・配置された View に対して、そのサイズや配置に関する制約を与えます。
IB、またはコード上からこれらの制約を与えます。
CSS の属性 (e.g. position, width)というよりは、CSS そのものの概念に近いと（個人的に）思いますが、CSS ほど機能は豊富ではなくdisplay: flexに近い機能に関してはStackViewという UIView を使用するケースもあります。
主な作成パターン
UI の作成方法は主に以下の 3 パターンに別けられると思います。
- IB で作成する方法
- コード上で作成する方法
- SwiftUI で作成する方法
これらは完全に独立したものではなく、例えば IB 上で UIView の配置と Auto Layout による制約を加えられますが、動的にこれらを追加・変更・削除したい場合は 2.のコード上でそれらの操作をすることもあります。
フロントエンドに馴染みのある方であれば、以下のイメージを持っていただければ十分かと思います。
"1. IB で作成する方法"は、HTML と CSS で GUI を作成するようなもので、より高度な使い方として<template>タグのように事前に情報を埋め込んでおいて JavaScript 上で動的に利用するといった事も、 IB 上のopacityやisHidden属性の切り替えによって実現可能です。
"2. コード上で作成する方法"は、JavaScript 上でdocument.createElement('div')などの API を駆使して HTML や CSS を動的に操作し作成するようなものです。
"3. SwiftUI で作成する方法"は、JSX 記法のような JavaScript 上で UI を比較的簡単に書けるようなものです。（あくまでもイメージなので、トランスパイルなどは SwiftUI 上では行われません。）
あとがき
私がいざ初めてiOSアプリを開発する際には、特にGUIの作成方法についてよく理解できずにいました。（特にInterface Builderはアプリエンジニア以外にとっては新鮮？）
今回は詳細については触れず概念的なもののみに留めましたが、頭の中のざっくりとしたイメージを掴んで、今後の開発に役立てれば幸いです。