TypeScript/Node

あけましておめでとうございます。

今日はすでに4日ですが。。。 TypeScriptでReactなエディタ 今年の年末年始休暇は数章だけ残してた読みさしの本を読みきるのと変化のないアクアリウムを眺めるのと、少しだけ会社のマネジメント仕事をしてました。一番時間費やしてたのはTVもほとんど見ずに…

TypeScriptのプロジェクトでTSLintからESLintへ移行する

昨年夏ぐらいから、TSLintは終わらせてESLintでTypeScriptプロジェクトも対応していこう、という世界的な流れになってました。「脱TSLint」とか「ESLintでTypeScript」とかググればその辺の記事が出てきます。当時早速私も乗っとこうとESLintに移行しようと…

unstated-nextとredux-actionsを組み合わせると素敵

github.com unstated-nextは、Reactの新しいContext APIの極薄のラッパー。ソースコードもたった38行(空行込み)。 github.com redux-actionsは、FLUXスタイルのアクションを作る極薄ライブラリ。名前にReduxが入ってるのでRedux専用かというと、そうではな…

Denoプラグインが普通のTypeScriptプロジェクトに干渉する

VSCodeにDenoプラグインをインストールすると、普通のTypeScriptのプロジェクトでlibの解決ができなくなったりするなど、干渉していました。だいたい問題ないのですけど、たまたまブラウザ環境のグローバル変数の型が解決できなくて困ってました。 const sel…

NestJSの設定で漏れるとダメなやつ

つまらないところでハマったので、未来の私のために備忘。NestJS をCLIを使わずに手でプロジェクトを作ったとき、tsconfig.jsonに以下をいれないとダメ。 // tsconfig.json { "compilerOptions": { "target": "es5", "experimentalDecorators": true, "emitD…

VSCodeでJest

最近はどうしてもコード書く機会が少ないので、JetBrains製品のサブスクリプションを維持するのを諦めてこれまで食わず嫌いだったVSCodeに移行したのですが、改めてコード書き始めるとちょいちょいハマったのでメモっておかねば。for 未来の私。 課題 TypeSc…

VSCodeでdeno

愛用するGoLandのサブスクリプションが切れてしまいました。すでにGoLand乗り換えの際にWebStormは捨ててたので、JetBrainsのIDEは無くなった。継続すればいい話なのですが、最近は違う種類の仕事で時間取られて開発作業に関わることが少なく、あってもAtom…

denoがHomeBrew入りしてたよ

たまにbrew upgradeを打ってますが、今日たまたま気がついた。denoがHomeBrewのFormulaeになってました。何度かあった破壊的変更も最近はなく、手元で書いた自分的便利ツール群が元気にdenoで動いています。 $ brew info deno deno: stable 0.9.0 (bottled) …

enzymeがまたしばらくみないうちに変わってた

mk.hatenablog.com 前回は15ヶ月ぶりでしたが、さらに今回は5ヶ月後。enzymeのセットアップ周りが改善されて過去の面倒な作業がなくなってる。ついでにts-jestもちょっと変わってる。 // enzyme.setup.js const enzyme = require('enzyme'); const Adapter =…

denoの開発速度が上がってきた

denoの開発速度が上がってきた。 github.com 毎週マイナー上げてくって。これまでTypeScriptのコンパイラ設定が不可能だったのだけど、出たばかりの0.4.0からtsconfig.jsonを指定できるようになってました。それ以前に破壊的改変があって、先の紹介コードはC…

denoが楽しい

TypeScriptの実装系として爆速進化中のdenoです。ちょっとしたシェルスクリプトで書いたりするようなことを、denoで書くのが楽しい。今朝は花粉症の鼻づまりが原因で早起きしてしまったので、午前中は遊びコード書いてた。前に書いたコード断片をかき集めて…

CLOUD NATIVE INFRASTRUCTURE AS CODE

一年来サーバレス環境を作るのにServerless Framework(a.k.a SLS)を愛用してきましたが、昨今は関数実行部分だけでなく周囲の様々なマネージドサービスも同様に設定する必要が生じています。SLSはAWSのCloud Formation Templateを吐き出して実行する作業を…

denoが着々と開発されている

node作者であるRyan Dahl氏がアーキテクチャ設計におけるリベンジとして、nodeと同じくV8をスクリプトエンジンに採用して作ってるTypeScriptのネイティブ実行環境「deno」は、着々と開発されていて今や簡単にインストールできて、すぐ使えます。 curl -fL ht…

Expressからの...NestJS

続き。何がしたいかというと、REST-fulなAPIをテストしやすく拡張しやすい手法で作りたいだけ。しかしAWSサーバレスの上でTypeScriptにと縛っていくとなかなか答えにたどり着けなかったのです。 NestJS nestjs.com サーバサイドのフレームワークとしてLoopBa…

サーバレスでExpressと再会

