Edited at

Swiftで簡単なTODOアプリを作ってみよう

スクリーンショット 2018-03-29 18.46.17.png


■まえがき


書いてあること


  • xcodeにて、TableViewを使用した2ページのアプリの作成


モチベーション


  • 練習のためにTODOアプリを作ってみようとした。

  • 多くの記事が古いswiftのバージョンが前提になっており、超つまずいた。

  • 特に、swift3.0のアップデートにより、コードの記述ルールが変更になった影響が大きい。

参照:Swift 3.0の変更点まとめ

https://dev.classmethod.jp/smartphone/iphone/implemented_proposals_for_swift3/


■解説


流れ

STEP1:プロジェクトの立ち上げ

STEP2:メインストーリーボードの設定


  • 画面サイズの設定(iPhoneSEにサイズ変更)

  • 新規ViewControllerの追加

  • パーツの配置


    • ナビゲーションバーを両画面に追加

    • バーボタンアイテムの追加

    • テキストフィールドの追加

    • ボタンの追加

    • テーブルビューの追加

    • テーブルビューセルの追加



  • テーブルビューセルに名前をつける

  • テーブルビューにViewControllerを紐付け


    • DataSource

    • Delegate



  • 画面遷移の設定

  • 新規swiftファイルの追加と紐付け


    • AddController.swiftの追加

    • ViewControllerと紐付け



STEP3:AddController.swiftの編集


  • 変数の設置(Stringの配列)

  • テキストフィールドの設定


    • テキストフィールドの紐付け



  • 追加ボタンの設定


    • 追加ボタンの紐付け

    • 追加ボタンの実装


      • 変数に入力内容を入れる

      • 追加ボタン押したらフィールドを空にする

      • 変数の中身をUDに追加





STEP4:ViewControllerの編集


  • classの継承を追加


    • UITableViewDelegateの追加

    • UITableViewDataSourceの追加



  • UITableView、numberOfRowsInSectionの追加(表示するcell数を決める)


    • 枠を作る

    • 戻り値の設定(表示するcell数)



  • UITableView、cellForRowAtの追加(表示するcellの中身を決める)


    • 枠を作る

    • 変数を作る

    • 変数の中身を作る

    • 戻り値の設定(表示する中身)



  • 追加画面で入力した内容を取得する


    • データの存在確認

    • データを渡す



STEP5:起動してみる


■STEP1:プロジェクトを立ち上げる


  • シングルビューを選択

スクリーンショット 2018-03-14 10.58.39.png


  • プロジェクト名などを入力

スクリーンショット 2018-03-14 11.02.20.png


  • 今回は「MyTODO」にしました

スクリーンショット 2018-03-29 12.41.30.png

さらに詳しくはこちらの記事がわかりやすいです

https://type.jp/et/feature/3008


■STEP2:メインストーリーボードの設定


画面サイズの設定(iPhoneSEにサイズ変更)


  • 作成するアプリの画面サイズを設定しましょう

  • 今回はSEを選択しました(macAirを使っているとiPhone8などではシミュレーターがはみ出てしまうため)

スクリーンショット 2018-03-14 11.04.40.png


新規ViewControllerの追加


  • パーツからViewControllerを選んでドラッグ&ドロップ

スクリーンショット 2018-03-29 13.59.22.png


パーツの配置


ナビゲーションバーを両画面に追加


  • パーツからNavigationBarを選んでドラッグ&ドロップ

スクリーンショット 2018-03-29 15.21.01.png


  • ついでにタイトルも変更しましょう。システムに影響しないので、なんでもokです
    スクリーンショット 2018-03-29 15.21.46.png


バーボタンアイテムの追加


  • パーツからBarButtonItemを選んでドラッグ&ドロップ

スクリーンショット 2018-03-29 15.26.42.png


  • アトリビュートメニューから、Styleを「DONE」にしましょう


    • plainとborderは最新のiosでサポートされていないようです



  • タイトルも変更しておきましょう。システムに影響しないので、なんでもokです

スクリーンショット 2018-03-29 15.26.52.png


テキストフィールドの追加


  • パーツからTextFieldを選んでドラッグ&ドロップ

スクリーンショット 2018-03-29 15.32.35.png


ボタンの追加


  • パーツからButtonを選んでドラッグ&ドロップ

  • ついでにタイトルも変更しておきましょう。システムに影響しないので、なんでもokです

スクリーンショット 2018-03-29 15.32.57.png


テーブルビューの追加


  • UIパーツの中からTableViewを選んでドラッグ&ドロップ

  • このままだと綺麗に表示されないので、画面いっぱいに広げましょう

スクリーンショット 2018-03-29 15.36.21.png


テーブルビューセルの追加


  • パーツからTableViewCellを選んでドラッグ&ドロップ

  • *テーブルビューに重なるように!

