Download as PDF, PPTX
![6
TYPESCRIPT はES2015 + 型lethoge:string="ほげ";
//hoge=1;#=>型が stringでないのでエラー！
//オリジナルの型を定義できる
typeLogLevel="debug"|"info"|"warn"|"error"|"fatal";
functionlog(level:LogLevel,message:string){
console.log(`[${level}]${message}`);
}
//log("waaarn","fugafuga");
//#=>第1引数の型が LogLevelと合致しないのでエラー！](https://image.slidesharecdn.com/typescriptweb-160331142839/85/TypeScript-web-6-320.jpg)
![27
STACKTRACE-JS
https://github.com/stacktracejs/stacktrace.js
//logger.ts
Logger.fatal=(message:string):Promise<{}>=>{
constlevel="fatal";
returnStackTrace
.get()
.then((stackframes:StackTrace.StackFrame[])=>
Promise.resolve(
$.post("/log",{level,message,stackframes})
)
);
};
//hogehoge.ts
exportclasshoge{
fuga(){
Logger.fatal("ERROR!!!");
}
}](https://image.slidesharecdn.com/typescriptweb-160331142839/85/TypeScript-web-27-320.jpg)
TypeScript による今風の web アプリ開発
- 1. 1 TYPESCRIPT による 今風の WEB アプリ開発by陣内靖（じんのうちやすし） @delphinus35
- 2. 2 TYPESCRIPT とは…… 次世代JS -ECMAScript2015 の上位互換+ 型 Microsoft 製 オープンソース 各種エディタのサポートが充実 MS 製だけどVisual Studio は別に必要ない。 IntelliSense 並みのコード補完を実現するための仕組み が附属。 Vim でも補完できる！
- 3. 3 ECMASCRIPT2015 で 追加された文法 Class &Module Arrow Function ()=>{} Block Scope Variables let,const Rest / Spread Parameters (a,b,...args)=>{} New Object Literals {some,more,props} Map / Set, Promise, Generator, Symbol, ... 今後まだまだ増える予定（ES2017 以降?） Decorator, async / await, ...
- 4.
- 5.
- 6. 6 TYPESCRIPT はES2015 +型lethoge:string="ほげ"; //hoge=1;#=>型が stringでないのでエラー！ //オリジナルの型を定義できる typeLogLevel="debug"|"info"|"warn"|"error"|"fatal"; functionlog(level:LogLevel,message:string){ console.log(`[${level}]${message}`); } //log("waaarn","fugafuga"); //#=>第1引数の型が LogLevelと合致しないのでエラー！
- 7.
- 8.
- 9. 9 既存ライブラリーは NPM で管理 jQuery とかunderscore.jsとかいろいろ使いたいときもあ る。 大体のライブラリーは に登録してあるし、してない ものはgithub から直で入れる。 bower? 何それ(^q^) npm #jQueryのインストール npminstall-DEjquery
- 10.
- 11. 11 各種ツールはNPM 経由で実行 ツールのインストール先はプロジェクトローカル。 gulp やbrowserify等のツールも全部npm 経由で実行す る。 package.jsonにタスクを書いて、npmrunで実行。 こうすると、必ずプロジェクトにローカルなバージョン に固定されるので開発者も戸惑わない。 npminstall-DEgulp #node_modules/.bin/gulpに入る npmstart #gulp起動 npmrunbuild #TSをコンパイル &browserify npmrunclean #ビルド済みのファイルを削除 npmruntslint #TSの文法チェック npmruntypedoc #ドキュメント作成 ...
- 12. 12 パッケージの バージョン管理 各人の環境で、jQuery その他のライブラリや、 TypeScript やgulp等のツール類もバージョンを揃える必 要がある。 package.jsonとnpm-shrinkwrap.jsonで可能。 Ruby で言うならGemfile.lockみたいなもの。
- 13.
- 14. 14 既存のJS ライブラリと 共存する 最初からTypeScript で書いてあるライブラリなんてほと んどない。 jQueryプラグインとか使いたい！ それ、型定義ファイルでできるよ。
- 15.
- 16.
- 17.
- 18.
- 19.
- 20. 20 RAILS の アセットパイプライン アセットパイプラインとは…… 簡単に言うと、複数のJS, CSSを連結・圧縮してくれる 便利機能。Coffee やSass からの透過的な変換もやって くれる。 スーパー便利すぎるが故に闇が深い＞＜ アセットパイプライン| Rails日本語ドキュメント| Ruby STUDIO
- 21. 21 アセットパイプラインと 共存する Sprockets（アセット（略）の主要gem）を全部 JavaScript で置き換えてしまった が、こ こまでやるのは大変。 折衷案として、browserifyでビルドした一つのJS を public/assetsに置く。 app/assets/javascriptsは無視 パッケージによっては個別のCSS / img が必要なこともあ る。（bootstrap とか） これらはapp/assets/...に手でコピーしてアセットパ イプラインに載せる。 スゴイ人も居る
- 22.
- 23.
- 24. 24 だいぶ秘伝のタレ化してしまった。 プロジェクト固有のバッドノウハウの固まりなので一般 化できない。メンテもしにくい。 せめてES2015 で書いてeslint かけることで品質を担保。 gulp自体バージョン変わると文法もごりごり変わるし、 プロダクト自体すぐにオワコン化する。 Grunt ェ…… この辺はホントJS キツイ。 根本的な解決策は今のところない。
- 25.
- 26.
- 27.
- 28. 28 スタックトレースが取れるスゴイやつ。 Perl とかRuby のcallerみたいなの。 なんでこんな基本的なものがJSには標準でないの （怒） Promiseを返すことから分かるように、非同期に動作す る。 ソースマップなどを加味して分かりやすいログを吐いて くれるけど、結構重い。 複数のスタックトレースを同時に生成しようとすると うまく吐けない。
- 29.
- 30.
- 31.