TypeScript 入門 + Express 再入門した
モチベーション
以下の記事を見て作りたくなったからです(ありがとうございます)。
- TypeScript 入門するのは 私的TypeScriptとの関わり方ガイドライン - 角待ちは対空 を見たから。
- Express 再入門するのは Express入門 - ぺーぺーSEのブログ を見たから。
- そして 2017年はNode.jsの達人になる!いま知っておきたいベストプラクティス10 - WPJ を見たから。
久しぶりに Express 再入門して express-generator が生成したコードの middleware ググりながらふんふん言ってる
— tyru (@_tyru_) 2017年2月17日
つーか createServer() とか listen() とかないやんけと思ってたら module.exports = app; ってのがあるからこれかなぁ… node で module を実行したら特殊な扱いするのかなぁ…
— tyru (@_tyru_) 2017年2月17日
とか思ってたけどそういや express-generator は bin/www から起動されてるのでそっちにごっそり listen() やら createServer() あるのを見つけた
— tyru (@_tyru_) 2017年2月17日
あんまりジェネレータ系好きじゃないけどこれくらいの規模なら全然読めるな
— tyru (@_tyru_) 2017年2月17日
以下は入門した時のメモ。
Pug (旧 Jade)
Express
TypeScript
- 私的TypeScriptとの関わり方ガイドライン - 角待ちは対空
- 2016年から始めるTypescript - Qiita
- tsconfig.json · TypeScript
- TypeScript の型定義ファイルと仲良くなろう - Hatena Developer Blog
- TypeScript 1.6時代の.d.ts管理について意見を述べておく - Qiita
なんか TypeScript 対応してるモジュールなら未来じゃなくすでにそうなってた。下記参照node_modules
に型定義ファイルがあるから、即 TypeScript でも使えるような未来が待ってるらしい(超意訳)
- Angular/Angular-Resource/Lodash TS1316 errors 'TS1316:Global module exports may only appear at top level' after update last version. · Issue #13338 · DefinitelyTyped/DefinitelyTyped · GitHub
- この issue で
npm install @types/{name}
を知った
- この issue で
- The Future of Declaration Files | TypeScript
@_tyru_ 今は特に理由がなければ @type/foo みたいな npm パッケージで管理されているものを使うのが良いっぽいです. https://t.co/9hTf3E1lkV
— ドッグ (@Linda_pp) 2017年2月17日
WebPack
TypeScript + Webpack 使った時に出たエラーと対処したこと
loaders に loader を指定する時は test
プロパティのパターンで絞り込むこと
html-loader を使おうと思って .html のファイルを require() したら、ts-loader に渡って解釈されてしまったので、絶対つけること。 当たり前っぽいけどこれでハマったので。
ERROR in ./src/component/root-index.html Module build failed: Error: Could not find file: 'C:\msys64\home\tyru\git\scrader\src\component\root-index.html'. at getValidSourceFile (C:\msys64\home\tyru\git\scrader\node_modules\typescript\lib\typescript.js:79277:23) at Object.getEmitOutput (C:\msys64\home\tyru\git\scrader\node_modules\typescript\lib\typescript.js:79644:30) at getEmit (C:\msys64\home\tyru\git\scrader\node_modules\ts-loader\dist\index.js:99:43) at Object.loader (C:\msys64\home\tyru\git\scrader\node_modules\ts-loader\dist\index.js:27:11) @ ./src/component/root-index.ts 11:14-42 @ multi ./src/init.ts ./src/component/root-index.ts ./src/routes.ts
module.exports = { // ... module: { loaders: [ { test: /\.ts$/, // これを必ずつける exclude: /(node_modules)/, loader: 'ts-loader' }, { test: /\.html$/, loader: 'html-loader', query: { minimize: true } } ] } }
「error TS2304: Cannot find name ‘require'」と言われる時は require() の型宣言をしてやること
declare function require(x: string): any;
このような型宣言をしないと、以下のようなエラーが出る。
ERROR in ./src/component/root-index.ts (12,15): error TS2304: Cannot find name 'require'.
以下のような通常の require() をしてる時は必要ないみたいだけど、
import angular = require('angular'); import 'angular-ui-router'; angular.module('scrader', ['ui.router']);
このように式の中?で require() をすると型宣言が必要になる。 正直 TypeScript 力が低すぎてよく分かってない。
// 以下の1行がないとコンパイルエラー!! declare function require(x: string): any; class RootIndex { msg: string; constructor() { this.msg = 'Hello!'; } } angular.module('scrader') .component('rootIndex', { template: require('./root-index.html'), // template: `<div ng-bind='$ctrl.msg'></div>`, controller: [RootIndex] });
WebPack と html-loader 便利すぎる。 Gulp より「コード」っぽい設定を書かずに済むし、loader めっちゃ便利だし、WebPack 大好きになってきた。 require() でコードに事前に*1色々埋め込める仕組みというのが気に入った。
参考記事
- TypeScript と Node.js で hello, world をする http server を作る - あいつの日誌β
- webpackを使い倒す - Thujikun blog
- WebPackを使ってJavaScriptを効率的に書くチュートリアル【入門編】 | 株式会社LIG
- javascript - How to use Webpack with Angular + templateCache? - Stack Overflow
- これで html-loader を知った
Special Thanks
TS の test、最後の $ が抜けてるかな?https://t.co/l9XeEAirN7
— 鳥頭なフレンズ (@kariya_mitsuru) 2017年2月19日
*1:「静的に」と言っていいんだろうか?
私の IT エンジニアとしての原点
エモい話を Twitter で呟いた。 ここら辺の話はHow I Vim のインタビューとかでも話してて、おそらく原点に近い*1部分だと思うので、ブログにも投下してみる。
アラートメールが埋もれる問題はなかなか難しくて、前の職場では朝チェックと称して人力で全てのサーバからの syslog が載ったメールを一行一行見てて、とても自分にはできないと思った。
— tyru (@_tyru_) 2017年2月18日
案の定ミス連発するし、他にも色々あって自分はインフラ業は向いてないと思ったきっかけでもあるけど、メール文面を解析して他への報告メール生成までを自動で作れる SPA(という呼称はまだなかったけど)ツールを作ったらかなり重宝された。現に他の人もちらほらミスしてるのが見つかった。
— tyru (@_tyru_) 2017年2月18日
俺は事務仕事向いてないし要領がほんとに良くないので「なんとなくやる」ってのができない。だから現場との相性はかなり場合によると思う
— tyru (@_tyru_) 2017年2月18日
俺がというより一般的に言って、プログラマに事務仕事させると死ぬ
— tyru (@_tyru_) 2017年2月18日
まぁ、仕事なんていっぱいあるんだよ、というのを転々として思った。転々とできるタイプの業種でほんと良かった
— tyru (@_tyru_) 2017年2月18日
SPA ツール、タブとかも備えたけっこうまともに SPA やってる作りで、「(そもそもプログラマじゃなかったから)開発ツールとかなんも入ってないけどみんなブラウザは入れてるからそれで使えるようにしよう」って感じだった。WSH とかも考えたけどブラウザのが楽だと思った
— tyru (@_tyru_) 2017年2月18日
しかもメールの本文(!)が 5MB とかあるから、時刻でソートして二分探索して固まらないよう高速にできたので結構楽しかったし嬉しかった。高速化は結果に出るから分かりやすくていいよね
— tyru (@_tyru_) 2017年2月18日
あと業務知識が絡んで来るから詳しいことは言えないけど、時刻、ホスト名、メッセージでフィルタリングが柔軟性高く実現できるように、S 式の形の JSON で条件を持って解釈実行したり、その条件の JSON をグラフィカルに作るツールを作ったり楽しかった。
— tyru (@_tyru_) 2017年2月18日
もちろん OR とか AND で階層的にフィルタ条件を作れるやつ。あの2つのツールのおかげであいい経験だって思えてる部分はかなりあるかもしれない。上司も優しい人ばかりだったし、プログラマのが向いてるよ、と言われた時は叱らせてしまってごめんなさいと思ってたのが救われた気分だった
— tyru (@_tyru_) 2017年2月18日
他の現場でもツールは毎回と言っていいほど作ったし、それで帳消しにしようとしてた浅ましい考えはあったかもしれない。ただ、今ではだいぶマシになったとはいえ、人には向き不向きがあり、どんなにがんばっても伸び代の低い部分というのは存在する。絶対に。
— tyru (@_tyru_) 2017年2月18日
だからインフラの人はすごいと思うし事務仕事を淡々とこなす人もすごいと思うし、それを忘れて技術で全部ぶっ壊してやるぜ、ってやり方は自分にはできないし合ってないような気がする(逆にそれをしようとした時は大抵よくない結果になる)。ベンチャーより SI に近い現場の方が合ってる人もいる。
— tyru (@_tyru_) 2017年2月18日
この世は本来草も生えないような地獄で、地獄だったけど、あれこれ努力して笑ってようやく人間らしい生き方ができるようになる。ここまで世界の形を変えた先人に感謝しかない。今だって気を抜いたらどんどん地獄になると思ってる
— tyru (@_tyru_) 2017年2月18日
(←草を生やすと笑うを掛けてうまいこと言ったつもりのドヤ顔の表情)
— tyru (@_tyru_) 2017年2月18日
*1:原点という意味ではその前とその前の前のアルバイトかな