YYTypeScript#1「JavaScriptを知らない人がTypeScriptを学ぶ方法を知りたい」「TypeScript初心者がどうやって勉強すると効率がいいか？」「なぜTSが選ばれるのか？」「PHPと比べて、サーバサイドをTSで書くメリットは？」「TypeScriptのバックエンドのオススメフレームワークって？」「定義をinterfaceとtypeどっちで書いてる？」「JSで書かれたプロダクトのTS化ってどうしてる？ 」

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

[YYTypeScript#1]: https://yyts.connpass.com/event/144568/
[YYTypeScript]: https://yyts.connpass.com/

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

__今回の配信動画__

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">YYTypeScriptの収録動画がアップされました！ <a href="https://t.co/eV4ZFlEFiS">https://t.co/eV4ZFlEFiS</a></p>&mdash; YYTypeScript (@yytypescript) <a href="https://twitter.com/yytypescript/status/1175074916691062786?ref_src=twsrc%5Etfw">September 20, 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_)
__前回__ →  今回が初開催です😌

# 雑談

### JavaScriptを知らない人がTypeScriptを学ぶ方法を知りたい(ぬーたけ)

いま [スラスラ読める JavaScriptふりがなプログラミング | 及川卓也, リブロワークス | 工学 | Kindleストア | Amazon](https://amzn.to/30viyLW) を読んでいる。

↑[Typescript公式にplaygroundがある](https://www.typescriptlang.org/play/)ので、色々試す分にはそこを使うと便利かもしれません

* TSをやる上でJSは必須？
    * 必須だと思う。
    * JavaScript + 型 = TypeScript
    * JSが書けないとTSが書けない
    * TSが書ければ、JSが書ける
* 型を書かないTSもあり？
    * anyつけているのと同じになることも。
* いつくか流儀がある
    * 型がないところにいきなり型で頑張れよと言っても無理がある
    * [がんばらないTypeScriptのはじめ方 - 角待ちは対空](https://blog.yux3.net/entry/2017/07/18/110000)
    * [TypeScript再入門「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に（gfx執筆） - エンジニアHub｜若手Webエンジニアのキャリアを考える！](https://employment.en-japan.com/engineerhub/entry/2019/04/16/103000)
    * がんばるTypeScriptも一方である。
* JavaScriptを学んだことはTypeScriptを学んだことになると思う。
* 始め方
    * 拡張子を .ts に変えて、実行ツールをインストールして、トランスパイルすればJSが出力される。これを実行すればOK

### TypeScript初心者がどうやって勉強すると効率がいいか？ (れおりん)

* 3日の人が何をしたらいいか？
* JavaScript経験者にとっての話

...

* TypeScriptで何をしたいか？
    * Vueなのか？ サーバサイドなのか？
* 型をどうやって学ぶかだと思う。
    * TSの型システムって複雑
    * 『実践TypeScript』が型を理解するのにオススメ
        * 型
* 例外のハンドリングをどうしたらいいのか
    * アンケートしたら、ほぼ例外なげてるらしい(58%)
    * [suin❄️TypeScriptが好きさんはTwitterを使っています: 「TypeScriptでエラーを呼び出し元に通知するとき、どういうふうにしてます？ ①union func(): Error | T ②Either func(): Either&lt;Error, T&gt; ③Promiseでreject func(): Promise&lt;T&gt; ④例外をthrow func(): T { throw new Error() } ※Tは成功時に返す値の型 これ以外の方法はリプで教えて🙏🏻」 / Twitter](https://twitter.com/suin/status/1168797608782876674)
* [TypeScript の流儀 - Speaker Deck](https://speakerdeck.com/takefumiyoshii/typescript-falseliu-yi)

### なぜTSが選ばれるのか？

TS案件で、なぜTSが選ばれたのか聞きたい。(じゅり)
JSがあるのにTSを採用する理由って？ (たべたつ)

・・・

* TSを仕事で使ってる人4名
    * なぜTSを選んだのか？
        * アプリを作るための開発基盤を開発している。バックエンドもフロントエンドも同じ技術でできたほうがチームとしての生産性が良いと思った。
        * 型がある
        * IDEでコード補完がよく効く
            * WebStormが補完してくれる
        * JSのエコシステムがそのまま使えるというのも大きい
            * 開発コストを下げられる
        * 案件に入ったら既に採用されていた
        * テストを書く必要が減る
            * ロジックはテストが必要
        * 開発効率が良い
            * 型ファイルがあればnpmの外部モジュールを使っても補完機能が使えるし、APIの使い方を調べるのが楽になってJSより開発効率が良いのが好きですね。
            * https://github.com/DefinitelyTyped/DefinitelyTyped
        * TS案件に3つ参加した
            * 1つはAngular
            * 1つはVue+TS案件、3年前、Vue流行り始め。BEでJavaを書いていたため、FEでも型があったほうが良いという判断だったであろう
            * Nuxt。型があるメリット、JSの危なさを減らす目的で
* ソフトウェアは保守フェーズのほうが長い
    * 長い目でみて保守性が高い
    * 世間的に見ても型有りに流れてるような(プロジェクトによる)
* TS未経験のチームの学習コストは発生する
    * 細かい意思決定が無数に出てくる
        * 見えないけど、始めたら実際のしかかってくると思う。
* ちっちゃいスクリプトでも、型推論が効くのが嬉しいのでts使いたい勢です。
    * typoを検出できるの便利。

### PHPと比べて、サーバサイドをTSで書くメリットは？ (かきうち)

逆に、バックエンドでJS/TSが選ばれない理由も知りたい。(れおりん)

・・・

* もともとJSが得意な人が書く場合
* isomorphicなコードにしたい理由
* よく聞くのはNode.jsは環境構築が容易だから
* SSR(server-side rendering)やりたいから
    * PHPだと大変。
* PHPと比べてだと、PHPでできないこと、非現実的なことができる
    * 大量のリクエストをさばく
    * WebSocket
    * 非同期処理
    * GoとTypeScriptでサーバサイドを書くのはどう違う？
        * TSは実行環境は必要だけど、Goはバイナリにビルドするのでランタイムが不要
        * WebSocket使うならTS(node)の方が得意
            * nodeは非同期系の処理が得意、シングルスレッドなので
                * Goはマルチスレッド
        * 表現力が違う
        * GoはジェネリクスないのでTS好きな人と相性悪い説ありますね

### TypeScriptのバックエンドのオススメフレームワークって？ (ゆうきゃん)

expressとかはNode.jsのフレームワークとしてよく聞くが。

・・・

* koa
    * expressの作者が作り直した
* Nest
    * いいフルスタックフレームワークだが、情報は少なめ。
* [要チェックな10個の Node.js フレームワーク - Qiita](https://qiita.com/ymasaoka/items/3db3f44990911a181ffc)
* キラーフレームワーク的なのはない

### APIのリクエスト定義をinterfaceとtypeどっちで書いてる？ (じま)

リクエスト定義くらいならどっちでも書けるけど

・・・

[TypeScriptのInterfaceとTypeの比較 - Qiita](https://qiita.com/tkrkt/items/d01b96363e58a7df830e)

* interfaceがいいというイメージがある
* typeの方が堅そう。変えられてはいけないところに合いそう

```ts
interface Foo {
    readonly a: number
    readonly b: number
}

type Foo = Readonly<{
    a: number
    b: number
}>
```

* tsファイルが提供されていないjsファイルに後付で型定義を提供しようとすると、interfaceしかやりようなかった気がします
* 日本語にしたときに気持ちいいのはinterfaceのほうかと思います。


### TS3.xから追加された型の感想教えて (フィロマギ) ﾘﾓｰﾄ

TS3.xから追加された型、使ってみた人いたら感想聞いてみたいです（Omitとか）
↑3.5でした・・・(philomagi)

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-5.html
...

```ts
type Person = {
    name: string;
    age: number;
    location: string;
};

type QuantumPerson = Omit<Person, "location">;

// equivalent to
type QuantumPerson = {
    name: string;
    age: number;
};
```

* Omitは今まで自前で実装していたので手間が省けてよかったですね
* Omitは元々reduxとかが提供していたので特に感想はなかったですね

### TypeORMのモデル、どう生成している？ (ましろ) ﾘﾓｰﾄ

* 生成してない。素で書いている
* 今までtypeorm-model-generatorを使って生成していたんですけど他に何かいいものがあれば・・・といった感じです・・・
    * [typeorm-model-generator - npm](https://www.npmjs.com/package/typeorm-model-generator)

### JSで書かれたプロダクトのTS化ってどうしてる？ (ぬあす) ﾘﾓｰﾄ

- ぬあすのケース
  - GASでJS→TS
  - clasp使ったらできる
    - [clasp](https://budougumi0617.github.io/2019/01/16/develop-google-apps-script-by-typescript/)
  - だがしかし、けっこうな既存プロジェクトの場合は導入すべき？
    - ちな、件の既存プロジェクトは [みやもとさん](https://github.com/masuidrive/miyamoto)

・・・

* 現会社の入社直後の受け入れプロジェクトはJSのTS化でやってました。
    * [Misoca❤️TypeScript - Misoca開発者ブログ](https://tech.misoca.jp/entry/2019/05/17/110000)


### interface について、`@types`配下になんか書いてある時と、tsファイルにベタがきされているパターンの違い、またこの時はどっちに足せばいいのか (mikkame)　ﾘﾓｰﾄ

* `@types`ディレクトリ配下に型情報を配置すると、依存関係を型に解釈させるため
* 内部的なものと外部的なものの違いなので、使うケースが違う

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

* 実際にプロダクトに導入されている方や、同じような悩みを抱えている人の話を聞くことが出来てとても勉強になりました！
* 実際開発をやってらっしゃる方々の生の声が聴けてありがたかった!
* ほんまにわいわいしてはって居心地がすこぶる良かった
* 最近流行り始めたものと思っていたので周りの人の知見の多さに驚けたことが収穫としては大きいです。もっとやろうと思いました。
* Typescriptを使い利点など、自分とは異なる視点で話している人もいてためになりました。
* koaフレームワークがあることを知ったので試してみます！
* YYTSの第一回に参加できたこと
* あんまり技術的な話をする相手がいなかったので面白かった

# YYTypeScriptは毎週やってます

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

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