ターニングポイントさん!?

タグ: Webフロントエンド Page 1 of 3

【JavaScript】ブラウザ標準APIでInflate/Deflate/gzipするのとStreamのはなし

◆結論

Compression Streams API – Web API | MDN (mozilla.org)

例えばdeflateの解凍だけを関数にしたら以下のとおり。

export const inflate = (data: ReadableStream): Body => {
  const decompressedStream = data.pipeThrough(new DecompressionStream('deflate'));
  return new Response(decompressedStream);
};

export const inflateBlob = (data: Blob): Body => {
  const decompressedStream = data.stream().pipeThrough(new DecompressionStream('deflate'));
  return new Response(decompressedStream);
};

export const inflateArrayBuffer = (data: ArrayBuffer): Body => {
  const resp = new Response(data);
  if (!resp.body) return resp;
  const decompressedStream = resp.body.pipeThrough(new DecompressionStream('deflate'));
  return new Response(decompressedStream);
};

‘deflate’を’gzip’にすればgzipだし、DecompressionStreamをCompressionStreamにすれば圧縮できるし。

上記はTypeScriptなんで、JavaScriptで使おうと思ったら「:」の型指定を消して差し上げろ。exportも不要なら消せ。

◆いきさつ

【TypeScript】nestしたオブジェクトのプロパティにインデックスでアクセスする

◆結

前提として、型安全で引いてくるのは限度がある。

例えばあるオブジェクトの”piyo.a”の値をとりたいときは以下の感じ。

const a = {
  hoge: "",
  piyo: {
    a: "text",
    b: 100,
  },
};

const getValue = (s: string, item: object) =>
  s.split(".").reduce<unknown>((p, c) => p?.[c as keyof typeof p], item);

const b = getValue("piyo.a", a);

この形を取らざるを得なくなったら設計を見直したほうがいい。何かおかしいことをやろうとすると、こういったおかしいコードを書かされるはめになる。

【JavaScript】BlobをCanvasに書き込んだりCanvasをBlobにしてダウンロードしたりPNGを合成したり

メリークリスマス🎅

JavaScriptとPythonは他の言語と比べたらググって出てくる情報がホントに劣悪だよねStackOverflowですラドベントカレンダー、1日目の記事です。(全一日)

◆結論

TypeScriptですが。

const b = new Blob();
const c = document.createElement("canvas");

const bitmap = await createImageBitmap(b);
c.width = bitmap.width;
c.height = bitmap.height;
c.getContext('2d')?.drawImage(bitmap, 0, 0);

【JavaScript】いちいち配列やらリストに詰めんな

ウキウキ★コーディング講座のお時間です。有料です。嘘です。金返せ。

JavaScript(TypeScript)のGeneratorやらyieldやらIterableやらについて話すよ。C#erは前に書いたこの記事でもしゃぶっててね。

◆例題

【JavaScript】\uxxxx的なUnicodeのアレにエンコードする方法

◆結論

ブラウザ開いてF12押してConsoleのタブ開いて

console.log(escape("ちんこ").replaceAll("%", "\\"));

したら

\u3061\u3093\u3053

って表示されるね。よかったね。

◆\uxxxxってなに

Unicodeエスケープされた文字です。

【Web】BabelってなにPolyfillってなにPolyfill.ioってなに

ググれカス!

あ、ググってここに来たの。ごめん。そりゃそうか。

◆ハイケイ

ブラウザによって処理可能なJavaScriptは違う。

上記から、ふたつの事柄が想起される。

  1. JavaScriptの仕様らしい仕様がなかった時代の話
  2. 仕様ができて、みんなノリ気になってからの話

JavaScriptがこの世にリリースされた際、それが動作するWebブラウザはひとつっきゃなかった。それから暫くして「便利だねぇ」っつって他のブラウザもJavaScript動くように追従してきたんだけど、各ブラウザベンダーがてんでに実装したら馬鹿げた事態になるでしょう。SQLみたいに、各ブラウザ向けのJavaScriptを書かねばならなくなる。エンジニアが死んじゃう。だから仕様(標準)を整理しようという話になり、ECMAScriptが策定された。

