JS環境（非TSの意）でしかハマらない話ですが、Formikを扱うInputコンポーネントを使っていてonBlurが発火しないというバグに見舞われていました。結論としては、InputコンポーネントでonBlur等を渡す{...props}のあとに{...formik.getFieldProps('hoge')}があったためでした。

formik.getFieldPropsは以下の型の値を返します。

参考：<a href="https://github.com/jaredpalmer/formik/blob/ec89b3a7d1665fb4b086ffaee8cbd11b4f2ab986/packages/formik/src/types.tsx#L312" target="_blank">https://github.com/jaredpalmer/formik/blob/ec89b3a7d1665fb4b086ffaee8cbd11b4f2ab986/packages/formik/src/types.tsx#L312</a>

<pre><code class="code">/** Field input value, name, and event handlers */
export interface FieldInputProps<Value> {
 /** Value of the field */
 value: Value;
 /** Name of the field */
 name: string;
 /** Multiple select? */
 multiple?: boolean;
 /** Is the field checked? */
 checked?: boolean;
 /** Change event handler */
 onChange: FormikHandlers['handleChange'];
 /** Blur event handler */
 onBlur: FormikHandlers['handleBlur'];
}
</code></pre>

という風に、型が指定されているのでTS環境ならすぐonBlurが上書きされていることがわかります。VSCodeの静的解析でもこのように出ます。

'onBlur' が複数回指定されているため、ここでの使用は上書きされます。ts(2783) 
App.tsx(42, 50): このスプレッドは、常にこのプロパティを上書きします。

{...props}と{...formik.getFieldProps('hoge')}の位置入れ替えの影響範囲が大きいので限定的に位置を入れ替えたコンポーネントを作って使って解決しました。。最初からここは考慮しておいたほうがいいですね。

いまやっているReact案件の環境がJSなためずっとハマっていたので、メモ記事でした。

【TSならすぐわかるけど】Formikをつかってinputパーツを使うとき、{...formik.getFieldProps('hoge')}にonBlurが上書きされていたのでメモ

Formik、最近副業で使い始めました。
最近、同ページ内のステップの分かれているフォームでステップを進めるごとにバリデーションしてほしいという要望が出たので対応しました。ステップが先のものをバリデーションしてしまうとステップを進む時にそこでバリデーションエラーが出ていれば詰まってしまいます。解決方法の結論としては、validationSchemaにstepごとで分けたバリデーションを渡すというものです。

<pre><code class="code">// Formik（useFormik） + Yup
const [activeStep, setActiveStep] = useState(0);

const validateSchemaOfSteps = [
 Yup.object({
 userName: Yup.string().required("名は必須です"),
 email: Yup.string().required("メールアドレスは必須です").email("正しいメールアドレスを入力してください"),
 }),
 null, // バリデーションをしないステップ
 Yup.object({
 accepted: Yup.boolean().required("同意は必須です"),
 })
 ]

 const formik = useFormik({
 initialValues: {
 userName: "",
 email: "",
 accepted: false,
 },
 validationSchema: validateSchemaOfSteps[activeStep],
 …
 });

 // 現在のページをバリデーション検査しつつ、成功したら引数のステップに進む
 const changeStep = async (step) => {
 const validated = await formik.validateForm();
 if (Object.keys(validated).length === 0) setActiveStep(step);
 };
</code></pre>

英語で調べるといくつか出てくるのですが、日本語でなかったのでメモ程度に。

【React】Formikでステップの分かれているフォームでステップを進むごとにバリデーションする

弊社サイトはVuetify2系を使っています。私は8月からジョインしたばっかりなのですが、私が関わることになった時点で$spacer変数が8pxに上書きされていました（defalutは4px） 
これにより、例えばma-2のスペーシングヘルパークラスを用いた場合はmarginが全方位に16pxかかるというような仕様になっていました。
ですが、8px単位で余白を設定していくことが苦しい部分があったので、8pxを2pxに変更したいという要望が上がり、私が変更を施したのでどうやったかのメモ書きになります。

<h2>影響範囲をしらべる</h2>

当初は$spacer変数を8pxから2pxに変更して、スペーシングヘルパークラスの数字を4倍すれば済むという想定でした。しかし、やってみたところ、$spacer変数に影響の受けるコンポーネントがいくつか存在することがわかりました。
cssでそのコンポーネントのスタイルを上書きするという選択肢もありましたが、スマートでないと思いました。
そこで、Vuetify本体のCSS変数がどのように扱われているのか、コードを見に行くことにしました。
<a href="https://github.com/vuetifyjs/vuetify/blob/3f8f577b51a7bfe948a075903348b886246e637e/packages/vuetify/src/styles/settings/_variables.scss" target="_blank">https://github.com/vuetifyjs/vuetify/blob/3f8f577b51a7bfe948a075903348b886246e637e/packages/vuetify/src/styles/settings/_variables.scss</a>
ここを見ると、$spacer変数を使用している別の変数があることに気が付きます。
<code class="code"><pre>$grid-gutter: $spacer * 6 !default;
$form-grid-gutter: $spacer * 2 !default;</pre></code>
こちらを使用しているコンポーネントがあることから、$spacer変数の影響が出てしまっていたようです。
解決策としては、$spacer変数を変更しようとしているSCSS内でこの２つも上書きしてしまうことです。私は下記のようにやりました。
<code class="code"><pre>$spacer: 2px;
$old-spacer: 8px;
$grid-gutter: $old-spacer * 6 !default;
$form-grid-gutter: $old-spacer * 2 !default;</pre></code>
これで、コンポーネントに悪影響が出ることはありません。
これをした上で、スペーシングヘルパークラスの数字を4倍（数字が16を超過した場合は通常のclassで設定しなおす）という作業を行いました。私はスマートでないエンジニアなので一個一個検索してポチポチやりました。
特に、大それた修正でもありませんが、こんなメモ書きが誰かの役に立ったらいいなと思います。

【Vuetify】既存サイトの$spacer変数を変更する際にやったこと

