はじめに
こんにちは。奥江です。なかなかスラスラとコードが書けるようにならないです、、、
プログラマー向いてないんかなぁ笑
勉強がてらポケモン図鑑を作りたくなったのでポケモンAPIを叩いてポケモン図鑑を作成します。
では早速コードの解説を行います！！
ちなみにクリーンアーキテクチャを意識してコーディングしております。
全体像としては
APIRequest ↔︎ Repository ↔︎ Usecase ↔︎ ViewController
このような感じですね。
コードでだめなところ指摘して下さい
APIRequestクラス
class ApiRequest {
static let shard = ApiRequest()
static let baseUrl = "https://pokeapi.co/api/v2/pokemon/"
private init() {}
let ids = 1...100
func request(handler: @escaping (Result<JSON, ApiError>) -> Void) {
guard let url = URL(string: Self.baseUrl) else {
return
}
ids.forEach { id in
let url = url.appendingPathComponent("\(id)", isDirectory: false)
AF.request(URLRequest(url: url)).responseData { responce in
switch responce.result {
case .success(let responceData):
if let statusCode = responce.response?.statusCode {
switch statusCode {
case 200:
handler(.success(JSON(responceData)))
case 400:
handler(.failure(.badRequest))
case 401:
handler(.failure(.unauthorized))
case 500:
handler(.failure(.internalServerError))
default:
handler(.failure(.internalServerError))
}
}
case .failure:
handler(.failure(.internalServerError))
}
}
}
}
}
enum ApiError: Error {
case noNetworkConnection
case netWorkTimeOut
case unauthorized
case badRequest
case internalServerError
case unknown
case illegalResponse(case: EntitiyCreationError)
}
struct EntitiyCreationError: Error {
let responseJson: String
}
今回はalamofireを使ってリクエストをしております。
おそらくこの書き方は良くないのかなぁと思いつつ書いています。
というのもforで何回もリクエストしてしまっているのが良くない気がする。
解説
ApiRequestクラスはシングルトンパターンにしました。というのもインスタンスが複数個必要ないので
常に１つでいいかなと思いました。（シングルトンパターンもっと勉強します）
baseUrlは変わることがないのとインスタンスに影響を受けたくないのでstaticにしております。
requestクラスですが、引数にhandlerを実装しました。
aysnc/awitで書けてしまうのですが今回は復習がてらクロージャにしました。
いわゆるコールバックですね。私はこれを理解するのに１年もかかりました笑、、
皆さんはすぐ理解できましたか？クロージャ難しいですよね、、
APIから返却されたdata型をJsonに変換してクロージャの引数に詰めて返しております。
Repository
protocol PokemonRepository {
// ポケモンの情報を取得する
func pokemonInfo(handler: @escaping (Result<Pokemon, ApiError>) -> Void)
}
class PokemonRepositoryImpl: PokemonRepository {
func pokemonInfo(handler: @escaping (Result<Pokemon, ApiError>) -> Void) {
ApiRequest.shard.request { result in
switch result {
case .success(let json):
do {
handler(.success( try Pokemon(json: json)))
} catch let error as EntitiyCreationError {
handler(.failure(.illegalResponse(case: error)))
} catch {
fatalError(error.localizedDescription)
}
case .failure(let error):
handler(.failure(error))
}
}
}
}
RepositoryレイヤーでAPIで取得した結果をPokemonモデルにパースしております。
先ほどのApiRequestクラスの結果を下記でresultと受け取っております。
do-catchでエラーハンドリングをしていますね！
do-catchはdoのスコープ内でエラーが発生する可能性のある処理を記述します。
エラーが発生するとcatchしてエラー処理ですね。今回はPokemonのイニシャライザで初期化失敗する可能性が
あったので catch let error as EntitiyCreationErrorにしました。
あっ、ここでもクロージャの登場です、、笑
今回も引数にResult型の引数にとるクロージャがありますね。
これもコールバックです！
ApiRequest.shard.request { result in
switch result {
case .success(let json):
do {
handler(.success( try Pokemon(json: json)))
} catch let error as EntitiyCreationError {
handler(.failure(.illegalResponse(case: error)))
} catch {
fatalError(error.localizedDescription)
}
case .failure(let error):
handler(.failure(error))
}
}
Usecase
特に今回は何もしていないですね、、
class PokemonUsecase {
let repository = PokemonRepositoryImpl()
func pokemonInfo(handler: @escaping (Result<Pokemon, ApiError>) -> Void) {
repository.pokemonInfo(handler: handler)
}
}
Pokemonモデル
struct Pokemon {
enum Attribute: String {
case normal
case water
case fire
case grass
case electric
case ice
case psychic
case fighting
case poison
case ground
case flying
case bug
case rock
var title: String {
switch self {
case .normal:
return "ノーマル"
case .water:
return "みず"
case .fire:
return "ほのお"
case .grass:
return "くさ"
case .electric:
return "でんき"
case .ice:
return "こおり"
case .psychic:
return "エスパー"
case .fighting:
return "かくとう"
case .poison:
return "どく"
case .ground:
return "じめん"
case .flying:
return "ひこう"
case .bug:
return "むし"
case .rock:
return "いわ"
}
}
var color: UIColor {
switch self {
case .normal:
return UIColor.gray
case .water:
return UIColor.blue
case .fire:
return UIColor.orange
case .grass:
return UIColor.green
case .electric:
return UIColor.yellow
case .ice:
return UIColor.cyan
case .psychic:
return UIColor.magenta
case .fighting:
return UIColor.red
case .poison:
return UIColor.purple
case .ground:
return UIColor.brown
case .flying:
return UIColor.cyan
case .bug:
return UIColor.green
case .rock:
return UIColor.brown
}
}
}
// ポケモンID
let id: Int
// ポケモンの名前
let name: String
// ポケモンのimageUrl
let imageUrl: String
// ポケモンのタイプ
let attributes: [Attribute]
}
extension Pokemon {
init(json: JSON) throws {
guard let id = json["id"].int,
let name = json["name"].string,
let imageUrl = json["sprites"]["front_default"].string,
let attributes = json["types"].array else {
throw EntitiyCreationError(responseJson: json.debugDescription)
}
self.id = id
self.name = name
self.imageUrl = imageUrl
self.attributes = attributes.compactMap {
Pokemon.Attribute(rawValue: $0["type"]["name"].stringValue)
}
}
}
swiftyJsonを使って簡単にJsonからデータを取得しております。
今回はポケモンのIDと名前、タイプと画像Urlを取得しております。
タイプはenum Attributeを作成しております。
enumの初期化は
self.attributes = attributes.compactMap {
Pokemon.Attribute(rawValue: $0["type"]["name"].stringValue)
}
ここで行っていますね。
後はguard letで値が取得できなかった際にエラーが投げております。
なのでこのイニシャライザを呼び出す際はtry Pokemon〜のように記述しなければいけません。
ViewController
class ViewController: UIViewController {
@IBOutlet weak var tableView: UITableView!
let usecase = PokemonUsecase()
var pokemonList: [Pokemon] = []
override func viewDidLoad() {
super.viewDidLoad()
prepareSetting()
}
private func prepareSetting() {
tableView.delegate = self
tableView.dataSource = self
tableView.register(UINib(nibName: String(describing: PokemonTableViewCell.self), bundle: nil),
forCellReuseIdentifier: String(describing: PokemonTableViewCell.self))
tableView.backgroundColor = .white
}
@IBAction func acquisitionButtonDidTap(_ sender: Any) {
usecase.pokemonInfo { [weak self] result in
switch result {
case .success(let pokemon):
self?.pokemonList.append(pokemon)
self?.tableView.reloadData()
case .failure:
self?.showError(title: "ポケモンセンターで回復して下さい",
message: "",
actioins: [UIAlertAction(title: "OK",
style: .default)])
}
}
}
}
extension ViewController: UITableViewDelegate {
}
extension ViewController: UITableViewDataSource {
func numberOfSections(in tableView: UITableView) -> Int {
1
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
pokemonList.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: String(describing: PokemonTableViewCell.self), for: indexPath) as! PokemonTableViewCell
cell.pokemon = pokemonList[indexPath.row]
return cell
}
}
ついにViewControllerですね！！
やっとPokemonのデータがViewControllerに渡ってきました。
まぁやっていることは、tableViewをセッティングしてボタンがタップされるとAPIをリクエストしに行って
返却された値をtableVeiwで表示している感じですね。cellForRowAtでcellにポケモンのデータを渡してcellで表示ロジックを書いております。
TableViewCell
class PokemonTableViewCell: UITableViewCell {
@IBOutlet weak var pokemonImageView: UIImageView!
@IBOutlet weak var idLabel: UILabel!
@IBOutlet weak var nameLabel: UILabel!
@IBOutlet weak var attributeLabel1: UILabel!
@IBOutlet weak var attributeLabel2: UILabel!
private lazy var attributeLabels = [attributeLabel1,
attributeLabel2]
let imageDownloader = PokemonImageDownloader.shard
var pokemon: Pokemon? {
didSet {
guard let pokemon else {
return
}
configure(pokemon: pokemon)
}
}
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
private func configure(pokemon: Pokemon) {
guard pokemon.id == self.pokemon?.id else {
return
}
pokemonImageView.image = nil
idLabel.text = String(pokemon.id)
nameLabel.text = pokemon.name
attributeLabel2.isHidden = pokemon.attributes.count == 1
pokemon.attributes.enumerated().forEach { offset, element in
attributeLabels[offset]?.text = element.title
attributeLabels[offset]?.textColor = element.color
}
imageDownloader.downloadImage(imageUrl: pokemon.imageUrl) { [weak self] result in
switch result {
case .success(let image):
self?.pokemonImageView.image = image
case .failure:
self?.pokemonImageView.image = nil
}
}
}
}
ここでは受けとったデータを表示しているだけですね。
少し解説すると、
pokemon.attributes.enumerated().forEach { offset, element in
attributeLabels[offset]?.text = element.title
attributeLabels[offset]?.textColor = element.color
}
enumrated()でoffsetとelement、要するにindexと要素が取得できるようになります。
PokemonImageDownloader
class PokemonImageDownloader {
static let shard = PokemonImageDownloader()
private init() {}
let downloader = ImageDownloader()
func downloadImage(imageUrl: String, completionHandler: @escaping (Result<UIImage, Error>) -> Void) {
guard let url = URL(string: imageUrl) else {
return
}
downloader.download(URLRequest(url: url), completion: { responce in
switch responce.result {
case .success(let image):
completionHandler(.success(image))
case .failure(let error):
completionHandler(.failure(error))
}
})
}
}
解説します！
画像urlの文字列を引数に受けとって、そこから画像をalamofireImageを使って画像を生成しております。
ここでもクロージャが登場していますね。
作ってみた感想
如何でしたでしょうか？
書き方等こうした方がいいよ的なことがあればどしどしお願いします🙇
ちなみに私は東京で働いております。28歳で転職してエンジニアになったのでかなり遅いと思います。
現在29歳でエンジニア歴としては1年半くらいでこの程度です。もっと頑張らないとなぁ。
毎日勉強ですね。最近は英会話も始めました。常に学習して脳みそフル活用したい