こんにちは。 エンジニア歴７ヶ月目のざまです。 本日は、chakra uiに標準で依存している、framer-motionにて よくあるふわっとフェードインを実装しようとした時にあんまり記事がなかったので自分のメモがてら書きます。 別のライブラリを入れても良かったのですが、せっかく入っているのだし、結構便利そうだったので 使うことにしました。 正直、css animation、transtionについてはそんなにまだわかっていないですw 完成版 親コンポーネント<pre><code>//index.tsx
import { motion, Variants } from "framer-motion";
...

export default function Home() {

//バリアンと設定

//親motion 
 const topVariants: Variants = {
 offscreen: {
 opacity: 0,
 },
 onscreen: {
 opacity: 1,
 y: [50, 0],
 transition: {
 ease: [0.17, 0.55, 0.55, 1],
 duration: 0.9,
 delay: 0.5,
 //↓子(motion.liなど）を一括指定できる
 delayChildren: 0.3, //子の遅延時間を変更
 staggerChildren: 0.3, // 子の間隔を変更
 },
 },
 };

//子motion
 const childrenVariants: Variants = {
 offscreen: {
 opacity: 0,
 },
 onscreen: {
 opacity: 1,
 },
 };

 return (
 &lt;&gt;
...
 &lt;motion.div
 variants={topVariants}
 initial="offscreen"
 whileInView="onscreen"
 viewport={{ once: true, amount: 0.8 }}
 &gt;
 &lt;Center h={{ base: "xl", lg: "4xl" }}&gt;
 &lt;Image
 // style={{
 // transform: isInview ? "none" : "translateY(100px)",
 // opacity: isInview ? 1 : 0,
 // transition:
 // "all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1) 0.5s",
 // }}
 ...
 /&gt;
 &lt;/Center&gt;
 &lt;/motion.div&gt;

...
 &lt;Concept
 topVariants={topVariants}
 childrenVariants={childrenVariants}
 /&gt;
 </code></pre> 子コンポーネント<pre><code>//Concept.tsx

import { motion } from "framer-motion";
import { Variant } from "../types/framer-motion";

const Concept = ({ topVariants, childrenVariants }: Variant) =&gt; {
 return (
...
 &lt;motion.ul
 initial="offscreen"
 whileInView="onscreen"
 style={{ listStyle: "none" }}
 viewport={{ once: true, amount: 0.8 }}
 variants={topVariants}
 &gt;
 &lt;Stack
 direction={{ base: "column", lg: "row" }}
 justifyContent="space-between"
 align="center"
 spacing={{ base: "7", lg: "2" }}
 &gt;
 &lt;Box&gt;
 &lt;motion.li variants={childrenVariants}&gt;
 &lt;Image
 ...
 &gt;&lt;/Image&gt;
 &lt;/motion.li&gt;
 &lt;/Box&gt;
 &lt;Box&gt;
 &lt;motion.li variants={childrenVariants}&gt;
 &lt;Image
 ...
 &gt;&lt;/Image&gt;
 &lt;/motion.li&gt;
 &lt;/Box&gt;
 &lt;Box&gt;
 &lt;motion.li variants={childrenVariants}&gt;
 &lt;Image
 ...
 &gt;&lt;/Image&gt;
 &lt;/motion.li&gt;
 &lt;/Box&gt;
 &lt;/Stack&gt;
 &lt;/motion.ul&gt;
);
};</code></pre> motionのprops、 initial="offscreen" whileInView="onscreen" を使えば、簡単にスクロール時に入った時にアニメーションを発火する様にできます。 他にも、useInViewとuseRefでドムを所得して変更する方法などもありましたが、スクロール時に合わせて発火するやり方がわからなかったです。 スクロール時に発火しなくても良ければuseInViewとuseRefの方が実装は簡単でした。 個人的には、 delayChildren staggerChildren が親から一括指定で子の遅延時間とか変更できるので非常に便利だと思いました。 誰かの参考になれば。

chakra uiに標準で入っているframer-motiondeでよくあるスクロール連動型ふわっとフェードインを実装する方法

【chakra ui】framer-motionにてスクロール連動型フェードインを実装する方法

こんにちは。エンジニア歴７ヶ月目に突入のざまです。 今回は、reactライブラリのreact-modern-drawerを使ったときに出たエラーがググっても出なかったので 自分のメモがてら、誰かのお役に立てたらと思います。 それにしても、gitstarが少ないライブラリを使うと、情報量が少なすぎて困る。。。まぁ、当たり前の話だけども。 該当コード（一部分のみ）<pre><code>//Nav.tsx

const MobileNav: FC = () =&gt; {
 const [isOpen, setIsOpen] = useState(false);

 const toggleDrawer = () =&gt; {
 setIsOpen((prev) =&gt; !prev);
 };

 return (
 &lt;&gt;
 &lt;Drawer
 open={isOpen}
 onClose={toggleDrawer}
 direction="left"
 className="rounded-l rounded-lg"
 size={220} 
 &gt;
 ...
 &lt;/Drawer&gt;
 &lt;/&gt;
 );
};</code></pre> これだと Prop id did not match. Server: "EZDrawercheckbox4wihy" Client: "EZDrawercheckboxfz2na"って出る。 クライアントサイドとサーバーサイドのidが一致しないみたいです。 react-modern-drawerの中身を見たり、色々、辿っていったら ドキュメントのAPIに「customIdSuffix」というものがあった。 これを付けたらエラーが消えました。 完成コード（一部分のみ）<pre><code>//Nav.tsx

const MobileNav: FC = () =&gt; {
 const [isOpen, setIsOpen] = useState(false);

 const toggleDrawer = () =&gt; {
 setIsOpen((prev) =&gt; !prev);
 };

 return (
 &lt;&gt;
 &lt;Drawer
 open={isOpen}
 onClose={toggleDrawer}
 direction="left"
 className="rounded-l rounded-lg"
 size={220} 
 customIdSuffix="customId" // 追加 
 &gt;
 ...
 &lt;/Drawer&gt;
 &lt;/&gt;
 );
};</code></pre> react-modern-drawerは便利で使いやすいので、もうちょっと使う人が増えて情報量が増えたら嬉しいです！

react-modern-drawerについてのエラー「Warning: Prop `id` did not match. Server」の改善方法

react-modern-drawerにてWarning: Prop `id` did not match. Serverが出た時の解決法

こんにちは。ざまです。 今回は、microCMSのリッチエディタにシンタックスハイライトとHTMLを埋め込みできるように実装したので それを記事に書きます。 こんな感じの シンタックスハイライト<pre><code>&lt;div&gt;シンタックスハイライトです。&lt;/div&gt;</code></pre> HTML &lt;&lt;test&gt;&gt; ほとんどの方は、記事に書くほどでもないかもですが、 プログラミング歴半年のざまは、かなり苦戦しました^^; なので、基本的には初心者向けの記事です。 完成コード（実装部分） <pre><code> [id].js

// データをテンプレートに受け渡す部分の処理を記述します
export const getStaticProps = async (context) =&gt; {
 const id = context.params.id;
 const data = await client.get({endpoint:"blog",contentId:id});
 
 // ショートコードをリッチエディタに埋め込む為の関数
 const replaceBody = ({ body, shortCodes,}) =&gt; {

 // ショートコードを作るための式？
 const shortCodesMap = shortCodes?.reduce((res, { code,body}) =&gt; ({ ...res, [code]:body}),{} ) ?? {}

 //シンタックスハイライト式
 const $ = cheerio.load(body);
 $('code').each((_, elm) =&gt; {
 const result = hljs.highlightAuto($(elm).text());
 $(elm).html(result.value);
 $(elm).addClass('hljs');
 });
 
 // シンタックスハイライトしたbody($.html)の中から、識別コードを正規表現でマッチさせ、元に返す？
 return $.html().replace(/&lt;&lt;(.+?)&gt;&gt;/g, (...[, key]) =&gt; shortCodesMap[key])

}

 return {
 props:{
 // blog:data,
 data:{ 
 ...data,
 body:replaceBody(data),　　　　
 } 
 },
 revalidate: 3600
 
 }

}

export default function BlogId({data}) {
 return (
 &lt;BlogItem blog={data} /&gt;
 )
 }</code></pre> 参考にした記事 HTML実装 <a style="color:#0186ab" href="https://zenn.dev/aiji42/articles/46ac448d95e847" target="_blank" rel="noopener noreferrer">https://zenn.dev/aiji42/articles/46ac448d95e847</a> シンタックスハイライト実装 <a style="color:#0186ab" href="https://qiita.com/cawauchi/items/ff6489b17800c5676908" target="_blank" rel="noopener noreferrer">https://qiita.com/cawauchi/items/ff6489b17800c5676908</a> 上記サイトの方が詳しく書いてあります。 基本的にmicroCMSを導入したら大半が実装するであろう、こちらの記事のコードがベースになっています。 <a style="color:#0186ab" href="https://blog.microcms.io/microcms-next-jamstack-blog" target="_blank" rel="noopener noreferrer">https://blog.microcms.io/microcms-next-jamstack-blog</a> 初心者の方の参考になれば、幸いです。

microCMSのリッチエディタでシンタックスハイライトを実装したりHTMLコードを埋め込んだりしたい方向け記事です。

<div style='border: 2px solid;'>HTMLコードです。</div>

カテゴリ：プログラミング

ブログ内検索