多分ご存知の方にとっては当たり前の挙動だと思うのですが、mounted後にrefなどで取得したDOM要素にclassList.addなどで付与したclassは、:classの動的なclass付与によって消えてしまうようです。
<code class="code"><pre>Viteのサンプルコードで試す
&lt;script setup&gt;
import { ref, onMounted } from 'vue'

const sample = ref(null)
const count = ref(0)

onMounted(() => {
 sample.value.classList.add('mounted')
})

&lt;/script&gt;

&lt;template&gt;
 &lt;div
 class="sample"
 :class="{ sample_override: count >= 1 }"
 ref="sample"
 &gt;
 sample
 &lt;/div&gt;

 &lt;div class="card"&gt;
 &lt;button type="button" @click="count++"&gt;count is {{ count }}&lt;/button&gt;
 &lt;p&gt;
 Edit
 &lt;code&gt;components/HelloWorld.vue&lt;/code&gt; to test HMR
 &lt;/p&gt;
 &lt;/div&gt;

&lt;/template&gt; 

</pre></code>
普段は困ることはないと思うのですが、Vue用以外のプラグインによって足されたclassが消えてしまうのは問題になったりします。
Overlay Scrollbarsというプラグインを使っており、それの足すos-○○というclassが消えてしまうので困っていましたが、もし簡易的に解決したいのであればos-○○を予め静的なclassとして持たせるのが良さそうだと思いました。そのクラスがプラグインによってつけ外しされるものならなかなか解決方法は無いと思いますが…
結論としては、UI系はVue用のものを使うというのが良さそうです。

Vue.jsでmounted後にVue用でないプラグインに足されたclassは、:classの動的なクラス付与によって消される

自作Googleカレンダーに追加ボタン（押すとGoogleカレンダーのイベント登録画面に遷移する）をWordPressサイトに実装していたのですが、いつのタイミングから？遷移後の画面で追加したい時刻の5分後になってしまう症状がありました。
結論としては、パラメータに渡す時刻の『秒』を記述していなかったためでした。
<code class="code"><pre>5分追加されてしまう例：
https://calendar.google.com/calendar/u/0/r/eventedit?dates=20220108T1000/20220109T1600

5分ズレない例：
https://calendar.google.com/calendar/u/0/r/eventedit?dates=20220108T100000/20220109T160000
</pre></code>
以前は上の例でも問題なく動いていたのですが、仕様が変更されたのだと思います。この解決方法は私が発見したわけではないのでここに載せるのは恐縮ですが、調べてもなかなか見つからない問題だったので同じ問題を踏む人のために残しておこうと思います。

自作Googleカレンダーに登録ボタンが5分ずれていたので修正した

いまsass-rails環境に納品するものを作っているのですが、ローカル環境は普通のnode-sassでやっています（nodeなのは先方の環境 = sass-railsがDart Sass対応してないため）。image-urlを先方の環境で使っているそうなので、ローカルでは背景画像が見れない…となったのですが、こういう時はプチ解決ですがimage-urlというfunctionを作ればいけますね。
<code class="code"><pre>@function image-url($path) {
 @return url("/assets/img/#{$path}");
}
</pre></code>
上記コード、納品時は消す必要があります。ほんとにくだらない問題解決ですが、こういった工夫をするのは楽しいですね。

【プチ解決】sass-rails環境に組み込むnode-sass環境のSCSSをローカルと納品後で差異を吸収する（image-url）

タイトルどおりです。The Metropolitan Museum of Art Collection APIとChakra UIを試してみました。
GitHub <a href="https://github.com/hiroko-ino/metropolitan-api-with-chakra-ui" target="_blank">https://github.com/hiroko-ino/metropolitan-api-with-chakra-ui</a>
GitHub Pages <a href="https://hiroko-ino.github.io/metropolitan-api-with-chakra-ui/" target="_blank">https://hiroko-ino.github.io/metropolitan-api-with-chakra-ui/</a>

<h2>超所感</h2>
Chakra UI: だいぶ書き味がいい気がする。Material UI（現MUI）くらいしかこういうUIライブラリを使ったこと無いのだけれど、propsに与えられる情報量がとてもユーザー目線なのではないかと感じる。今回個別にスタイリングしたところはなし。また、グラデーションなどの対応もよい。今回はざっと使っただけだけれど、今後も使っていきたいと思った。
The Metropolitan Museum of Art Collection API: オープンでこれだけの情報量、神すぎる。<a href="https://metmuseum.github.io/" target="_blank">https://metmuseum.github.io/</a> 正直、型定義はしたけど骨が折れた。てか型定義したわりに全然使ってない。anyで雑にやって、適当に表示でもよかった気がする。

しばらくReactで何か作れてなかったので、こんな簡単なものでもちょっとうれしい。このリポジトリ、もうちょっと手を入れて頑張っていきたい気もする。。（どのリポジトリ作ってもそれ言ってるな。。）

【React】The Metropolitan Museum of Art Collection APIとChakra UIを試す

昨日これでだいぶ詰まってました。iOSではSafari、Chrome関係なくdisplay: gridのかかっている要素（グリッドアイテムの親要素）に明示的なheightがないとうまく動作しないようです。

CodePenは下記です。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="QWqebGy" data-user="hiroko_ino" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
 See the Pen <a href="https://codepen.io/hiroko_ino/pen/QWqebGy">
 grid item doesn't have explicit height not working at iOS</a> by hiroko ino (<a href="https://codepen.io/hiroko_ino">@hiroko_ino</a>)
 on <a href="https://codepen.io">CodePen</a>.

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

スタイリングとしては、display: gridの要素の更に親要素にpadding-top: xx%をdisplay: grid要素はabsoluteでwidth: 100%, height: 100%でお手軽レスポンシブ、、となるはずでした。そう、iOSさえなければね。最初はiOSだからどうせどこかにz-indexでもおもむろにかければ機嫌よくなるだろう、と思っていたのですがどうしてもだめでした。

