[TypeScript] 関数呼び出すたびに毎回prototypeを設定すんの？-ウンコード・マニア

Tweets by @unkode_mania

tannakaken 2023-02-28 07:18:45

[TypeScript] 関数呼び出すたびに毎回prototypeを設定すんの？

投稿者からのアピールポイント

多分、ググって出てきたJavaScriptのコードをprototypeが何かを一切理解せずにコピペしたんだろうね。

JavaScriptに関する理解も皆無ならTypeScriptに関する理解があるわけなく、「これで動くはずなのになんでfillVerticalTextがないなんていうんだろ？」と思って@ts-ignoreしたんだろうね。

こういう時はせめて「ここを参考にした」とか「よく理解せずに書いてる」とかコメント書いたらどうなんだろう。

少し落ち着いて考えて「ctxを引数にとる関数fillVerticalText(ctx: CanvasRenderingContext2D, ...)を作ればいいじゃん」と気づくの、そんなに難しいことじゃないと思う。

自分の使ってる道具について理解してから使えとは言わない（それは多分誰にもできない）けど、せめて「ちゃんと理解したい」という思いの伝わるコードを書きたいものだね。

これを書いた人も、これをレビューしたことにして右から左へ流した人もみんなどこかで元気に働いているみたいだが、その職場に何事もないことを願うよ。

declare const CanvasRenderingContext2D: any;

export class SomeComponent {
    // angularのComponentに関する設定

    verticallyRotatedText(text) {
        CanvasRenderingContext2D.prototype.fillVerticalText = function (text, x, y, verticalSpacing) {
            for (var i = 0; i < text.length; i++) {
                if (text[i].charCodeAt(0) == 12540) {
                    this.fillText('|', x, y + i * verticalSpacing);
                } else {
                    this.fillText(text[i], x, y + i * verticalSpacing);
                }
            }
        };
        let canvas = document.createElement('canvas');
        // canvasに関する設定
        let ctx = canvas.getContext('2d');
        // ctxに関する設定
        //@ts-ignore
        ctx.fillVerticalText(text, 20, 20, 40);
        return canvas.toDataURL();
    }
}

使い方ヒント: 「これは臭う」という行を見付けたら、各行の smell をクリックしてマーキングしておきましょう(要Twitter OAuth認証)