JustTechTalk#08 Webフロントエンドでやってみた2017の資料です。

1. EPS事業部商品開発部 井澤聡

2.  主にWebアプリケーションのクライアント側を担当しています。
 元々Javaを使用していたので、静的型付けの言語が好みです。
 略歴
1. 最初のプロジェクトでJavaScriptを3ヶ月ほど触りました。（14/7～）
2. その後、新プロジェクトのモック作成に一人で携わることになったため、以前
から気になっていたTypeScriptを試用。（14/10～）
3. プロジェクト発足後、マネージャーがTypeScriptに乗り気だったため、そのま
ま製品開発に使用、今に至ります。（15/4～）

3.  JSは目立ちにくいミスが非常に多い言語です
1. 変数名の打ち間違い
2. thisの差し替わり
3. 関数の引数にどの型を渡していいか分かりにくい
他...
 次ページにJSにおける典型的なバグを3つほど含んだ
コードを載せています。
 どこに誤りがあるか探してみてください。
 参考までに、後輩に見てもらったところ、5分経っても見つかりませんでした。

4. ↑サンプルコード
実動作画面→

5.  JavaScriptはケアレスミスやハマる仕様が多く、
こまめな確認が必要になりがちです。
 ケアレスミスの改修にも時間がかかります。
1. ビルド→動作確認箇所まで到達：1分
2. 不具合箇所の特定：2分
3. 修正：1分
4. 再確認：1分
1回5分とみて、先ほどの例の場合5*3で15分程度のロスが発生します。
また、不具合がなくても都度1分のロスが積もっていきます。

6.  積もり積もって1日1時間程度ロスしているのも珍し
くありません。
 開発人数が増えるとその分乗算になっていくため、
特に多人数では馬鹿になりません。

7. ケアレスミスへ無駄に時間を
費やしていませんか？

8.  TypeScriptは静的型付け言語なので、エディタ上でバリ
デーションが行われます。
 先ほどのコードを、TSが認識できるように型を明示す
る改修だけ入れたファイルを用意しました。
 不具合箇所の確認にどの程度かかるか予想してみてください

9. 1
2
3
1. product"n"ame（綴りミス）
2. thisが差し替わっている
3. priceはnumberが指定されているのに、stringを渡している

10.  ありがちなケアレスミスの場合、一瞬で分かります。
 赤線をホバーすると不具合原因が表示されるため、調査の必要もありません。
 エディタ上で検出されるため、この程度なら動作確認も不要です。
 先ほどの所要時間を直すと
1. ビルド→動作確認箇所まで到達：1分
2. 不具合箇所の特定：2分
3. 修正：1分
4. 再確認：1分
＝0分！

11.  JavaScriptはケアレスミスが多く動作確認も一苦労
 TypeScriptを使えば細かいミスが減り、
開発効率が大きく上がる！
（効果のほどはケースバイケースです）

12. ご清聴ありがとうございました

14. 1. インターフェースの整合性が重視される
2. 自分で書いていないクラスやメソッドも多く利用する
3. 静的型付けやクラス指向の言語になれている
4. 柔軟性や気軽さよりも、コードが検査される「安心」が重要
5. 保守が必要なコード
以上のどれかに当てはまる場合、向いていると思われます。
（多人数での開発や、比較的堅牢さが求められるコード向きです）

15. 1. 極限までパフォーマンスを詰める必要がある場合
 ダウンレベル時に裏で補助関数が出力されたり、割と綺麗なJSへ変換されます
 そのため、ハックを駆使してチューニングしたコードよりはコードサイズ、パ
フォーマンスともに不利です
2. 開発規模が小さい、保守が必要ない場合
 定義を余分に書いたり、型に縛りが入り柔軟性が低下するため、書き捨て
コードや小規模の場合不向きです
3. RubyやPythonに慣れている場合
 Ruby似の文法を持つCoffeeScriptのほうが馴染みやすいと思われます
以上の場合は、逆にTypeScriptは向いていないと思われます。

16.  TSの最も肝となる部分は型定義です。
 型定義の出来によって使い勝手が大きく変わります。
 型を誤魔化す書き方も出来ますが、本来不要なところで
行われると全体の信頼性が低下します。
 そのため、コードレビュー等で型の書き方をチェックした方が良さそ
うです。

17.  ES2015のクラスをベースに幾つか拡張されています
 クラスにフィールド変数を定義出来る
 privateなどのアクセサや、abstract等のキーワード追加
 省略可能引数の明示、省略時の初期値付き引数の定義
 ジェネリクス、型推論、インターフェース
 クラスのミックスイン
 Babelと同じく、ES2015やES7の構文をダウンレベルサポートし
ています
 クラス
 アロー関数
 分割代入
 非同期処理
 デコレータ
 モジュール