内容物自体は出てくるみたいです。ですがグリッドアイテムがきちんと範囲に伸びていません（背景色が伸びてない）。最初はこれとoverflow: hiddenを併用していたのでoverflow: hiddenのバグかと思いましたが、hiddenをかけていなくても挙動としては動作してくれてないようです。

結局、gridのレスポンシブはheigt: xx vwを使うことになりました。vwだとwindowsだけスクロールバー分計算の対応しないといけないからめんどいんだよなあ、、もしこの記事ご覧の方でこのバグのハックの仕方ご存知の方いらしたら<a href="https://twitter.com/uribou_studying" target="_blank">Twitter</a>までください、、

iOSでは明示的なheightのないdisplay: gridのグリッドアイテムは死ぬ（height: 100%で失敗した編）

今回videoタグの動画（mp4）を使ったwebサイトだったのですが、AndroidのChromeでだけ白背景の動画の白が薄いグレーになっている（色味が変わっている）という現象が起きました。
あまり記事がなくてこまっていたのですが、調べていくとStack Overflowに下記の記事がありました。
<a href="https://stackoverflow.com/questions/28026976/html5-player-wrong-video-colors/41897389#41897389" target=
"_blank">https://stackoverflow.com/questions/28026976/html5-player-wrong-video-colors/41897389#41897389</a>
こちらを参考に、
<code class="code"><pre>-webkit-filter: contrast(110%);
</pre></code>
をvideoタグにかけてみたところグレーが白になりました。私の場合はデバイスとブラウザを絞ってCSSをかけたわけではありませんでしたが、AndroidのChromeに絞ってCSSをかけたほうがいいのかもしれません。（多分、色味少し変わっちゃうので。）

【技術プチメモ】AndroidのChromeのみvideoタグで出している動画の色がおかしかったので対応

発信大事。わりと適当なものでも自分はGitHubで全公開している。
そうおっしゃっていた方がいらしたので、私も過去社内でだけ作っていたサイトの焼き直しをGitHubに公開することにしました。下記です。
GitHub： 
<a href="https://github.com/hiroko-ino/fortune-data-with-recharts" target="_blank">https://github.com/hiroko-ino/fortune-data-with-recharts</a> 
サイトも公開中（外部APIがhttpのためhttpsには対応していません）： 
<a href="http://fortune-data-with-recharts.herokuapp.com/" target="_blank">http://fortune-data-with-recharts.herokuapp.com/</a>


これは、社内で作ったもののfirebaseの機能を抜いたものです。社内で作ったものはベーシック認証かけているので見せられませんが、キャプチャだけはりますね。


<img src="//images.ctfassets.net/b8081lnqni6i/6nPIMikGSRUJjArNTCk31Y/6a57637b2cbbb3511724876fab161b2e/____________________________2021-12-05_18.58.53.png" width="100%">



<img src="//images.ctfassets.net/b8081lnqni6i/6vsLabPx9WevIm354QZCYM/dca04a812112c71829d103219c01cea7/____________________________2021-12-05_18.59.12.png" width="100%">



<img src="//images.ctfassets.net/b8081lnqni6i/4kMT4L6GYOaN2A7VySxotl/e1d29c253fe921976f1f186373813286/____________________________2021-12-05_18.59.32.png" width="100%">



<img src="//images.ctfassets.net/b8081lnqni6i/50lcIiBKYuGDVxWRvQdtgz/cf18e230304aae2b03593e57e5c4bc09/____________________________2021-12-05_18.59.54.png" width="100%">


React, TypeScript, Redux Toolkit, firebaseという構成で作ったものです。占いAPIから結果を取得し、それをRechartsでグラフ化、それに対して、実際にユーザーさんが「今日の体感運勢3くらいだったわー、こんなことがあったわー」というのを記録していけるものです。このキャプチャじゃわからないと思いますが体感運勢のほうもグラフに線で現れます。
Reactの実務経験がない2月頃に作ったものなので、コードはひどいです。でも、これだけの機能を一人で作れたのはよかったと思います。

焼き直しのほうはRedux Toolkitはがして上位コンポーネントでHooksを扱うようにしました。recoilとかも使ってみたかったけど、そんなの使うほどのアプリじゃないしね。スタイリングはTailwind.cssです。

特になにもこの記事で語ることとかないのですが、一人でこれくらい自走できるので、Reactの案件ありますよーって方は<a href="https://twitter.com/uribou_studying" target="_blank">Twitter</a>に連絡くれると嬉しい！

【だらだら書く・React】社内でだけ見せていた占いアプリをGitHubにあげた

令和の時代でもjQueryはDOM操作ならまだまだ生き続けています。
私は普段jQueryでDOM操作のスクリプトを書くことが多いのですが、今回先方の要望でvanilla JS + CSS設計はFLOCSSという要件でコーディングしました。
vanilla JSはプライベートでは組んだことある + CSS設計はいつもはBEMで、FLOCSSは概念も初めて知ったという状況で、キャッチアップしながらやってみた所感をここに記してみたいと思います。
<h2>vanilla JSの所感</h2>
正直、一旦使ったことがあったので、querySelectorAllをfor（若しくはforEach）で回さないといけないとか、そのあたりは心得ていたのであまりつまずきませんでした。ただ、data属性を取得するのに、キャメルケースとdata属性のハイフンの対応となっていることに最初は気が付かず、右往左往していました。
<code class="code"><pre>
// 適当な例
&lt;div data-target data-switch-toggle&gt;&lt;/div&gt;
↓
this.data = document.querySelector('[data-target]').dataset.dataSwitchToggle
</pre></code>
結局のところ、jQueryで操作が簡略化されていようがなかろうが、人間の力でロジックを組んでいくので、ロジック力があればvanillaへの対応はなんなく出来るというのが私の感想です。
あ、そういえばObject.assignがIE対応してなかったのでlodashのmergeで済ませたのはありました。ポリフィル公開されてるけどね。
<h2>FLOCSSの所感</h2>
FLOCSS、良い点も悪い点もあると思いました。
■良い点
BEMはあくまで単位の分割の手法だが、FLOCSSは分割の概念に役割がある。
普段、BEMでやっていても会社の意向でコンポーネントやレイアウトでの分割（.c-buttonや.l-headerのようなやり方）もやっていたのですが、FLOCSSの公式からインプットしたあと書いていくといつもより役割目線での分割・設計が出来たように思えました。
■悪い点
公式にのっとると、オブジェクトごとにSCSSファイルを切っていく必要があるのですが、慣れるまで時間がかかりました。
htmlだけを先に上から下まで書いておいて、CSSはあとから一気に作っていく方式じゃないと作業時間がかなり増えていく気がします。
あと、/pages/about.scssのようなファイルを切るべきかどうか結構任されている気がします。
久々のキャッチアップ案件だったのでテンション上がりました。この案件まだ実は終わってないので、終わったらまた追記するかもしれません。

