はじめに こんにちは！iimonでエンジニアをしている〇〇です！ 「Webアプリに地図を出したい」と思ったとき、最初にこう悩みました。 「地図のライブラリ、種類が多すぎて、どれを使えばいいの？」 いろいろ試した結果、まずは Leaflet が一番おすすめだと感じました。無料で、APIキーもいらず、すぐに動かせるからです。 この記事では、 地図ライブラリにはどんな種類があるか なぜ Leaflet がおすすめなのか かんたんなコード（実際に動くデモつき） Google Maps・MapLibre などほかの選択肢 を、やさしくまとめます。 地図と聞くとむずかしそうですが、やることは大きく3ステッ…

はじめに こんにちは！iimonでエンジニアをしているつかちゃんです！ SQLという単語は入社してからずっと耳にしていました。でも自分が触ることはなく、なんとなく「データベースに問い合わせるやつ」くらいのイメージしか持っていませんでした。 今回、Redash経由でデータを集計する機会があり、初めてSQLを自分で書くことになりました。実際に書いて、エラーになって、直して、結果が返ってきたとき「あ、これがSQLか！」となりました。 使ったのはRedashから Athena に接続し、federated query という仕組みでデータを取得するというものでした。SQLの書き方でつまずいたポイントを…

こんにちは、エンジニアの須藤です。今回はAWSサミットに参加して、LLMアプリケーションでは評価が重要だという話があったので、LLM-as-a-Judgeについて整理してみることにしました。 実際のLLMアプリケーションの運用では、振る舞いがプロンプトの変更やモデルバージョンの変更で崩れたり、一度修正した内容が次のリリース時に壊れたり、仕様オーナーの判断が属人化してしまうということが起こり得ます。 判定にLLMを使ってみよう、と単純にjudgeを呼び出すだけでそれらが解決するわけではなく、どんな内容を、どんな単位で考え、人間の判断との一致を測るか、そして信頼性を維持しながらどこまで自動化してど…

■はじめに ■MCP とは ■環境 ■最小の MCP を作って動かす ◆1. プロジェクト作成 ◆2. サーバー本体 ◆3. ビルド ◆4. Claude Code に登録して動かす ■同じサーバーに GitHub ツールを足す ◆何を作るか ◆環境構築 ◆GitHub アクセス層（src/github.ts） ◆ツール登録（src/index.ts に追記） ◆認証（GITHUB_TOKEN） ◆動かす ■最後に ■はじめに こんにちは！ ｉｉｍｏｎでエンジニアをしています「しらみず」です。 最近、いろんなMCPを接続して触ってみているのですが、自作できることがわかったので自作してみました。…

はじめに Linterについて ESLintで見てみるLinterの基礎 TypeScriptのモダンなLinterたち まとめ さいごに 参考 はじめに こんにちは！ｉｉｍｏｎでエンジニアをしているひがです！ 先日TSKaigi 2026で登壇をしてきました！ https://2026.tskaigi.org/talks/7 今年のTSKaigiも勉強になる公演がたくさんあり、とても楽しかったです。 色々な公演を聴いている中で、「結構TypeScriptのLinterに関する話題も多いな〜」と思い、「そういえばあまりLinterについて調べたことがなかったな〜」と思ったので、今回記事にしてみ…

はじめに さまざまなExpoの主な意味合い Expo(フレームワーク・SDK) Expo Go(動作確認アプリ) EAS(Expo Application Services) (補足) ネイティブコードとは アプリの実行環境とビルド方法 実行環境 Expo Go Development Build(Dev Client) Production Build(スタンドアロンアプリ) ビルド方法に関して 再ビルドに関して Dev Clientは「ネイティブ」と「JavaScript」の二層でできている 自分自身がハマったポイント Expo Goでネイティブライブラリが動かない npx expo in…

こんにちは、木村です！最近Djangoに触れる機会がちょくちょくあるんですが、DB操作でいつもおっかなびっくりやっています。対応する時にそれなりに調べてはいるんですが、毎度微妙に自信が持てずにいます。 せっかく触る機会をもらったのだから初心者なりにDjangoでのマイグレーション操作について調べたことをまとめました。よろしくお願いします！ Django そもそもDjangoとは何か。Pythonで実装されたWEBアプリケーションフレームワークです。認証や管理画面、DB操作などのWeb開発で必要なものを揃えています。 特徴として挙げられるのは主に次の二つです。 MTV(Model/Templat…

前提知識としてのスコープ グローバルスコープ 関数スコープ ブロックスコープ レキシカルスコープ（字句スコープ） スコープチェーン クロージャ クロージャの実例 プライベート変数の定義 関数ファクトリーとしての使い方 注意点 まとめ 参考文献・記事 クロージャについて、その名称は知っているものの具体的な仕組みについてはよく分かっていなかったので、この機会に調べてみました。 前提知識としてのスコープ クロージャを理解するにあたっての前提知識として、基本ではありますが重要な概念であるスコープについて軽く触れていきます。 スコープとは、実行中のコードから参照できる変数や関数の範囲のことです。スコープ…

はじめに HTTP/1.1の何が遅かったのか Keep-Aliveで改善したが… 6本並列接続 HTTP/2の多重化とは何か HTTP/1.1との比較 フレームとは何か フレームの役割 主なフレームの種類 ストリームとは何か ストリームのイメージ フレームとストリームの関係 多重化の全体像 HTTP/2で解決されなかった問題 TCPレベルのHead-of-Line Blocking さいごに 参考文献 はじめに こんにちは、iimonエンジニアのみやこしです！ 先日、社内の勉強会でHTTPについて触れる機会がありました。正直これまであまり深く理解できていなかったので、これを機にしっかり調べてみ…

はじめに 画像圧縮の種類 可逆圧縮（Lossless） 非可逆圧縮（Lossy） AirDrop・LINE・Instagramで何が起きているか AirDrop LINE Instagram JPEG の圧縮の仕組み 1. ブロックへの分割 2. DCT 3. 量子化 なぜ再保存するたびに劣化するのか まとめ さいごに 参考 はじめに 友人に写真を送る時、LINE や インスタ だと画質悪いから、AirDropで送ってと言われたことがあります。写真の画質が落ちる仕組みについて気になったので調べてまとめました。 この記事では以下の内容を扱います。 AirDrop・LINE・Instagramで画…

最近、海底ケーブルに関する記事を目にしました。 海底ケーブルの名前自体は知っていたものの、 どのような仕組みで動いているのかはあまり理解していなかったため、この機会に調べてみることにしました。 今回、主に以下のような点について調査しました。 海底ケーブルは、どういう仕組みで動いているのか 衛星通信が海底ケーブルの代替となる可能性はあるのか 自分の日常のどの部分が海底ケーブルに支えられているのか AWSのようなクラウドサービスとの関係はどうなっているのか 国内サービスを利用する場合、多くの通信は国内の光ファイバー網だけで完結します。 一方で、海外のサービスや海外リージョン上のデータへアクセスする…

はじめに こんにちは。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よりあまり操作を…