スクリーンショット 2018-03-29 15.36.38.png


テーブルビューセルに名前をつける


  • アトリビュートからidentifierを設定する

  • *なんでもok。ここでは 「TodoCell」 とする

スクリーンショット 2018-03-29 15.37.12.png


テーブルビューにViewControllerを紐付け


  • TableViewを選択

  • 右のメニューから「Connection Inspector」を選択

  • OutletsのdataSourceとdelegateからミョン!とドラッグしてください

スクリーンショット 2018-04-12 12.36.52.png

スクリーンショット 2018-04-12 12.37.05.png


画面遷移の設定


  • 追加ボタンを選択してcontrolを押しながら追加画面にドラッグ&ドロップ

スクリーンショット 2018-03-29 15.43.52.png


  • メニューから「show」を選択する

スクリーンショット 2018-03-29 15.44.22.png


  • 戻るボタンも同様に操作して、下記のようになればok

スクリーンショット 2018-03-29 15.46.21.png


新規swiftファイルの追加と紐付け


AddController.swiftの追加


  • File>New>Fileを選択する

スクリーンショット 2018-03-29 15.47.58.png


  • CocoaTouchClassを選択してNext

スクリーンショット 2018-03-29 15.48.03.png


  • Class名を入力する


    • *なんでもok。ここでは 「AddController」 とする。

    • Subclass of以下はそのままでok



  • 保存する


    • 場所は「MyTODO」フォルダの直下でok(ViewController.swiftと同じ階層)



スクリーンショット 2018-03-29 15.48.13.png


ViewControllerと紐付け


  • 追加したAddController.swiftとTODO追加画面の紐付けをします

  • 要は、この画面の制御にはこのswiftファイルを使用しますよということです

  • 下記の場所のから作成したAddControllerを選択すればokです

スクリーンショット 2018-03-29 15.49.56.png


■STEP3:AddControllerの編集


  • 先に完成形を確認


AddController.swift

//  AddController.swift

import UIKit

//変数の設置
var TodoKobetsunonakami = [String]()

class AddController: UIViewController {

//テキストフィールドの設定
@IBOutlet weak var TodoTextField: UITextField!

//追加ボタンの設定
@IBAction func TodoAddButten(_ sender: Any) {
//変数に入力内容を入れる
TodoKobetsunonakami.append(TodoTextField.text!)
//追加ボタンを押したらフィールドを空にする
TodoTextField.text = ""
//変数の中身をUDに追加
UserDefaults.standard.set( TodoKobetsunonakami, forKey: "TodoList" )
}

//最初からあるコード
override func viewDidLoad() {
super.viewDidLoad()
}

//最初からあるコード
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}



変数の設置


  • TODOの内容を保存するための変数を作ります

  • 複数の値を扱うので、配列型にします

  • class(ファイル)を跨って使用するため、classの前(import UIKit直下)に記載します

  • 変数名はなんでもok

  • わかりやすく 「TodoKobetsunonakami(TODO個別の中身)」 としておきます


AddController.swift

import UIKit

var TodoKobetsunonakami = [String]()


テキストフィールドの設定


  • TODOの内容を入力するためのテキストフィールドを設定します

  • ストーリーボードからコードにドラッグ&ドロップ

  • 位置はclass名のすぐ下におきましょう

スクリーンショット 2018-03-29 15.55.26.png


  • 下記の設定になっているかを確認


    • Connection:Outlet

    • Name:何でもok(ここでは 「TodoTextField」

    • Type:UITextField



  • okであればconnectを押す

スクリーンショット 2018-03-29 15.55.48.png


追加ボタンの設定


追加ボタンの紐付け


  • テキストを入力した後に押す「追加する」ボタンの制御を行います

  • 先ほどのように、パーツをコードに紐付けましょう

  • 位置はclass名のすぐ下におきましょう

スクリーンショット 2018-03-29 15.56.43.png


  • 下記の設定になっているかを確認


    • Connection:Action

    • Name:何でもok(ここでは 「TodoAddButton」

    • Type:Any

    • Event:ToucUpInside

    • Argument:Sender



  • okであればconnectを押す

スクリーンショット 2018-03-29 15.56.58.png


  • テキストフィールドとボタンを紐付けるとこんな感じになります


AddController.swift

@IBOutlet weak var TodoTextField : UITextField!

@IBAction func TodoAddButton(_ sender: Any) {
}


変数に入力内容を入れる


  • 先ほど作成した変数(TodoKobetsunonakami)にテキストフィールドに入力した内容を入力する命令を書く

  • 位置はTodoAddButtonの{}の中です


AddController.swift

TodoKobetsunonakami.append(TodoTextField.text!)



追加ボタンを押したらフィールドを空にする


  • 追加ボタンを押した時にテキストフィールドの中身を空にする命令を書く


AddController.swift

TodoTextField.text = ""



変数の中身をUDに追加


  • 変数の中身をUserDefaultsに保存する命令を書く

  • UserDefaultsとはデータベースを作るほどのものではないデータを簡単に保存しておける箱のようなもの

  • データを保存しておく場所の名前をつけましょう

  • 名前は何でもok(ここでは 「TodoList」


AddController.swift

UserDefaults.standard.set( TodoKobetsunonakami, forKey: "TodoList" )



■STEP4:ViewControllerの編集


  • 先に完成形を確認


ViewController.swift

//  ViewController.swift

import UIKit

//classの継承を追加
class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {

//UITableView、numberOfRowsInSectionの追加(表示するcell数を決める)
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
//戻り値の設定(表示するcell数)
return TodoKobetsunonakami.count
}

//UITableView、cellForRowAtの追加(表示するcellの中身を決める)
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
//変数を作る
let TodoCell : UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "TodoCell", for: indexPath)
//変数の中身を作る
TodoCell.textLabel!.text = TodoKobetsunonakami[indexPath.row]
//戻り値の設定(表示する中身)
return TodoCell
}

//最初からあるコード
override func viewDidLoad() {
super.viewDidLoad()
//追加画面で入力した内容を取得する
if UserDefaults.standard.object(forKey: "TodoList") != nil {
TodoKobetsunonakami = UserDefaults.standard.object(forKey: "TodoList") as! [String]
}
}

//最初からあるコード
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}