いつもはjQuery + BEMの自分がvanilla JS + FLOCSSでやってみた所感

SPAなら関数の発火・その内容のコントロールはいろんなアプローチがあると思いますが、ベーシックなweb制作ではdata属性を用いることが多いと思います。
今やっている案件で、画面数（ブレークポイントで分かれているデザイン）が4種類あり、その時々でjsの振る舞いが違うという状況にあたっており、data属性からどうコントロールするかということになったのですが引数を文字列で渡せるwindow.matchMediaが最適解だということに行き着きました。 
MDNの参考ページ <a href="https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia" target="_blank">https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia</a>
コード例
<code class="code"><pre>// helper
export default class Helper {
 static isMediaMatch(media) {
 return window.matchMedia(media).matches;
 }
}

■ 一つのブレークポイント内のみで発火するコントロール

// html
&lt;div data-media="(min-width: 768px)"&gt;...&lt;/div&gt;

// js
class Hoge {
 constructor(trigger) {
 this.trigger = trigger;
 this.media = this.trigger.dataset.media;
 }
}

fuga() {
 // this.mediaの存在確認をしたあとに下記
 if (Helper.isMediaMatch(this.media)) {
 returnするなど
 }
}

■ 複数のブレークポイント内で設定の出し分けする場合

// html
&lt;div data-media-config='{ "mediaAll": [{ "media": "(max-width: 991px)", "config": { "hoge": ... } }]}'&gt;...&lt;/div&gt;

