デザイナーだけどSwiftはじめてみた

こんにちは。デザイナーのohsです。

私がSwiftを学ぼうと思ったのは、元々webデザイナーでコーディングもやっていた事もあり、4,5年前ぐらいから、モバイルアプリの言語に興味を持ち、本を買ったのが最初のキッカケです。

最初は、分厚い本を読みきれず掲載されてるiosのバージョンも変わり成果が見えないまま終わってしまいました😇

去年の冬ごろから、また再開。今回は理解も深まり継続して学び続ける事ができ、成果物としてStyleGuideを一覧できるアプリを作ることができました。

そこで、本は買ったけど同じように挫折してしまったデザイナーの方向けに、Swiftを勉強するために利用したサイトや本など何回かに分けて紹介します。

📘目次
・そもそもなぜSwiftを学ぼうと思ったか
・目標にしたゴール
・実際にSwiftを書いていく前にやってみた事

Swiftを学ぶ目的

1. 開発効率アップのため
・ 少しでもコードを理解できれば、共通言語で会話ができるはず
・ それにより共通認識ができ、コミュニケーションコストが下がりスピードが上がるんじゃないか

2. 相互理解
・ 一緒にプロダクト作ってるんだから、相手の事をもっと知りたい！理解したい！
・モバイルアプリ内のUI/UX部分はクライアント側のエンジニアとデザイナーで責任を持って一緒に作っていく必要がある。(webだとフロントエンドになるかな)

3. お互いのストレス軽減
・「この黒の色が000ぽいから1c1c1cに直して」とか言いたくない/言われたくないはず
・ UIに関する部分の修正や微調整は、自分でPR（プルリクエスト）だしていきたい（作業効率化にもつながる

目標にしたゴール

☑ 共通言語ではなせるようになる
☑ ネーミングルールなど知る
☑ どう画面が作られているかの理解
☑ gitでバージョン管理するなどエンジニア文化に触れる。慣れる。知る。
☑ オートレイアウトについて理解を深め、複数のデバイスサイズを意識したUI設計ができるようになる
☑ 簡単なアプリ（成果物）を作る
☑ 色の調整などはPR出せるようになる

エンジニアさんにいろいろ教えてもらいながら、結果的に2ヶ月ぐらいで👆の目標はだいたいできるようになった🎉

Swiftを書いていく前にまずやってみた事

1.GitHubにあがってるコードを覗いてみた

自分の関係しているのレポジトリ内のCodeタブにいる状態(https://github.com/hogehoge/fugafuga)でキーボードの [T] を押してファイル名を検索してみる。

例えば、文字に関する定義について知りたかったら [font] と検索してみると、私の場合、お目当ての [font.swift] というファイルが上位に出てきた。

いっぱい出てくるので目ぼしい物が見つからなかったら、エンジニアさんに色やフォントに関する定義がどこに書かれているか聞いてみるのもよいと思う。

2. xxx.swiftに定義されているネーミングルールを共通言語として使う
中を見てみると例えば、こんな風に書かれていたので、これを共通言語として使い、デザインデータでも定義してみる。

public enum FontSize: CGFloat {
   case medium = 17
   case small = 14
   case xSmall = 12
}
public enum FontName: String {
   case enRegular = "AvenirNext-Regular"
   case jaBold = "HiraKakuProN-W6"
}

👇

ネーミングルールは、デザイナーよりエンジニアさんの方が断然得意だと思うので、エンジニアさんが考えてくれたネーミングを活用させてもらうのが吉！

---
この例で言うと、割と新しいコード(歴史が浅いので負債が少ない)で、フォントなら `font.swift`など見たいコードが検索すれば出てくるような構成になっていたので、読みやすかったかもしれません。
場合によってはXcodeで目ぼしい文字列を検索する方が早いかも。
---

3. コードで定義されているものを、sketchの Styleに追加していく

ここまでやるかは運用方針次第ですが、ルールがsketch上でも定義されていると新たなスタイルが産まれにくくなるかなと思っています。styleに追加するまでしなくてもシンボル化したり、まとめておくだけでもよいと思う。

FontType内に複数カラーのStyleが存在する時は、/ で区切って階層化すると見やすくていい。

デザインとコードがズレていないか自分で確認できるので、覗いてみるのオススメです。

また、Swiftではどういう書き方で、webでいうcssのような定義がされているか見る事ができるので最初の理解の一歩としてはよいのかなと思いました。

次回はSwiftやXcodeのツールの使い方に慣れるために、参考にしたサイトなどを紹介します。

続編はこちら👇