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

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

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 画…

Blenderで作ったglbファイルを並列でThree.jsに読み込む 📦

GLTFLoaderでモデルを読み込む際、配列でURLを渡せると非常に楽だなと思い、つくってみました。 JavaScript async function loadGltfFromUrls(urls) { if (!urls.length) { return []; } const loader = new GLTFLoader(); const list = []; urls.forEach((u…

Blenderで作ったglbファイルをThree.jsで読み込んだあと、複製してたくさん表示する 📦

こちらの記事で、Blenderで作ったglbファイルを読み込んで表示しました。blog.kimizuka.org読み込んだモデルを一度しか使わないのであれば、これで問題ないのですが、同じモデルを何個も配置するときはどうしたものかと考えた結果、cloneをつかって複製する…

CSSで範囲からはみ出したテキストを省略して...にする(一行の場合・複数行の場合) ✏️

CSS

一行の場合 複数行の場合 一行の場合 text-overflowを使います。developer.mozilla.org overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-overflowをellipsisに設定しつつ、overflow:hiddenではみ出した箇所を非表示に、white-spaceを…

TypeScript + styled-componentsにpropsを渡す 🎁

公式のAPIリファレンスにTypeScriptとカスタムpropsを組み合わせて使う方法が記載されてました。styled-components.comシンプルなものであれば、 const Text = styled.p<{ color: string }>` color: ${ ({ color }) => color }; `; という感じで定義できます…

Next.jsでサーバサイドレンダリングしないコンポーネントをつくる 💻

Next.js + PixiJSでサイトをつくっていたとき、PixiJSをつかったコンポーネントを読み込もうとすると、 Server Error ReferenceError: self is not defined This error happened while generating the page. Any console logs will be displayed in the term…

Netlifyにホスティングしたサイトのレスポンスヘッダーを調整する 📡

公式のドキュメントにすべてが書いてありました。 設定方法は2パターンあるようです。docs.netlify.com ❶ _headersファイルを作る /* X-Frame-Options: DENY X-XSS-Protection: 1; mode=blockこんな感じで、レスポンスヘッダーに設定したい内容を_headerとい…

BlenderでつくったglbファイルをA-Frameに読み込んでマテリアルの色を編集する 📦

こちらの記事のA-Frameバージョンです。blog.kimizuka.org ❶ Blenderでモデルをつくる ❷ glbファイルを書き出す ❸ glbを読み込むHTMLをつくる ❹ マテリアルを取得して色を変えてみる ❺ カスタムデータ属性で色を変更可能にする ❶ Blenderでモデルをつくる と…