React

Next.jsで.envに定義した定数をクライアントサイドのコードで参照する場合は、NEXT_PUBLIC_ というプレフィックスを付ける必要があります。

NEXT_PUBLIC_HOGE=HOGE

またもう一つの落とし穴と ...

HTML/CSS, JavaScript

Google map を開いて、地点を指定した後に画面左側の「共有」アイコンから「地図を埋め込む」を選択すると、iframe のコードが表示されるので、それをWebサイトに張り付けるだけで簡単にGoogle mapをあなたのサイトに表 ...

HTML/CSS

以下のようなHTMLがあるとします。

文字列はそのままで、グレーの部分だけを透過させたい場合は、グレーの部分に透過を適用します。

background-color に rgba を指定し、四つ目の値を1以下にし ...

HTML/CSS

HTML要素を並べる手段として、float と flex があります。

現在では flex を使うのが一般的ですが、float を使わないとできないことがあります。

それがテキストの回りこみです。

< ...

システム開発, プログラミング入門

Web Vitals には INP という新しい指標が試験的に存在しています。

INPは Interaction to Next Paint の略です。

これは、ユーザーの操作に対して視覚的な反映がどれくらい遅 ...

HTML/CSS

これまでにこんな経験はないでしょうか。

Webサイトのアクセスしてリンクをクリックしようとしたら、直前で広告の画像が表示されてしまい、リンクの位置が下にずれて、間違って広告をクリックしてしまった。

このようなこ ...

React

next/imageを使って画像を表示するときに、親要素のサイズを満たすように画像を表示したい場合です。

例えば、親要素が300*300で、画像が300*350だったとします。

縦横の比率は同じままで、親要素を ...

人生, 映画

これから引っ越しを考えている人に、ぜひ見てもらいたくないホラー映画があります。

残穢－住んではいけない部屋－

タイトルからして内容が明確なのですが、このホラー映画がなぜ怖いかを考えてみました。

ホラ ...

TypeScript

既存の union 型から特定のメンバーを削除した型作成する方法です。

extends を使用します。

以下の型があります。

type T1 = 'a' | 'b' | & ...

TypeScript

AxiosError は axios で catch ブロックに入った時の error オブジェクトの型を表します。

注意なのは、AxiosError.response はオプショナルであることです。

つまり、 ...