// js
class Hoge {
 constructor(trigger) {
 this.trigger = trigger;
 this.mediaData = this.trigger.dataset.mediaConfig;
 this.config = null;
 if (this.mediaData) {
 for (let i = 0; i &lt; this.mediaData.mediaAll.length; i++) {
 if (Helper.isMediaMatch(this.mediaData.mediaAll[i].media)) {
 this.configでなにかやる
 }
 }

 }
}
</pre></code>
結構使えるテクニックだと思うので、公開してみました！

data属性からjsの振る舞いをレスポンシブでコントロールするならmatchMediaが最適解

すでにimport済のファイルの大文字小文字のリネームをすると、File name '/Users/xxx/products/xxx/page-content/indexPage.tsx' differs from already included file name '/Users/xxx/products/xxx/page-content/IndexPage.tsx' only in casing.と言われてしまうことが多々あり、たまに困っていた。オートインポートをyesしてもだめ。 
VSCode最新（現在）、直近でTypeScript対応でcreate-next-appで作ったプロジェクトという環境。 
ダサい解決方法だとは思いつつ、ファイル名の大文字小文字以外を一旦いじって元に戻すと直るのでやっていたのですが、VSCodeでReload Windowすれば直ることに気がついたので最近はそうするようにしている。というだけの記事。 
Reload Window参考 <a href="https://qiita.com/Naturalclar/items/ae9e84fa8cf16a14c7e9">https://qiita.com/Naturalclar/items/ae9e84fa8cf16a14c7e9</a>

【技術プチメモ】TypeScriptプロジェクトでimportしているファイルを大文字小文字のリネームしてもきちんと認識してもらえない時（VSCode）

word-break:break-allのMDNの説明で、"CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。"とあるのですが、iOSで禁則処理が解除されているとQAで指摘がありました。lang属性にjaは適切に設定されていることを確認。日本語だからいけると思ったのだけれど、、 <a href="https://developer.mozilla.org/ja/docs/Web/CSS/word-break" target="_blank">https://developer.mozilla.org/ja/docs/Web/CSS/word-break</a>
ためしにword-break: break-wordに変更したところ禁則処理は適用されたとのこと。QA担当した人間ではないので、本当にAndroidはbreak-allでも大丈夫だったのかなど確かめていないことも多いですが同じ状況になっている人の助けになるかもと思いここにメモ。

【技術プチメモ:CSS】iOSではword-break:break-allとline-break:strictは併用できない？

.slick-listをvisibleにして左右を見せたいスライダーの時、左側のループの塊が切れることがあります。正直完全に仕様を把握しているわけではないのですが、variableWidthとcenterModeを併用すると左側がちょっと増えたりします。

<p class="codepen" data-height="308" data-default-tab="html,result" data-slug-hash="oNwzXGy" data-user="hiroko_ino" style="height: 308px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
 See the Pen <a href="https://codepen.io/hiroko_ino/pen/oNwzXGy">
 </a> by hiroko ino (<a href="https://codepen.io/hiroko_ino">@hiroko_ino</a>)
 on <a href="https://codepen.io">CodePen</a>.

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

variableWidthを使う注意点として、内包している要素が固定幅でないとこのようにはならないです。完全な解決ではないのですが、たまに使う手法なので共有しました。

overflow: visibleのslickスライダーの左右の個数をかさ増ししたいならたまにvariableWidthを使う

react-slickの矢印に独自のコンポーネントを使いたい場合の例はこちらにありますが、独自のスタイリングの設定でクラス渡すのに最初どうしたらいいのかわかりませんでした。 <a href="https://react-slick.neostack.com/docs/example/custom-arrows/" target="_blank">https://react-slick.neostack.com/docs/example/custom-arrows/</a>
上記の例にある、propsで受け取っているclassNameはあくまでslick-arrow slick-nextのクラスを付与するもので、
<code class="code"><pre>nextArrow: &lt;SampleNextArrow className={styles.nextArrow} /&gt;</pre></code>
としてもクラスは渡せません。この場合任意のpropsを追加する必要があります。
<code class="code"><pre>nextArrow: &lt;SampleNextArrow customClassName={styles.nextArrow} /&gt;

...

function SampleNextArrow(props) {
 const { className, style, onClick, customClassName } = props;
 return (
 &lt;div
 className={classnames(className, customClassName)}
 style={{ ...style, display: "block", background: "red" }}
 onClick={onClick}
 /&gt;
 );
}

</pre></code>

のような形だとうまくいくと思います。

react-slickのCustom Arrowに設定した独自コンポーネントに独自のクラス渡したい場合

Udemyの某テスト講座を見ていたらdata属性を剥がすのにejectしようという流れになって嫌だなとなったので、自分のアプリでejectせずに剥がす方法を調べていたのですが、babel-plugin-jsx-remove-data-test-idをcustomize-craおよびreact-app-rewiredを用いてアプリに設定するのがいいようです。

やることの手順を説明していきます。まずモジュールをインストールします。
<code class="code"><pre>yarn add customize-cra react-app-rewired babel-plugin-jsx-remove-data-test-id --dev</pre></code>
package.jsonを同じレベルの場所にconfig-overrides.jsを作成します。
<code class="code"><pre>const { override,
 addBabelPlugins
} = require("customize-cra");

module.exports = override(
 ...addBabelPlugins(
 [
 "babel-plugin-jsx-remove-data-test-id",
 {
 attributes: "data-testid" // 任意の属性。複数の場合は配列で指定
 }
 ]
 )
);
</pre></code>
package.jsonのコマンドを変更します。私はbuildのみ変えたかったのでそうしたのですが、rewiredを使用したい場合のコマンドを任意で下記のように変更してください。
<code class="code"><pre>"scripts": {
 ...
 "build": "react-app-rewired build", // 私はここだけ変更しました。test、startも変えたい場合はreact-scripts部分をreact-app-rewiredに変更してください。
}</pre></code>
これでbuildしてみるとtestidが剥がれているのを確認出来ると思います。（私はターミナルでおすすめされたserveを用いる方法でbuild内容を確認しています。） 
customize-craおよびreact-app-rewiredを用いればejectせずにwebpackやbabelの設定を変更出来るようなので、試したいことがある方は色々やってみるのがいいのかもしれません。この記事が参考になったら幸いです、、！

Create React Appでejectせずにdata-testid（or 任意の属性）を剥がす（babel-plugin-jsx-remove-data-test-id使用）

ブログの改善をしている中、Lighthouseを気にしだしました。SEOやBest Practiceはもともと満点だったのですが、Accessibilityで&lt;html&gt element does not have a [lang] attributeが出ていたのでそちらを対応。
htmlタグをいじるには、公式を参考に_document.tsxを作成・修正する必要がありました。公式の内容はこちら => <a href="https://nextjs.org/docs/advanced-features/custom-document">https://nextjs.org/docs/advanced-features/custom-document</a> こちらに載っているソースをコピーしてきて、Htmlコンポーネントに属性を設定するのみです。簡単！
Lighthouseの診断では、速度で83点くらいをウロウロしていて、PWAの診断で改善点が提案されている状況。next-pwa入れてみてそれもまた記事にしてみるかな。

【Next.js・create-next-app】<html> element does not have a [lang] attributeがLighthouseで出たので対応

このブログは4月にGatsuby.jsで作っていたのですが、ページネーション作りたい、カテゴリーアーカイブ作りたいと思いつつなかなか改修できておらず、この際だから最近熱いNext.jsにいっそ置き換えて、スケーラブルにしていこうと思いリプレイスが昨日完了いたしました。

GitHubでコードを大公開していますので、見たい方はそちらを見てください。 <a href="https://github.com/hiroko-ino/myblog" target="_blank">https://github.com/hiroko-ino/myblog</a>

コードの解説をページネーション・カテゴリーアーカイブ中心にしていきます。その他ページに関してはGitHubを見ていただければだいたい分かると思っております。

お断り：Next.jsを学び始めてから1ヶ月も経っていない&リファクタリングもあまり出来ていないので、コードの完成度はまだまだだと思っております。もし、もっと良くするにはこうしたほうがよいよというのがありましたら<a href="https://twitter.com/uribou_studying" target="_blank">Twitter</a>までよろしくお願いします…！

<h2>ページネーションの実装</h2>
何はともあれ、コードはこちらです。
<code class="code"><pre>// components/Pagination.tsx

import Link from 'next/link'

import styled from './Pagination.module.scss'

function Pagination({posts, currentNum}) {
 const getLists = (posts, currentNum) => {
 const list = []
 for (let i = 0; i &lt; Math.ceil(posts.length / 10); i++) {
 list.push(&lt;li key={i + 1}
 className={[styled.item, currentNum === i + 1 && styled.is_active].join(' ')}&gt;
 {currentNum === i + 1 ?
 i + 1 :
 &lt;Link href={`/blog/page/${i + 1}`}&gt;&lt;a className={styled.link}&gt;{i + 1}&lt;/a&gt;&lt;Link>}&lt;/li&gt;
 );
 }
 return list;
 }

 const lists = getLists(posts, currentNum);

 return (
 &lt;div className={styled.pagination}&gt;
 &lt;ul className={styled.list}&gt;
 {lists}
 &lt;/ul&gt;
 &lt;/div&gt;
 )
}

export default Pagination</code></pre>

<code class="code"><pre>// pages/blog/page/[num].tsx

import Link from 'next/link'
import Head from 'next/head'

import dayjs from 'dayjs'

import { client } from '../../../libs/contentful'

import Layout from '../../../components/Layout'
import Post from '../../../components/post'
import Pagination from '../../../components/Pagination'

import styled from './[num].module.scss'

const Paged = ({ posts, num, allPosts }) => {
 return (
 &lt;&gt;
 &lt;Head&gt;
 &lt;title&gt;type:any&lt;/title&gt;
 &lt;meta name="description" content="フロントエンドのことを中心に、自分の書きたいことを書くブログ">&lt;/meta&gt;
 &lt;link rel="icon" href="/favicon.png"/&gt;
 &lt;/Head&gt;
 &lt;Layout&gt;
 {posts.length > 0
 ? posts.map((p) => (
 &lt;Post
 key={p.fields.slug}
 title={p.fields.title}
 category={p.fields.category.fields.name}
 slug={p.fields.slug}
 createdAt={p.sys.createdAt}
 />
 ))
 : null}
 &lt;Pagination posts={allPosts} currentNum={Number(num)} /&gt;
 &lt;/Layout&gt;
 &lt;/&gt;
 )
}

export const getStaticPaths = async () => {
 const posts = await client.getEntries({content_type: "blogPost"})

 const paths = [];

 for (let i = 0; i &lt;= Math.floor(posts.items.length / 10); i++) {
 paths.push({
 params: {
 num: (i + 1).toString(),
 }
 });
 }

 return { paths, fallback: false }
}

export const getStaticProps = async ({ params }) => {
 const posts = await client.getEntries({content_type: 'blogPost', order: '-sys.createdAt', limit: 10, skip: (params.num - 1) * 10 })
 const allPosts = await client.getEntries({content_type: 'blogPost'})

 return {
 props: {
 posts: posts.items,
 num: params.num,
 allPosts: allPosts.items
 },
 }
}

export default Paged;</code></pre>

*1/23追記: すみません、、！ページネーションのpushする個数の判定の計算が誤っておりました! &lt; Math.ceil(posts.length / 10)に変更しました！！（これも誤ってたらすみません…）

ポイントとしては、ページネーションにすべての記事を渡して、ページネーションの数を計算しているところ、[num].tsx内でgetStaticPaths内でもまたすべての記事を取得し必要なページ分だけpathに渡しています。 [num].tsxでは、getStaticProps内でgetEntries({content_type: 'blogPost', order: '-sys.createdAt', limit: 10, skip: (params.num - 1) * 10 })というリクエストを送っており、limitで1ページ内に表示する記事の総数、skipで記事の取得開始位置を設定できます。ページネーションコンポーネントに現在のページを渡して、カレント表示も完了です。

<h2>カテゴリーアーカイブ</h2>
かなり手こずったページです。力作です。
<code class="code"><pre>// pages/category/[slug].tsx

import Link from 'next/link'
import Head from 'next/head'

import dayjs from 'dayjs'

import { client } from '../../libs/contentful'

import Layout from '../../components/Layout'
import Post from '../../components/post'

import styled from './[slug].module.scss'

const Blog = ({ posts, category }) => {
 return (
 &lt;>
 &lt;Head>
 &lt;title>{category} | type:any&lt;/title&gt;
 &lt;link rel="icon" href="/favicon.png"/&gt;
 &lt;/Head&gt;
 &lt;Layout&gt;
 {posts.length > 0
 ? posts.map((p) => (
 &lt;Post
 key={p.fields.slug}
 title={p.fields.title}
 category={p.fields.category.fields.name}
 slug={p.fields.slug}
 createdAt={p.sys.createdAt}
 /&gt;
 ))
 : null}
 &lt;/Layout&gt;
 &lt;/&gt;
 )
}

export const getStaticPaths = async () => {
 const posts = await client.getEntries({content_type: "category"})

 const paths = posts.items.map((post) => ({
 params: {
 slug: post.fields.slug.toString(),
 },
 }))
 return { paths, fallback: false }
}

export const getStaticProps = async ({ params }) => {
 const category = await client.getEntries({content_type: "category", 'fields.slug': params.slug})
 const post = await client.getEntries({content_type: "blogPost", "fields.category.sys.id": category.items[0].sys.id, order: '-sys.createdAt'})

 return {
 props: {
 posts: post.items,
 category: params.slug
 },
 }
}

export default Blog;</pre></code>

ポイントとしては、カテゴリーに関しては私はcontent_typeのcategoryというのをblogPostタイプから参照しているのですが、参照しているcategoryのfieldsをfields.category.fields.slugのようには検索することが出来ません。なので、StaticPathから渡ってきたslugでcategoryのcontent_typeから特定のカテゴリーを検索、そのカテゴリのsys.idを使用して絞られたpostをリクエストしています。何度もAPIを叩いている感じが、少し受け付けないですが、これで実装は出来ました。

<h2>感想とTODO</h2>
Next.jsの記事検索しようと思ってもNuxtがヒットするのにイライラしながらやりましたが、なんとかいい感じにすることが出来ました。 
Gatsubyより直感的に動的ルーティングを理解できたので、私的にはNext.jsはとてもお気に入りです。 TODOとしては ・サイドナビとメニューでuseEffectでAPIを叩いていて、なんだかSSGにした意味をあんまり感じていない ・全体的にAPIを叩く回数を減らしたい ・カテゴリーアーカイブにもページネーションを追加したい。が、動的ルーティングをディレクトリに適用する方法がわからないTT ・その他ソースで汚いところ修正 といった感じでしょうか。
あと、関係ないですが、GitHubでmasterへのプルリク作った時、デプロイ失敗するよーとNetliftyに言われたのにマージしたけど、デプロイがコケただけで本番のサイトに影響なくて、Netlifty優しい、と思った…

まめにこのブログのコードはコミットしていきたいですし、いい感じの知見がえられたら共有します！ この記事も見やすいようにリファクタリングしていきます

ブログをNext.js、Contentful、Netliftyの構成にした知見（いい感じのページネーション・カテゴリーアーカイブあり）

公式に書いてあるのだと詰まったのでメモ。
<code class="code"><pre>
get_field('カスタムフィールド名', 'widget_' . $args['widget_id'])
// $argsはwidget作成の関数の引数から渡ってきたもの
</pre></code>

WordPressのウィジェットにAdvanced Custom Fieldsでカスタムフィールドを設定した際の呼び出し方法

私の場合は、タイトルの状況の際はts or tsxファイル閲覧時のVScodeの右下に表示されるTypeScriptのバージョンをワークスペースと合わせるを選択すると直りました。.vscodeフォルダは.gitignoreに書くとよし。参考になれば幸いです。

Create React App（TypeScript）のtsconfigで--jsx' オプションの引数は 'preserve', 'react-native', 'react' である必要がありますと言われた時

以前の記事通り<a href="https://type-any.com/blog/blog-contentful-next-js-pagination-archive">https://type-any.com/blog/blog-contentful-next-js-pagination-archive</a>カテゴリアーカイブにページネーションをつけたいなーと思っていたので、実装いたしました！今回はgetStaticPathsのロジックに絞ってお話します！
<h2>今回のディレクトリ構成</h2>
<code class="code"><pre>category
┗ [category] 	┳ index.tsx(カテゴリアーカイブトップ)
 ┗ page
 ┗ [num].tsx</pre></code>
前回と変えたのはカテゴリアーカイブトップを動的ルーティングのディレクトリ下のindex.tsxにしたところです。
<h2>getStaticPathsのロジック</h2>
<code class="code"><pre>export const getStaticPaths = async () => {
 const category = await client.getEntries({content_type: "category"})

 const paths = [];

 for (let i = 0; i &lt; category.items.length; i++) {
 let posts = await client.getEntries({content_type: "blogPost", "fields.category.sys.id": category.items[i].sys.id, order: '-sys.createdAt'})
 if (posts.items.length &gt; 0) {
 paths.push({
 params: {
 category: category.items[i].fields.slug.toString(),
 num: "1"
 }
 });
 for (let l = 1; l &lt;= Math.floor(posts.items.length / 10) + 1; l++) {
 paths.push({
 params: {
 category: category.items[i].fields.slug.toString(),
 num: (l + 1).toString()
 }
 });
 }
 }
 }

 return { paths, fallback: false }
}
</pre></code>
必ず1ページは表出してほしいのでこのようになりましたがもっとかんたんなロジックあったかも？このあたりもリファクタリングできそうですね、、まだまだ改修しがいがあります…！

【Next.js × Contentfulブログ】カテゴリアーカイブにページネーションをつけました

サクッとシェアボタンに対応したい！と思い、react-shareなるものを使用してみました。 公式:<a href="https://www.npmjs.com/package/react-share" target="_blank">https://www.npmjs.com/package/react-share</a> 最初はてブがないのかなと思ったけど下記の神がプルリクを出してくれててマージされているので現在ははてブもサクッとreact-shareで作れます…！ <a href="https://blog.hellorusk.net/posts/20200618" target="_blank">https://blog.hellorusk.net/posts/20200618</a>
<h2>ソースコードなど</h2>
まず、必要なものをインポートします。今回はTwitterとはてブとFacebookを使います。
<code class="code"><pre>import {
 TwitterShareButton,
 FacebookShareButton,
 HatenaShareButton,
 TwitterIcon,
 FacebookIcon,
 HatenaIcon,
} from "react-share";
</code></pre>
このブログの場合、ブログの動的ルーティングはcontentfulで設定しているスラッグを使用しています。なので、getStaticPaths経由でgetStaticPropsに渡ってきているので、それをコンポーネントに渡します。
<code class="code"><pre>export const getStaticProps = async ({ params }) => {
 const post = await client.getEntries({content_type: "blogPost", "fields.slug": params.slug})
 const category = await client.getEntries({content_type: "category"})

 return {
 props: {
 post: post.items[0],
 category: category.items,
 slug: params.slug
 },
 }
}</code></pre>
コンポーネントの引数で受け取り、下記のようにコンポーネントを表示します。
<code class="code"><pre>&lt;TwitterShareButton url={`https://type-any.com/blog/${slug}`} title={post.fields.title}&gt;
 &lt;TwitterIcon size={32} round={true} /&gt;
&lt;/TwitterShareButton&gt;
&lt;FacebookShareButton url={`https://type-any.com/blog/${slug}`} quote={post.fields.title}&gt;
 &lt;FacebookIcon size={32} round={true} /&gt;
&lt;/FacebookShareButton&gt;
&lt;HatenaShareButton url={`https://type-any.com/blog/${slug}`} title={post.fields.title}&gt;
 &lt;HatenaIcon size={32} round={true} /&gt;
&lt;/HatenaShareButton&gt;</code></pre>
スタイリングはお好みで。

【Next.js × Contentfulブログ】react-shareでシェアボタン対応（はてブあり）

ちょいとgulpで詰まった点メモです。
<h2>watchが動かない</h2>
ファイル保存してもwatchが動かないなー…と思ったら、同期で実行してた他のタスクが終わってなかっただけだった。done()が漏れてた。お気をつけくださいませ。
<h2>BrowserSyncが動かない</h2>
環境構築中、適当なファイルで動作確認していたのだけれど、動かなくて困った。下記の記事の通り、bodyタグがないと動かないよう。。 
<a href="https://qiita.com/ryohey/items/8c98f22b7205d698fe41" target="_blank">https://qiita.com/ryohey/items/8c98f22b7205d698fe41</a>
環境構築慣れてきたつもりだけどこういうこともあると…TT

gulpでちょい詰まった点メモ（watchが動かない、BrowserSyncが動かない）

Swiperの6系だけ動かなくて困ってました。色々調べた結果、jQueryオブジェクトだったところをDOMオブジェクトに変換したところ無事動きました…！ 
下記のようにするといい感じです。
<code class="code"><pre>this.swiper = new Swiper(this.obj[0], {...}); // this.objがjQueryオブジェクト</pre></code>
困ってる人の助けになれば幸いです。

Swiperの6系だとSwiperインスタンスにjQueryオブジェクトは渡せないっぽい

フォーム周りってブラウザ間で差異があったりして厄介ですよね。ChromeやIEで、disabledになっているselectの文字色のCSSは黒が効いているのに、薄くなっていて、何故なのかと悩んでいたのですが、opacityを1にすることで解決しました。 IE用に::-ms-valueと::-ms-expandもつけましょう。
<pre><code class="code">.セレクタ[disabled="disabled"],
.セレクタ[disabled="disabled"]::-ms-value,
.セレクタ[disabled="disabled"]::-ms-expand {
 color: #333;
 opacity: 1;
}
</code>
</pre>

Chrome、IEなどでselectのdisabledの文字色が薄い場合は、opacityを1にする

キャッシュプラグインってトラブルつきものらしいですね… 
WP Fastest Cacheを使用しており、WPのアップデートのために無効化 => WPアップデート => プラグイン最新化 としたら一部ページのみ、もともとPC/タブレット/スマホ表示の切り替えのためにviewportをphpの記述で動的にしていたのですがそれがスマホでもPC表示になるという事件が起きて、、、 
WP Fastest Cacheのキャッシュの削除をすると、一時的に直ったりするのですが、すぐに戻ったりして謎だなと…このプラグイン原因なのは明らかなのですが… 
最終的に、WP Fastest Cacheは.htaccessに記述をしているらしいというのをみて、これが怪しいなと思い、WP Fastest Cacheの設定を何も変えない状態で設定の更新をポチッとおしてからもいっかいキャッシュ削除して、いま再発はしてない状況です。 
何か副作用があるかもしれないので、自己責任でお願いします。 
でも直ったのはいいけどキャッシュ使用してる割には読み込み遅い？もともと？なんかつらみ…

【解決済み？】WP Fastest Cacheで一部のページのみ表示がおかしくなったが、設定の更新で直ったかもしれない

ブログのSEO改善のためにdescriptionを抜粋表示にしたいなーと思い、descriptionを抜粋表示に。もっとスマートなやり方があるかもしれませんが、下記でさっくり解決。
<pre><code class="code">// ブログ記事関数コンポーネント
const BlogPage = (props) => {
 // props.data.contentfulBlogPost.body.bodyは記事本文
 const bodyExcerpt = props.data.contentfulBlogPost.body.body.slice(0, 120);

 return (
 &lt;Layout&gt;
 &lt;SEO title={props.data.contentfulBlogPost.title} description={bodyExcerpt} /&gt;

...以下続く
</code></pre>

もっとスマートなやり方ご存知の方いたらご連絡お願いしますｍｍ 
ブログの技術構成も記事にしてないのに、改善記事を書いてしまう。。

【ブログ改善日記】react-helmetでdescriptionを抜粋表示（gatsby.js・contentful）

何故か、Bogo使用時カスタム投稿タイプの多言語ページでタクソノミーアーカイブが404になる場合があり、どうやらCustom Post Type UIでの作成で作った場合は大丈夫だが、function.phpで作ったものはだめなようだった。 
諸事情でCustom Post Type UIで作り直せなかったので、色々試行錯誤していたところ、 register_taxonomyで設定する$argsで、"has_archive" => trueとしている記事を見つけ、あれ、Codexにそんなプロパティを持ってる説明はないぞ、と思いながらも設定してみたらなんと404が解消、、！ 
でも少し怖くて、"has_archive" => trueを外してみたのですが、なぜか404は解消されたまま。
なんだか怖いけど、解消されたからよし、ということにしている。
自己責任で試してください。。。

5/28追記 
/%taxonomy_category%/%postname%/ 
にしたら404が再発。仕方なく戻しました。

【謎挙動・自己責任で試してください】Bogo使用時タクソノミーアーカイブが404な時に試して効果あったコード

タイトルで結論出てますね。 
Spokeという（あまり記事とかない）WordPressと連携する翻訳サービスですが、導入したところ翻訳した記事のロケールが日本語と翻訳先どちらでも認識されたり、オリジナルポストとの紐付けがされてなかったので慌てました。 
長く悩んでましたが公式サイトの動作環境のBogoのところ、Bogo Version 3.2.1以下とかかれているのでダウングレードしたところ正常に動作。あっさり。 
同じようなことで悩んでいる人の助けになれば幸い。

翻訳サービスSpokeとBogoの連携が取れないと思ったらBogoのバージョンを落とせばいいだけだった

こちら参考にルート相対に全部のパスを変更する関数に書き直しました！ 
<a href="https://it-soudan.com/how-to-change-srcset-on-wordpress/" target="_blank">https://it-soudan.com/how-to-change-srcset-on-wordpress/</a> 
書き方悪かったらご指摘ください！一応、成立はしています。 
<code><pre>function filter_wp_calculate_image_srcset($sources, $size_array, $image_src, $image_meta, $attachment_id) {
 foreach ($sources as $source) {
 $previos_url = $source['url'];
 if (preg_match('/^http(s)?:\/\/[^\/\s]+(.*)$/', $previos_url, $match)) {
 $url = $match[2];
 $sources[$source['value']]['url'] = $url;
 }
 }
 return $sources;
}
add_filter('wp_calculate_image_srcset', 'filter_wp_calculate_image_srcset', 10, 5);
</pre><code>

wordpressでsrcsetの値をルート相対にする

やっぱりプラグインでささっと済ませたい時ってありますよね。今回業務でslickを使用していたのですが、スマホサイズになるとスライドに設定したクリックイベントが発火しなくなる事態が発生し、かなりの時間悩むことに。。 最終的に、responsiveプロパティが発動すると（breakpointに達すると）、どうやらDOMの再生成が行われている？ということに気が付き、下記のコードで対処しました。
<pre><code class="code">$slider.on('breakpoint', () => {
 // イベントの再設定 以下サンプル
 $slide.on('click', () => {
 $slide.addClass('active');
 })
}) 
</code></pre>
もっとスマートな対処法があるかもですが。ご参考になれば幸いです。