こんにちは、 エンジニア歴７ヶ月のざまです。 みなさんは、cssライブラリは何をお使いでしょうか？ 私は断然、tailwindcssです。 理由は、<ul><li>自由度が広い</li><li>公式のドキュメントがめちゃくちゃくわかりやすい</li><li>tailwindで作られている教材が多い</li></ul> などなど、、、 tailwind＝バニラcss化しています。 ただ、アニメーションは今までほとんど使ってこなかったので、 アニメーションの勉強がてらtailwindを生かした組み合わせを色々試してみたので それをメモがてら書いていきます。 結論ですが、 私はtailwindの標準のCustomizing your themeが使いやすいと思いました。 tailwindconfigに独自でアニメーションを追加する方法です。 以下参考 <a href="https://tailwindcss.com/docs/animation" target="_blank" rel="noopener noreferrer">https://tailwindcss.com/docs/animation</a> <a href="https://qiita.com/akioqiita/items/d5726b00ce9d594b4c95" target="_blank" rel="noopener noreferrer">https://qiita.com/akioqiita/items/d5726b00ce9d594b4c95</a> 後、<a href="https://tail-animista.vercel.app/play/basic/scale-up/scale-up-center" target="_blank" rel="noopener noreferrer">Tailanimista</a>っていう神サイト見つけました。 アニメーションの動きが事前にわかるし、そのままコピペできます。 <a style="color:transparent" href="https://tail-animista.vercel.app/play/basic/scale-up/scale-up-center" target="_blank" rel="noopener noreferrer">Tailanimi</a> 但し、これだけだと前回の記事でも書いたような画面に入った時だけ発火する様なやつができないです。 普通にIntersectionObserverを使って行う方法もありますが、良さげなライブラリを見つけたので 組み合わせて使ってみました。 以下参考 <a href="https://github.com/thebuilder/react-intersection-observer" target="_blank" rel="noopener noreferrer">https://github.com/thebuilder/react-intersection-observer</a> 手順 1,Tailanimistaで適当にコピペしてきてtailwind.config.jsに追加 <pre><code>//tailwind.config.js

theme: {
 extend: {
 animation: {
 "slide-top": "slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both"
 },
 keyframes: {
 "slide-top": {
 "0%": {
 transform: "translateY(100px)",
 opacity:0,
 },
 to: {
 transform: "translateY(0)",
 opacity:1,
 }
 }
 }
 },
 },</code></pre> 2,FadeInコンポーネント作成 <pre><code>//Fadein.tsx

import { ReactNode } from "react";
import { useInView } from "react-intersection-observer";

const FadeIn = ({ children }: { children: ReactNode }) =&gt; {
 const { ref, inView } = useInView({
 // オプション
 rootMargin: "-20px", // ref要素が現れてから20px過ぎたら
 triggerOnce: true, // 最初の一度だけ実行
 });
 return (
 &lt;div ref={ref} className={`${inView &amp;&amp; "animate-slide-top"} `}&gt;
 {children}
 &lt;/div&gt;
 );
};

export default FadeIn;</code></pre> 3,親から呼ぶ <pre><code>import FadeIn from "../components/FadeIn"; 
...
&lt;FadeIn&gt;
 &lt;div className="w-40 h-40 bg-blue-500"&gt;&lt;/div&gt;
&lt;/FadeIn&gt;</code></pre> これだけで画面内に入ったらフェードインが作れます。 FadeInコンポーネントで囲めば、全てそのタイミングで発火するので 便利ですね。

tailwindcssでのアニメーション実装でおすすめな組み合わせを紹介します。

【Next.js】個人的に良かったtailwindcssでのアニメーション実装

こんにちは。 エンジニア歴７ヶ月目のざまです。 本日は、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が出た時の解決法

こんにちは。エンジニア歴６ヶ月のざまです。 今回は、タイトルの通り、reactのkeyでハマった話です。 Next.jsでswiperライブラリを使用中に発生しました。 私みたいな初学者の方の参考になれれば幸いです。 該当コード<pre><code>Carousels.tsx

 {menus.map((menu) =&gt; {
 return (
 &lt;&gt;
 &lt;SwiperSlide key={menu.name}&gt;
 &lt;Image src={menu.src} w='100%' h={{base:'300',md:'600'}} alt={menu.alt}&gt;&lt;/Image&gt;
 &lt;Text&gt;{menu.discription}&lt;/Text&gt;
 &lt;/SwiperSlide&gt;
 &lt;/&gt;
 )
 })}</code></pre> エラーメッセージ：Warning: Each child in a list should have a unique "key" prop なぜ？？ keyをちゃんと付けているのに怒られてる。。。 色々ググった結果、フラグメントにもkeyを付けないといけないとのことでした。 参考記事 <a style="color:#0186ab" href="https://tech.motoki-watanabe.net/entry/2021/01/10/143047" target="_blank" rel="noopener noreferrer">https://tech.motoki-watanabe.net/entry/2021/01/10/143047</a> 今回の場合だと、フラグメントを付けないか、フラグメントにkeyを入れたら解決いたしました。 解決コード<pre><code>Carousels.tsx

 {menus.map((menu) =&gt; {
 return (
 &lt;React.Fragment key={menu.name}&gt;
 &lt;SwiperSlide key={menu.name}&gt;
 &lt;Image src={menu.src} w='100%' h={{base:'300',md:'600'}} alt={menu.alt}&gt;&lt;/Image&gt;
 &lt;Text&gt;{menu.discription}&lt;/Text&gt;
 &lt;/SwiperSlide&gt;
 &lt;/React.Fragment&gt;
 )
})}</code></pre> 話変わりますが、 個人的に、swiperはreact系だと向いていない気がしました。 Splide https://ja.splidejs.com/integration/react-splide/ こちらの方がドキュメントも見やすくて、自分は好きです。

react & NEXT.jsにおいて。エラーメッセージ：Warning: Each child in a list should have a unique "key" propで困っている人向けの記事です。

【react &NEXT.js】Warning: Each child in a list should have a unique "key" propでハマった話

こんにちは。ざまです。 今回は、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>

ブログ内検索