Web Developer

Hey, I'm azukiazusa👋

週に1回 Web 開発に関する記事をお届けします。フロントエンドに関する分野の記事が中心です。

最新記事

Codex を利用した iOS アプリ開発を試してみた

私自身は Web 開発の経験はありますが、iOS アプリ開発の経験はほとんどありません。このようなバックグラウンドを持つ私がコーディングエージェントである Codex を利用して iOS アプリ開発をどこまで進められるか試してみました。コーディングエージェントは単に中身を見ずにアプリケーションを作るいわゆる「バイブコーディング」的な使い方だけでなく、なぜこのコードが必要なのか?より良い設計にできないか?といったことを随時質問しながら進める学習用途の使い方が中心です。

Playwright CLI で AI エージェントに視覚的なフィードバックを与える

Playwright CLI v0.1.9 で追加されたアノテーション機能は AI エージェントに視覚的なフィードバックを与えるために便利な機能です。アノテーション機能を利用すると、ブラウザの要素を選択して、その要素に対するコメントを残すことができます。AI エージェントはこのアノテーションが残された要素を簡単に特定できるため、どのコードを修正すればよいのかを判断しやすくなります。

`contrast-color()` 関数を使用した自動コントラスト調整

`contrast-color()` 関数は、指定した色に対して `white` もしくは `black` のどちらがより高いコントラスト比を持つかを自動的に判断し、適切な色を返す関数です。動的に色が変わる場合やユーザーがカスタムテーマを使用する場合など、常にコントラスト比を確保するのが難しい状況で役立ちます。

人気記事

  1. Playwright CLI で AI エージェントに視覚的なフィードバックを与える
  2. 事前に定義した UI を AI に生成させる json-render を試してみた
  3. gh コマンドでエージェントスキルをインストール・管理できるようになった
  4. Claude Code から Codex を呼び出すためのプラグイン codex-plugin-cc
  5. AI エージェント向けのパッケージマネージャー apm
  6. `contrast-color()` 関数を使用した自動コントラスト調整
  7. 新しいデザインツール Pencil を試してみた
  8. AI エージェントが UI を安全に生成して描画するためのプロトコル A2UI とは?
  9. Claude Code to Figma を使ってコードから Figma デザインを生成する
  10. 大規模にエージェントを構築する Claude Managed Agents を試してみた

ショート

azukiazusa
azukiazusa
azukiazusa
azukiazusa

登壇資料

  1. 2026

  2. React Tokyo Fes 2025

    コーディングエージェントにフロントエンドを書かせるとき、フィードバックはどのように与えるか?

    LLMベースのコーディングエージェント(Claude Code、Codexなど)が普及しているが、LLMの反復改善プロセスにおいて、コード実行結果のフィードバックがなぜ不可欠です。バックエンド開発では実行結果やテストを通じて即座にフィードバックを得られる一方、フロントエンド開発では独特の課題が存在します。本発表では、コーディングエージェントがフロントエンドコードを生成する際の「フィードバックループの問題」に焦点を当て、実践的な解決策とそのトレードオフについて議論します。

  3. KMC交流会 LT

    学生時代に熱中したことが、社会人の今も生きている話

    学生時代に麻雀に熱中した経験から得た「上達のスキーマ」が、社会人になってからのプログラミング学習にも通じるという話。書籍での体系的な学習、プラトーの乗り越え方、生涯学習の大切さについて紹介します。

  4. 技育CAMPアカデミア

    探求の技術 なぜ新しい技術を学び続けるのか

    急速に進化する技術の世界において、いかに効果的に新しい技術を探求し、その知見を価値あるアウトプットに変換していくかについて、実践的な方法論を共有します。毎週の技術ブログ執筆と年間300冊の読書から得た知見を基に、技術者として成長し続けるための具体的なテクニックをお伝えします。