YYTypeScript#9「TS初心者がハマりやすいところ教えて 」「執筆中の『マンガでわかるTypeScript』に意見欲しい！ 」「英語で書かれている有益なサイトある？ 」「EventListenerとIndexedDBの型周りについて」「eBookを共同編集する上でのベストプラクティス」

これは2019年11月15日に開催したTypeScriptイベント[YYTypeScript#9]のイベントレポートです。

[YYTypeScript#9]: https://yyts.connpass.com/event/152322/
[YYTypeScript]: https://yyts.connpass.com/

[YYTypeScript]は一言で「TypeScripterの部室」です。発表者の話を聞く「一方向的な勉強会」とは真逆で、TypeScriptについて、雑に・ゆるく・ワイワイ話しながらTypeScripter同士の交流を深める「双方向的な座談会」の形式になります。集まった人たちで「今日話たいこと」「聞きたいこと」をいくつか挙げていき、それをテーマに雑談していきます。

__今回の配信動画__

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/YYTypeScript?src=hash&amp;ref_src=twsrc%5Etfw">#YYTypeScript</a> #9 の生配信の収録がアップされました！<a href="https://t.co/tUWw4snNcr">https://t.co/tUWw4snNcr</a></p>&mdash; suin❄️TypeScriptが好き (@suin) <a href="https://twitter.com/suin/status/1195314518672326656?ref_src=twsrc%5Etfw">November 15, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

__過去回の配信動画__ → [YouTubeプレイリスト「YYTypeScript」](https://www.youtube.com/playlist?list=PLpOeTEye3Bg4N8f7GSaeqM0p2dcdiZHv_)
__前回__ →  [YYTypeScript#8「セミコロンは省略すべき？」「Vueと一緒にTSも導入すべき？」「Vueテンプレートの型、みんなどうやってる？」「TSの罠にハマった体験談と対策」「Composition APIについて聞きたい」「default exportは避けるべき？」「TypeScriptのバージョンアップのタイミングはいつ？」「TS+Vue+Electronって大丈夫？」「TSX+Vueなら、Reactで良くない？」 - Qiita](https://qiita.com/suin/items/2c5f6bbdab52633b1825)

## 雑談

### TSまだ初めてちょっとしかたってない人に、どんなところで詰まったか聞きたい

* JSを雰囲気で書いてたので、TSから入ったらJSがわからないので先にJSをやったほうがよいかなとおもっている。
* 具体的てきにTSとJSってどうちがうの？
    * JSのVueがわからない、のか？フレームワーク側のはなし？
    * JSをすっとばして、VueのTSからはいったのでもっとカオスだった。そのときは型が浸透していなかったのでほとんどAnyだった。VueがわからないならVueのJSから入ったほうがいいのではというきがする。
    * JSフレームワークを考えないのであればTSから入ってもいいとおもうが、フレームワークと混ぜるとごっちゃになって難しい。
    * それぞれ個別で考える。
    * PHPもおなじ。フレームワークなのかPHPの機能なのかわからない。
* Genericsでつまった
    * いままではPHPとかJSとか型がない言語でやっていたので、複雑な型の考えかたない。
    * Genericsは総称型とか汎用型と呼ばれる。使う側で型が決められる。
    * 差し替えられる型。

```typescript
// ジェネリクスの例
class List<T> {
    add(item: T): void;
    get(inde: number): T;
}

const stringList: List<string> = /**/
stringList.add("test") // OK
stringList.add(123) // コンパイルエラー
```

* TS勉強し始めてまもない
    * まずコンパイルしてみようからはいる。JSができたー。からのなにをしたらいいのかわからないひとがおおいのでは？
    * 小規模なアプリをTSでつくってみようみたいなレポジトリない？
        * 第二ステップで手を動かして作れるような。
        * フロントエンドかバックエンドによって違うと思うが、
            * TSを教えているが、フロントエンドはいきなりだと、Webpackだのなんだので爆発しがちなので、バックエンドから教えてる。
        * [microsoft/TypeScript-Handbook: The TypeScript Handbook is a comprehensive guide to the TypeScript language](https://github.com/microsoft/TypeScript-Handbook)
        * todomvc
            * [React • TodoMVC](http://todomvc.com/examples/typescript-react/#/)
            * JSに限らず、いろんな言語でToDoリストを作ったサンプルがある。
    * JavaとかPHPとは型システムがぜんぜん違うところ
        * JavaとかPHPは型が Nominal Type
        * TSは Structural Type
        * 型合成
        * 公称型(Nominal)のJavaに対して、構造型(Structural)のTypeScript
    * TSはチェックツールの役割
        * JSに戻した時の実行時のことも考えて書かないといけない。
        * JSを書いてることを忘れるとよくない。
    * JSになるので実際の実装と型定義とが違っている場合がある
    * 型のテストもある
    * 外からくる値はちゃんとチェックしないといけない。（TSは特に）

### 「マンガでわかるTypeScript」のプロットを見て！

湊川さんが進められたら進めたいと思っているWeb連載。

・・・

* [マンガでわかるTypeScript 1話プロット - mwt](https://scrapbox.io/mwt/%E3%83%9E%E3%83%B3%E3%82%AC%E3%81%A7%E3%82%8F%E3%81%8B%E3%82%8BTypeScript_1%E8%A9%B1%E3%83%97%E3%83%AD%E3%83%83%E3%83%88)

* TSが生まれた背景
* TSとJSの比較
* TSの環境構築
* 2話からはinterfaceとclassに行きたい
* TS使いたい人ってどういう人なんですかね？
    * やっぱりフロントエンドじゃないですかね
        * Reactで型つけてやりたいとか
* JavaScriptの存在を隠して、TSを教えるアプローチ
    * JSから教えると、JSでいいじゃんってなりそうだなぁと
* 「とりあえず書いてみよう」のツールとして、playgroundの案内が有っても良いかもと思いました
    * https://www.typescriptlang.org/play/index.html
* 書けるようにするのではなく、TSの良さを伝えることにフォーカスしたほうがいいかも
    * 使ってみる意義がわからない、という人も多いので

### 最近英語の本を読む機会が増えてきたが、英語で書かれているプログラミング言語の有益なサイトがあったら教えてほしい

* https://basarat.gitbooks.io/typescript/
    * 日本語版もあるよ [JavaScript - TypeScript Deep Dive 日本語版](https://typescript-jp.gitbook.io/deep-dive/recap)
* [getify/You-Dont-Know-JS: A book series on JavaScript. @YDKJS on twitter.](https://github.com/getify/You-Dont-Know-JS)
* Safariっていうオライリーがやっているサブスクモデルの洋書読み放題サービス
    * 月39ドル
* http://books.acm.org/
    * ACMに会員になると年間99ドルくらいで洋書が読み放題
        * 特典としてSafariも読み放題
        * [年99ドルでオライリーの英語技術書を読み放題にする方法 - Qiita](https://qiita.com/wawoon/items/bc8a00a7549ca8586cda)
* [martinfowler.com](https://martinfowler.com/)
    * TSに限らない設計とか幅広いところですが．．．
    * 最近はmartin fowlerのページよく見ます

### Event listenerの型をTSでどうやって書いたらいいか

* [TypeScriptのaddEventListenerで苦しんだところまとめ - Qiita](https://qiita.com/tobita0000/items/7341e11305eb25726dc0)


* 自分は大体ラップして、ゴリゴリに型定義したイベント登録/emitメソッド作成すること多いです


```typescript
class Hoge {
    // `event` という引数には、 “aaa” “bbb” という文字列しか受け付けません、という型定義になります
    on(event: 'aaa', () => void)
    on(event: 'bbb', (arg: string) => void)
    on(event: 'aaa' | 'bbb', listener: (...args: any) => void) {
        this.eventEmitter.on(event, listener)
    }
    
    emit(event: 'aaa')
    emit(event: 'bbb', arg: string)
    emit(event: 'aaa' | 'bbb', ...args: any): void {
        this.eventEmitter.emit(event)
    }
}

const hoge = new Hoge()

hoge.on('aaa', () => console.log('aaa')) // OK
hoge.on('ccc', () => console.log('ccc')) // コンパイルエラー
```


### IndexedDBを扱うクラスを書いたのでコードレビューして

* 結構ライブラリもある。
    * なかみてみると意外と重量系で、ライトウェイトなのが欲しくて自分でいろいろ書いてみた。

```typescript
export interface DatabaseConfig {
    database: string,
    version: number,
    storeKeys: {
        storeName: string,
        key: IDBObjectStoreParameters
    }[],
}

export class IDBWrapper {
    config: DatabaseConfig;
    db: IDBDatabase | null = null;
    isEnabled: boolean = false;

    constructor(config: DatabaseConfig) {
        this.config = config;
    }

    async open() {
        if (!window.indexedDB) {
            this.db = null;
            this.isEnabled = false;
        } else {
            // レビュー: 即時関数しなくていいと思う
            // this.db = await new Promise<IDBDatabase>(/*...*/)
            this.db = await (() => {
                return new Promise<IDBDatabase>((resolve, reject) => {
                    const req: IDBOpenDBRequest = indexedDB.open(this.config.database, this.config.version);
                    req.onsuccess = (ev: Event) => resolve((<IDBRequest>ev.currentTarget).result);
                    req.onerror = (ev: Event) => reject();
                    req.onupgradeneeded = (ev: IDBVersionChangeEvent) => {
                        const d = (<IDBRequest>ev.currentTarget).result;
                        this.config.storeKeys.forEach(val => {
                            d.createObjectStore(val.storeName, val.key);
                        });
                    };
                }).then(value => {
                    this.isEnabled = true;
                    return value;
                }).catch(reason => {
                    this.isEnabled = false;
                    return null;
                });
            })();
        }
    }

    // なんでも入れられるように any にしたけど、もっといい型指定ってない？
    // => keyの型をジェネリック型にすれば？
    find(store: string, key: any): Promise<any> {
        // ...
    }

    insert(store: string, value: any): Promise<boolean> {
        // ...
    }

    delete(store: string, key: any): Promise<boolean> {
        // ...
    }
}
```

* localStorageとの違いって？
    * workerで使えない
    * 容量が小さめ(ブラウザによるが5MB程度らしい)
    * indexedDBはタブを複数開いたときにも、トランザクションがサポートされていて安全。

### eBookを共同編集する上でのベストプラクティス

TypeScriptについてのeBook? wiki?をみんなで書きたいが、どういうふうに進めるのがいいのか？
共同編集のベストプラクティスが知りたい。

* 最終的に紙にするものかどうかで変わってくる
* SEOしっかりしたい
    * SEOを狙うならScrapboxは微妙になってくる
        * リアルタイム共同編集に特化しているので、1行ずつ`<span>`で囲まれている
* Promiseの本みたいな感じでサンプルコードを実行できるとよさそうだなとか思いました
* gitのリポジトリでやるのもあり
* hexoみたいなのでデプロイされるようにしておく
    * gatsby.js
    * [Hexo](https://hexo.io/)
    * [Hugo](https://gohugo.io)
* GitBook
    * https://www.gitbook.com/
* vueって何使ってるのか？
    * hexo
* esaのコミュニティ版
    * [help/OSS・Web技術関連コミュニティ向け無償提供（ツールスポンサー） - docs.esa.io](https://docs.esa.io/posts/239)
    * esaのwebhookで自動公開も便利ですよ
        * [モノグサ万歳！Webデザイナーがesa→GitHub→Travis CI→Hexoで、ポートフォリオのビルドを自動化した話 #ltlovers 湊川あい](https://www.slideshare.net/AiMinatogawa/webesagithubtravis-cihexo-ltlovers)

...

- wiki的なツール
    - esa.io （階層構造）
        - ドキュメントとしてかっちり書ける
        - Markdown
        - private前提。publicにはできない？ぽい
            - コミュニティ向け無償版がある
            - [help/OSS・Web技術関連コミュニティ向け無償提供（ツールスポンサー）](https://docs.esa.io/posts/239)
        - 月額500円/人
    - Scrapbox （not階層構造）
        - 気軽に書ける
        - 投稿ボタンがない
        - Markdownじゃない
        - public、private両方可
        - 企業利用じゃなければ無料
        - Scrapbox活用例 
            - https://scrapbox.io/customize/
    - 参考 [esaとScrapboxとGoogleドキュメントの比較表](https://scrapbox.io/nwtgck/esa%E3%81%A8Scrapbox%E3%81%A8Google%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%81%AE%E6%AF%94%E8%BC%83%E8%A1%A8)

- Wiki以外
    - GitBook(https://www.gitbook.com)
    - Google ドキュメント
        - コメントなどを残しやすい（吹き出し）
    - Dropbox Paper(https://paper.dropbox.com)
        - Markdownで書ける
        - 共同編集したとき日本語が化けるときがある
    
- 冊子にする予定があるかどうか？
    - [自動組版システム Re:VIEW](https://github.com/TechBooster/ReVIEW-Template)
        - マンガでわかるDocker3はRe:VIEWで書きました
        - Re:VIEW独自の記法
    - [CSS組版 Vivliostyle](https://vivliostyle.org/ja/)
        - マンガでわかるRubyはVivliostyleで書きました
        - [Markdownで書いてRubyで変換](https://gist.github.com/youchan/5048c25990ae32abf21fbbd9d98a7a20) 

### GraphQLのクライアントライブラリ、apolloが定番なのですかね？

* TSでどうなの？
    * わからないのでやってみまーす！


### 開始前の雑談

#### Scrapbox

* e-book、Scrapboxで書く「Scrapbook」という考え方もありますよ。
    * Scrapboxなら共同編集は簡単です。
    * ちらっとしか使ったことないですが、良さそうだなと思ってました
    * [マンガでわかるScrapbox](https://scrapbox.io/wakaba-manga/)

#### 自動運転の事故

* 自動運転、最近事故があったようですね。
* 自動運転は責任の範囲が難しそう。
* 自動運転についてのマンガを書きました。
    * [マンガでわかる未来のIT／第2話「自動運転時代の保険システムとは？ - sight　次世代を生み出すテクノロジーの視点](https://www.si-ght.jp/entry/miraiit002)
        * メーカー側が訴えられることが増えてくるだろうから。
    * 事故が誰のせいなのかもAIに判断させたらどうだろうか？
        * あなたは30%で、あの人は70%でとかw
        * AIに裁かれる時代ですね
    * AIの中立性、平等性にも問題があるそうです
        * 肌の色とかでバイアスがかかっているらしい
        * 以前、Googleの画像認識で、黒人がゴリラと判定された事例が。
    * YouTubeの収益化剥奪の判定もAIがやってるらしい
        * ゆっくり解説動画がひっかかるという事例も


## 参加してよかったこと(参加者の感想)

* 自分にない知見が得られる。知らないパッケージの情報を得られる
* 毎回自分が知らない分野の情報も得られて、ためになってます。
* 99＄読み放題はとても有益な情報でした
* 参考になるリポジトリやツールを教えてもらえたこと、みなさん親切で優しいこと
* 突然のコード貼り付けでも，ささっとレビューしていただいてとてもありがたかったですm(_ _)m

## YYTypeScriptは毎週やってます

YYTypeScriptについてワイワイ話したい方は、[YYTypeScriptのイベント情報](https://yyts.connpass.com/)をチェックしてみて下さい。

以上、YYTypeScriptのレポートでした。次回もワイワイやっていきたいと思います！ では、また来週！