Swiftが気軽に学べるサイトまとめ（初級）ではインプット中心でしたが、今回はXcodeでコードを書いてUIを作れるコンテンツを紹介します💁‍♀️

📘目次
・この学習によって学べる事
・動画を見ながらサンプルアプリを作る
    1. designers.how
    2. How to make an iPhone App
    3. Stanford - Lecture 1 Introduction to iOS 11, Xcode 9 and Swift 4
    番外編：Swiftで作るToDoアプリ開発チュートリアル
・動画を見て学んだその先は？

この学習によって学べる事

モバイルアプリのデザイナーが知っているとヨサソウな事・学べる事を雑に書いてみました。

・Xcodeのツールの使い方
・画像の扱い方（Assetsフォルダに画像が収納されてるよ）
・レイヤーの順番がデザイン系ツールと逆
・iosはキャメルケースで書く
・角丸や色などのスタイルの指定方法
・ボタン要素の作り方…etc

動画を見ながらサンプルアプリを作る

1. designers.how
コレ一番オススメ🤩
まさにデザイナーのためのスキルアップするコンテンツがいっぱい詰まっています。
XcodeやSwift以外にもOrigami StudioやFlinto、After Effectsなどのチュートリアルが揃ってる点もイケてる😎

私が試してみたのはこのお天気アプリを作るエピソード
Xcode for Designers
episod1~episod4が終わった段階でなんとなく見た目が整ってきました

import UIKit
class ViewController: UIViewController {
  @IBOutlet weak var weatherIcon: UIImageView!
  @IBOutlet weak var temperatureLabel: UILabel!
  @IBOutlet weak var weatherLabel: UILabel!
  @IBOutlet weak var savedLocationButton: UIButton!
  override func viewDidLoad() {
      super.viewDidLoad()
      savedLocationButton.layer.cornerRadius = 4
  }
  @IBAction func locationTapped(_ sender: UIButton) {
  }
}

実際にXcodeを使ってコードを書いたり、Storyboardにパーツを置いていく作業をし、シュミレーターで確認する事で、何をやるとどこが変わるか、確認しながら作っていけるので、勉強になるし楽しいです。
これをやってみて新たな発見だったのは、角丸はコードで指定するという事。

フォントファミリーやサイズ、色などは、Storyboard上でも指定する事ができるので、感覚的に見た目の部分はStoryboardで指定できるかと思いきや、cornerRadiusって書かなきゃいけないんだなーと。

という感じでなんとなく書き始めてみるだけでも、新たな発見がありUI作る時やエンジニアさんと話す時にプラスになる事多いんじゃないかなと思いました。

2. How to make an iPhone App
今度はyoutubeを見ながら学習するのにオススメなコンテンツを紹介します。

youtubeにもアプリ開発における多くのハウツー系のコンテンツがありますが、その中から割とXcodeやSwiftのバージョンが新しくデザイナー向けによいのではと思ったものをピックアップしてみました。

これは20分あれば、一枚ペラの少し動きのあるプロトタイプが作れるよというテーマの動画になります。
Swiftのバージョンも新しいし、割とこの通り書いていけば実装できるのではないかと思いピックアップしてみました。

あと、どうでもいいですが説明している人がイケメンで聞き取りやすい声でした💁🏼‍♂️
完全に好みだけで喋ってますｗ

3. Stanford - Lecture 1 Introduction to iOS 11, Xcode 9 and Swift 4
スタンフォード大学の講義の動画で、とてもわかり易いです📚
「こういう間違えするよなー」という点をわざと実装していて、その回避方法も紹介しているので、教科書通りにいかない場面に遭遇した時に使える小技も詰まってます。

このようなハウツー系のコンテンツを探す際には注意が必要です⚠️古いバージョンで学ぶと、記述方法が少し違っている部分もあり、そのまま書くとエラーが出るので慣れるまでは最新のバージョンに対応しているものを選ぶ事をオススメします。

番外編：Swiftで作るToDoアプリ開発チュートリアル

英語のコンテンツばっかりだったので、動画ではないですが日本語のコンテンツを紹介します。

スクショありで詳しく説明しているのでオススメですが、サンプルコードが若干古いかもしれないので、ベースを理解している人にオススメです。
ライブラリ管理のための CocoaPods というツールのインストールの事などにも触れているので、実務も加味した流れが分かるかなと思います。

動画を見て学んだその先は？

動画で学習するメリットは、他の学習法に比べて早くサンプルアプリが作れるので、楽しいです。
また、とにかく繰り返し書いていくことで、深い理解はできてないが、なんとなくお作法が分かってくる点です。

デメリットとしては、文法の理解が薄いまま進むので応用が難しいかなと思った点と、本質的な理解までもっていくには、他の学習法をプラスする必要があるかなと思いました。

動画見ればある程度サンプルアプリが出来上がっちゃうので、動いた！という感動があり楽しいですが、次につなげるためには、そのワードの意味や使い方を考えながら実装しないとダメだと感じました。

また課題点として感じた事は、実務ではStoryboardを使っていない場合が多いため、実務で生かしていくには、もう1ステップ必要そうでした。

まとめ

勉強する上で大事だと感じた事は、アウトプットとインプットの繰り返し。
もし、アウトプットして悩んだら＆忘れたら、インプットに戻って振り返るのが良いかと思います。

インプット
Swiftという言語に触れて、言語について理解を深める
アウトプット
実際に動く所、画面が作られてる過程を知る点を知る。お作法に慣れる。

---

英語が苦手な方は、英語のサイトばっかじゃんと思われた方が多いと思いますが、私も英語めちゃくちゃ苦手です。が、どれも癖がなく聞き取りやすいし、実際の動きを見ながら聞くのでそんなにハードルは高くないかと思います。
Swiftに関して私自身も初心者なので、間違っている点などあれば、コメント頂けると助かります。