Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

はじめてのTypescript

195 Aufrufe

Veröffentlicht am

https://hfs.connpass.com/event/112035/
で発表した内容です。TypeScriptの入門編です。

Veröffentlicht in: Ingenieurwesen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

はじめてのTypescript

  1. 1. はじめてのTypeScript
  2. 2. 講師紹介 榮枝純一 SCE(現SIE、PlayStation)で社内SE的な仕事の後、起業。 自社サービスや受託開発をしつつ、受託の取引先だったタスカジのシステムをほぼ一人 で巻取る(現在は社員として参加)。設計から実装・運用まで行うフルスタックエンジニア として活動中! ・使ってきた言語は C、C++(使いこなせてない)で画像処理(顔の立体計測とか) Java、Scala(主にPlayFramework)、PHP(!?) Javascript(主にjQuery)、CoffeeScript(主にBackbone)、TypeScript(主にAngular)
  3. 3. 1.TypeScriptとは
  4. 4. きっちりした言語が好きな人用のJavascript
  5. 5. サーバサイドの一般的なプログラミング言語では、当たり前の用 にある「型」 型があると、 ・引数の間違えによるバグの発見 ・エディタによる関数サジェスト(正式名?) などが捗ります。 型がある言語に慣れてしまうと、無い言語は苦痛。。
  6. 6. 例)TypeScriptで、成人しているユーザを取り出す class BirthDay { private static today(): Date { return new Date(); } constructor(private birthday: Date) { } public age(): number { return BirthDay.today().getFullYear() - this.birthday.getFullYear() + (this.isOverBirthday() ? 1 : 0); } private isOverBirthday(): boolean { if (BirthDay.today().getMonth() < this.birthday.getMonth()) { return false; } if (BirthDay.today().getMonth() === this.birthday.getMonth()) { return BirthDay.today().getDay() >= this.birthday.getDay(); } return true; } } class User { constructor(private _name: string, private birthDay: BirthDay) { } get name(): string { return this._name; } public age(): number { return this.birthDay.age(); } } const users: User[] = [ new User("Taro", new BirthDay(new Date("2001-01-10"))), new User("Jon", new BirthDay(new Date("1984-06-23"))), new User("Hanako", new BirthDay(new Date("2005-9-19"))), new User("Yamada", new BirthDay(new Date("1999-3-19"))), ]; users.filter((user) => { return user.age() >= 20; }).map(user => user.name) .forEach(name => console.log(name));
  7. 7. 同じコードをJavascriptで書くと https://bit.ly/2Lm17az
  8. 8. なぜTypeScriptを選ぶのか
  9. 9. TypeScriptのメリットいろいろ 1 ・型があるので便利  ・問題があるとコンパイル時にエラーで怒ってくれる  ・(エディタによるかもしれないですが、)コード補完が充実する ・Javascriptの闇、”prototype”を触らなくていい ・classやinterfaceを扱える(※)のでオブジェクト指向が捗る  →逆にフロント開発経験がサーバ側開発スキルにも生きる!! ※当時はJavascriptに”class”はなかった。  また、今もJavascriptのclassはprivateがなかったりと不完全  そして、Javascriptにはinterfaceはない。。
  10. 10. TypeScriptのメリットいろいろ 2 ・フロントエンドフレームワークのAngularではTypeScriptほぼ必須  ・AngularはReactやVueに押され気味ですが、もちろんReactやVueをTypeScriptで 書くことも出来ます。  ・バックエンドをnodeで書く場合にもTypeScriptで書けます ・コンパイルするとJavaScriptになる言語(AltJS)はTypeScript以外にもありますが、そ の中でTypeScriptがデファクトスタンダード ・Githubによる分析でもプロジェクト数7位、成長率3位の言語! https://octoverse.github.com/projects
  11. 11. TypeScriptのデメリット ・コンパイルしないといけない。 ・コンパイルの設定が色々あって複雑。。tsconfig.json  (設定しなくてもある程度のことは出来ます。) ・手続き型に慣れているプログラマーには? ぐらい。
  12. 12. なぜTypeScriptを選ぶのか →比較的大規模な開発では あると捗る
  13. 13. TypeScriptのはじめかた
  14. 14. ちょっと触ってみよう http://www.typescriptlang.org/play/
  15. 15. TypeScript開発環境の作り方ダイジェスト 1.npm/nodeを用意する→インストールされていない場合は次ページ補足 2.typescriptのインストール $npm install -g typescript 3.typescriptのコードを書く →sample.ts 4.コンパイル $tsc sample.ts →sample.jsが生成されます。index.htmlなどに埋め込むなどで実行します。
  16. 16. 補足:npmのインストール nodeをインストールするとnpmもついてきます。 https://nodejs.org/en/download/ からダウンロードしてインストール macの場合はhomebrewを使って以下のコマンドでも可。 $brew install node
  17. 17. Javascriptの進化も見逃せない! ES2015(ES6), ES2016, ES2017, ES2018,... let/const, classやラムダ、アロー関数等々TypeScriptにしかなかった機能がどんどん Javascriptにも。 (https://github.com/tc39 辺りで色々推められている感じ?)
  18. 18. Javascriptが進化していくとTypeScriptはい らなくなる??
  19. 19. Javascriptに対してTypeScriptの優位性がなくなる日は 来ない。(たぶん) おそらく、 ・Javascriptに「型」が導入されることはない ・classの仕様もこれ以上大きな変更があるとは考えにくい。(privateとか。) ・JavascriptにInterfaceが導入されることもなさそう。 ・Javascriptの変化は、TypeScriptでも使える。 →当面TypeScriptを使えて困ることはない。
  20. 20. 更に詳しく https://www.typescriptlang.org/docs/home.html を読みましょう。

×