Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

TypeScriptの大規模開発への適用

504 views

Published on

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

Published in: Engineering
  • Be the first to comment

TypeScriptの大規模開発への適用

  1. 1. EPS事業部商品開発部 井澤聡
  2. 2.  主にWebアプリケーションのクライアント側を担当しています。  元々Javaを使用していたので、静的型付けの言語が好みです。  略歴 1. 最初のプロジェクトでJavaScriptを3ヶ月ほど触りました。(14/7~) 2. その後、新プロジェクトのモック作成に一人で携わることになったため、以前 から気になっていたTypeScriptを試用。(14/10~) 3. プロジェクト発足後、マネージャーがTypeScriptに乗り気だったため、そのま ま製品開発に使用、今に至ります。(15/4~)
  3. 3.  JSは目立ちにくいミスが非常に多い言語です 1. 変数名の打ち間違い 2. thisの差し替わり 3. 関数の引数にどの型を渡していいか分かりにくい 他...  次ページにJSにおける典型的なバグを3つほど含んだ コードを載せています。  どこに誤りがあるか探してみてください。  参考までに、後輩に見てもらったところ、5分経っても見つかりませんでした。
  4. 4. ↑サンプルコード 実動作画面→
  5. 5.  JavaScriptはケアレスミスやハマる仕様が多く、 こまめな確認が必要になりがちです。  ケアレスミスの改修にも時間がかかります。 1. ビルド→動作確認箇所まで到達:1分 2. 不具合箇所の特定:2分 3. 修正:1分 4. 再確認:1分 1回5分とみて、先ほどの例の場合5*3で15分程度のロスが発生します。 また、不具合がなくても都度1分のロスが積もっていきます。
  6. 6.  積もり積もって1日1時間程度ロスしているのも珍し くありません。  開発人数が増えるとその分乗算になっていくため、 特に多人数では馬鹿になりません。
  7. 7. ケアレスミスへ無駄に時間を 費やしていませんか?
  8. 8.  TypeScriptは静的型付け言語なので、エディタ上でバリ デーションが行われます。  先ほどのコードを、TSが認識できるように型を明示す る改修だけ入れたファイルを用意しました。  不具合箇所の確認にどの程度かかるか予想してみてください
  9. 9. 1 2 3 1. product"n"ame(綴りミス) 2. thisが差し替わっている 3. priceはnumberが指定されているのに、stringを渡している
  10. 10.  ありがちなケアレスミスの場合、一瞬で分かります。  赤線をホバーすると不具合原因が表示されるため、調査の必要もありません。  エディタ上で検出されるため、この程度なら動作確認も不要です。  先ほどの所要時間を直すと 1. ビルド→動作確認箇所まで到達:1分 2. 不具合箇所の特定:2分 3. 修正:1分 4. 再確認:1分 =0分!
  11. 11.  JavaScriptはケアレスミスが多く動作確認も一苦労  TypeScriptを使えば細かいミスが減り、 開発効率が大きく上がる! (効果のほどはケースバイケースです)
  12. 12. ご清聴ありがとうございました
  13. 13. 1. インターフェースの整合性が重視される 2. 自分で書いていないクラスやメソッドも多く利用する 3. 静的型付けやクラス指向の言語になれている 4. 柔軟性や気軽さよりも、コードが検査される「安心」が重要 5. 保守が必要なコード 以上のどれかに当てはまる場合、向いていると思われます。 (多人数での開発や、比較的堅牢さが求められるコード向きです)
  14. 14. 1. 極限までパフォーマンスを詰める必要がある場合  ダウンレベル時に裏で補助関数が出力されたり、割と綺麗なJSへ変換されます  そのため、ハックを駆使してチューニングしたコードよりはコードサイズ、パ フォーマンスともに不利です 2. 開発規模が小さい、保守が必要ない場合  定義を余分に書いたり、型に縛りが入り柔軟性が低下するため、書き捨て コードや小規模の場合不向きです 3. RubyやPythonに慣れている場合  Ruby似の文法を持つCoffeeScriptのほうが馴染みやすいと思われます 以上の場合は、逆にTypeScriptは向いていないと思われます。
  15. 15.  TSの最も肝となる部分は型定義です。  型定義の出来によって使い勝手が大きく変わります。  型を誤魔化す書き方も出来ますが、本来不要なところで 行われると全体の信頼性が低下します。  そのため、コードレビュー等で型の書き方をチェックした方が良さそ うです。
  16. 16.  ES2015のクラスをベースに幾つか拡張されています  クラスにフィールド変数を定義出来る  privateなどのアクセサや、abstract等のキーワード追加  省略可能引数の明示、省略時の初期値付き引数の定義  ジェネリクス、型推論、インターフェース  クラスのミックスイン  Babelと同じく、ES2015やES7の構文をダウンレベルサポートし ています  クラス  アロー関数  分割代入  非同期処理  デコレータ  モジュール

×