はじめに こんにちは。iimonでエンジニアをしている保田です。 最近Generative UIというキーワードを見かけることが増え、気になって調べてみました。 AIチャットの応答がテキストだけでなく、カードやフォームなどのUIで返ってくることもよく見かけるようになりました。 これを実現する仕組みの一つが、Googleが公開したA2UI（Agent to UI）プロトコルです。 この記事ではGenerative UIの実装パターンを整理したうえで、A2UIの仕組みを解説し、公式デモを動かしながら実際の通信内容を確認していきたいと思います。 今回はA2UIの概要とプロトコルの仕組みに焦点を当てて…

1. はじめに 2. 前回の記事のおさらい 3. ツールを選んだ後に気づいたこと 「何をテストするか」が決まっていなかった 方針がないまま自動化するリスク 4. 方針設計、どこまで考えられるか 各層に何を書くかの判断基準 自動化できるもの・できないものの線引き 実際に進める順番 5. 今後の方針 直近でやること 将来的にやりたいこと まとめ：自動化と手動テストのバランス 6. おわりに 1. はじめに こんにちは！iimonでフロントエンドエンジニアをしている「奥島」です！ 前回の記事では、テスト自動化に向けてどのツールを使うかを調べました。 Playwright・Puppeteer・Cypr…

1. はじめに どうも、エンジニア＆デザインを担当しているタクシです。 最近、デザイナーとの協業の仕組みを整えまして、手始めにデザインレビューを導入することにしました。 今はAI時代！GeminiやClaudeを使ったりもしつつ、、ではありますが、そもそもレビューに参加する経験自体がまだ浅いです。そのため、やり方を試行錯誤しつつ、毎回新しい発見があります。 一方で、自分自身がデザインを手がける場面では、ここしばらく「実装に入ってから気づくこと」が積み重なってきていました。 そろそろ、自分の中で観点を一度整理しておきたい。これからレビューに参加する機会も増えていくはずなので、その前提となる土台を…

はじめに こんにちは。kogureです。最近暑くなってきて冬が恋しいです。断然冬派です。 社内でプロダクトの改善に取り組む中で、DI（Dependency Injection）を取り入れるようになりました。 ここでTypeScriptでDIコンテナライブラリって何があるんだろう？と疑問が湧きました。そこでどういったライブラリが存在するのか調べて入門してみました。 何個かライブラリは見つかったのですが、今回はその中からtsyringeを取り上げてみたいと思います。理由としてはMicrosoftが作っているライブラリなので、単純にネームバリューで選びました。PCでゲームする際はWindowsにお世…

こんにちは！iimonでエンジニアをしている なかむ です。 普段は主に「入力速いもん」の拡張機能を開発しています！ 今日は 「Claude Code Routinesで技術負債の修正をどこまでAIに任せられるか」 という検証について、現時点での計画とこれから何を試すかを共有します。 検証環境（2026年5月時点） Model: Claude Opus 4.7 Plan: Claude Pro Plan なぜこのテーマを選んだか 背景1：技術負債をNotion → GitHub Issueに移行した話 最近、Notionで管理していた技術負債リストをGitHub Issueに移行しました。 自…

こんにちは。iimonでエンジニアをしているhayashiと申します。 普段は主に拡張機能を開発しております。 最近スプレッドシートを弄ることがちょいちょい出てきて、 GASで遊んでみたので、その内容を纏めました。 Google Apps Scriptとは Google Apps Script (GAS) は、モダンなJavaScriptでGoogle Workspaceと統合するビジネスアプリケーションを素早く構築できるクラウド実行プラットフォームです。 主な特徴: ローカル環境のセットアップが不要（ブラウザのみで開発可能） スクリプトはGoogleのサーバ上で実行され、コードはGoogle…

