みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Null合体演算子を使って値がnull、undefinedの場合の時の値を指定する ❓

Null合体演算子たるものを教えてもらいました。 Null 合体演算子 (??) は論理演算子の一種です。この演算子は左辺が null または undefined の場合に右の値を返し、それ以外の場合に左の値を返します。 https://developer.mozilla.org/ja/docs/Web/JavaScrip…

position: stickyを使う際に気をつけたいこと 👆

CSS

最近、ウェブサイトを作る際、IEを非対応にして良いというケースが増えてきたため、ついに position: sticky を使い始めました。 position: sitickyとは 要素は文書の通常のフローに従って配置され、直近のスクロールする祖先および包含ブロック (直近のブロ…

imgタグでも background-size: contain とか cover みたいにトリミングしたい 🖼

CSS

developer.mozilla.orgIEに対応しなくてよいのであれば、object-fitを使えば実現できます。object-fitで指定できる値は4つあって、デフォルトはfillです。 contain 置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大…

Actions Builder製のアプリで、セッションストレージを使ってセッションが切れるまで変数を保持する 🔈

最近、久しぶりにGoogleアシスタント向けアプリをつくろうと思ったのですが、制作手段として、Actions BuilderというIDEが誕生していることに気づきました。昔は、Actions on Google + Dialogflow という感じで2つのサービス(内部的にCloud Functionsも使っ…

useRefの使い所 📝

ja.reactjs.orguseRefといえば、DOMにアクセスする手段としておなじみ ですが、なんとなく使い所がわかったようなわからないような気がしたのでメモを残しておきます。ja.reactjs.org1秒間に1回、useStateを使ってtextを更新するコードを書いた際、下記の書…

useCallbackの使い所 📝

blog.kimizuka.org昨日は、React.callbackを使って子コンポーネントのレンダリングをスキップすることに成功しました。今回はその続きです。React.memoを使っても、子コンポーネントのレンダリングをスキップできないケースがあります。それが、propsとして…

React.memoの使い所 📝

ja.reactjs.org 先日、Next.js + PixiJS でアプリーケションを作っている際に、React.memoの使い所が言葉では無く、心で理解できた気がするのでメモを残しておきます。 React.memoとは もしあるコンポーネントが同じ props を与えられたときに同じ結果をレン…

React Hooksで子コンポーネントにメソッドを定義して親コンポーネントから叩く 🔨

コンポーネントにメソッドを定義できるuseImperativeHandle、refを別のコンポーネントに受け渡すforwardRefを使って実現します。ja.reactjs.org ja.reactjs.org ChildComponent(子) import { forwardRef, useImperativeHandle } from 'react'; export defa…

Setオブジェクトを使ってJavaScriptで配列の中に重複した要素があるかを確認する 🔍

結論 経緯 結論 function isUniq(arr) { return new Set(arr).size === arr.length; } isUniq([0, 1, 2]); // => true isUniq([0, 1, 1]); // => false という感じです。 経緯 配列の中に重複した要素があるかを確認したい場合、lodashを導入しているプロジ…

Next.jsとstyled-componentsを併用すると、warning " > styled-components@5.2.3" has unmet peer dependency "react-is@>= 16.8.0".というワーニングがでるのを解決する 🚨

※ next(10.1.2)とstyled-components(5.2.3)にて確認Next.jsとstyled-componentsを併用すると、yarn や npm install の際に、 warning " > styled-components@5.2.3" has unmet peer dependency "react-is@>= 16.8.0". というワーニングが出るので、若干…

styled-componentで作ったアニメーションのnameを取得する 🎥

結論 const blink = keyframes` 0% { opacity: 0; } 50% { opacity: 1 } 100% { opacity: 0; } `; と定義したアニメーション(blink)であれば、 blink.getName(); でアニメーション名を取得できます。 ことの発端 onAnimationEndを使って、アニメーションの…

画面幅に合わせてフォントサイズを可変させつつ、最小サイズと最大サイズを設定する 🍣

CSS

CSS font-size: 100vw / 1200 * 36; @media (max-width: 750px) { font-size: 750px / 1200 * 36; } @media (min-width: 1601px) { font-size: 1600px / 1200 * 36; } こんな感じで設定できます。 上記の設定だと、 画面幅1200pxの際にフォントサイズ36px 画…