```
@@ -70,7 +70,7 @@ import { Tweet } from "astro-embed";
```css
.card > :last-child {
- margin-bottom: 0;
+ margin-bottom: 0;
}
```
@@ -82,8 +82,8 @@ import { Tweet } from "astro-embed";
```handlebars
{{#if subtitle}}
-
@@ -95,15 +95,15 @@ Stackレイアウトというのは[Every Layoutで紹介されているCSSの
```css
.stack > * + * {
- margin-top: 1.5rem;
+ margin-top: 1.5rem;
}
```
```handlebars
-
-
{{title}}
-
{{description}}
-
さらに詳しく
+
+
{{title}}
+
{{description}}
+
さらに詳しく
```
@@ -132,17 +132,17 @@ Stackレイアウトというのは[Every Layoutで紹介されているCSSの
```css
.stack {
- display: flex;
- flex-direction: column;
- height: 100%;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
}
.stack > * + * {
- margin-top: 1.5rem;
+ margin-top: 1.5rem;
}
.stack > :nth-child(2) {
- margin-bottom: auto;
+ margin-bottom: auto;
}
```
@@ -156,11 +156,11 @@ Stackレイアウトというのは[Every Layoutで紹介されているCSSの
```css
p {
- margin-top: 1.5rem;
+ margin-top: 1.5rem;
}
h2 + p {
- margin-top: 1rem;
+ margin-top: 1rem;
}
```
diff --git a/src/content/blog/2021-09-29-rehabilitation.mdx b/src/content/blog/2021-09-29-rehabilitation.mdx
index bca6925..7dc7e6d 100644
--- a/src/content/blog/2021-09-29-rehabilitation.mdx
+++ b/src/content/blog/2021-09-29-rehabilitation.mdx
@@ -1,7 +1,7 @@
---
slug: 20210929-rehabilitation
title: リハビリ
-publishDate: "2021-09-29T02:59:00.000+09:00"
+publishDate: '2021-09-29T02:59:00.000+09:00'
---
ブログを書くのはおよそ8ヶ月ぶりになる。僕にとっては、それなりに長らく書かなかったことになる。
diff --git a/src/content/blog/2021-10-11-publication-of-everylayout.mdx b/src/content/blog/2021-10-11-publication-of-everylayout.mdx
index aadd64d..b50fc01 100644
--- a/src/content/blog/2021-10-11-publication-of-everylayout.mdx
+++ b/src/content/blog/2021-10-11-publication-of-everylayout.mdx
@@ -1,48 +1,38 @@
---
slug: 20211011-publication-of-everylayout
title: 『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』、素直さという選択 #everylayout_ja
-publishDate: "2021-10-11T09:20:00.000+09:00"
-ogImageURL: /assets/2021-10-11-publication-of-everylayout/ogp.png
+publishDate: '2021-10-11T09:20:00.000+09:00'
+ogImage: ./assets/2021-10-11-publication-of-everylayout/ogp.png
twitterCard: summary_large_image
---
-import { Image } from "astro:assets";
-import cover from "./assets/2021-10-11-publication-of-everylayout/cover.png";
+import { Image } from 'astro:assets';
+import cover from './assets/2021-10-11-publication-of-everylayout/cover.png';
-
+
友人の[腹筋ローラーの力を信じろ](https://twitter.com/8845musign)さんと共に監訳を担当した書籍『[Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論](https://www.hanmoto.com/bd/isbn/9784862465177)』が出版されます。現在、[Amazonで予約受付中](https://www.amazon.co.jp/dp/486246517X)です。当初の予定よりもかなり遅れてしまいましたが、内容はいまだ鮮やかなままに思えます。
-{/* prettier-ignore */}
-{/* prettier-ignore */}
-{/* prettier-ignore */}
-{/* prettier-ignore */}
-{/* prettier-ignore */}
-{/* prettier-ignore */}
-{/* prettier-ignore */}
-{/* prettier-ignore */}
-{/* prettier-ignore */}
-{/* prettier-ignore */}
目次:
diff --git a/src/content/blog/2021-11-19-like-3-tweets.mdx b/src/content/blog/2021-11-19-like-3-tweets.mdx
index f1874c5..02af1f8 100644
--- a/src/content/blog/2021-11-19-like-3-tweets.mdx
+++ b/src/content/blog/2021-11-19-like-3-tweets.mdx
@@ -1,10 +1,10 @@
---
slug: 20211119-like-3-tweets
title: 3ツイするくらいの軽さでブログ書くタイプの人類になりたい
-publishDate: "2021-11-19T21:30:00.000+09:00"
+publishDate: '2021-11-19T21:30:00.000+09:00'
---
-import { Tweet } from "astro-embed";
+import { Tweet } from 'astro-embed';
diff --git a/src/content/blog/2021-11-21-mono.mdx b/src/content/blog/2021-11-21-mono.mdx
index 4955eb6..2ef7ea9 100644
--- a/src/content/blog/2021-11-21-mono.mdx
+++ b/src/content/blog/2021-11-21-mono.mdx
@@ -1,7 +1,7 @@
---
slug: 20211121-mono
title: かわいいぬいぐるみとか見つけるとうわほしいぃって思うけどたぶん2ヶ月後くらいにはいらねえって思っちゃう
-publishDate: "2021-11-20T14:50:00.000+09:00"
+publishDate: '2021-11-20T14:50:00.000+09:00'
---
とんかつ屋。隣には、神経質そうな思春期の息子と、大雑把そうな年配の父親。
diff --git a/src/content/blog/2021-11-22-to-inaka.mdx b/src/content/blog/2021-11-22-to-inaka.mdx
index 8473af5..13d6ed6 100644
--- a/src/content/blog/2021-11-22-to-inaka.mdx
+++ b/src/content/blog/2021-11-22-to-inaka.mdx
@@ -1,7 +1,7 @@
---
slug: 20211122-to-inaka
title: 田舎に回帰したい
-publishDate: "2021-11-22T04:00:00.000+09:00"
+publishDate: '2021-11-22T04:00:00.000+09:00'
---
いま住んでる部屋が結構ボロいので、いろいろ不満があって、引っ越したいなあと思いつつも、めんどくさくてずっとほったらかしていたけど、そろそろ本当にどうにかしたいと思って引っ越し先を考え始めた。
diff --git a/src/content/blog/2021-11-23-explain-too-much.mdx b/src/content/blog/2021-11-23-explain-too-much.mdx
index cdd8e66..e360aea 100644
--- a/src/content/blog/2021-11-23-explain-too-much.mdx
+++ b/src/content/blog/2021-11-23-explain-too-much.mdx
@@ -1,7 +1,7 @@
---
slug: 20211123-explain-too-much
title: こと非同期コミュニケーションにおいては少しくどいと思うくらいに説明するのでちょうどいい
-publishDate: "2021-11-23T23:00:00.000+09:00"
+publishDate: '2021-11-23T23:00:00.000+09:00'
---
Slackのようなインターフェースを見ると、さも人と人が対面してしゃべるような言葉のやり取りがそのままできて、コミュニケーションとして成り立つと思ってしまうことがある。非常に限定的な状況においては可能かもしれないが、たいていはそうならない。
diff --git a/src/content/blog/2021-11-26-nothing.mdx b/src/content/blog/2021-11-26-nothing.mdx
index 2117aa3..0bc7cb8 100644
--- a/src/content/blog/2021-11-26-nothing.mdx
+++ b/src/content/blog/2021-11-26-nothing.mdx
@@ -1,10 +1,10 @@
---
slug: 20211126-nothing
title: これはこれで逆に広げられない話は書けないみたいな縛りになっている
-publishDate: "2021-11-26T22:45:00.000+09:00"
+publishDate: '2021-11-26T22:45:00.000+09:00'
---
-import { Tweet } from "astro-embed";
+import { Tweet } from 'astro-embed';
diff --git a/src/content/blog/2021-12-04-sentence.mdx b/src/content/blog/2021-12-04-sentence.mdx
index 3afa543..472116e 100644
--- a/src/content/blog/2021-12-04-sentence.mdx
+++ b/src/content/blog/2021-12-04-sentence.mdx
@@ -1,7 +1,7 @@
---
slug: 20211204-sentence
title: 文の途中でも流れを読み誤られないように作文することを心がけている
-publishDate: "2021-12-05T00:05:00.000+09:00"
+publishDate: '2021-12-05T00:05:00.000+09:00'
---
日本語の文では、文末に到達するまで話の方向性が読み切れないことがある。文を読むときに、途中まで読んだところで「あー、はいはい」となっていても、最後まで読み進めると「あれ、そういう話？」という感じになり、流れを読み誤っていたことに後で気づく。人がしゃべるのを聞いているときにはより顕著になる。しゃべる速度は読む速度よりも遅いので、どうしても焦ったくなってしまうものだ。
diff --git a/src/content/blog/2021-12-06-ume.mdx b/src/content/blog/2021-12-06-ume.mdx
index a6d9e3d..c904778 100644
--- a/src/content/blog/2021-12-06-ume.mdx
+++ b/src/content/blog/2021-12-06-ume.mdx
@@ -1,7 +1,7 @@
---
slug: 20211206-ume
title: 僕と梅、男梅シート
-publishDate: "2021-12-06T04:55:00.000+09:00"
+publishDate: '2021-12-06T04:55:00.000+09:00'
---
昔から梅が好きでよく食べる。実家にいたころは、口寂しくなるたびに冷蔵庫を開け、おやつ感覚で梅干しを食べては、塩分の摂りすぎだからやめろと母親に言われていた。ご飯を食べるときにもよく梅干しをおかずにしていた。
diff --git a/src/content/blog/2022-01-24-retrospective-on-utopia.mdx b/src/content/blog/2022-01-24-retrospective-on-utopia.mdx
index 300540e..4dedad6 100644
--- a/src/content/blog/2022-01-24-retrospective-on-utopia.mdx
+++ b/src/content/blog/2022-01-24-retrospective-on-utopia.mdx
@@ -1,6 +1,6 @@
---
title: Utopiaを実際の案件で使ってみて、うまくいったことといかなかったこと
-publishDate: "2022-01-24T01:35:00.000+09:00"
+publishDate: '2022-01-24T01:35:00.000+09:00'
---
少し前に担当したウェブサイト制作の案件で、[Utopia](https://utopia.fyi/)というツールを使ってみた。Utopiaを使うと、ビューポートの幅に応じて流動的に変化するフォントサイズとスペーシングの値のセットを生成できる。
diff --git a/src/content/blog/2022-03-13-from-tweets-to-evernote.mdx b/src/content/blog/2022-03-13-from-tweets-to-evernote.mdx
index 06e2966..5b72ac3 100644
--- a/src/content/blog/2022-03-13-from-tweets-to-evernote.mdx
+++ b/src/content/blog/2022-03-13-from-tweets-to-evernote.mdx
@@ -1,6 +1,6 @@
---
title: ブックマーク代わりにツイートしていた7000件のURLを精査してEvernoteに移行した
-publishDate: "2022-03-13T01:30:00.000+09:00"
+publishDate: '2022-03-13T01:30:00.000+09:00'
---
なにか気になったウェブページを保存したいというとき、以前ははてなブックマークを使っていた。たぶん2017年くらいまで。
diff --git a/src/content/blog/2022-03-21-mixins-that-take-arguments-in-tailwind-css.mdx b/src/content/blog/2022-03-21-mixins-that-take-arguments-in-tailwind-css.mdx
index 2ac4325..18fc45e 100644
--- a/src/content/blog/2022-03-21-mixins-that-take-arguments-in-tailwind-css.mdx
+++ b/src/content/blog/2022-03-21-mixins-that-take-arguments-in-tailwind-css.mdx
@@ -1,30 +1,29 @@
---
title: Tailwind CSSで引数のあるMixinのような仕組みを作る方法
-publishDate: "2022-03-21T17:35:00.000+09:00"
+publishDate: '2022-03-21T17:35:00.000+09:00'
---
Sassでは、引数の値に応じて宣言をクラスに注入できるMixinの機能がある。たとえば次のようにすれば、フォントサイズがビューポートの幅に応じて流動的に変化するように実装できる。
```scss
@function rem($px) {
- @return ($px / 16 * 1rem);
+ @return ($px / 16 * 1rem);
}
// https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/
@function fluid-size($min-size, $max-size, $min-width: 640, $max-width: 1280) {
- $v: (100 * ($max-size - $min-size)) / ($max-width - $min-width);
- $r: ($min-width * $max-size - $max-width * $min-size) / ($min-width -
- $max-width);
+ $v: (100 * ($max-size - $min-size)) / ($max-width - $min-width);
+ $r: ($min-width * $max-size - $max-width * $min-size) / ($min-width - $max-width);
- @return clamp(#{rem($min-size)}, #{$v * 1vw} + #{rem($r)}, #{rem($max-size)});
+ @return clamp(#{rem($min-size)}, #{$v * 1vw} + #{rem($r)}, #{rem($max-size)});
}
@mixin fluid-text($min-size, $max-size, $min-width, $max-width) {
- font-size: fluid-size($min-size, $max-size, $min-width, $max-width);
+ font-size: fluid-size($min-size, $max-size, $min-width, $max-width);
}
h1 {
- @include fluid-text(32, 64);
+ @include fluid-text(32, 64);
}
```
@@ -35,14 +34,14 @@ Tailwind CSSによってデフォルトで提供されているクラス群は
プラグインはユーザー側でも簡単に作成できるようになっている。`tailwind.config.js`に次のようなコードを書いていくだけだ。
```javascript
-const plugin = require("tailwindcss/plugin");
+const plugin = require('tailwindcss/plugin');
module.exports = {
- plugins: [
- plugin(function ({ addUtilities, addComponents, e, prefix, config }) {
- // Add your custom styles here
- }),
- ],
+ plugins: [
+ plugin(function ({ addUtilities, addComponents, e, prefix, config }) {
+ // Add your custom styles here
+ }),
+ ],
};
```
@@ -58,21 +57,21 @@ module.exports = {
```javascript
const fluidText = plugin(function ({ matchUtilities }) {
- matchUtilities({
- "fluid-text": (value) => {
- const [minSize, maxSize] = value.split(",").map((v) => {
- const matched = /^(\d+)px$/.exec(v);
- if (!matched) {
- throw new Error(`"${v}" is not a valid value`);
- }
- return Number(matched[1]);
- });
-
- return {
- "font-size": getFluidSize(minSize, maxSize),
- };
- },
- });
+ matchUtilities({
+ 'fluid-text': (value) => {
+ const [minSize, maxSize] = value.split(',').map((v) => {
+ const matched = /^(\d+)px$/.exec(v);
+ if (!matched) {
+ throw new Error(`"${v}" is not a valid value`);
+ }
+ return Number(matched[1]);
+ });
+
+ return {
+ 'font-size': getFluidSize(minSize, maxSize),
+ };
+ },
+ });
});
```
@@ -82,46 +81,46 @@ const fluidText = plugin(function ({ matchUtilities }) {
```css
.fluid-text-\[24px\2c 32px\] {
- font-size: clamp(1.5rem, 1.25vw + 1rem, 2rem);
+ font-size: clamp(1.5rem, 1.25vw + 1rem, 2rem);
}
```
`tailwind.config.js`の全体のコードは次のようになる。
```javascript
-const plugin = require("tailwindcss/plugin");
+const plugin = require('tailwindcss/plugin');
const rem = (px) => `${px / 16}rem`;
// https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/
const getFluidSize = (minSize, maxSize, minWidth = 640, maxWidth = 1280) => {
- const v = (100 * (maxSize - minSize)) / (maxWidth - minWidth);
- const r = (minWidth * maxSize - maxWidth * minSize) / (minWidth - maxWidth);
+ const v = (100 * (maxSize - minSize)) / (maxWidth - minWidth);
+ const r = (minWidth * maxSize - maxWidth * minSize) / (minWidth - maxWidth);
- return `clamp(${rem(minSize)}, ${v}vw + ${rem(r)}, ${rem(maxSize)})`;
+ return `clamp(${rem(minSize)}, ${v}vw + ${rem(r)}, ${rem(maxSize)})`;
};
const fluidText = plugin(function ({ matchUtilities }) {
- matchUtilities({
- "fluid-text": (value) => {
- const [minSize, maxSize] = value.split(",").map((v) => {
- const matched = /^(\d+)px$/.exec(v);
- if (!matched) {
- throw new Error(`"${v}" is not a valid value`);
- }
- return Number(matched[1]);
- });
-
- return {
- "font-size": getFluidSize(minSize, maxSize),
- };
- },
- });
+ matchUtilities({
+ 'fluid-text': (value) => {
+ const [minSize, maxSize] = value.split(',').map((v) => {
+ const matched = /^(\d+)px$/.exec(v);
+ if (!matched) {
+ throw new Error(`"${v}" is not a valid value`);
+ }
+ return Number(matched[1]);
+ });
+
+ return {
+ 'font-size': getFluidSize(minSize, maxSize),
+ };
+ },
+ });
});
module.exports = {
- // ...
- plugins: [fluidText],
+ // ...
+ plugins: [fluidText],
};
```
diff --git a/src/content/blog/2022-05-03-yuheiy.com-v6.mdx b/src/content/blog/2022-05-03-yuheiy.com-v6.mdx
index f0db180..13ddc63 100644
--- a/src/content/blog/2022-05-03-yuheiy.com-v6.mdx
+++ b/src/content/blog/2022-05-03-yuheiy.com-v6.mdx
@@ -1,6 +1,6 @@
---
title: yuheiy.com-v6
-publishDate: "2022-05-03T22:50:00.000+09:00"
+publishDate: '2022-05-03T22:50:00.000+09:00'
slug: 2022-05-03-yuheiy.com-v6
---
diff --git a/src/content/blog/2022-06-11-css-components.mdx b/src/content/blog/2022-06-11-css-components.mdx
index 79faa82..020d5f0 100644
--- a/src/content/blog/2022-06-11-css-components.mdx
+++ b/src/content/blog/2022-06-11-css-components.mdx
@@ -1,6 +1,6 @@
---
title: CSS設計における、すべてがコンポーネントであるという誤謬
-publishDate: "2022-06-11T19:55:00.000+09:00"
+publishDate: '2022-06-11T19:55:00.000+09:00'
---
**後日追記:** [WEB+DB PRESS Vol.133でさらに詳しく書いた](/2023-02-06-tailwind-css-in-wdpress)。
diff --git a/src/content/blog/2022-06-15-re-deisui52.mdx b/src/content/blog/2022-06-15-re-deisui52.mdx
index d495548..8dd9ab5 100644
--- a/src/content/blog/2022-06-15-re-deisui52.mdx
+++ b/src/content/blog/2022-06-15-re-deisui52.mdx
@@ -1,9 +1,9 @@
---
title: Re: #deisui_html_radio #52
-publishDate: "2022-06-15T13:24:00.000+09:00"
+publishDate: '2022-06-15T13:24:00.000+09:00'
---
-import { YouTube } from "astro-embed";
+import { YouTube } from 'astro-embed';
これについて超絶走り書きで簡単に返すのでお許しください。
diff --git a/src/content/blog/2022-07-31-container-with-no-padding.mdx b/src/content/blog/2022-07-31-container-with-no-padding.mdx
index 6c854ee..f9107ae 100644
--- a/src/content/blog/2022-07-31-container-with-no-padding.mdx
+++ b/src/content/blog/2022-07-31-container-with-no-padding.mdx
@@ -1,6 +1,6 @@
---
title: 本文エリア内の要素をpaddingのないコンテナとして実装する
-publishDate: "2022-07-31T01:30:00.000+09:00"
+publishDate: '2022-07-31T01:30:00.000+09:00'
---
**後日追記**: このやり方の改良版をブログ「[ブロックエディタ用のCSSを参考にした、よりよいコンテナの実装](/2022-11-27-better-container)」として書いた。
@@ -11,12 +11,12 @@ CSSにおいて、コンテナと呼ばれるパターンがある。たとえ
```css
.container {
- box-sizing: content-box;
- max-width: 60rem;
- margin-right: auto;
- margin-left: auto;
- padding-right: 1.25rem;
- padding-left: 1.25rem;
+ box-sizing: content-box;
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: 1.25rem;
+ padding-left: 1.25rem;
+ max-width: 60rem;
}
```
@@ -26,9 +26,9 @@ CSSにおいて、コンテナと呼ばれるパターンがある。たとえ
```html
```
@@ -36,16 +36,16 @@ CSSにおいて、コンテナと呼ばれるパターンがある。たとえ
```html
```
@@ -57,12 +57,12 @@ CSSにおいて、コンテナと呼ばれるパターンがある。たとえ
```html
```
@@ -72,27 +72,27 @@ CMSから出力されるHTMLを、コンテナの幅ごとに分割すること
```html
```
```css
.prose > * {
- box-sizing: content-box;
- max-width: 60rem;
- margin-right: auto;
- margin-left: auto;
- padding-right: 1.25rem;
- padding-left: 1.25rem;
+ box-sizing: content-box;
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: 1.25rem;
+ padding-left: 1.25rem;
+ max-width: 60rem;
}
.prose > .wider-than-container {
- max-width: 75rem;
+ max-width: 75rem;
}
```
@@ -108,11 +108,11 @@ CMSから出力されるHTMLを、コンテナの幅ごとに分割すること
```css
.container {
- --_container-margin: 1.25rem;
- width: calc(100% - var(--_container-margin) * 2);
- max-width: 60rem;
- margin-right: auto;
- margin-left: auto;
+ --_container-margin: 1.25rem;
+ margin-right: auto;
+ margin-left: auto;
+ width: calc(100% - var(--_container-margin) * 2);
+ max-width: 60rem;
}
```
@@ -122,36 +122,36 @@ CMSから出力されるHTMLを、コンテナの幅ごとに分割すること
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
```
```css
.container {
- --_container-margin: 1.25rem;
- width: calc(100% - var(--_container-margin) * 2);
- max-width: 60rem;
- margin-right: auto;
- margin-left: auto;
+ --_container-margin: 1.25rem;
+ margin-right: auto;
+ margin-left: auto;
+ width: calc(100% - var(--_container-margin) * 2);
+ max-width: 60rem;
}
.prose > :not(.alignfull) {
- --_container-margin: 1.25rem;
- width: calc(100% - var(--_container-margin) * 2);
- max-width: 45rem;
- margin-right: auto;
- margin-left: auto;
+ --_container-margin: 1.25rem;
+ margin-right: auto;
+ margin-left: auto;
+ width: calc(100% - var(--_container-margin) * 2);
+ max-width: 45rem;
}
.prose > .alignwide {
- max-width: 60rem;
+ max-width: 60rem;
}
```
diff --git a/src/content/blog/2022-08-01-declarative-design-system.mdx b/src/content/blog/2022-08-01-declarative-design-system.mdx
index f08dae1..0e20152 100644
--- a/src/content/blog/2022-08-01-declarative-design-system.mdx
+++ b/src/content/blog/2022-08-01-declarative-design-system.mdx
@@ -1,6 +1,6 @@
---
title: 宣言的デザインシステム（翻訳）
-publishDate: "2022-08-01T09:00:00.001+09:00"
+publishDate: '2022-08-01T09:00:00.001+09:00'
---
この記事は、[Jeremy Keith](https://adactio.com/)氏による「[Declarative design systems](https://adactio.com/journal/19131)」の日本語訳です。掲載に当たって著者の許諾を得ています。
@@ -87,11 +87,11 @@ publishDate: "2022-08-01T09:00:00.001+09:00"
```css
button:hover {
- background-color: hsl(
- var(--button-colour-hue),
- var(--button-colour-saturation),
- calc(var(--button-colour-lightness) - 5%)
- );
+ background-color: hsl(
+ var(--button-colour-hue),
+ var(--button-colour-saturation),
+ calc(var(--button-colour-lightness) - 5%)
+ );
}
```
diff --git a/src/content/blog/2022-08-01-declarative-design.mdx b/src/content/blog/2022-08-01-declarative-design.mdx
index eb7d6b1..4201e77 100644
--- a/src/content/blog/2022-08-01-declarative-design.mdx
+++ b/src/content/blog/2022-08-01-declarative-design.mdx
@@ -1,6 +1,6 @@
---
title: 宣言的デザイン（翻訳）
-publishDate: "2022-08-01T09:00:00.000+09:00"
+publishDate: '2022-08-01T09:00:00.000+09:00'
---
この記事は、[Jeremy Keith](https://adactio.com/)氏による「[Declarative design](https://adactio.com/journal/18982)」の日本語訳です。掲載に当たって著者の許諾を得ています。
diff --git a/src/content/blog/2022-08-11-text-with-accompanying-icon.mdx b/src/content/blog/2022-08-11-text-with-accompanying-icon.mdx
index 200df92..a619ba4 100644
--- a/src/content/blog/2022-08-11-text-with-accompanying-icon.mdx
+++ b/src/content/blog/2022-08-11-text-with-accompanying-icon.mdx
@@ -1,69 +1,69 @@
---
title: テキストの行の末尾に付随するアイコンをアイコンだけで改行させないようにするCSS
-publishDate: "2022-08-11T20:25:00.000+09:00"
+publishDate: '2022-08-11T20:25:00.000+09:00'
---
-import { Tweet } from "astro-embed";
+import { Tweet } from 'astro-embed';
-import { Image } from "astro:assets";
+import { Image } from 'astro:assets';
テキストの行の末尾にアイコンを付随させるというレイアウトがある。
-import _1Image from "./assets/2022-08-11-text-with-accompanying-icon/1.png";
+import _1Image from './assets/2022-08-11-text-with-accompanying-icon/1.png';
-
+
これは、インライン整形コンテキストにおいてテキストとアイコンを並べて配置することで実現できる。
```html
テキストの行の末尾に付随するアイコンを…テキストの行の末尾に付随するアイコンを…
```
しかし、その空間の大きさやテキストの分量によっては、末尾のアイコンだけが改行してしまって不恰好に見えることがある。
-import _2Image from "./assets/2022-08-11-text-with-accompanying-icon/2.png";
+import _2Image from './assets/2022-08-11-text-with-accompanying-icon/2.png';
-
+
そうした場合には、テキスト要素のパディングとアイコン要素のネガティブマージンを組み合わせることで対処できる。次のようにすると、アイコンだけが単独で改行されることがなく、常にテキストを伴って改行されるようになる。
```html
- テキストの行の末尾に付随するアイコンを…
```
```css
.card {
- --icon-size: 1em;
- --icon-margin: 0.25em;
+ --icon-size: 1em;
+ --icon-margin: 0.25em;
}
.card__label {
- padding-right: calc(var(--icon-margin) + var(--icon-size));
+ padding-right: calc(var(--icon-margin) + var(--icon-size));
}
.card__icon {
- width: var(--icon-size);
- height: var(--icon-size);
- margin-left: calc(var(--icon-size) * -1);
+ margin-left: calc(var(--icon-size) * -1);
+ width: var(--icon-size);
+ height: var(--icon-size);
}
```
-import _3Video from "./assets/2022-08-11-text-with-accompanying-icon/3.mp4";
+import _3Video from './assets/2022-08-11-text-with-accompanying-icon/3.mp4';
-
+
まずテキスト要素の`padding-right`によって、アイコンとその間の余白を加えた分の空間が末尾に確保されるようになる。そしてその空間を埋めるように、アイコン要素の位置を`margin-left`のネガティブ値で移動させる。それによって、アイコンが必ずテキストの末尾に隣り合って配置されるようになる。
@@ -92,16 +92,16 @@ import _3Video from "./assets/2022-08-11-text-with-accompanying-icon/3.mp4";
---
-
- パディング領域よりアイコンの大きさが小さいと、まれに右下のようにアイコンが飛び出すっぽかった（ラベルの最後の文字に依存しそう）{" "}
- pic.twitter.com/eT03xm8Eq0
-
-
- — ながしまきょう (@hail2u_){" "}
-
- August 11, 2022
-
-
+
+ パディング領域よりアイコンの大きさが小さいと、まれに右下のようにアイコンが飛び出すっぽかった（ラベルの最後の文字に依存しそう）{' '}
+ pic.twitter.com/eT03xm8Eq0
+
+
+ — ながしまきょう (@hail2u_){' '}
+
+ August 11, 2022
+
+
これは直し方がわからなかった……。
diff --git a/src/content/blog/2022-08-12-shrinkable-min-width.mdx b/src/content/blog/2022-08-12-shrinkable-min-width.mdx
index 2c818f9..cefb130 100644
--- a/src/content/blog/2022-08-12-shrinkable-min-width.mdx
+++ b/src/content/blog/2022-08-12-shrinkable-min-width.mdx
@@ -1,31 +1,31 @@
---
title: ボタンの最低幅を設定しつつ、かつコンテナが縮小してもはみ出さないようにするCSS
-publishDate: "2022-08-12T15:40:00.000+09:00"
+publishDate: '2022-08-12T15:40:00.000+09:00'
---
-import { Image } from "astro:assets";
+import { Image } from 'astro:assets';
ボタンのラベルが短い場合でも、ボタン自体には最低限ある程度の幅を持たせたいという場合がある。そんなときには、ボタン自体に`min-width`を指定して最低幅を設定する。
```css
button {
- min-width: 10em;
+ min-width: 10em;
}
```
しかし、そのボタンを配置するコンテナの幅が、ボタン自体の`min-width`の値よりも狭くなってしまうこともある。すると、ボタンがコンテナをはみ出してしまう。
-import _1Image from "./assets/2022-08-12-shrinkable-min-width/1.png";
+import _1Image from './assets/2022-08-12-shrinkable-min-width/1.png';
-
+
ボタンの幅をコンテナに収めるためには`max-width: 100%`が使えそうにも思えるが、`min-width`の方が優先されてしまうので機能しない。そこで、`min-width`の値として`max()`を使うようにする。
```css
button {
- min-width: max(10em, 100%);
+ min-width: max(10em, 100%);
}
```
diff --git a/src/content/blog/2022-08-13-change-the-icon.mdx b/src/content/blog/2022-08-13-change-the-icon.mdx
index 106c1d3..2a08fa3 100644
--- a/src/content/blog/2022-08-13-change-the-icon.mdx
+++ b/src/content/blog/2022-08-13-change-the-icon.mdx
@@ -1,26 +1,26 @@
---
title: プロフィール画像を作り直した
-publishDate: "2022-08-13T22:40:00.000+09:00"
-ogImageURL: /assets/2022-08-13-change-the-icon/after.png
+publishDate: '2022-08-13T22:40:00.000+09:00'
+ogImage: ./assets/2022-08-13-change-the-icon/after.png
---
-import { Image } from "astro:assets";
-import { Tweet } from "astro-embed";
+import { Image } from 'astro:assets';
+import { Tweet } from 'astro-embed';
僕のプロフィール画像、通称ギザギザを新しく作り直した。SVG化したいなと長らく思っていたけど、そのまま機械的に変換するのもつまらないし、せっかくなのでとマイナーチェンジを施した。
-import beforeImage from "./assets/2022-08-13-change-the-icon/before.png";
+import beforeImage from './assets/2022-08-13-change-the-icon/before.png';
-
- これまでのプロフィール画像
+
+ これまでのプロフィール画像
-import afterImage from "./assets/2022-08-13-change-the-icon/after.png";
+import afterImage from './assets/2022-08-13-change-the-icon/after.png';
-
- 新しいプロフィール画像
+
+ 新しいプロフィール画像
線が太くなって、角が丸くなり、パスも少し単純化した。その分、線が強く見えるようになったので、色を薄くした。これによって、縮小されても多少見やすくなった気がする。
diff --git a/src/content/blog/2022-08-14-same-width-buttons.mdx b/src/content/blog/2022-08-14-same-width-buttons.mdx
index 54e4b3a..8714643 100644
--- a/src/content/blog/2022-08-14-same-width-buttons.mdx
+++ b/src/content/blog/2022-08-14-same-width-buttons.mdx
@@ -1,6 +1,6 @@
---
title: 横並びになったボタンを同じ幅で配置するCSS
-publishDate: "2022-08-14T08:20:00.000+09:00"
+publishDate: '2022-08-14T08:20:00.000+09:00'
---
複数のボタンを横並びにしつつ、それぞれのボタンが同じ幅になるように合わせたいということがある。ボタンに同じ`width`を指定すれば合わせられるが、するとラベルの長さに応じた幅にできなくなる。
@@ -9,18 +9,18 @@ publishDate: "2022-08-14T08:20:00.000+09:00"
```html
-
-
-
+
+
+
```
```css
.wrapper {
- display: flex;
- flex-direction: column;
- width: fit-content;
- gap: 1em;
+ display: flex;
+ flex-direction: column;
+ gap: 1em;
+ width: fit-content;
}
```
@@ -43,11 +43,11 @@ publishDate: "2022-08-14T08:20:00.000+09:00"
```css
.wrapper {
- display: grid;
- grid-auto-columns: 1fr;
- grid-auto-flow: column;
- width: fit-content;
- gap: 1rem;
+ display: grid;
+ grid-auto-columns: 1fr;
+ grid-auto-flow: column;
+ gap: 1rem;
+ width: fit-content;
}
```
diff --git a/src/content/blog/2022-08-25-sizing-based-on-multiple-overlapping-elements.mdx b/src/content/blog/2022-08-25-sizing-based-on-multiple-overlapping-elements.mdx
index c450e9c..22e14ff 100644
--- a/src/content/blog/2022-08-25-sizing-based-on-multiple-overlapping-elements.mdx
+++ b/src/content/blog/2022-08-25-sizing-based-on-multiple-overlapping-elements.mdx
@@ -1,14 +1,14 @@
---
title: 複数の要素を重ね合わせつつ、その中で最も大きい要素に合わせて親要素のサイズを設定するCSS
-publishDate: "2022-08-25T23:00:00.000+09:00"
+publishDate: '2022-08-25T23:00:00.000+09:00'
---
複数の要素を重ね合わせるためには、従来、`position: absolute`を使うことが多かった。親要素に`position: relative`を、その子要素に`position: absolute`を設定するというもの。
```html
```
@@ -16,8 +16,8 @@ publishDate: "2022-08-25T23:00:00.000+09:00"
```html
```
@@ -25,19 +25,19 @@ publishDate: "2022-08-25T23:00:00.000+09:00"
```html
```
```css
.wrapper {
- display: grid;
+ display: grid;
}
.wrapper > * {
- grid-column: 1 / -1;
- grid-row: 1 / -1;
+ grid-row: 1 / -1;
+ grid-column: 1 / -1;
}
```
diff --git a/src/content/blog/2022-11-03-how-to-understand-the-markup.mdx b/src/content/blog/2022-11-03-how-to-understand-the-markup.mdx
index 59950f1..0630ece 100644
--- a/src/content/blog/2022-11-03-how-to-understand-the-markup.mdx
+++ b/src/content/blog/2022-11-03-how-to-understand-the-markup.mdx
@@ -1,7 +1,7 @@
---
title: マークアップのわかり方
-publishDate: "2022-11-03T13:50:00.000+09:00"
-ogImageURL: /assets/2022-11-03-how-to-understand-the-markup/ogp.png
+publishDate: '2022-11-03T13:50:00.000+09:00'
+ogImage: ./assets/2022-11-03-how-to-understand-the-markup/ogp.png
twitterCard: summary_large_image
---
@@ -42,7 +42,7 @@ HTMLにはチェッカーがありますから、もし構文エラーをして
```html
- 
+
```
@@ -56,12 +56,12 @@ HTMLにはチェッカーがありますから、もし構文エラーをして
```html
-
- Take Out Menu
- お弁当メニュー
-
+
+ Take Out Menu
+ お弁当メニュー
+
- ...
+ ...
```
@@ -73,12 +73,12 @@ HTMLにはチェッカーがありますから、もし構文エラーをして
```html
- A カレーライス弁当
- 
- ¥ 480 ¥ 500
- A 弁当 A Lunch Box
- カレー1種・ライス・ナン
- 1 Curry, Rice or Nan
+ A カレーライス弁当
+
+ ¥ 480 ¥ 500
+ A 弁当 A Lunch Box
+ カレー1種・ライス・ナン
+ 1 Curry, Rice or Nan
...
...
@@ -95,18 +95,18 @@ HTMLにはチェッカーがありますから、もし構文エラーをして
```html
- -
-
ナンお持帰り
- Nan Take Out
- ¥ 280¥ 300
-
- - ...
+ -
+
ナンお持帰り
+ Nan Take Out
+ ¥ 280¥ 300
+
+ - ...
```
@@ -114,21 +114,21 @@ HTMLにはチェッカーがありますから、もし構文エラーをして
```html
-
-
-
-
-
- -
-
ナンお持帰り
- Nan Take Out
- ¥ 280¥ 300
-
- - ...
-
-
+
+
+
+
+
+ -
+
ナンお持帰り
+ Nan Take Out
+ ¥ 280¥ 300
+
+ - ...
+
+
```
diff --git a/src/content/blog/2022-11-27-better-container.mdx b/src/content/blog/2022-11-27-better-container.mdx
index fd55255..17fa141 100644
--- a/src/content/blog/2022-11-27-better-container.mdx
+++ b/src/content/blog/2022-11-27-better-container.mdx
@@ -1,6 +1,6 @@
---
title: ブロックエディタ用のCSSを参考にした、よりよいコンテナの実装
-publishDate: "2022-11-27T16:05:00.000+09:00"
+publishDate: '2022-11-27T16:05:00.000+09:00'
---
以前、「[本文エリア内の要素をpaddingのないコンテナとして実装する](/2022-07-31-container-with-no-padding)」という記事を書いた。本文エリア内の要素をすべて同じ幅でレイアウトするのではなく、ものによっては少し広めにしたりページの最大幅まで広げたりしたいという場合に、どのように実装すべきかという話。
@@ -12,18 +12,18 @@ publishDate: "2022-11-27T16:05:00.000+09:00"
```css
/* 幅広・全幅ブロック以外にデフォルトコンテンツ幅を指定 */
.entry-content > *:not(.alignwide):not(.alignfull) {
- max-width: var(--wp--style--global--content-size);
+ max-width: var(--wp--style--global--content-size);
}
/* 幅広ブロックに幅広コンテンツ幅を指定 */
.entry-content > *.alignwide {
- max-width: var(--wp--style--global--wide-size);
+ max-width: var(--wp--style--global--wide-size);
}
/* 全幅ブロックを除いて左右にオートマージンを付与する */
.entry-content > *:not(.alignfull) {
- margin-right: auto;
- margin-left: auto;
+ margin-right: auto;
+ margin-left: auto;
}
```
@@ -31,13 +31,13 @@ publishDate: "2022-11-27T16:05:00.000+09:00"
```css
.entry-content {
- padding-left: var(--wp--custom--gutter);
- padding-right: var(--wp--custom--gutter);
+ padding-right: var(--wp--custom--gutter);
+ padding-left: var(--wp--custom--gutter);
}
.entry-content > *.alignfull {
- margin-left: calc(var(--wp--custom--gutter) * -1);
- margin-right: calc(var(--wp--custom--gutter) * -1);
+ margin-right: calc(var(--wp--custom--gutter) * -1);
+ margin-left: calc(var(--wp--custom--gutter) * -1);
}
```
@@ -52,10 +52,10 @@ body > .is-root-container,
.wp-block-group.alignfull,
.wp-block-group.has-background,
.wp-block-cover.alignfull,
-.is-root-container .wp-block[data-align="full"] > .wp-block-group,
-.is-root-container .wp-block[data-align="full"] > .wp-block-cover {
- padding-left: var(--wp--custom--spacing--outer);
- padding-right: var(--wp--custom--spacing--outer);
+.is-root-container .wp-block[data-align='full'] > .wp-block-group,
+.is-root-container .wp-block[data-align='full'] > .wp-block-cover {
+ padding-right: var(--wp--custom--spacing--outer);
+ padding-left: var(--wp--custom--spacing--outer);
}
.wp-site-blocks .alignfull,
@@ -64,15 +64,12 @@ body > .is-root-container,
.wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-template-part > .wp-block-cover,
body > .is-root-container > .wp-block-cover,
-body
- > .is-root-container
- > .wp-block-template-part
- > .wp-block-group.has-background,
+body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
body > .is-root-container > .wp-block-template-part > .wp-block-cover,
-.is-root-container .wp-block[data-align="full"] {
- margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
- margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
- width: unset;
+.is-root-container .wp-block[data-align='full'] {
+ margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
+ margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
+ width: unset;
}
```
@@ -82,47 +79,47 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
```html
-
-
Hello
+
+
Hello
-
-
Lorem ipsum dolor sit amet.
+
+
Lorem ipsum dolor sit amet.
-
-
...
+
+
...
-
-
...
+
+
...
```
```css
:root {
- --spacing-outer: max(1.25rem, 5vw);
- --content-size: 40rem;
- --wide-size: 60rem;
+ --spacing-outer: max(1.25rem, 5vw);
+ --content-size: 40rem;
+ --wide-size: 60rem;
}
.entry-content {
- padding-right: var(--spacing-outer);
- padding-left: var(--spacing-outer);
+ padding-right: var(--spacing-outer);
+ padding-left: var(--spacing-outer);
}
.entry-content > :not(.alignwide, .alignfull) {
- max-width: var(--content-size);
- margin-right: auto;
- margin-left: auto;
+ margin-right: auto;
+ margin-left: auto;
+ max-width: var(--content-size);
}
.entry-content > .alignwide {
- max-width: var(--wide-size);
- margin-right: auto;
- margin-left: auto;
+ margin-right: auto;
+ margin-left: auto;
+ max-width: var(--wide-size);
}
.entry-content > .alignfull {
- margin-right: calc(var(--spacing-outer) * -1);
- margin-left: calc(var(--spacing-outer) * -1);
+ margin-right: calc(var(--spacing-outer) * -1);
+ margin-left: calc(var(--spacing-outer) * -1);
}
```
@@ -130,16 +127,16 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
```html
-
-
Hello
+
+
Hello
-
-
Lorem ipsum dolor sit amet.
+
+
Lorem ipsum dolor sit amet.
-
-
...
+
+
...
-
-
...
+
+
...
```
diff --git a/src/content/blog/2022-12-03-ultraboost.mdx b/src/content/blog/2022-12-03-ultraboost.mdx
index 7536670..1b44702 100644
--- a/src/content/blog/2022-12-03-ultraboost.mdx
+++ b/src/content/blog/2022-12-03-ultraboost.mdx
@@ -1,6 +1,6 @@
---
title: ウルトラブースト日記
-publishDate: "2022-12-03T00:30:00.000+09:00"
+publishDate: '2022-12-03T00:30:00.000+09:00'
---
僕は右利きだが、スマホはいつも左手で使う。だから、スマホに入ったPASMOを改札機にタッチするときは毎回フラストレーションを覚える。
diff --git a/src/content/blog/2023-02-06-tailwind-css-in-wdpress.mdx b/src/content/blog/2023-02-06-tailwind-css-in-wdpress.mdx
index 15cd798..bf8808d 100644
--- a/src/content/blog/2023-02-06-tailwind-css-in-wdpress.mdx
+++ b/src/content/blog/2023-02-06-tailwind-css-in-wdpress.mdx
@@ -1,11 +1,11 @@
---
title: WEB+DB PRESS Vol.133に特集「Tailwind CSS実践入門——まず作ってから、あとで共通化する」を寄稿しました #wdpress
-publishDate: "2023-02-06T13:30:00.000+09:00"
-ogImageURL: /assets/2023-02-06-tailwind-css-in-wdpress/ogp.png
+publishDate: '2023-02-06T13:30:00.000+09:00'
+ogImage: ./assets/2023-02-06-tailwind-css-in-wdpress/ogp.png
twitterCard: summary_large_image
---
-import { Tweet } from "astro-embed";
+import { Tweet } from 'astro-embed';
**後日追記:** 寄稿した特集がgihyo.jpにて全章無料公開されました。
diff --git a/src/content/blog/2023-02-11-loose.mdx b/src/content/blog/2023-02-11-loose.mdx
index 9757567..40d26b1 100644
--- a/src/content/blog/2023-02-11-loose.mdx
+++ b/src/content/blog/2023-02-11-loose.mdx
@@ -1,6 +1,6 @@
---
title: 肩の力を抜いてラフに書く、思いつくままに書く
-publishDate: "2023-02-11T17:20:00.000+09:00"
+publishDate: '2023-02-11T17:20:00.000+09:00'
---
[根を詰めて取り組んでいた原稿](/2023-02-06-tailwind-css-in-wdpress)がやっと手離れして、肩の荷が下りた。僕がこれまで経験して来た中で、最も重い執筆だった。
diff --git a/src/content/blog/2023-06-03-react-changeable-element-type-patterns.mdx b/src/content/blog/2023-06-03-react-changeable-element-type-patterns.mdx
index b6c3575..c3f73a0 100644
--- a/src/content/blog/2023-06-03-react-changeable-element-type-patterns.mdx
+++ b/src/content/blog/2023-06-03-react-changeable-element-type-patterns.mdx
@@ -1,9 +1,9 @@
---
title: ReactコンポーネントでレンダリングされるHTML要素の種類を変更可能にするためのパターン
-publishDate: "2023-06-04T12:35:00.000+09:00"
+publishDate: '2023-06-04T12:35:00.000+09:00'
---
-import { Tweet } from "astro-embed";
+import { Tweet } from 'astro-embed';
ReactのUIコンポーネントライブラリを使っていると、あるコンポーネントによってレンダリングされるHTML要素の種類を変更したくなる場面がある。たとえば、通常は`button`要素としてレンダリングされる`Button`コンポーネントを使うときに、代わりに`a`要素を使ってレンダリングしたいというケース。
@@ -12,19 +12,19 @@ ReactのUIコンポーネントライブラリを使っていると、あるコ
そのような場合、一般的には、Buttonコンポーネントに`as` propを実装して対処することが多い。
```jsx
-function Button({ as: Component = "button", ...props }) {
- return
;
+function Button({ as: Component = 'button', ...props }) {
+ return
;
}
render(
- <>
-
-
- ,
+ <>
+
+
+ ,
);
```
@@ -32,7 +32,7 @@ render(
このコードだけを見ればごくごく簡単に実現できる機能のように思えるが、TypeScriptとして正しく型付けをしようしたり、[`forwardRef`](https://react.dev/reference/react/forwardRef)を適用したりしていると、そこそこ複雑な実装になってしまう。
-具体的な実装方法については、[詳しく解説している記事](https://blog.logrocket.com/build-strongly-typed-polymorphic-components-react-typescript/ "Build strongly typed polymorphic components with React and TypeScript")があったのでそちらに譲る。
+具体的な実装方法については、[詳しく解説している記事](https://blog.logrocket.com/build-strongly-typed-polymorphic-components-react-typescript/ 'Build strongly typed polymorphic components with React and TypeScript')があったのでそちらに譲る。
ただ、単にその仕組みの実装が複雑になるだけであれば、パッケージ化しておいたものを参照して使えばよい。実際にそれに当たるnpmモジュールもいくつかある。
@@ -151,37 +151,34 @@ function Button({ asChild, ...props }) {
TypeScriptを使用しつつ、`forwardRef`を適用する場合は、次のように記述する。
```tsx
-import { type ComponentPropsWithRef, forwardRef } from "react";
-
-const Button = forwardRef<
- unknown,
- ComponentPropsWithRef<"button"> & { asChild?: boolean }
->(({ asChild, ...props }, forwardedRef) => {
- const Comp: any = asChild ? Slot : "button";
- return
;
-});
+import { type ComponentPropsWithRef, forwardRef } from 'react';
+
+const Button = forwardRef
& { asChild?: boolean }>(
+ ({ asChild, ...props }, forwardedRef) => {
+ const Comp: any = asChild ? Slot : 'button';
+ return ;
+ },
+);
-Button.displayName = "Button";
+Button.displayName = 'Button';
```
ただし、こうなってくると定型コードとしてはやや煩雑である。そこで代わりに、Radix UIの内部で使用されている[`@radix-ui/react-primitive`](https://github.com/radix-ui/primitives/tree/main/packages/react/primitive)パッケージを使うことで多少マシになる。
```tsx
-import { Primitive } from "@radix-ui/react-primitive";
-import type * as Radix from "@radix-ui/react-primitive";
-import { forwardRef } from "react";
+import { Primitive } from '@radix-ui/react-primitive';
+import type * as Radix from '@radix-ui/react-primitive';
+import { forwardRef } from 'react';
type ButtonElement = React.ElementRef;
-type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<
- typeof Primitive.button
->;
+type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef;
interface ButtonProps extends PrimitiveButtonProps {}
const Button = forwardRef((props, forwardedRef) => (
-
+
));
-Button.displayName = "Button";
+Button.displayName = 'Button';
```
このパッケージの使用方法はドキュメント化されていないので、[Radix UIのソースコードの中で実際に使用されている様子](https://github.com/radix-ui/primitives/tree/1d57ea78007733facfa2ac7fc0cd919a545b39f6/packages/react)を参考にして実装する必要がある。
@@ -191,41 +188,39 @@ Button.displayName = "Button";
`Slot`コンポーネント（および`Primitive.*`コンポーネント）のpropsは、その子のpropsとマージされる仕組みになっている。たとえば、次のようにコンポーネントを使用するとする。
```tsx
-import { Primitive } from "@radix-ui/react-primitive";
-import type * as Radix from "@radix-ui/react-primitive";
-import { forwardRef } from "react";
+import { Primitive } from '@radix-ui/react-primitive';
+import type * as Radix from '@radix-ui/react-primitive';
+import { forwardRef } from 'react';
type ButtonElement = React.ElementRef;
-type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<
- typeof Primitive.button
->;
+type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef;
interface ButtonProps extends PrimitiveButtonProps {}
const Button = forwardRef((props, forwardedRef) => (
- console.log("original event")}
- />
+ console.log('original event')}
+ />
));
-Button.displayName = "Button";
+Button.displayName = 'Button';
render(
- ,
+ ,
);
```
@@ -233,19 +228,19 @@ render(
```tsx
{
- childProps.onClick(...args);
- slotProps.onClick(...args);
- }}
+ href="/"
+ data-test="child"
+ class="Button child"
+ style={{
+ backgroundColor: 'gray',
+ border: '1px solid',
+ }}
+ onClick={(...args) => {
+ childProps.onClick(...args);
+ slotProps.onClick(...args);
+ }}
>
- Hello
+ Hello
```
@@ -263,38 +258,36 @@ render(
注意すべきは、`Button`コンポーネントのpropsについては、ユーザー側でマージする実装を行わなければならないということ。もし次のように、`Button`コンポーネントのpropsのマージを考慮しない実装になっていると、`Button`コンポーネントにpropsを指定した際に期待に反する挙動をする。
```tsx
-import { Primitive } from "@radix-ui/react-primitive";
-import type * as Radix from "@radix-ui/react-primitive";
-import { forwardRef } from "react";
+import { Primitive } from '@radix-ui/react-primitive';
+import type * as Radix from '@radix-ui/react-primitive';
+import { forwardRef } from 'react';
type ButtonElement = React.ElementRef;
-type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<
- typeof Primitive.button
->;
+type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef;
interface ButtonProps extends PrimitiveButtonProps {}
const Button = forwardRef((props, forwardedRef) => (
- console.log("original event")}
- />
+ console.log('original event')}
+ />
));
-Button.displayName = "Button";
+Button.displayName = 'Button';
render(
- ,
+ ,
);
```
@@ -314,38 +307,36 @@ render(
これでは、期待通り上書きできるものと、期待に反して上書きできないものが、propの種類によってまちまちになってしまう。期待通りのインターフェースを実現するには、`Slot`コンポーネントにpropsが渡される前に、それらの値をマージしておかなければならない。たとえば、次のような実装になる。
```tsx
-import { Primitive } from "@radix-ui/react-primitive";
-import type * as Radix from "@radix-ui/react-primitive";
-import { forwardRef } from "react";
-import { mergeRefs } from "react-merge-refs";
+import { Primitive } from '@radix-ui/react-primitive';
+import type * as Radix from '@radix-ui/react-primitive';
+import { forwardRef } from 'react';
+import { mergeRefs } from 'react-merge-refs';
type ButtonElement = React.ElementRef;
-type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<
- typeof Primitive.button
->;
+type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef;
interface ButtonProps extends PrimitiveButtonProps {}
const Button = forwardRef((props, forwardedRef) => {
- const internalRef = useRef(null);
- return (
- {
- props.onClick?.(event);
- console.log("original event");
- }}
- />
- );
+ const internalRef = useRef(null);
+ return (
+ {
+ props.onClick?.(event);
+ console.log('original event');
+ }}
+ />
+ );
});
-Button.displayName = "Button";
+Button.displayName = 'Button';
```
### コンポーネントの中の子を規定する場合
@@ -353,62 +344,55 @@ Button.displayName = "Button";
場合によっては、`Button`コンポーネントの実装として、ルートのコンポーネントの内側に別のコンポーネントを入れ子にしたいこともあるだろう。`as` propを使えば、次のように実装することができる。
```jsx
-function Button({ as: Component = "button", children, ...props }) {
- return (
-
- {children}
-
- );
+function Button({ as: Component = 'button', children, ...props }) {
+ return (
+
+ {children}
+
+ );
}
```
しかし、`asChild` propで同等のことを実現しようとすると、かなり複雑な実装が必要になる。たとえば次のようになる。
```tsx
-import { Primitive } from "@radix-ui/react-primitive";
-import type * as Radix from "@radix-ui/react-primitive";
+import { Primitive } from '@radix-ui/react-primitive';
+import type * as Radix from '@radix-ui/react-primitive';
import {
- Children,
- ElementRef,
- ReactElement,
- ReactNode,
- cloneElement,
- forwardRef,
- isValidElement,
-} from "react";
+ Children,
+ ElementRef,
+ ReactElement,
+ ReactNode,
+ cloneElement,
+ forwardRef,
+ isValidElement,
+} from 'react';
type ButtonElement = ElementRef;
-type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<
- typeof Primitive.button
->;
+type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef;
interface ButtonProps extends PrimitiveButtonProps {}
export const Button = forwardRef(
- ({ children, ...props }, forwardedRef) => {
- const wrapChildren = (children: ReactNode) => (
- {children}
- );
-
- return (
-
- {props.asChild
- ? isValidElement(children)
- ? cloneElement(Children.only(children as ReactElement), {
- ref: forwardedRef,
- children: wrapChildren(children.props.children),
- })
- : children
- : wrapChildren(children)}
-
- );
- },
+ ({ children, ...props }, forwardedRef) => {
+ const wrapChildren = (children: ReactNode) => {children};
+
+ return (
+
+ {props.asChild
+ ? isValidElement(children)
+ ? cloneElement(Children.only(children as ReactElement), {
+ ref: forwardedRef,
+ children: wrapChildren(children.props.children),
+ })
+ : children
+ : wrapChildren(children)}
+
+ );
+ },
);
```
@@ -416,14 +400,14 @@ export const Button = forwardRef(
`Button`コンポーネントのテストケース
```tsx
-import { describe, expect, it } from "vitest";
-import renderer from "react-test-renderer";
-import { Button } from "./button";
-
-describe("empty", () => {
- it("default", async () => {
- const tree = renderer.create().toJSON();
- expect(tree).toMatchInlineSnapshot(`
+import { describe, expect, it } from 'vitest';
+import renderer from 'react-test-renderer';
+import { Button } from './button';
+
+describe('empty', () => {
+ it('default', async () => {
+ const tree = renderer.create().toJSON();
+ expect(tree).toMatchInlineSnapshot(`
`);
- });
- it("asChild", async () => {
- const tree = renderer.create().toJSON();
- expect(tree).toMatchInlineSnapshot("null");
- });
+ });
+ it('asChild', async () => {
+ const tree = renderer.create().toJSON();
+ expect(tree).toMatchInlineSnapshot('null');
+ });
});
-describe("string", () => {
- it("default", async () => {
- const tree = renderer.create().toJSON();
- expect(tree).toMatchInlineSnapshot(`
+describe('string', () => {
+ it('default', async () => {
+ const tree = renderer.create().toJSON();
+ expect(tree).toMatchInlineSnapshot(`
`);
- });
- it("asChild", async () => {
- const tree = renderer.create().toJSON();
- expect(tree).toMatchInlineSnapshot("null");
- });
+ });
+ it('asChild', async () => {
+ const tree = renderer.create().toJSON();
+ expect(tree).toMatchInlineSnapshot('null');
+ });
});
-describe("single element", () => {
- it("default", async () => {
- const tree = renderer
- .create(
- ,
- )
- .toJSON();
- expect(tree).toMatchInlineSnapshot(`
+describe('single element', () => {
+ it('default', async () => {
+ const tree = renderer
+ .create(
+ ,
+ )
+ .toJSON();
+ expect(tree).toMatchInlineSnapshot(`
`);
- });
- it("asChild", async () => {
- const tree = renderer
- .create(
- ,
- )
- .toJSON();
- expect(tree).toMatchInlineSnapshot(`
+ });
+ it('asChild', async () => {
+ const tree = renderer
+ .create(
+ ,
+ )
+ .toJSON();
+ expect(tree).toMatchInlineSnapshot(`
{
`);
- });
+ });
});
-describe("mixed", () => {
- it("default", async () => {
- const tree = renderer
- .create(
- ,
- )
- .toJSON();
- expect(tree).toMatchInlineSnapshot(`
+describe('mixed', () => {
+ it('default', async () => {
+ const tree = renderer
+ .create(
+ ,
+ )
+ .toJSON();
+ expect(tree).toMatchInlineSnapshot(`
`);
- });
- it("asChild", async () => {
- expect(() =>
- renderer.create(
- ,
- ),
- ).toThrowError();
- });
+ });
+ it('asChild', async () => {
+ expect(() =>
+ renderer.create(
+ ,
+ ),
+ ).toThrowError();
+ });
});
```
@@ -600,43 +584,37 @@ describe("mixed", () => {
先ほどの`asChild` propにおいては、コンポーネントの内側に別の要素が入れ子になっている場合の表現の難しさが問題になった。しかし、このAriakitの`render` propのアイデアを借用すれば、比較的直感的なインターフェースとシンプルな実装を実現することもできる。
```tsx
-import {
- ComponentProps,
- ReactElement,
- ReactNode,
- cloneElement,
- forwardRef,
-} from "react";
+import { ComponentProps, ReactElement, ReactNode, cloneElement, forwardRef } from 'react';
-type ButtonProps = { render?: ReactElement } & ComponentProps<"button">;
+type ButtonProps = { render?: ReactElement } & ComponentProps<'button'>;
const Button = forwardRef(
- ({ render, children, ...props }, forwardedRef) => {
- const createElement = (props: any, children: ReactNode) => {
- return render ? (
- cloneElement(render, props, children)
- ) : (
-
- );
- };
-
- return createElement(
- {
- ...props,
- ref: forwardedRef,
- className: ["Button", props.className].filter(Boolean).join(" "),
- },
- {render?.props.children || children},
- );
- },
+ ({ render, children, ...props }, forwardedRef) => {
+ const createElement = (props: any, children: ReactNode) => {
+ return render ? (
+ cloneElement(render, props, children)
+ ) : (
+
+ );
+ };
+
+ return createElement(
+ {
+ ...props,
+ ref: forwardedRef,
+ className: ['Button', props.className].filter(Boolean).join(' '),
+ },
+ {render?.props.children || children},
+ );
+ },
);
render(
- <>
-
- }>Hello
-
+ 
- 
- 
-