こんにちは、iimonでエンジニアをしている須藤です。 最近、アプリケーションでLLMを利用していて、JSON出力がどの程度安定しているのか気になっていました。 また、ClaudeやOpenAIが「100%のスキーマ準拠」を謳っていて、その裏側の仕組みも面白そうだったので、今回調べてみることにしました。 特にデコーディングの段階でどのように制約をかけるか、そしてその仕組みがどう最適化されているかを中心に見ていきます。 ※ 本記事で主に扱うのは「文法的に正しい JSON をどう保証するか」です。型や minimum, pattern, format などの意味制約は本記事では触れません。 LLM…

1. はじめに 2. npmサプライチェーン攻撃の系譜 2-1. サプライチェーン攻撃とは 2-2. 代表的な攻撃手法 悪意あるパッケージの新規公開 タイポスクワッティング ディペンデンシーコンフュージョン 既存パッケージの改ざん 2-3. 取り込まれた後の動作 2-4. 起こり得る被害 3. スロップスクワッティングとは 4. 日頃の対策 4-1. インストール前にパッケージ情報を確認する 4-2. ライフサイクルスクリプトの実行を無効化する 4-3. すぐに新しいバージョンにアップグレードしない 4-4. lockfile とバージョン固定 4-5. 継続的に依存関係を監視する 4-6. …

はじめに こんなときありません？？ Claude Cowork Dispatch 準備するもの 設定 Claudeがアプリを操作する優先順位 実際にClaude Cowork Dispatch使ってみる ①ローカルマシンで開発中のプロダクトをスマホから確認する ②ローカルマシンで開発中のプロダクトをスマホから操作してみる ③ローカルマシンで開発中のプロダクトをスマホから少し複雑な操作してみる ④ローカルマシンで開発中のプロダクトをスマホからログインしてみる ⑤PCのデスクトップアプリを操作してみる 終わりに 最後に 参考 はじめに 株式会社ｉｉｍｏｎでエンジニアをしているさいとーです！ 最近、…

■はじめに ■環境 ■Orvalとは何か ■Orvalを使うと何が変わるか ◆手書きの場合 ◆Orvalを使う場合 ■ハンズオン ◆今回作るもの ◆ディレクトリ構成を作る ◆バックエンドのセットアップ ◆Djangoプロジェクトを作成する ◆モデルを定義する ◆スキーマを ModelSchema で定義する ◆APIを定義する ◆動作確認とスキーマのファイル出力 ◆フロントエンドのセットアップ ◆Orvalの設定ファイルを書く ◆モデルのフィールド変更に追従する ■まとめ ■はじめに こんにちは！ ｉｉｍｏｎでエンジニアをしています「しらみず」です。 現在、新規サービス開発をする中で、フロント…

はじめに Branded Types Effect TS まとめ さいごに 参考 はじめに こんにちは！ｉｉｍｏｎでエンジニアをしているひがです。 最近AIでソースコード生成を利用する場面も当たり前になってきましたが、その中でどんなコードを書くとAIはどんな反応をするのだろう？？という疑問がふつふつと湧いてきまして、いてもたってもいられなくなってきました。 ということで、今回はTypeScriptの書き方でAIにどのような影響があるかを簡単に見ていこうと思います！とはいえ TypeScript の型システムはとても奥が深く、細かい内容を見ていくととても膨大になってしまうため、今回は Brand…

はじめに そもそもReact Hooksってなに？ useState - 状態を管理する 概要 基本的な使い方 コード例 よくある使い方いろいろ 注意点 useEffect - 副作用を実行する 概要 基本的な使い方 依存配列のパターン コード例 APIからデータを取得する クリーンアップが必要な例 注意点 useContext - コンポーネント間でデータを共有する 概要 propsのバケツリレー問題 コード例 注意点 Hooks一覧まとめ まとめ 参考文献 はじめに こんにちは！株式会社ｉｉｍｏｎエンジニアのクリスチャンです！ 最近、暖かくなってきてアイスコーヒーが美味しい季節になってきま…

