CSS Custom Propeties（いわゆるCSS変数）は便利です。 この変数定義に Sass の変数を利用する方法。ちょっとハマったのですが、 #{ } というシンタックスを挟む必要がありました。 /* variables.scss（変数定義ファイル） */ $some-color: #64ff00; /* glob…

Next.js で作成した API が別ドメインからアクセスされる時、CORS の問題が発生すると思います。 対応策について調べてみたところ、設定ファイルである next.config.js の header 項目が利用できる、との情報を見つけました。 nextjs-ja-translation-docs.ve…

複数行のときだけ line-height を効かせたい場合があります。 逆に言うと、1行なら特に指定したくない。 この場合、CSS の first-line 疑似要素が使えます。 span { font-size: 14px; // 文字サイズ line-heigth: 20px; // 複数行の場合、行間を開けたい } s…

React の Custom Hooks に対して、ユニットテストを書いていました。 testing framework には vitest を利用。 さらに、@testing-library/react を追加。renderHooks という関数が含まれており、Custom Hooks のテストを実行することができます。 testing-li…

HTML の video タグを使って、動画を自動再生（autoplay）するよう設定していました。しかし、自動再生されない…。 MDN を見てみる。 developer.mozilla.org すると、こんな記述が。 一部のブラウザー (Chrome 70.0 など) では、 muted 属性がないと autopla…

ちょっとしたアニメーションの実装などのために JavaScript から HTML の class を付け外しすることはあるかと思います。 そのときに利用するのが classList です。 const target = document.querySelector('.target') target.classList.add('foo') target.c…

サンプル このように、CSS だけで四つ角に枠線を付ける方法。 コード 以下のように書けばOK。 <div class="box">ここにテキスト</div> .box { position: relative; } .box:before { content: ""; background-image: linear-gradient(to right, #17172d, #17172d 40%, transparent 40…

概要 ネイティブアプリを開発する際に一部のページをウェブで表示する、という要件はあると思います。（いわゆるウェブビュー） その際に、ウェブビューを React.js と Next.js で作成する方法です。 ※ちなみに筆者はネイティブアプリ開発の経験はありません…

VSCode には 最近使用した項目を開く（File: Open Recent） というコマンドがあります。 選択した項目を、VSCode で開くことができます。 筆者は Github のレポジトリごとに VSCode のウィンドウを開くようにしています。（例: UI 開発のコードベースと API …

> console.log(new Array(120).fill('foo')) // 120個の要素 'foo' を持つ配列を表示 [ 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'fo…