eslint-typescript (様子見) qiita.com tslintとtslint-config-airbnbを常用していますが、中の人による上記記事ではいずれ世の中はtslintからeslintに移行されていくってことが予見されています。eslintの方が設定をpackage.jsonの中に書けるってのが好き。…

Reactは15ヶ月前に比べて相当様子が違った

17年9月ごろを最後にReact書いてなかったので、15ヶ月ぐらいのブランクでしたが、再び寝たReactを起こしてみました。すると、なんとまあ、相当様子が違うのです。Cliツールで雛形を作るのはView.jsで経験していましたが、そもそもに元祖だったらしいReactの…

Google Mapsが出るように直した

mk.hatenablog.com 不恰好なので地図を出るようにしました。Google Maps JavaScript API ドキュメント の通りAPIキーを設定するのですが、これは以前から言われていたことで変更は無いです。ただ、これまではキーを設定しなくても動いてたってだけ。Googleは…

C++でCoreText

NodeモジュールでまずはOSのフォント情報を取ろうと思います。Objective-CでやればサンプルもたくさんあるのだけどここはC++で書きたかった。 #include <ApplicationServices/ApplicationServices.h> #include <nan.h> using namespace v8; ApplicationServices/ApplicationServices.hを取り込みます。この中にC</nan.h></applicationservices/applicationservices.h>…

node-gypそしてnanへ。おまけでTypeScript

github.com nodeのアドオンを調べてたら本もなければ情報も少なく、この土日ずっと家族には仕事が忙しくてヤバいという体裁を装い篭ってたので、せめて記録ぐらいは残そうとサンプルを書きました。サンプルは超シンプルになりましたがこれは理解してからシン…

node v10.1.0は回復

node v10.1.0がリリースされていたので、nで切り替えて一通りテストやビルドを動かしてみました。 (node:26203) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.alloc…

node-canvasの型定義備忘

node-canvasの型定義を使うところだけ書いてみたけど目的に敵わなかったので、定義だけ備忘。いつか使うかも。 declare module 'canvas' { import * as Stream from 'stream'; interface PNGOptions { palette: Uint8ClampedArray; backgroundIndex?: number…

@types/nodeは治った

@types/nodeの10.0.4が出てたので試しにupgradeしてみたらTypeScriptのコアLibとぶつかる問題は解決していました。nにまだ10.0.0より後は来てないので本体入れ替えないから定義だけupgradeの意味はないけど、害もなし。

node v10.0.0は地雷

node v10.0.0は地雷バージョンでした。すでに@types/nodeがv10.0.0でTypeScriptのコアLibとURLなどいくつかの型定義が被って爆死という案件がありましたが、今回はts-jestの環境で以下のテストが沈黙してしまうという問題を抱えています。非TypeScriptな素の…

開発ガイドラインとGetting started

内向きに開発ガイドラインとGetting Startedを兼ねたようなものを書こうとしたが、目次だけ書き出したけどこれでも環境作るところだけ、この後にコーディング編とテスト編とリポジトリ&CI&デプロイ編があって、そもそもコーディング編にはSPA章とサーバレ…

gulp v4によるフルTypeScriptなビルド環境

SPAを作るには、webpack等の、色々寄せ集めて一つのJSにバンドルしてくれるツールを用いてビルドしますが、サーバサイドやローカル実行ツールのプロジェクトはそもそもビルドする必要すらありません。しかし、何らかの都合でビルドをしたい場合もあるでしょ…

fontkitを活用したら、ばっちりテキストのBBoxが取れました

github.com 必要なものだけfontkitの定義ファイルを作る。 // @/renderer/headless/fontkit.d.ts declare module 'fontkit' { function openSync(filename: string): Font; class Font { ascent: number; descent: number; unitsPerEm: number; layout(text:…

SVGTextElementのBBoxをpuppeteerで取る

なんでこんなことをしてるのかというのは、プロジェクトがクソ忙しい中できちんと説明できないのですが、ふと面白くなっちゃってd3.jsとdagre.jsでSVGを書いてました。 要件としてはブラウザ上でSVGにてテキストが入ったダイアグラムを描く際に、レイアウト…

続 keyof T

in keyof T - まさたか日記 keyof Tを用いて連想配列でアクセスする際の縛りを前に書きましたが、もっとスマートな書き方を思いついたのでメモ。 test ('power of keyof', () => { function checkObject<T>(props: T): { [N in keyof T]?: string } { return Ob</t>…

.d.tsをどうつくるか

Angularが教えてくれた。 TypeScriptの学びの中で、他のライブラリの型情報をどう手に入れるかは説明されているのだけど、ライブラリとしてどのように型情報を提供するのかはあまり説明されていない。ECMAScriptで書かれたライブラリに後付けでindex.d.tsだ…

React v16、Enzyme v3

昨日から日本に来てます。 facebook.github.io さて、炎上の末にライセンスがMITになったReactのv16がリリースされたと同時期に、Enzymeもv3がリリース。v3からsetupに変化がありました。 Working with React 16.x · Enzyme 説明とおりにしたけど動かねー。C…