はじめに Claude Code on the Webとは 使い方 基本的なセットアップ 1. claude.ai/code にアクセス 2. GitHubアカウントを接続 3. クラウド環境の設定 4. リポジトリを選んでタスクを入力 メリット・デメリット メリット ローカル環境が完全に不要 ウェブとターミナル間でタスクを移動 Teleport でローカルに引き継げる 権限承認が不要 デメリット ローカルのリソース(資源)が使えない ブランチ名を自由に設定できない(claude/始まりになる) 編集者がClaudeになる クラウド環境のスペックが非公開 今後の期待 セッション途中での環境・ブ…

はじめに カリー化とは 部分適用 再利用性の向上 ルールと処理の分離 関数合成について カリー化と関数型言語 純粋関数と参照透過性 純粋関数型言語であるHaskell まとめ 参考文献・記事 はじめに こんにちは。ｉｉｍｏｎでエンジニアをしている金庭です。 今回は、複数の引数を取る関数を、単一引数をとる関数の連続呼び出しに置き換えるという、カリー化について調べたのでご紹介します。 カリー化とは カリー化(Currying)とは、一言でまとめてしまえば複数の引数をとる関数を、単一引数をとる関数の連続呼び出しに変形させることです。はい、前段で述べたことの全くの繰り返しになってしまいましたが、これが…

普段お店などで決済する時に使用しているQR決済が、 どういう仕組みで動いているのか気になり今回調べてみることにしました。 CPMやMPMといった方式の違い、サーバーとの通信、オフラインの仕組みなど、色々と発見がありました。 また同じ決済でも、Suicaは改札で一瞬で処理が終わっていて、 こんなに処理速度が違うのはなぜなのかというのも気になり 今回は両方の仕組みを比較して、どのような設計の違いがあるのかをまとめてみました。 1. QR決済の仕組み 基本構造 QRコード決済は、インターネット経由でサーバーと通信する ことを前提とした決済方式です。 残高情報や決済履歴はすべてサーバー側で管理されてい…

はじめに こんにちは、保田です。 普段の業務ではClaude Codeを活用した開発を行っています。 AIコーディングによってコードの生成スピードは上がる一方で、不要なコードの蓄積を防ぐことが重要になっていると感じています。 使われなくなった関数やexportされたままの型定義、package.jsonに残った未使用の依存関係など、動作には影響しないものの放置するとコードベースが徐々に肥大化していってしまいます。 こうした不要コードをプロジェクト全体から検出・削除したいと思い、今回はKnipを試してみたので、その機能と使い方を紹介します。 https://knip.dev/ 不要コードが蓄積す…

こんにちは、木村です。（非常に遅ればせながら）本年もよろしくお願いいたします。 さて、入社してから２年が経とうとしています。よりスキルアップしていきたいなと思うこの頃ですが、勉強の一つとして技術書を幅広く読みたいなーと思う一方、なかなか時間がとれなかったり集中できなかったり… そんななか、私は技術書にかかわらず本を読むのによく Kindle を使用します。本を嵩張らず持ち運べるっていうのはいいですよね。最近購入した本は PDF 形式だったため、直接 Kindle に入れて読むことができたのですが、ふと「Kindle で読む通常の本ってなんで文字の大きさが変更できるの？」と思いました。 PDF …

はじめに 使用技術 React Scanとは React Scanの導入 React Scan使ってみる React Scanの分析 分析結果から改善 JavaScript/React Hooks AntdIconの改善 その他のAntdのコンポーネントの改善 改善結果 useCallback + React.memoでチェックボックスの改善 改善結果 子コンポーネントのメモ化 改善結果 最後に はじめに こんにちは、ｉｉｍｏｎエンジニアのみやこしです！今回は、Reactアプリのパフォーマンス改善に役立つツール React Scan を使って、実際の業務で発生したテーブルリストで「チェックボッ…

