【ITニュース解説】Build Your Own Animated Component Library with React + Framer Motion

Webアプリケーション開発において、ユーザーインターフェース（UI）の動き、つまりアニメーションは、ユーザー体験を大きく向上させる。しかし、アニメーションを毎回ゼロから実装するのは非効率だ。そこで、よく使うアニメーション付きのUI部品（コンポーネント）をまとめて再利用できるようにする「アニメーションコンポーネントライブラリ」を構築する考え方が重要になる。これは開発効率を高め、UIの一貫性を保ち、将来の自分やチームメンバーの作業を楽にする。システムエンジニアを目指す皆さんにとって、このような再利用可能なコンポーネント設計の経験は、スケーラビリティの基礎を学ぶ上で価値がある。

このライブラリ構築には、UI作成に特化したJavaScriptライブラリ「React」と、Reactアプリに簡単にアニメーションを追加できる「Framer Motion」を用いる。まず、プロジェクトの準備として、コマンド「npm install framer-motion」でFramer Motionをインストールする。次に、プロジェクトのフォルダ構造を整理する。具体的には、大元の「animated-components」フォルダの中に、アニメーションコンポーネント本体を格納する「src/components」と、それらを実際に使うデモ用アプリを格納する「example」フォルダを作成する。この構造は、コード管理を効率化し、コンポーネントの再利用を容易にする。

最初のコンポーネントは「AnimatedButton」だ。これは、マウスホバー時やクリック時にアニメーションするボタンである。Framer Motionでは、通常のHTML要素（例: button）の前にmotion.を付けると、その要素をアニメーション可能にできる。例えば、<motion.button>と記述する。このmotion.buttonには、whileHoverプロパティでマウスカーソルが重なった時の動きを、whileTapプロパティでボタンがクリックされた時の動きを定義する。whileHover={{ scale: 1.1 }}と設定すれば、ホバー時にボタンが1.1倍に拡大する。このように、直感的なプロパティ設定でインタラクティブな動きを簡単に実現する。

次に「AnimatedCard」コンポーネントを作成する。これは、画面に表示される際に滑らかに現れるカードだ。このコンポーネントもmotion.divとして定義する。アニメーションの動きは、要素が表示される前の初期状態を定義するinitialプロパティと、アニメーション後の最終状態を定義するanimateプロパティで制御する。initial={{ opacity: 0, y: 20 }}は、カードが最初は透明で少し低い位置にある状態を示し、animate={{ opacity: 1, y: 0 }}で完全に不透明になりながら本来の位置に戻る。transitionプロパティでアニメーションの継続時間や緩急を設定し、カードがふわっと表示されるような自然な登場アニメーションを演出する。

三つ目の「AnimatedModal」は、表示・非表示時にアニメーションするポップアップウィンドウだ。モーダルのように要素が動的に追加・削除される際にアニメーションを適用するには、Framer Motionの「AnimatePresence」コンポーネントが不可欠である。AnimatePresenceで囲まれた要素は、削除される際にもexitプロパティで定義されたアニメーションを実行する。AnimatedModalはisOpenプロパティで表示を制御し、背景のオーバーレイとモーダル本体の二つのmotion.divで構成される。それぞれのmotion.divにinitial、animate、exitプロパティを設定し、フェードイン・フェードアウト、拡大・縮小といった複雑なアニメーションをスムーズに実現し、ユーザー体験を向上させる。

これで個々のアニメーションコンポーネントが完成した。これらのコンポーネントを他のファイルから簡単に使えるように、「src/index.js」ファイルでまとめてエクスポートする。例えば、export { default as AnimatedButton } from "./components/AnimatedButton";のように記述すると、外部からはimport { AnimatedButton, AnimatedCard, AnimatedModal } from "../src";のように、必要なコンポーネントを一括でインポートできる。 次に、「example/App.jsx」でデモアプリケーションを作成し、これらのコンポーネントを実際に配置して動作を確認する。ReactのuseStateフックを使ってモーダルの表示状態を管理し、AnimatedButtonでモーダルを開閉する例を示すことで、コンポーネントの具体的な使い方と、それらを組み合わせた挙動を視覚的に確認する。

完成したアニメーションコンポーネントライブラリは、まずGitHubにコードを公開し、README.mdファイルにインストール方法や使い方を記述することが推奨される。また、ViteなどのツールとGitHub Pagesのようなホスティングサービスを組み合わせ、デモサイトを公開すれば、実際に動きを確認できる。 最終的には、このライブラリをnpm（Node Package Manager）に公開することも可能だ。npmはJavaScriptのパッケージ共有プラットフォームで、「npm login」後、「npm publish --access public」コマンドでライブラリを公開できる。一度公開すれば、他の開発者は「npm install animated-components-lib」でプロジェクトに組み込み、import { AnimatedButton } from "animated-components-lib";のように記述してすぐに利用できる。このように、再利用可能なライブラリ構築は、Web開発の効率と品質を大きく向上させる重要な技術である。