mz-logo

豆蔵デベロッパーサイト

開発に役立つチュートリアルやテクニック・ノウハウを豆蔵メンバーがご紹介します！

記事のタグから検索 #11ty #2021年 #2023Japan_AWS_TopEngineers #2026年 #3DGS #3Dモデリング #3D再構成 #ABB #ADS #AI #AIDD #AIエージェント #ALB #API Gateway #APM #ATtiny13A #AVR #AWS #AWS認定 #Agent Skills #Analytics #Appium #Astro #Aurora #Azure #BEANus #Backstage #Batch #Bizen #BookReview #Bun #C++ #CCPM #CI/CD #CMS #Choreonoid #Claude #Claude Code #Claude Skills #ClaudeCode #CloudFormation #CloudMap #CloudShell #Cloudflare #CodeBuild #Codespaces #ComputerVision #Copilot #Cursor #C言語 ...(全てのタグを表示)

本サイトは本家の豆蔵ホームページではありません。会社概要、製品紹介等はこちら、 募集中の求人情報はこちらをご覧ください。

mameka豆香の豆知識 image for mameka column
フロントを踊らせろ！Framer MotionでReactアニメ魔法大炸裂！
やっほー！豆香だよ！きょうは「Implementing Framer Motion for Advanced React UI Animations」とかいう噛みそうな英語タイトルを、口の中でハミングしながら解説しちゃうぞ。Reactコンポーネントをパタパタ動かしたい？フレーム単位でド派手にキュインキュインさせたい？そんな時、Framer Motionが登場。例えるなら、平たい食パンをトースターに突っ込んだら突然ジャンプして空中でバク宙するレベルの衝撃アニメーションを、わずか数行で召喚できちゃう神ライブラリだ！
import { motion } from "framer-motion" と書くだけで、divが魔法少女に変身。opacityやscaleをシュンッ！と変えたり、ホバった瞬間クルッと回したり。もはやパラパラ漫画を毎フレーム手描きしてた昔の自分にタイムスリップして肩ポン叩きたい。「おい…未来はもう手首壊れないぞ」と。
さらにVariants機能。アニメ状態をオブジェクトにまとめて、ドラマの台本みたいにぽんぽん切り替え。whileHoverプロップで「触れたら即スパーク」、exitで「去り際にカーテンコール」。React Routerと組めばページ遷移がハリウッド予算級。しかもコード読みやすいから、チームメイトにも優しい。いや、優しさというよりもはや愛。愛は世界を救うって小学校の黒板に誰か書いてた。
async/awaitと合わせてシーケンスも余裕。例えばAPIレスポンス届くまでスケルトンをピョコピョコさせ、中身来た瞬間ズザーーッとスライドイン。ユーザーは「おおぉ…！」と口ポカン。GoogleのCLSも改善、Web Vitalsに微笑まれる。まるで教師面談に遅刻ギリギリで駆け込んだのに、なぜか褒められた時のあの謎の勝利感。
注意点は依存モジュールサイズ。けどtree shaking効くし必要分だけ輸入すればOK。あとタイミング管理を欲張りすぎて、全部同時に爆発させたら目がチカチカ。スパイスは一つまみ、カレーに納豆全部ぶち込むみたいな暴挙は避けようね。
まとめ。Framer MotionはReactの筋肉。デプロイ後、面接の評価より高く跳ねるUIを作りたいなら、とりあえずmotion.divでワンツーパンチ決めとけ。さあ、コードエディタを開け！画面を踊らせろ！そして豆香と一緒に「アニメーション最高ー！」と深夜テンションで叫ぶのだ！！ヒャッハー！
※本コラムはAIで生成したものです。内容の正確性を保証するものではありません。
過去のコラムはこちらから!

