<ViewTransition> で子要素をラップすることで、それらの間の変化をアニメーション機能を提供する
<ViewTransition> を使う場合、Reactのコンポーネントを切り替えても内部のDOMノードが自動的に同じ view-transition-name を持つ場合、アニメーションが適用される（defaultでname=”auto”が割り当てられる）

ViewTransitionコンポーネントの使用方法

react@experimental をinstall
```
  npm install react@experimental
```
現時点で実験的な機能なため unstable_ViewTransition としてimportする
```
  import { unstable_ViewTransition as ViewTransition } from 'react'
```

condition の変更は startTransition でラップする必要がある

  function App() {
    const [condition, setCondition] = useState(true)

    const changeCondition = () => {
      startTransition(() => {
        setCondition(prev => !prev)
      })
    }

    return (
      <>
          <botton onClick={changeCondition}>
          change condition
        </button>
        <ViewTransition>
          {condition ? <ComponentA /> : <ComponentB />}
        </ViewTransition>
      </>
    )
  }

アニメーションのカスタマイズ

<ViewTransition>コンポーネントは、デフォルトでview-transition-name: autoを適用し、簡単なトランジションを自動的に行う

より詳細なアニメーションを制御したい場合は、nameプロパティを指定

  <ViewTransition name="sloq-fade">
    {page === 'A' ? <PageA /> : <PageB />}
  </ViewTransition>

これにより、CSSの::view-transition-old(slow-fade)と::view-transition-new(slow-fade)疑似要素を使用して、アニメーションをカスタマイズできる

::view-transition-old(.slow-fade) {
    animation-duration: 500ms;
}

::view-transition-new(.slow-fade) {
    animation-duration: 500ms;
}

Suspenseのfallbackと組み合わせる

<ViewTransition> で fallback と Content をラップすると、スケルトンからコンテンツへの切り替えも スムーズなクロスフェード になる
```
  <ViewTransition>
    <Suspense fallback={<Skeleton />}>
      <Content />
    </Suspense>
  </ViewTransition>
```

Next.jsでの使い方

Next.js 15.2では、実験的にReact View Transitions APIのサポートが追加された
<ViewTransition>コンポーネントを利用するには、next.config.jsでviewTransitionフラグをtrueに設定する
```
  // next.config.js
  module.exports = {
    experimental: {
      viewTransition: true,
    },
  };
```

まとめ

ViewTransitionコンポーネントは、ページ遷移ではなく、コンポーネント内での小さなUI変更をスムーズにしたい場合に利用する
完全なページ遷移で利用したい場合はstartViewTransitionを使う

参考

react.dev

azukiazusa.dev

2025-05-01

Junieを使ってみた

バックエンド勉強会

Junieとは

JetBrainsが2025年4月16日に正式リリースしたAIコーディングエージェント。
チャット欄に自然言語で依頼したタスクを自律的に計画・実行。実際にソースコードを編集、ビルドやユニットテストまで走らせたうえで差分を提示してくれる。
コードの補完機能はない。補完を行いたい場合はAI AssistantやGithub copilotを利用する

www.jetbrains.com

LLM

Claude3.7

プランと価格

制限付きで無量レベルを提供
ただしIDE自体が有料

対応IDE（2025年4月現在）

IntelliJ（有料版）
PyCharm（有料版）
WebStorm
GoLand

セットアップ

対応するIDEを起動し、Setting -> plugins から"JetBrains Junie"をインストール

plugins.jetbrains.com

使い方

Code / Ask
- Code
  - Junieがコードとテストを自動生成するモード
- Ask
  - Junieに設計相談するモード
  - コード生成はしない
Brave Mode
- Junieがユーザーへの確認なしで、コマンドやコード変更を自動的に実行するモード
ガイドライン
- プロジェクトごとのコーディング規約や禁止事項を宣言する設定ファイル。
- プロジェクト直下に.junie/guidelines.mdを置くと、Junieは必ず参照してタスクを実行する

ユースケース（具体的な開発フロー）

ガイドライン作成
- .junie/guidelines.md にコーディング規約や禁止事項を記述する。
Ask モードで設計相談
- 設計方針をJunieから引き出す。
- 例：「新しいユーザー管理機能のAPI設計案を提案して」
Code モードでタスク指示
- Junieが計画ステップを作成、順番に実行
- 例：「ユーザー登録用のAPIエンドポイントを実装して」
レビュー
- ステップ内容や実装をレビューし、必要に応じて修正を依頼する
- 生成・編集したコードをdiffで確認し、Applyで承認
計画ステップに沿って実行と差分レビューを繰り返す
- Ask → Code → Brave の順で徐々に自動化レベルを上げる

www.jetbrains.com

cursorとの比較

実行時間が長い
- LLMにプロンプトを送信してからコード生成までの時間が長い
コード補完機能
- JunieとAI Assistantが分かれており、コード補完はcursorの方が非常に使いやすく性能が良く感じる
モデルが選択できない
- Junie側でモデルを選択してるためユーザー側が選択することができない
MCPとの連携ができない
- 将来的にはMCPとの統合を計画していることを明言している

所感

Junieは、AIがコードを書き、開発者が監督（設計、レビュー）して実装を進める。

設計から実装、テスト、レビューまで開発プロセス全体を通して使うという印象。

一方でCursorは、コード補完が優秀で、必要に応じてコード生成も依頼できる。使い方の自由度も高い。

JunieのAskモードでAIに任せる前に実装方針を整理できるところは嬉しいが、実際の開発で使いやすさはCursorの方が良いと感じた。

2025-04-11

フロントエンド実装のVibe Codingを実プロダクトで試してみる

LLM勉強会大規模言語モデル LLM AI

ELWのCTOの村上です。LLMの活用検討会の記事となります。バックエンドと比較してフロントエンドのVibe Codingが難しいという課題感が社内であり、その検証のためにVibe Codingで私が既存システムの改修チケットを実施してみたのでその紹介となります。

ELW株式会社テックブログ

リアルなログをそのままお届けします。

Tanstack Router

Kotlinpoet による Kotlinコードの生成

Django と Quarkus + Kotlin に学ぶバックエンド開発スタイル比較

1. Djangoとは

vinxiやviteなどのエコシステムを整理

Reactの<ViewTransition>コンポーネントを使ってみた

ViewTransitionAPIとは

ReactでViewTransitionコンポーネントが利用できるようになる