classnamesほど高機能じゃなくてもいいんだよなぁ～の場合の書き方メモ

classnames

こちらのclassnamesはREADMEにある通り、結構いろんな書き方ができるので便利です。

便利だな～と思ってつかっているのですが、ちょこっとクラス名を切り替えるくらいしかしない自分にとっては「stringの配列で指定できればそれでいいのだよな…」
と思っていました。

最低限

• 配列でクラス名をいくつか指定したら半スぺ区切りの文字列を返してくれる
• 要素が配列になっていたら均してくれる(2～3くらい　それ以上は型ではじく)
• クラス名がミスって被っていたとしても重複を除いてくれる
• 空文字列を返すと除外してくれる

こんくらいあればよくて、ちょっとサポートしてくれるだけで充分なんだよなぁと思っていたのでメモ代わりにコードを残します。

オブジェクトでプロパティにクラス名を入れてvalueにbooleanをいれて…
がやりたい人はこの記事の対象ではありません。

例はSvelte。.svelteにするとハイライトがきかないので分けて書きます。

<script lang="ts">部分

	const current = true;
	let isAnimated = true;
	$: animatedClass = isAnimated ? 'animatedClass' : '';
	type Allow = (string | (string | string[])[])[];
	const classNames = (stringArray: Allow) => [...new Set(stringArray.flat(2).filter(c => c))].join(' ');

<p
	class={classNames([
		'defaultClass',
		'',
		['test', true ? ['test1', true ? 'test2' : 'test3'] : 'test4'],
		'test',
		`${animatedClass}`,
		current ? 'is-current' : ''
	])}
>
	class="defaultClass test test1 test2 animatedClass is-current"になる
    'test2'の部分をさらに配列にすると型エラーになる
</p>
<button on:click={() => (isAnimated = !isAnimated)}>toggleAnimatedClass</button>

Tips

そういえばSvelteはclass名部分などで

<p class={`bg-${colorName}`}>test</p>

みたいにしなくても

<p class="bg-{colorName}">test</p>

でいけるの知ってました？僕はこの前知りました。
ちょっと短く書けますね。