新着記事new-articles全ての記事を見る

  • | ブログ | 7 min read
    #2026年 #MCP #typescript

    AIエージェントとシステムをつなぐMCP入門（StreamableHTTPステートレス実装編）

    はじめに # 本ページは「AIエージェントとシステムをつなぐMCP入門」の続編です。 今回はStreamableHTTPで通信するMCPサーバー（ステートレス）の実装について説明します。 前回のstdio実装編はMCPクライアントがサブプロセスとして実行しローカルで完結する構成でした。StreamableHTTPはHTTP経由でMCPサーバーを公開し、複数のMCPクライアントから利用可能な構成です...

    記事を読む
  • | ブログ | 7 min read
    #2026年 #MCP #typescript

    AIエージェントとシステムをつなぐMCP入門（stdio実装編）

    はじめに # 本ページは「AIエージェントとシステムをつなぐMCP入門」の続編です。 今回はstdioで通信するMCPサーバーの実装について説明します。標準入出力（stdin/stdout）を利用したMCPサーバーの構築手順と、stdio特有の注意点について見ていきます。 本ページで掲載しているコードはこちらで公開しています...

    記事を読む
  • | ブログ | 5 min read
    #2026年 #Marp #生成AI #AI

    AIとMarpで実現するエンジニアらしいプレゼン作成術

    はじめに # アジャイルグループの石田です。 先日、3月24日に開催された豆寄席「スクラムマスターのAI活用を考える 〜透明性・検査・適応 三本柱を強化する実践アプローチ〜」に登壇しました。第50回という節目のイベントに想定以上の多くの方にご参加いただき、誠にありがとうございました。改めて、スクラムマスターとAIという組み合わせの注目度の高さを感じました...

    記事を読む
  • | ブログ | 5 min read
    #2026年 #MCP #typescript

    AIエージェントとシステムをつなぐMCP入門（イントロダクション）

    はじめに # 本シリーズでは、MCP(Model Context Protocol)の基本から実装まで段階を分けて解説します。 「AIエージェントに社内システムや外部APIの知識を与えたい」という方へ向けた内容になります。 今回はMCPそのものについて説明します。 今後、トランスポート（stdio, Streamable HTTP）ごとの実装、MCPの自動生成などへの展開を予定しています...

    記事を読む
  • | ブログ | 8 min read
    #2026年 #AWS #AWS認定

    AWS Generative AI Developer 合格とW全冠達成記

    はじめに # 前回の記事では、Google Cloud認定の鬼門であった「Professional Security Operations Engineer（PSOE）」を突破し、念願の「Google Cloud認定全冠」を達成したことをご報告しました...

    記事を読む
  • | ブログ | 8 min read
    #2026年 #Google Cloud #Google Cloud認定

    【リベンジ達成】Google Cloud認定をついに全冠制覇！鬼門のPSOE突破と再受験のリアル

    はじめに # これまで豆蔵デベロッパーサイトでAWS認定に関する記事を執筆し、直近の2026年3月26日には「Google Cloud認定全制覇！……まであと一歩で跳ね返されたリアルな軌跡」という記事を公開しました。 前回の記事では、約2か月の怒涛の受験ラッシュで全冠を目指したものの、最後の1つ「Professional Security Operations Engineer（PSOE）」で不合格となり、無敗記録がストップしてしまった経緯をお伝えしました...

    記事を読む
  • | ブログ | 7 min read
    #2026年 #Network #raspberry-pi #tips

    親心VSこども Wi-Fi大作戦！Raspberry Pi＆Pi-holeで徹底ペアレンタルコントロールしてみた

    はじめに # こんにちは。私の参加しているプロジェクトでは、毎朝の朝会で各自のコンディション（ニコニコ、ちょいニコ、普通、ちょいしんど、しんどめ、地獄など）を共有する「ニコニコカレンダー」を活用しています。 先日、私がその日の気分を「ちょいしんど」、理由に「寝不足」と入力していたことから、メンバーに「副鼻腔炎が悪化しましたか？」と心配されました...

    記事を読む
  • | ブログ | 3 min read
    #2026年 #retrospective

    豆蔵デベロッパーサイト 2026年1-3月のサマリー

    新年度が始まりました。2026年1-3月のサマリーです。 記事数・執筆者数 # この3ヶ月で34本の記事が投稿され、記事数は876になりました。新たに2名が執筆デビューし、累計76名になりました。 連載 # SysML モデリング連載 # 複雑なシステムをモデリングするための新しい言語である SysML v2。この SysML v2モデルを作成・編集するためのグラフィカル・モデリングツール、SysON を紹介するシリーズ...

    記事を読む
  • | ブログ | 3 min read
    #2026年 #初心者向け #要件定義

    要件定義入門①：要件定義とはなにか　～現場での役割と全体像～

    要件定義入門①：要件定義とは何か　～現場での役割と全体像～ # 1. はじめに # 要件定義という言葉はよく耳にするものの、 「実際に何をしているのか分からない」と感じる方が多いのではないでしょうか。 特に現場に入りたての頃は、実装やテストといった開発工程に関わることが多く、 要件定義については「最初にやる工程らしい」という程度の理解に留まりがちです。 そのため、 「要件定義って何をしているのだろう」 と疑問に思う場面も少なくありません...

    記事を読む
  • | ロボット | 11 min read
    #ロボット #LeRobot #SO-101 #マルチモーダルAI #AI

    最先端ロボ×AIで遊ぼう！LeRobotとSO-101でマルチモーダルAIを体験＆環境構築ガイド

    こんなひとにおすすめ # マルチモーダルAI、フィジカルAI、模倣学習、強化学習などロボティクス分野のAIに興味はあるが、どこから手をつけたらいいのか分からない方 実機のロボットの価格が高くて試せないと感じている方 手を動かして学びたいが、低コストで始めたい方 はじめに # 本記事では、オープンソースプロジェクトである LeRobot とオープンソースのアームロボットである SO-101 を題材に、マルチモーダル AI に関する技術紹介と環境構築の手順を解説します...

    記事を読む

ranking-articles先週の人気記事new-articles

  1. 【新人さん向け】A5:SQL Mk-2のおすすめ設定と使い方
  2. VS Codeで始める！わかる＆できるC#開発環境の構築【2025年版マニュアル】
  3. 初心者も挑戦！3D Gaussian Splattingで作るリアル3Dモデリング入門
  4. 最先端ロボ×AIで遊ぼう！LeRobotとSO-101でマルチモーダルAIを体験＆環境構築ガイド
  5. 手書き風ドローツール Excalidraw のススメ
  6. 【新人さん向け】Java開発で最初に確認しておきたいEclipse便利設定ガイド
  7. Microsoft Presidio: 個人情報保護に特化したオープンソースツール
  8. UMTP認定 L1～L3まで受験したのでまとめます
  9. TwinCATで始めるソフトウェアPLC開発（その1：開発環境構築編）
  10. 「暗号の扉を開く２つの鍵」～公開鍵と秘密鍵の仕組みと、インターネットを守る暗号技術の話

豆蔵では共に高め合う仲間を募集しています！

recruit

具体的な採用情報はこちらからご覧いただけます。