mz-logo

豆蔵デベロッパーサイト

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

記事のタグから検索 ...(全てのタグを表示)

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

mameka豆香の豆知識 image for mameka column
React Native Reanimated 3でヌルヌル動くアプリを作ってみたら世界が変わった件
やっほー!豆香だよ。最近スマホでスクロールした瞬間にガクガクって止まると「うわっ、昭和か!」ってツッコミ入れたくならない?そんなストレスを粉砕するのがReact Native Reanimated 3。こいつ、とにかくアニメーションがヌッルヌル。フレーム落ちゼロどころか、もはや時空を超えてるんじゃないかって錯覚するレベル!
まず感動ポイントその1。ワークレットがJSスレッドから独立してUIスレッドで走るから、タップ連打してもCPUが「アイム限界…」って白旗あげない。豆香、調子に乗って1秒間に50回タップしたら指がつったけどアニメーションは動き続けたんだ。むしろ私の筋肉のほうが処理落ちしたわ!
ポイントその2。レイアウトアニメーションが宣言的に書けるから、カードがスーッと並び替わるときもコードはシンプル。友だちに「この動きどうやってるの?」って聞かれて、ニヤッと笑いながらuseAnimatedStyleを一行見せた瞬間、友情より羨望が爆増。「え、たったそれ!?」っていうリアクションはいつ見てもご褒美。
あと忘れちゃいけないのが共通トランジション。ページ遷移時にタイトルが縮んでサムネに吸い込まれるあの演出、ハリウッド映画並みにドラマチック。ここで「どやぁ」って自己顕示MAXになれる。ただしエフェクト盛りすぎるとユーザーが酔うから注意。豆香、一度スプラッシュ画面に360度回転入れたら友だちが「スマホ投げそうになった」って言ってた。リアクション芸としては満点だけどね。
最適化も忘れないぞ。Reanimated 3はFirebase PerfやFlipperと相性バッチリで、FPS計測したら常に60hzキープ。もし落ちたら原因は大抵画像の重さ。そこでばっさりSVGに置き換えたら復活!まるで深夜にラーメンやめて豆腐に切り替えた翌朝の胃袋みたいな軽さ。
まとめると、滑らかなUIはもはや贅沢品じゃなくてマナー。Reanimated 3を使わない理由は「まだ生まれてない」くらいレア。さあみんな、令和の指先ライフをヌルヌル化しようぜ!アニメーションが変われば気分も変わる。今日もコード書きながら、豆香は踊るよ、タップのリズムで!
※本コラムはAIで生成したものです。内容の正確性を保証するものではありません。
過去のコラムはこちらから!

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

  • | ブログ | 4 min read
    #2026年 #ETロボコン #AI

    AI活用で進化するETロボコン - シルバーモデル獲得までの4年間と、次の挑戦へ

    はじめに # 私が4年間取り組んできた ETロボコンの活動の軌跡 を紹介します。 昨年度はベーシッククラス(当時の名称:プライマリークラス)に挑戦し、AI活用を取り入れた新しい開発スタイルにも踏み込みました。 これまでの経験がどのように積み重なり、昨年度の成果につながったのかをまとめています。 最後までお付き合いいただければ幸いです。 4年間の活動をひとことで紹介すると # 「設計(UML)→ 実装 → 実機制御 → チーム運営 → AI活用」 と、毎年新しい挑戦を積み重ねてきました...

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

    MCP 2026-07-28 RC解説:ステートレス化がもたらすAIエージェント実装

    はじめに # Model Context Protocol (MCP) は、2024年11月の初版リリース以来、AIモデルと外部データ・機能を接続する標準プロトコルとして急速に進化してきました。 今回の2026-07-28 Release Candidate(以下、RC)は、単なる機能追加ではなく、プロトコルの実運用前提を大きく変える改訂です。 とくに注目すべきは、プロトコル層のステートレス化です...

    記事を読む
  • | ブログ | 11 min read
    #2026年 #Deno Desktop #Tauri #electron #Deno

    Deno 2.9 で登場したデスクトップ機能 (Deno Desktop) - Electron / Tauri との違いを実感

    はじめに # Deno 2.9 リリースおめでとうございます。 Deno 2.9 | Deno Electron 大好きな自分としても気になるのはやはり Deno Desktop です。 Tauri と同様 WebView をバックエンドにする構成と Electron と同様 Chromium ベースの構成を選べるとのことで、これは試すしかないと思いました。 公式ドキュメントは以下にあります...

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

    人工知能学会2026参加記 — 発表と学会で見えたAI研究の流れ

    はじめに # AIテクニカルセクターの藤堂です。セクターが独立組織となって以降、全社でAI活用を広げる取り組みが本格化しています。そのような中、6月には第40回 JSAI2026に参加しました。 前半ではポスター発表をした、士業資格試験を対象としたLLMベンチマークShigyoBenchについて簡単に触れ、AIの実用化についての所感を述べます。 後半では、人工知能学会で印象に残った発表と、今後のAI研究について思ったことを記します...

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

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

    今年も半分が過ぎました。2026年4-6月のサマリーです。 記事数・執筆者数 # この3ヶ月で13本の記事が投稿され、記事数は889になりました。 連載 # AIエージェントとシステムをつなぐMCP入門 # MCP(Model Context Protocol) は AI エージェントが外部サービスと通信するための仕様で、2024年に Anthropic 社によって初版がリリースされました。MCP を使用することで、AI エージェントは外部サービスの機能を効果的に利用できます...

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

    AIエージェントとシステムをつなぐMCP入門(リソース編)

    はじめに # 本ページは「AIエージェントとシステムをつなぐMCP入門」の続編です。 今回は、リソースについて説明します。 MCPのリソースは、AIモデルが回答を生成する際に参照するコンテキスト情報(ファイル、ガイド、仕様など)を提供する機能です。 ツールが「AIモデルの判断」で実行され、プロンプトが「ユーザーの意思」で選択されるのに対し、リソースは「アプリケーション主導(Application-driven)」でその組み込みを決定します。 本記事で掲載しているコードはこちらで公開しています...

    記事を読む
  • | ブログ | 6 min read
    #2026年 #GitHub #CI/CD

    GitHub Actions ワークフローのステップが並行実行可能になりました

    はじめに # 先日、GitHub Actions ワークフローで background 機能が実装され、単一のワークフロー内でステップを並行で実行可能になったことが発表されました...

    記事を読む
  • | ブログ | 7 min read
    #2026年 #GitHub #Security #tips

    Team プランでもいける! GitHub オーガニゼーションで楽々リポジトリアクセス管理

    はじめに # GitHub Organization を運用していると、セキュリティと利便性のバランスを取る必要があります。先日、「機密性の高いデータを保持するリポジトリを作りたいので、オーガニゼーションの Basic Permission を write から no permission に変更してほしい」という相談を受けました。 この要望は妥当ですが、そのまま実装すると新規リポジトリ作成のたびにメンバーのアクセス権を個別設定しなければならず、管理者の負担が大幅に増えてしまいます...

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

    AIエージェントとシステムをつなぐMCP入門(プロンプト編)

    はじめに # 本ページは「AIエージェントとシステムをつなぐMCP入門」の続編です。 今回は、プロンプトについて説明します。 MCPのプロンプトは、MCPクライアント向けにテンプレート化されたメッセージやワークフローを提供する機能です。 生成指示やツールの利用順序を定義したワークフローなど、テンプレート化して再利用したい場合に有効です。 本記事で掲載しているコードはこちらで公開しています...

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

    AIエージェントとシステムをつなぐMCP入門(StreamableHTTPステートフル実装編)

    はじめに # 本ページは「AIエージェントとシステムをつなぐMCP入門」の続編です。 今回は、StreamableHTTPで通信するMCPサーバーのステートフル実装について説明します。 ステートフル構成は、同じ利用者の連続操作を同一セッションとして扱いたい場合に有効です。 たとえば「ツールの呼び出し結果を次の呼び出しに引き継ぐ」「セッション単位で一時状態を保持する」「接続中の文脈を維持する」といった用途で使います...

    記事を読む

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

recruit

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