ELW株式会社 テックブログ

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

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

バックエンド勉強会

1. Djangoとは

  • オープンソースのPython製フルスタックWebフレームワーク（初版 2005 年）。
  • MTV構造：Model＝DB層、View＝ロジック、Template＝画面。役割が分かれ保守しやすい。
  • “Batteries‑included” フィロソフィ ─ ORM・管理画面・認証・国際化などを標準搭載し 迅速なプロトタイプ開発 が可能。
  • URL ディスパッチャ + テンプレートエンジンにより 疎結合なページ生成、CSRF/XSS 対策などセキュリティ機能も内蔵。
  • よく使われる場面：CMSや社内システム、スタートアップのMVP、大規模サービス（例：Instagram）。
続きを読む

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

フロントエンド勉強会

ViewTransitionAPIとは

  • ページを遷移する際にスムーズなアニメーションを追加できるブラウザネイティブのAPI
  • メリット
    • 遷移アニメーションがスムーズ
    • 記述が簡単
    • ブラウザネイティブの機能ため、JavaScriptによるアニメーションよりパフォーマンスが優れている

developer.mozilla.org

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

github.com

  • <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

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は必ず参照してタスクを実行する

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

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

www.jetbrains.com

cursorとの比較

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

所感

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

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

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

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

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

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

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

続きを読む

RDB脳のためのMongoDB覚書

◆用語

コレクション

RDBのテーブルに相当。RDBの場合は同テーブルであれば必ず同スキーマだが、コレクションでは同スキーマである必要はなく、異なるフィールドを混在させることが可能。

ドキュメント

RDBのレコードに相当。フィールドと値のペアのBSON(JSONをバイナリでエンコードしたデータ形式)で保持される。フィールドに対しインデックスを作成することも可能。

続きを読む