classの継承を追加


  • TableViewを使うために、classを呼び出す

  • classのUIViewControllerの後ろに、UITableViewDelegateとUITableViewDataSourceを追加する


ViewController.swift

class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource



UITableView、numberOfRowsInSectionの追加(表示するcell数を決める)


枠を作る


  • classの宣言直下に下記の内容を追記

  • xcodeのアナウンスから入力してもok


    • *継承を入力するとxcodeがfixを促してくるので、案内に従えば勝手に挿入される




ViewController.swift

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

}


戻り値の設定(表示するcell数)


  • returnの行を追記する


ViewController.swift

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

//戻り値の設定(表示するcell数)
return TodoKobetsunonakami.count
}


UITableView、cellForRowAtの追加(表示するcellの中身を決める)


枠を作る


  • numberOfRowsInSectionの直下に下記の内容を追記

  • xcodeのアナウンスから入力してもok

  • *継承を入力するとxcodeがfixを促してくるので、案内に従えば勝手に挿入される


ViewController.swift

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

}


変数を作る


  • TodoCellに表示するための変数を作る命令

  • 下記のコードを追記する

  • ポイントはindexPathの最初の文字が小文字になること


ViewController.swift

let TodoCell : UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "TodoCell", for: indexPath)



変数の中身を作る


  • TodoCell変数に入力したTODOの中身を入れる命令

  • 下記のコードを追記する


ViewController.swift

TodoCell.textLabel!.text = TodoKobetsunonakami[indexPath.row]



戻り値の設定(表示する中身)


  • 表示する中身としてどんな情報を渡すか決める命令

  • 下記のコードを追記する


ViewController.swift

return TodoCell



追加画面で入力した内容を取得する


データの存在確認


  • 画面を起動した時に、TodoList(入力したTODOのテキストが入っている場所)に何かしらのデータがあるかどうか確認する命令

  • 下記のコードを追記する

  • super.viewDidLoad()の直下に追記する


ViewController.swift

if UserDefaults.standard.object(forKey: "TodoList") != nil {}



データを渡す


  • TodoListにデータがあった場合、TodoKobetsunonakami変数にデータを渡す命令


ViewController.swift

if UserDefaults.standard.object(forKey: "TodoList") != nil {

TodoKobetsunonakami = UserDefaults.standard.object(forKey: "TodoList") as! [String]
}


■STEP5:起動してみる


  • 実行して確認!

  • お疲れ様でした!

スクリーンショット 2018-03-29 18.46.17.png


アプリが完成したら


いいね!&コメント欄にワッフルワッフル!と叫んでもらえると喜びます😄👍


NextStage!

🎉TODOアプリを作ってみようシリーズ

📱SwiftでTableViewを使ってみよう

https://qiita.com/TD3P/items/cafa8e20029047993025

📱Swiftで簡単なTODOアプリを作ってみよう

https://qiita.com/TD3P/items/8f474358d1dd789557f3

📱Swiftでカスタムセルを再利用したTODOアプリを作ってみよう

https://qiita.com/TD3P/items/116a2199b1f872ac6471

📱SwiftでCoreDataを使ったTODOアプリを作ってみよう

https://qiita.com/TD3P/items/adbbeee827995cffd509

📱SwiftでRealmを使ったTODOアプリを作ってみよう

https://qiita.com/TD3P/items/616e0dbd364179ca284b