Webとアプリの比較

class: center, middle

# Webとアプリの比較

ピクシブアルバイト 森内建太（@petamoriken）

---

# 自己紹介

ずっとフロントエンドばかりやってた  
        面白い効果があるサイトを作るのが好き

最近は JavaScript (ECMAScript) の仕様周りに手を出し始めた  
        【宣伝】[Float16Array (パッケージ紹介, ESNext Stage 1)](https://qiita.com/printf_moriken/items/1a16d759cefea1b3210e)

## 7/11~

アルバイト始めた

「フロントエンドが出来るならアプリも出来るよね」  
        Android アプリ開発を始める（端末すら持ってない）

## 9/1~

バイトで iOS アプリ開発も始める

---

# 概要

## Web とアプリのざっくりとした比較をします

* 個人の感想を多々含みます

---

# 背景

* Web

* 後方互換が第一

* 古いコードが動いてしまう
                * 古い情報が参考サイトに残りやすい

* 各ブラウザベンダーで合意を取りながら仕様を決めていくため進化が遅い

* WHATWG, W3C

* Android, iOS

* 審査が大変
            * 仕様変更があれば基本的に追随する

* 古いコードはちゃんと動かなくなる
                * ちょうど一昨日 Swift 4 になりました☺

---

# 動作環境

* Web

* 端末×ブラウザごとに動作環境が違う

* それぞれのバグや実装状況と戦うことになる（闇）  
                    [Can I use... Support tables for HTML5, CSS3, etc](http://caniuse.com)

IE 11 辛い (機能は 2013 年止まり、2025 年までサポート……)

||<img src="img/chrome.png" alt="Chrome" width="64" height="64"><img src="img/opera.png" alt="Opera" width="60" height="64">|<img src="img/firefox.png" alt="Firefox" width="64" height="62">|<img src="img/safari.png" alt="Safari" width="64" height="64">|<img src="img/edge.png" alt="Edge" width="64" height="64">|
        |:-:|:-:|:-:|:-:|:-:|
        |JavaScript|V8|SpiderMonkey|JavaScriptCore|Chakra|
        |レンダリング|Blink|Gecko|Webkit|EdgeHTML|

* Android, iOS

* 端末ごとに動作環境が違う

<small>Browsers icon by [PixelBuddha](https://www.iconfinder.com/PixelBuddha) ([CC BY 2.5](https://creativecommons.org/licenses/by/2.5/)), [Icons8](https://icons8.com/icon/16797/microsoft-edge) ([CC BY-ND 3.0](https://creativecommons.org/licenses/by-nd/3.0/))</small>

---

# 言語

* Web

* JavaScript

* 動的型付け言語
                * ECMAScript という仕様が先にあって実装はブラウザそれぞれで違う
                * 後方互換のためにおかしな仕様が残ってる

```js
        typeof 1; // "number"
        typeof "str"; // "string"
        typeof Symbol(); // "symbol"
        typeof undefined; // "undefined"
        typeof {}; // "object"
        typeof function() {}; // "function"

typeof null; // "object" ← は？
        ```

---

# 言語

* Android

* Kotlin

* 静的型付け言語
                * Smart Cast が便利

```kt
        hoge?.let {
            // このスコープ内では hoge は optional じゃなくなる
        }
        ```

---

# 言語

* iOS

* Swift

* 静的型付け言語
                * function tag が便利

```swift
        func hoge(foo: String) {}

func hoge(bar: String) {}
        ```

```swift
        hoge(foo: "foo") // タグで呼ぶ函数を選択
        ```

---

# 言語

* JavaScript (RxJS, zen-observable, Stage 1 Observable)

```js
        class Hoge {

fuga() {
                createObsavable().subscribe({
                    next(val) {
                        console.log(val);
                    }
                });
            }
        }
        ```

---

# 言語

* Kotlin (RxKotlin)

```kt
        class Hoge {

fun fuga() {
                createObsavable().observe(this, Observer { val ->
                    it?.let { // インスタンスが生きてるかチェック
                        Log.d("val", val)
                    }
                })
            }
        }
        ```

---

# 言語

* Swift (RxSwift)

```swift
        class Hoge {

func fuga() {
                createObservable().subscribe(onNext: {[weak self] val in
                    guard let weakSelf = self { // インスタンスが生きてるかチェック
                        return
                    }
                    print(val) // ここまで到達しない！？
                }).addDisposableTo(DisposeBag())
            }
        }
        ```

---

# 言語

* Swift (RxSwift)

```swift
        class Hoge {

let observable = createObservable()
            let disposeBag = DisposeBag()

func fuga() {
                observable.subscribe(onNext: {[weak self] val in
                    guard let weakSelf = self {
                        return
                    }
                    print(val)
                }).addDisposableTo(disposeBag)
            }
        }
        ```

Swift に GC はない

---

# ビュー

* Web

* HTML, CSS

* 構造とスタイルを分割する思想
                * `inline` 要素と `block` 要素

* Android

* XML

* `RelativeRayout` が便利
                * `android.support.v4.widget.DrawerLayout`, `android.support.v7.widget.Toolbar` などを使い出すとめちゃくちゃ調べないといけない

---

# ビュー

* iOS

* Storyboard

* GUI で操作する
                * 種類が少なくてシンプル
                * 初見殺し

* AutoLayout って何？
                    * `UITableView` って自動的に高さを計算してくれないの！？

---

# ビュー

* Web

* `ul`, `ol`, `menu` 要素の中の `li` 要素が高さを持つ
            * `ul`, `ol`, `menu` 要素はデフォルトで `li` 要素の高さに合わせてサイズが決まる

* 変えたかったら明示的に指定する

```css
        ul {
            height: 300px; /* li の高さに合わせたかったら auto を指定する */
            overflow: hidden; /* はみ出した要素は表示しない */
            /* overflow: scroll; スクロールさせたいならこっち */
        }

ul li {
            height: 100px;
        }
        ```

---

# ビュー

* iOS

* `UITableView` が `UITableViewCell` の高さを持つ
            * `UITableView` の高さはデフォルトで固定、スクロール可能

* `UITableViewCell` にフィットさせたかったら計算してあげる

---

```swift
        class Table: UITableView {
            @IBOutlet weak var height: NSLayoutConstraint!
            private let data: Data?

override func awakeFromNib() { self.dataSource = self }

func bind(for data: [Datum]) {
                self.data = data
                self.reloadData()
                height = data.count * Cell.height
            }
        }

extension Table: UITableViewDataSource {

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
                return Cell.height
            }
        }
        ```

```swift
        class Cell: UITableViewCell {
            static let height: CGFloat = 100
        }
        ```

---

# まとめ

* 環境

* Android, iOS は審査があって辛い
            * Web は動作環境多すぎて辛い

* 言語

* JavaScript は後方互換
            * Swift は一年ごとの更新に耐えないといけない

* ビュー

* iOS は初見殺し. シンプルだがちゃんと計算が必要
            * Android は OSS の `android.support` を使い出すと色々と調べないといけない