こんにちは、kogureです。 勉強会のお題を考えているときにEMから今、巷で流行っているJujutsuどう？とお勧めされたので触ってみました！ そもそもJujutsuってなんなんでしょうか？ 公式のreadme> Introductionを確認してみましょう github.com Git互換の新しいVCSで既存のGitツールやGitHub等とそのまま連携可能 作業コピーへの変更が自動的にコミットとして記録される 操作ログと元に戻し機能：すべての操作が記録され、ミスを簡単に取り消せる etc... 原文が英語なので翻訳しながら確認したのでわかっていない部分もありますが、 Gitよりあまり操作を…

皆様ごきげんよう。タクシです。 最近、花粉症をこの世から消す方法と同じぐらい私はフォントについて調べています。 開いたWebサイトがどのフォントを使っているかをデベロッパーツールで確認するのが習慣です。1人でフォント当てクイズをしたりもします。（サイズとかウェイトとか当たるとなんか嬉しい） 当たり前ですがフォントってたくさんあるんです。漠然とフォントに想いを馳せていたら気になって寝不足気味になってきた気がするのでフォントの始まりから調べてみました。 フォントとは？ もともとフォントは「同じサイズ・同じスタイルの文字のセット」を指す言葉でした。活版印刷の時代には、たとえば「Garamond の …

はじめに アクティビティモニタとは 確認できること プロセスとは CPUタブ プロセス一覧 グラフの表示 メモリタブ メモリの全体像 グラフの表示 各項目の意味 メモリプレッシャーグラフ スワップ使用領域 エネルギータブ プロセス一覧の主な列 ウィンドウ下部の表示 まとめ おわりに 参考資料 はじめに 株式会社ｉｉｍｏｎエンジニアのかとうです！ Macのファンがうるさくなったり、動きが遅くなったり固まったりしたときに、私はまずアクティビティモニタを確認します💧 不要なプロセスの終了にしか使用したことがなかったので、他にもどのように使えるか調べてみました。 本記事では、アクティビティモニタのCP…

導入 こんにちは！iimonで「入力速いもん」の開発を担当しているなかむ〜です！ 弊社のメイン製品である「入力速いもん」は、リリースから時間が経っていることもあり、現在はレガシーな設計から「新しく保守しやすい設計」への移行を絶賛進めている最中です。 移行後の新しい設計を見て「すごくいいな！」と直感的に感動したのですが、一方で「自分は何をもって『良い設計』だと判断しているのか？」がいまいち言語化できていないことにも気づきました。 そこで今回は、良い設計・悪い設計を自分なりに整理し、言語化する良い機会だと思いこのテーマを選びました。 「こう書くと破綻する」というパターンを知ることで、日々のコードレ…

こんにちは。iimonでエンジニアをしているhayashiと申します。 普段は主に拡張機能を開発しております。 今回はジェネリクスについて何となく分かったつもりではいたけれど、 忘れがちという事に気付きまして、ちゃんとアウトプットしてみようと思います。 ジェネリクスとは ジェネリクスは関数やクラスを、ジェネリクスは「型を引数として受け取る」仕組みのことです。 なぜジェネリクスが必要なのか 例えば以下のような配列の一番最初の要素を返す関数があります。 想定としては、配列が何の型の配列であれ0番目を返したいだけとします。 この関数は現状、宣言したnumberしか扱えません。 なので以下のようにst…

目次 1. はじめに 2. PlaywrightとPuppeteerの関係性 3. Chrome拡張のテスト観点での技術比較 4. 公式ドキュメント・情報量の比較 5. CI/CDへの組み込みやすさ 6. 結論：どちらを選ぶか 7. おわりに 1. はじめに こんにちは！iimonでフロントエンドエンジニアをしている「奥島」です！ Chrome拡張機能のE2Eテスト自動化を調べていると、ツール選定で必ず出てくるのが PlaywrightとPuppeteer の2択が多い印象です。 「Playwright or Puppeteer(パペティア)」の比較記事は世の中にたくさんありますが、一般的なW…