ECMAScriptという仕様にはバージョンがあって、バージョンを重ねれば当然に機能が追加されたりする。各ブラウザはECMAScriptの仕様に則ったJavaScriptが正常に動くよう実装を進めるわけだが、古いブラウザは古いJavaScriptしか動かないままになる。

古いブラウザを古いまま使うチンパン知能のクズ人間が大勢いるもんで、新しめのJavaScriptで書いても「動かないよぉ」とか苦情くる。そういう奴らは一列に並ばせてから順繰りに殴れば良いんだけど、いかんせん数が多いので殴る方も腕が持たなくなってくる。そこで、もっと簡単に殺せるように近頃は竹槍を使って喉元を突くようになった。

…ちがう。すごい間違えた。Babelを使ってそのへんの問題を解決するようになった。

◆余談:compatibility

どのブラウザがどのJavaScriptの機能を実装しているのかってのはコンパチテーブルと俺が勝手に呼んでいるサイトを参考にすればいい。

【Azure Pipeline】yarnとかpnpmでvsts-npm-authっぽいことする

この記事は「真空・大おちんちん感謝祭アドベントカレンダー」という存在しないアドベントカレンダーの25日目の記事です。メリークリスマス。

◆結論

Package: npm Authenticate task (for task runners)

◆何がしたいのか

Azure DevOpsArtifactsっていう機能使えばオリジナルのnpmライブラリを配信できる。して、オリジナルなライブラリだから、そのライブラリを配信できるregistryが必要になりますよね。それもArtifactsから提供できる。提供できるんだけど、誰からでもregistryを使えるのは困る。だから認証が必要。

◆ローカルからregistry見る

JavaScript、TypeScript、Vue、Vuetifyで要素描画時にアニメーションする

フェードインとか。

おまけもあるよ💖

◆おことわり

古いブラウザは知らない。帰れ。

…いや、帰れよ。何だよその目は。

…かーえーれっ!かーえーれっ!

ウェヒヒヒwww

あ!泣いてやんの!だっせ!だっせ!

◆Intersection Observer

まえに、画像の遅延読み込みについて書いたんです。そこで登場したIntersection Observerくんが活躍します。応援してあげてください。

12時間悩んだ末にDocker + VS Code なWeb開発環境が出来たよ^~

んほ^~

※Windowsを対象にしてるけど、デスクトップ環境でコンテナ動けばどうでもいい。

知っ得情報は後のほうに書いてあるから、実施の段を読み飛ばしてもいい。

◆要確認事項:2020/9/6

手を出すのが、ちょっとはやいかも。あんま悩んでもしょうがねぇから、つみですと思ったら諦めて時が経つのを待てばいいと思う。

どっから話せばいいのかわからんが。すべては時間が解決するものであったりする。

▼Windowのバージョン

Windows Homeはまだ無理かも。なんやかんや試したけど動かんかった。Docker Desktopが動かなくて謎。いやでも18462以上であればHomeでイケるって情報ある。謎。

「僕のフロントエンド技術に対するスタンス」に対する伺か

僕のフロントエンド技術に対するスタンス | note

文句言いたいわけじゃなくて、補足というか。多分、そんなに深くないところの人をターゲットに書いただろうからしょうがないとも思う。だから深いところをサワサワしてみる。

ってのと、「TypeScript対応に時間がかかりすぎているため、スタート地点に立つことが厳しい」ってのを読んで、Vueで開発してないんやなと思ったから書いとく。というかそれを書きたかった。あとはおまけ。

◆Vueの補足

メリットについて語っておく。というかデメリットらしいデメリットが見当たらないのが強みなんだけども。

まず、エコシステムの結託具合。Reactは企業(Facebook)が主体であるというのにメリット/デメリットがあると思わんかね。

Page 1 of 3

Powered by WordPress & Theme by Anders Norén