たより

すべて

azukiazusa のテックブログ2

君は return と await return の違いを理解して使っているか

`Promise` を返す非同期関数を扱う時 `Promise` をそのまま返す書き方と `Promise` を `await` してから返す二通りの方法があります。これらは一見同じように動作するように見えますが異なる点が存在します。

stin's Blog

ブログに next-seo を導入した

適当にやってた meta タグ設定をちゃんとしました Next.js のプロジェクトの meta タグ類を設定してくれるライブラリ next-seo をインストールしました。 今まで適当に meta タグをセットしていて、特に OGP 系は

stin's Blog

Twitter シェアボタン React 作り方

Twitter のシェアボタンをブログに設置しました 記事ページの下部に Twitter のシェアボタンと Buy me a coffee のリンクを設置しました! Twitter のシェアボタンを作るに当たって考えたことを書いていきます。

azukiazusa のテックブログ2

import type { ... } from "./module" とは何者何か

TypeScript のプロジェクトにおいて `import type { ... } from "./module"` という記述を見たことはないでしょうか? これは Type-Only imports and export と呼ばれる

stin's Blog

Twitter ツイート埋め込み機能完全に理解した

Tweet URL を Tweet 埋め込みに変換して表示するように実装しました Tweet の URL だけを Markdown に記述すると ↓ Tweet 埋め込みの iframe が展開されるようにブログを実装しました!↓ http

stin's Blog

ブログをフルリニューアルした!

すてぃんブログレボリューション 21 (updated) このブログサイトをフルリニューアルしました!(5 記事しか書いていなかったのにもうリニューアルとかwwというのはそれはそう) 今回はこのリニューアルについて、こだわりポイントと技術的

azukiazusa のテックブログ2

anonymous default export はやめたほうがいいかもね

`anonymous default export` とは名前の通り匿名でデフォルトエクスポートを宣言することです。必ず名前を付与しなければいけない名前付きエクスポートと異なり、以下はすべて有効な構文です。

azukiazusa のテックブログ2

msw でリクエストを検証する方法

msw 使ってテストを記述した時期待したリクエストが送信されているのか検査したくなるかもしれません。リクエストを検証する方法と、それを回避する方法を紹介します。

blog.jxck.io

Markdown の Table 記法を CSS で実現する

本ブログは Markdown で原稿を書き、それを HTML に変換して表示している。このとき、CSS を用いて Markdown のシンタックスに似せた Style を適用している。例えば以下のように h2::before に conte

azukiazusa のテックブログ2

Storybook 単体でインタラクションテストを実施する

Storybook の Component Story Format 3.0 では新機能として play() 関数が追加されました。 `play()` 関数は Storybook 上で ユーザーのインタラクションな操作を表現することができ

azukiazusa のテックブログ2

Web フロントエンドエンジニアなら当然 Rust も書けますよね??

本記事では Yew を利用して Web アプリケーションを作成してみたいと思います。Yew は React や Vue などと同じくコンポーネントベースのフレームワークでインタラクティブな UI を作成できます。

azukiazusa のテックブログ2

Q:v-for の key に 配列のインデックスを使うのは犯罪ですか?#Shorts

結論: - `v-for` ディレクティブに渡す配列要素が決して変わらないことがわかっているのであれば使っても良い。 - `id` 属性を持っているのであれば常に `id` 属性を `key` に使用するべき。

azukiazusa のテックブログ2

Q:TypeScript の関数の返り値の型を明示的に書かないのは犯罪ですか?#Shorts

TypeScript において関数の返り値の型は推論させることは可能ですが、これはコードベース全体に意図しない型の変更による影響が広がる可能性があります。

azukiazusa のテックブログ2

Node.js に fetch がやってきた

Node.js で fetch が使えるようになる

blog.jxck.io

サイトの HTTP3 化と DNS HTTPS RR および Alt-Svc Header によるアドバタイズ

本サイトを HTTP3 対応し、Alt-Svc ヘッダおよび DNS HTTPS Resource Record によってそれをアドバタイズする構成を適用した。色々ハマったので作業のログを記す。

azukiazusa のテックブログ2

アクセシビリティを自動で検査する仕組みを整える

様々な方法でアクセシビリティを自動で検査します

azukiazusa のテックブログ2

Storybook の interaction testing と jest を組み合わせる

Storybook の Component Story Format 3.0 では新機能として `play()` 関数が追加されました。 `play()` 関数は Storybook 上で ユーザーのクリックやフォーム入力のようなインタラ

azukiazusa のテックブログ2

Vite だと require() が使えないよ〜

皆様はすでにプロジェクトに Vite は導入されていらっしゃいますでしょうか?私はできていません。 Vite はフロントエンドのビルディングツールであり、従来の Webpack 等と比較して高速に動作するといった特徴があります。Vue.j

azukiazusa のテックブログ2

フロントエンドのテストのモックには msw を使うのが最近の流行りらしい

最近のテスト手法として API コールをモックする際に Jest ではなく [Mock Service Worker](https://mswjs.io/) (以下 `msw` )を使用する手法が注目されています。実施にどのように使用されて

blog.jxck.io

画像最適化戦略 AVIF 編

本サイトの PNG/JPEG で提供している画像については、よりサイズが小さくなりやすい AVIF 形式を提供し、対応ブラウザに配信するようにした。フォーマットを出し分けるため、画像の指定は <picture> 要素を用いて対応した。画像最