はじめに Chromeのアーキテクチャはマルチプロセス？！！ マルチプロセスを採用することの意味 マルチプロセスを採用することの課題とその対応 まとめ さいごに はじめに こんにちは！ｉｉｍｏｎでエンジニアをしているひがです！ 先日アドベントカレンダー2025でV8 JavaScript engineに関する記事を投稿させてもらいました！ https://tech.iimon.co.jp/entry/2025/12/05 （月日の流れがめちゃくちゃ早く感じます、投稿からもう2ヶ月経ちます、、1月もあっという間に過ぎ去ってしまいました） 上記の記事でも説明していますが、V8 JavaScript…

1. はじめに こんにちは！株式会社iimonでエンジニアをしている「みよちゃん」です！ いや〜来てますねAIの波。開発現場でもAIは「あると便利なもの」から「ないと困るもの」に変化しつつありますよね。この記事もAIに添削してもらいながら執筆しています。 弊社でも、AIを活用するための試行錯誤を日々行なっています。全エンジニアにClaude CodeのMax Planを配布しており、日々活用法を共有し、開発効率の向上を目指しています！ AIを使った開発手法が主流になる中、最近注目を集めているのがSpec-Driven Development(仕様駆動開発 / SDD)という手法です。 私は、最…

はじめに 前提: Content ScriptとService Workerの違い 公式ドキュメントに基づくセキュリティ対策 Content Scriptの信頼性が低い理由 1. Content ScriptがアクセスするDOMの信頼性が低い 2. Webページと同じレンダラプロセスで実行される 対策 1. Content Scriptからのメッセージは検証しサニタイズする 脆弱な実装例 安全な実装例 補足: 外部との通信（externally_connectable） 2. Content Scriptから実行可能なアクションの範囲を制限する 脆弱な実装例 安全な実装例 3. 機密情報はCo…

はじめに 基礎パーツ作成 タプルのlengthで数値を取得 タプルを生成するユーティリティ タプルの結合 足し算の実装 引き算の実装 注意点 再帰の深さ 整数限定 チューリング完全について 応用編 掛け算 比較 まとめ 最後に 参考 はじめに こんにちは！株式会社iimonでフロントエンジニアをしているあめくです！ iimonではフロントエンドにTypeScriptを採用しており、型を用いた開発を行ってます。 私自身、以前はPHPを使っていたこともあり、最初は「型...扱うのが大変そうだな...」と思っていました。 しかし最近はClaudeを使って開発していると、いい感じに型を設定してくれて「…

こんにちは！iimonでフロントエンドを担当しております、まつむらです！ 私たちのチームでは開発中のプロダクトにおいてテストコードが不足していたため、カバレッジを指標としてテストを増やす取り組みを行っていました。 もちろんカバレッジを上げることが本質的なテスト品質が向上するわけではない事は理解していましたが、テストの量が不足していたためこの様なカバレッジをみんなで意識して増やそうという取り組みを行っていました。 最初はGoogleが提唱するテストカバレッジの指標（60%/75%/90%）を参考に、まず60%を目指してLines Coverageを伸ばすことに集中していました。 ただ、60%が見…

1. はじめに 2. 6章 リファクタリングはじめの一歩 パラメータオブジェクトの導入 3. 7章 カプセル化 レコードのカプセル化 4. 8章 特性の移動 5. 9章 データの再編成 6. 10章 条件記述の単純化 7. 11章 APIのリファクタリング コマンドにおける関数の置き換え 8. 12章 継承の取り扱い メソッド、フィールド、コンストラクタの引き上げ メソッド、フィールドの押し下げ スーパークラスの抽出 サブクラスの削除 9. まとめ 参考記事 本のリンク 1. はじめに 株式会社ｉｉｍｏｎでエンジニアをしている齋藤です。 以前、「リファクタリング（第2版）既存のコードを安全に改…