Angularの廃墟の上で

久々エントリ…ども…

俺みたいな仕事前にコーディングしてる腐れ野郎、他に、いますかっていねーか、はは

今日のクラスの警告
あのfuntionカッコない　とか　変数宣言ほしい　とか
ま、それが普通ですわな

かたや俺はjsの砂漠でバグを見て、呟くんすわ
it’a true wolrd．狂ってる？それ、誉め言葉ね。

好きな音楽　pink floyd
尊敬する人間　リーナス・トーバルズ（暴言はNO）

なんつってる間に4時っすよ（笑）　あ～あ、フリーランスの辛いとこね、これ

あのですねえ、久々に夜中から朝までコーディングを続けてるんですよ

不明なバグに悩まされ続けて、イライラしながら引き下がれない

眠くもならない

色々あってElectron+Angularでデスクトップアプリを作ってる

これは仕事じゃない

で、画像処理でつまりまくった

■処理A

const ctx = this.context;
if (ctx) {
  const src = ["assets/img/view/cat.png", "assets/img/stand/dog.png"]
  let imgObj: any = []
  for (let i in src) {
    imgObj[i] = new Image();
    imgObj[i].src = src[i];

    let X = 0
    if (i == "1") {
      X = 300
    }
    ctx.drawImage(imgObj[i], X, 0);
  }
  this.canvas_width = window.innerWidth + "px"
  this.canvas_height = window.innerHeight + "px"
}

■処理B

let loadImage = (url: string) => {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.src = url;
  });
};

const images = ["assets/img/view/cat.png", "assets/img/stand/dog.png"]
const context = this.context;
Promise.all(images.map(loadImage)).then(images => {
  images.forEach(function(img,index) {
    let x = 0
    if(index == 1){
      x = 300
    }
    // @ts-ignore
    context.drawImage(img,x, 0);
  });
});
this.canvas_width = window.innerWidth + "px"
this.canvas_height = window.innerHeight + "px"

処理Aと処理Bは同じ事をしようとしている

犬画像と猫画像を重ねて、viewのcanvasに描画する、それだけ

ところが、僕が何時間もかけて調べて改造したりデバッグしたりした処理Aはうまくいかない。厳密にはうまくいったりいかんかったりする

処理Bは以前、親切な読者が教えてくれたやり方だったと思う

もしかしたらちょっと忘れたけど、どこかのwebサイトからとってきたかもしれない

この処理は、AngularのライフサイクルのngAfterViewInit()で実行される

処理Aはcanvasは存在するが真っ白になる

画面のクリックイベントでも同じ処理が走るのだが、その時はきっちり描画される

しかしそれはng serveされたブラウザの話であり、Electronをビルドすると真っ白なままだ

処理Bは、素晴らしいことに100%成功する

というかそれが当たり前のはずなのだが

処理Aは配列を回してimageを生成しているだけ

処理Bはイメージオブジェクトの生成と描画処理を分けている

おそらくここに意味があるんだが、眠いんだか怒ってるのかわからん状態で、調べる気にならない

途中でbase64形式に変換してimageタグに抽出とかもしたけど、当たり前の如くうまくいかなくてね

僕はこんなのに8時間以上使って、久々にフローに入っている

そして風呂～上がりにこのエントリをブロー

何言ってるんだね？

あと5時間後に仕事が始まる

ふざけてんなあ

自分の無能さにイライラしたし、以前に成功した方法をそのまま使えばぐっすり眠れていたのに、inteliJのtypescriptエラーに日和って他の方法を探したのが運の尽きだ

処理Aだって検索して引っ張ってきて自分の脳みそで考えたわけじゃない

jsのこと何もわかってなくて辛えわ

Angularを使う仕事があったから中途半端に勉強を始めてたんだけど、10月でなくなったっていうね

今はVueの仕事

でも中途半端にやってたから何とかきりのいいところまで仕上げたくってね

Angularの日本語情報ってもうほとんど新しく発信されなくて

極稀に頑張ってるブロガーを見ると涙が出てくる

どこもかしこもreactだらけで、Angularは孤独なランナーですよ

そりゃあだって難しいんだもん

もうほとんど新規採用もなさそうだし、公式マニュアルも日本語訳されてないページわんさかっていう

廃墟、廃墟でございます

でもね、いいじゃないですか

自分で使う分には

それが自由ってもんでしょう