結論 childrenに型をつけなければならない場合は、 import { ReactNode } from 'react'; function Parent({ children }: { children: ReactNode }) { return ( <div>{ children }</div> ); という感じで、ReactNodeを使うことにしました。 ことの発端 Reactでコンポーネ…

コンソールからは削除できず、firebase-toolsを使い、 firebase hosting:disableを実行すれば削除できます。

<nuxt-link to="#hash">hashchange</nuxt-link> とか、 <nuxt-link to="{ hash: '#hash' }">hashchange</nuxt-link> というリンクをクリックしてhashを変化させた時、 window.addEventListener('hashchange', () => { console.log('hashchange!'); }); と、設定したハッシュチェンジイベントが発火せずにとても困っていました。※ nuxt 2.12.2の…

developer.mozilla.org text-decoration-style: wavy; を使えば、 波線を引くことができます。 実際は、text-decoration-lineも指定する必要があるので、下線として波線を引く場合は、 span { text-decoration: underline wavy; } という感じになります。

mounted で window.twttr.widgets.load を実行すればOKです。 nuxt.config.js export default { mode: 'spa', head: { script: [{ src: 'https://platform.twitter.com/widgets.js' }] } } ウィジェットを埋め込んだコンポーネント <script lang="ts"> import { Component, Vue…

具体例を書くと、jQuery + Slickを使っているサイトをNuxt.jsに移植している際に発生しました。 import $ from 'jquery'; import 'slick-carousel'; import 'slick-carousel/slick/slick.css'; という感じで、slickをインポートしているComponentをテストし…

Nuxt.jsにて、 import '~/assets/css/common.scss'; という感じで、scssをインポートしているComponentをテストしようとすると、 SyntaxError: Unexpected identifier と、SCSSがパースできずJestがコケて困ってました。解決策を探してみたところ、 vue-jest…

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

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

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

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

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

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

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

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