Name: カスタムプロップスの継承をオフにするのは思ったより便利だった (Turning off inheritance on custom props is more useful than I'd thought)
Uploaded: 2024-09-04T14:49:23.000Z
Duration: 3 min 51 s

フロントエンドの皆さん、こんにちは。

程度の副詞

I was doing something else, preparing for another video, and I came across something that gave me a really good reason to register a custom property to prevent inheritance.

別のことをしていて、別のビデオの準備をしていたんだけど、継承を防ぐためにカスタムプロパティを登録する正当な理由があることに出くわしたんだ。

転換語

I want to show you what that was because I think it's one of the things with registered custom properties that goes under the radar. So you'll see here I have a container type set on a whole bunch of different things.

登録されたカスタムプロパティがどのようなものであったかをお見せしたいと思います。ここでは、コンテナ・タイプをさまざまなものに設定しています。

And these things here that we see on the side are living inside of containers.

そして、私たちが横で見ているこれらのものは、容器の中で生活している。

And what they're doing is they're using this grid columns that's right here.

そして、彼らがやっていることは、ここにあるグリッドの列を使っている。

And then you can see I have when containers are different widths.

そして、コンテナの幅が違うのがわかるだろう。

I can switch when there's gonna be columns.

コラムがあるときは交代できる。

But I also can say if we have two columns or three columns. And so here, my main layout with the image and this other thing should switch to two columns.

でも、2カラムにするか3カラムにするかも言える。つまり、画像とその他のレイアウトは2カラムに切り替える必要があります。

And then this other area that's lower down here should switch over to three columns if there's enough room for it, but it's broken.

そして、この下にある別のエリアは、十分なスペースがあれば3列に切り替えられるはずだが、壊れている。

Because when it gets bigger, all of a sudden it goes to two columns and this area here also goes to two columns.

大きくなると突然2列になり、このエリアも2列になるからだ。

But this should either be zero or three columns, or I guess one or three columns. So to help you understand what's actually happening there, because it took me a second to understand what was actually going on, is we're gonna change the outline that's on these elements when they get to the two column world here.

しかし、これは0列か3列、あるいは1列か3列のどちらかになるはずです。実際に何が起こっているのか理解するのに少し時間がかかったので、ここで実際に起こっていることを理解してもらうために、これらの要素が2列の世界になったときに、これらの要素に表示されているアウトラインを変更します。

So it should either be three columns or then it can switch over to the dotted one when we get to two.

つまり、3列にするか、2列になったときに点線の列に切り替えるか、どちらかだ。

And notice how the outside one went to two columns, but the inside one didn't change.

外側の列は2列になったが、内側の列は変わっていない。

では、なぜ2列になっているのか？

And it's because the parent is getting this call count of two, and custom properties are always inherited.

親プロパティは常に継承される。

So that call count of two is being passed down into this other container, which I don't want to happen. But luckily now we can register custom properties, and this is in all browsers now.

そのため、コール・カウント2が別のコンテナに引き渡されることになる。しかし幸運なことに、カスタムプロパティを登録できるようになった。

Browser support's just below 90%, but it is in all of the browsers.

ブラウザーのサポートは90％以下だが、すべてのブラウザーに対応している。

つまり、アプリのプロパティと言える。

And the app property, we wanna do three different things here.

アプリのプロパティは、ここで3つの異なることをしたい。

We can have a syntax, which we'll talk about in a second.

構文については後で説明する。

We have an initial value, which is just whatever the default value is.

So in this case, it would be one for one column.

つまり、この場合は1列に1つということになる。

And by default, that is true, but we can switch that over to false. The syntax here is sort of the trickiest part, and I would just look up a list for what you might wanna put for your syntax.

デフォルトではtrueだが、falseに切り替えることもできる。ここの構文が一番厄介なところなので、構文に何を入れたいかリストを調べておこう。

この場合、シンプルでいいものだ。

You have color, you have length, you have percentage.

色も、長さも、パーセンテージもある。

There's a whole bunch of stuff you can actually put in there.

実際にそこに入れられるものは山ほどある。

I'm also gonna link to an article by Stephanie Eccles that breaks down a lot of really good use cases for using registered custom properties.

登録されたカスタムプロパティを使用するための本当に良い使用例をたくさん紹介しているStephanie Ecclesの記事もリンクしておこう。

Strongly recommend that you give it a read if you wanna know more about registering custom properties and some of the use cases you might have for them. Now, one thing I haven't done here is said what property this is actually on.

カスタムプロパティの登録とその使用例についてもっと知りたい方は、ぜひ一読されることをお勧めします。さて、ここでまだ説明していないことがあります。

So to name it, I just come here, and that was my call count, I think is what I called it.

だから名前をつけるために、ここに来たんだ。

So now, if I did that correctly, and I'm using the right name there, so I'm registering my property call count, and I'm saying it's a number with an initial value of one and inherits a false.

つまり、countというプロパティを登録し、初期値が1でfalseを継承するということだ。

そして今、もしそれがうまくいったなら、うまくいったのだ。

This one gets the two columns, but that two columns doesn't get passed down over to this guy right here.

この選手には2列が与えられるが、その2列はこの選手には渡されない。

And then when we shrink that back down, it goes like that.

そして、それを縮めていくとこうなる。

And what we're actually gonna do, let's just change my widths here to be a bit smaller.

そして、実際にやることは、ここの幅を少し小さく変更することだ。

Actually, that's not gonna work no matter what we do.

実際、何をやってもうまくいかないよ。

We eventually get up to the three right there just to show that it can kick in in the right spot once those get wide enough as well. But now we have the two of them working independently from one another, not causing any issues with each other, which is just really good.

最終的にはあそこで3つまで上げて、幅が十分に広くなれば、適切な場所でキックできることを示したい。でも今は、2人が互いに独立して機能し、互いに問題を起こすこともない。

And this actually, I've thought of a whole bunch of good use cases that I can use this for now, so I'm pretty excited about it. And with that, I would like to thank my enablers of awesome, Andrew, Philip, Simon, and Tim, as well as all of my patrons and all my new channel members.

そして、実は今、これを使える良いユースケースをたくさん思いついたので、かなり興奮している。アンドリュー、フィリップ、サイモン、ティム、そしてパトロンのみんなと新しいチャンネル・メンバーに感謝したい。

Thank you all so very much for signing up.

登録してくれて本当にありがとう。

 And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.

そしてもちろん、次回まで、あなたのインターネットの一角をもう少しだけ素晴らしいものにすることをお忘れなく。