LoginSignup
14
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@suin(suin@TypeScriptが好き)inCraftsman Software

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

Posted at

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

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

今回の配信動画

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

雑談

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

  • JSを雰囲気で書いてたので、TSから入ったらJSがわからないので先にJSをやったほうがよいかなとおもっている。
  • 具体的てきにTSとJSってどうちがうの？
    • JSのVueがわからない、のか？フレームワーク側のはなし？
    • JSをすっとばして、VueのTSからはいったのでもっとカオスだった。そのときは型が浸透していなかったのでほとんどAnyだった。VueがわからないならVueのJSから入ったほうがいいのではというきがする。
    • JSフレームワークを考えないのであればTSから入ってもいいとおもうが、フレームワークと混ぜるとごっちゃになって難しい。
    • それぞれ個別で考える。
    • PHPもおなじ。フレームワークなのかPHPの機能なのかわからない。
  • Genericsでつまった
    • いままではPHPとかJSとか型がない言語でやっていたので、複雑な型の考えかたない。
    • Genericsは総称型とか汎用型と呼ばれる。使う側で型が決められる。
    • 差し替えられる型。
// ジェネリクスの例
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でつくってみようみたいなレポジトリない？
    • JavaとかPHPとは型システムがぜんぜん違うところ
      • JavaとかPHPは型が Nominal Type
      • TSは Structural Type
      • 型合成
      • 公称型(Nominal)のJavaに対して、構造型(Structural)のTypeScript
    • TSはチェックツールの役割
      • JSに戻した時の実行時のことも考えて書かないといけない。
      • JSを書いてることを忘れるとよくない。
    • JSになるので実際の実装と型定義とが違っている場合がある
    • 型のテストもある
    • 外からくる値はちゃんとチェックしないといけない。（TSは特に）

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

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

・・・

  • マンガでわかるTypeScript 1話プロット - mwt

  • TSが生まれた背景

  • TSとJSの比較

  • TSの環境構築

  • 2話からはinterfaceとclassに行きたい

  • TS使いたい人ってどういう人なんですかね？

    • やっぱりフロントエンドじゃないですかね
      • Reactで型つけてやりたいとか

  • JavaScriptの存在を隠して、TSを教えるアプローチ

    • JSから教えると、JSでいいじゃんってなりそうだなぁと

  • 「とりあえず書いてみよう」のツールとして、playgroundの案内が有っても良いかもと思いました

  • 書けるようにするのではなく、TSの良さを伝えることにフォーカスしたほうがいいかも

    • 使ってみる意義がわからない、という人も多いので

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

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

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を扱うクラスを書いたのでコードレビューして

  • 結構ライブラリもある。
    • なかみてみると意外と重量系で、ライトウェイトなのが欲しくて自分でいろいろ書いてみた。
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?をみんなで書きたいが、どういうふうに進めるのがいいのか？
共同編集のベストプラクティスが知りたい。

...

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

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

開始前の雑談

Scrapbox

  • e-book、Scrapboxで書く「Scrapbook」という考え方もありますよ。
    • Scrapboxなら共同編集は簡単です。
    • ちらっとしか使ったことないですが、良さそうだなと思ってました
    • マンガでわかるScrapbox

自動運転の事故

  • 自動運転、最近事故があったようですね。
  • 自動運転は責任の範囲が難しそう。
  • 自動運転についてのマンガを書きました。

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

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

YYTypeScriptは毎週やってます

YYTypeScriptについてワイワイ話したい方は、YYTypeScriptのイベント情報をチェックしてみて下さい。

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

14
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
14
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?