たより

すべて

azukiazusa のテックブログ2

【Vue.js】ref vs reactive

さて、そんな Compositon API ですがリアクティブなデータを定義する際に `reactive` と `ref` の2つの方法が用意されています。 `reactive` と `ref` どちらを使用するのがよいのか公式からも推奨す

blog.jxck.io

2021 年をふりかえる

例年通り 2021 年を振り返る。

azukiazusa のテックブログ2

Vitest と呼ばれるテスティングフレームワークがめちゃくちゃ早いらしいな

Vitest は Vite ベースの JavaScript のテスティングフレームワークです。

azukiazusa のテックブログ2

Vuetify 3 Alpha の主な変更点

[Vuetify](https://vuetifyjs.com/) は Vue.js で多く使われている UI コンポーネントです。現在のバージョンは Vue 3 には対応していません。 現在 Vue 3 に対応する Alpha 版の V

azukiazusa のテックブログ2

Nuxt3 の新しい機能いろいろ

現在 Nuxt.js は バージョン3がパブリックベータ版として提供されています。 Nuxt.js が 2 → 3 に移行するにあたってたくさんの新機能が追加されました。

blog.jxck.io

Web のセマンティクスにおける Push と Pull

筆者は、Web のセマンティクスに対する実装の方針として、大きく Push 型の実装 と Pull 型の実装 があると考えている。もっと言えば、それは実装方法という具体的な話よりも、開発者のセマンティクスに対する態度を表現することができる。

azukiazusa のテックブログ2

CSS で印刷用のスタイルを設定できる

大抵のブラウザでは Web ページを印刷することができます。 しかし Web ページをそのまま印刷しようとすると改ページがおかしくなったりレイアウトがおかしくなってしまうことがあるでしょう。そもそも Web ページはディスプレイで表示するこ

blog.jxck.io

自作 Markdown プロセッサベースの blog.jxck.io v2 リリース

本サイトは自作の Markdown ビルダを使っていたが、色々と気に食わない部分があったのでフルスクラッチで作り直し、それにともなってサイトの刷新を実施した。必要だった要件や、意思決定を作業ログとして記す。

azukiazusa のテックブログ2

フォーカストラップとは? 〜アクセシブルなモーダル〜

フォーカストラップ(またはループ)とは、ウェブページをキーボードで操作する際にフォーカスをとある領域からはみ出さないようにすることです。フォーカス可能な要素を抽出してその中をループすることで実現ができます。 登場シーンとしてはモーダルで使

azukiazusa のテックブログ2

Webpack5 Module Federation ではじめるマイクロフロントエンド

Webpack5 の Module Federation を使用してマイクロフロントエンドを作成します。

azukiazusa のテックブログ2

Youtube すごい裏ワザ!!!

Tab キーでページを操作した時のみ表示される「ナビゲーションをスキップ」は一般にスキップリンクと呼ばれるものであり、ウェブアクセシビリティのガイドライン (W3C 勧告) である WCAG 2.0にあるブロックスキップと呼ばれる達成基準を

azukiazusa のテックブログ2

npm の人気パッケージ 「coa」と「rc」にマルウェアが埋め込まれた

2021/11/5 npm パッケージ 「coa」と「rc」がハイジャックされ、パスワードを盗むマルウェアが埋め込まれました。現在の時点では問題のあったバージョンはすべて取り除かれています。

azukiazusa のテックブログ2

ボックスモデル

CSS にはボックスという概念があります。ブラウザは文書をレイアウトする際に、それぞれの要素を CSS のボックスモデルに基づいた長方形の箱(ボックス)として表現します。つまりは、HTMLの個々の要素はすべてボックスにからできており、それら

azukiazusa のテックブログ2

【TypeScript】type-challenges 中級編

[type-challengs](https://github.com/type-challenges/type-challenges) の medium レベルをやります。

blog.jxck.io

ABNF Parser の実装

IETF の RFC では ABNF 形式の表現がよく使われ、たまに実装することがある。しかし、実装するたびに前のコードを引っ張り出して思い出す、を繰り返しているので、自分用にメモとしてやり方をまとめる。完全に我流であり、目的は「その AB

azukiazusa のテックブログ2

【TypeScript】type-challenges で学ぶ高度な型

type-challengesを知っていますか? これは TypeScript の型についての問題集で、問題文の条件を満たす独自のユーティリティ型を作るチャレンジです。いわゆる「型パズル」ってやつですね。 問題の回答はPlaygroun

stin's Blog

react-router の型定義が知らない間にきれいになっていたので使い方を再考する

@types/react-router v5.1.9 から型定義がきれいになっていた react-router の型定義は受け取るパスが全て文字列のため、以前は TS コンパイラでパスの間違いを検出できませんでした。 そのため僕は type

azukiazusa のテックブログ2

lodash-es lodash 違い

[lodash-es](https://www.npmjs.com/package/lodash-es) とは [lodash](https://lodash.com/) を `ES module` 形式で提供しているライブラリです。

stin's Blog

Immutable.js で React ステートのモデルクラスを作る

Immutable.js で React ステート用モデルクラスを作る 昨今の React は関数コンポーネント一辺倒になり、 React エンジニアがクラス定義する場面はかなり減ってきているんじゃないかと思います。 関数コンポーネント内部

azukiazusa のテックブログ2

Q: TypeScript を使っているのに関数の引数のオブジェクトや配列に `readonly` を付与しないのは犯罪ですか? #Shorts

質問来てた👉 Q: TypeScript を使っているのに関数の引数のオブジェクトや配列に `readonly` を付与しないのは犯罪ですか? 結論:犯罪になる場合がある。 まず、配列の引数に `readonly` を付与しておけば以