はじめに こんにちは、保田です。本記事はiimonアドベントカレンダー25日目の記事となります。 試験的機能として開発されていた<Activity>コンポーネントが、2025年10月にリリースされたReact 19.2で正式に導入されました。 普段の業務で使えるものなのか気になったので、今回調べてみることにしました。 https://ja.react.dev/reference/react/Activity タブ切り替えで状態が消える問題 Reactでタブを切り替えるとき、よく使われるのが条件付きレンダリングです。 import { useState } from 'react'; const…

こんにちは。iimonでエンジニアをしているhayashiと申します。 普段は主に拡張機能を開発しております。 本記事はiimon Advent Calendar 2025 24日目の記事となります！ 今回はこれぞ拡張機能の真髄って個人的に思ったchrome.webRequest APIについて解説したいと思います！ chrome.webRequest APIとは chrome.webRequest APIとはChrome Extensions(拡張機能)で用意されているAPIです。 このAPIはトラフィックをモニタリングして分析し、送信中のリクエストを傍受、ブロック、変更することが出来るAP…

はじめに 不気味の谷 AIにおける不気味の谷 動画生成AI AIのハルシネーション 開発と不気味の谷の関係 不気味の谷を避ける配慮 さいごに 参考 はじめに 本記事はiimon Advent Calendar 2025 23日目の記事となります！ みなさまごきげんいかがでしょうか。 株式会社ｉｉｍｏｎでエンジニアをしているtakuです。 寒い日も多くなり冬らしくなってきましたね。 さて、今回はアドベントカレンダー23日目ということで、ずっと気になっていた"感覚"について少し掘り下げてみました。 最近ではAI活用が多くの領域で推進されており、弊社もまさに取り組んでいる真っ只中です。 私は小さい頃…

はじめに 本記事はiimonアドベントカレンダー22日目の記事となります。 こんにちは、kogureです。 あっという間に12月ですね、去年にアドベントカレンダーを書いたのが昨日のことのようです。 こうやってあっという間に歳をとっていくのですね。怖いですね。 今回はClaude Codeのサブエージェントをハンズオンで触ってみたいと思います。 というのもチームメンバーにAI関連の情報をマメにキャッチアップしている方がいてその方からサブエージェントというものがあるんだよっていう話を聞いて興味が湧いてきました。 ちょうどアドベントカレンダーの時期と被ったのでせっかく触ってみるならまとめてみようと思…

初めて0→1設計を任された人向けに、TypeScriptを例に「壊れにくく変更に強い設計」を解説。依存方向の整理、副作用の隔離、テストファースト、仕様変更に強い型設計など、品質とスピードを両立する最低限の設計ポイントを紹介する記事です。

この記事はiimon Advent Calendar 2025 20日目の記事となります！ はじめに 開発環境 完成したアプリ 開発の流れ 1. まずはシンプルなスケジュールアプリから @Stateと@Bindingの使い分け 2. カレンダーUIを自作 日付セルのデザイン 3. カテゴリをenumで管理 4. シートで入力画面を表示 5. 年別集計機能 6. TabViewで画面を分ける 今回躓いたポイント ✔︎Task という名前は避けた方がいい ✔︎Int型の入力フィールド 今後やりたいこと まとめ 最後に 参考 はじめに こんにちは！新卒エンジニアのつかちゃんです！今回は私の趣味を交え…

MutationObserverとは 処理ステップと実装方法 オプションの設定 childList subtree attributes attributeFilter MutationRecordのプロパティ 無限ループの罠 廃止されたMutationEvent まとめ 参考記事 こんにちは。 iimonアドベントカレンダー19日目の記事を担当させていただきます、株式会社ｉｉｍｏｎのねにーです。 ついこの間アドベントカレンダーを書いたばかりのような気もするのですが、 早いもので気がつけば今年ももう12月です。 今年は所属プロダクトが変わり、またAIのインパクトと恩恵を目の当たりにしたりと、浅…

こんにちは、木村です。 本記事はiimonアドベントカレンダー18日目の記事となります。 最近Claude Codeを使用し始めたんですが、AIって便利ですね！全肯定でAIを使うのは良くないとは思うのですが、できることが多くて試しきれないと思うこの頃です。 Claude Codeへの指示プロンプトを手探りで作っていたら先輩に「学習モード」なるものを教えてもらったので、気になって調べてみました。２年目でまだまだいろんな分野への理解が浅い自分ですが、これを利用して勉強をより効率的にできたらと思い手を動かしながら記事を書いたので、ちょっと気になる…という方のきっかけなどになれば幸いです。 outpu…

はじめに Docker イメージとは Node.js Docker公式イメージとは Node.js Dockerイメージの種類 node:<version> node:<version>-alpine node:<version>-slim 補足：Debianのコードネーム イメージサイズ イメージサイズが重要な理由 イメージサイズの確認 イメージサイズ一覧 ベースイメージの選び方 ポイント おわりに 参考 はじめに 株式会社ｉｉｍｏｎエンジニアのかとうです！ 本記事はｉｉｍｏｎアドベントカレンダー17日目の記事です！🎁 今まで主にフロント業務をしていましたが、最近はサーバーサイドやインフラ寄…

本記事はiimon Advent Calendar 2025 16日目の記事となります！ こんにちは、iimonでエンジニアをしている須藤です。 RISC-V（リスクファイブ）は「シンプルでエレガント」と言われますが、実感が湧いていなかったので、今回はx86との比較を通じて、シンプルさやその設計思想を体感していこうかと思います。 この記事でわかること x86とRISC-Vで同じCコードがどう違うアセンブリになるか RISC-Vが「シンプル」と言われる設計特徴 シンプルさがCPUパイプライン効率につながる仕組み 現代のx86がRISC的最適化を取り込んでいる理由 ※ 後半に発展的な内容（μOPs…

◼️ はじめに ◼️ Honoとは ◼️ Cloudflareとは ◼️ 今回作成するアプリのアーキテクチャに関して 各サービスの役割 ◼️ プロジェクト作成 Honoを使用するためのプロジェクト作成 各リソースを作成 型定義のインストール D1テーブル作成 ◼️ 実装 Bindings型定義 アクティビティ登録APIを作成 テストデータ登録 チャットAPI作成 セッション初期化 メッセージ送信 チャットUI ◼️ 動作確認 今後の改善箇所 ◼️ まとめ ■最後に ◼️ 参考 ◼️ はじめに 株式会社iimonでエンジニアをしている「あめちゃん」です！ 本記事はiimon Advent Cal…

こんにちは！ｉｉｍｏｎでエンジニアをしている、でっさんです。 本記事はiimon Advent Calendar 2025 14日目の記事となります！ 今年はダイエットに挑戦したものの、チートデイを設けすぎてリバウンドしてしまいました。 来年は、みなさんの助言を真摯に受け止めていこうと思っています。 さて、今年のアドベントカレンダーのテーマですが、 社内の雑談で「JavaScript だけで音を鳴らせるよ」という話を聞いたのがきっかけで、 JavaScriptのWeb Audio APIに興味を持ちました。 せっかくなので、ただ調べるだけではなく 実際に何かを演奏するところまで作ってみようと思…

はじめに 主要パーツの名称 ハードウェアとソフトウェアの違い 主要パーツの役割 トータルバランス ボトルネック現象とは？ ボトルネック回避のために 適切なバランスはどうやって調べればいいの？ まとめ 参考資料 はじめに こんにちは！株式会社iimonでエンジニアをしている新卒の今井です！ 本記事は iimonアドベントカレンダー13日目の記事です！ 眠れない夜は宇宙とか深海とか、未知なものについて考えるんですけど、ある晩ふとパソコンってなんで動くんだろうって考え始めていつの間にか入眠しました。 人の作ったものなら知識がなくても見当くらいはつくだろうと見積もっていましたがそんなことはなく...。…

はじめに AI-DLCとは なんの略称やねん AI-Driven Development Lifecycleの概念 開始( Inception )フェーズ 構築( Construction )フェーズ 運用( Operation )フェーズ スプリントでは遅い！？ボルトという単位 AI-DLC実践事例 そもそもこの記事を書こうと思った理由 事例1：CyberAgent社 - 既存フローへの統合 事例2：カカクコム社 - ワークショップで得た学び 開発効率1.x倍の壁 AIに対するマイクロマネジメント そろばんから電卓になっただけでは足りない！ 各フェーズの中でもステップごとに成果物を残す 設計…

はじめに 前提 EXPLAIN（実行計画)とは EXPLAINを使ってみる EXPLAIN の主なフィールドを見てみよーー インデックスありと無しのEXPLAINを比較してみた ▼ インデックス無しで検索した場合の EXPLAIN ▼ インデックスありで検索した場合の EXPLAIN カバリングインデックス実践編 カバリングインデックスとは ▼ idによるクラスター化インデックス ▼ nameによる非クラスタ化インデックス ▼ ルックアップが必要となる事例 ▼ 複合インデックスを検討してみる まとめ 参考 最後に はじめに 本記事はiimon Advent Calendar 2025 11日目…

■はじめに ■環境 ■React Routerのインストール ■基本的なルーティングの定義 ◆コンポーネント ■ネストルーティングの定義 ◆パスを完全指定した場合のルーティング ◆ネストルーティングと< Outlet >を使った共通レイアウトの維持 ■ルーティング定義の分割 ■URLパラメータの活用 ■クエリパラメータの活用 ■stateを使ったページ間のデータ受け渡し ■JavaScriptでのページ遷移 ■まとめ ■最後に ■はじめに こんにちは！ ｉｉｍｏｎでエンジニアをしています「しらみず」です。 本記事はiimon Advent Calendar 2025１０日目の記事となります！ …

こんにちは！iimonでCTOをしているもりごです。 本記事はiimon Advent Calendar 2025９日目の記事となります！ 最近ではClaude Code、Cursor、CodexなどAIコーディングエージェントを使用してコードを書くことが当たり前の様になっています。 こういったAIコーディングエージェントがどの様に動いているのか中身を知らずに使うよりも、仕組みを理解して使った方がうまく使えるのではないかという事で最小限の機能で実際に作ってみました。 今回コマンドラインツールを（個人的に）実装しやすいGo言語で作成してみました。 全体像 まず、AIコーディングエージェントを作る…

はじめに 本記事はiimon Advent Calendar 2025 8日目の記事となります。 SREチームに所属しています。hogeです。 普段はインフラまわりの業務が中心なのですが、時折プロダクト開発チームが進めているChrome拡張機能の開発を手伝うことがあります。 また、個人でも小さな拡張機能を作ることがあり、その中で開発体験をもっと良くしたいなと感じる場面が多くありました。 今回は、そんな思いからChrome拡張機能の自動リロード（ホットリロード）仕組みを自作してみたので、その内容を紹介します。 アドベントカレンダーに向けて作ったため、現時点では実プロジェクトにはまだ導入していませ…

はじめに 個人的にリファクタリングについて思うこと リファクタリングの原則 リファクタリングの定義 リファクタリングをする理由 リファクタリングはプログラミングを速める より詳しくリファクタする理由を考える リファクタリングの問題点 リファクタリングを行うタイミングについて 不可思議な名前 重複したコード 長い関数 ループ コメント まとめ 本のリンク はじめに 株式会社ｉｉｍｏｎアドベントカレンダー7日目担当「たっくー」です！！！ 会社ではフロントエンドを主に担当しています。 いやー、あっという間に12月ですね〜 年末といえばすることは一つですよね！！ そう、大掃除！！ 大掃除をしていたら積…

1. はじめに 2. なぜE2Eテストの自動化を検討しているのか 現状の課題 自動化で解決したいこと 3. E2Eテストツールの比較 Playwright Puppeteer Cypress Selenium 比較まとめ 4. Chrome拡張機能のE2Eテスト、ここが難しい 通常のWebアプリとの違い 拡張機能特有の課題 5. Playwrightで試してみた（そしてハマった） セットアップ 拡張機能を読み込む設定 そしてエラー... 気づき！！ 6. 今後の方針 直近でやること 将来的にやりたいこと 参考にしている情報 まとめ：自動化と手動テストのバランス 7. おわりに 1. はじめに …

はじめに v8の概略 JavaScriptの処理ってどうなっているの？ スタック領域とヒープ領域 コールスタック タスクキューとマイクロタスクキュー イベントループ v8で遊ぶ まとめ Appendix さいごに 参考 はじめに こんにちは！ 株式会社ｉｉｍｏｎでエンジニアをしている「ひが」です！ 本記事は iimonアドベントカレンダー5日目の記事です！ 先日TSKaigi Hokuriku 2025で登壇してきました。 （唐突にすみません、、） https://hokuriku.tskaigi.org/talks/18 人生初の登壇でめちゃくちゃ緊張しましたがなんとかやり切って一命を取りと…

はじめに プロンプトエンジニアリングとは LLMの仕組みをざっくり理解する LLMとは トークン化 次のトークンを予測する プロンプトの工夫が必要な理由 まとめ 参考資料 はじめに こんにちは！株式会社iimonでエンジニアをしている遠藤です。 本記事は iimonアドベントカレンダー4日目の記事です！ もう少しでクリスマス、そして年末が近づいてきましたね。 あっという間に新卒3年目も終わりを迎えそうで、時の流れの速さに驚いています。 速さといえば、近年の生成AIの進化の速さにも驚かされます。 昨年頃から業務でも生成AIを使う機会が増え、Claude や ChatGPT、GitHub Copi…

はじめに 株式会社iimonでフロントエンドを担当している新卒のクリスです。 この記事では、初心者でも10分で作れるシンプルな REST API を Node.js と Express を使って作る方法を紹介します。 「APIって何？」という人でも大丈夫です。 必要なコードはほんの数行で、すぐに動かすことができます。 1. まず以下のツールが必要です Node.js (v20 以上 推奨) npm (Node.js に付属) VSCode（任意） Postman または curl（動作確認用） 2. これから、プロジェクトの作成します。 以下のディレクトリを作成します： mkdir expre…

1. はじめに この記事で作るもの 対象読者・前提条件 2. 使用ツールの準備 Notion API Claude Code gh（GitHub CLI） 3. 【ハンズオン】Notion タスク → 実装自動化 完成イメージ Step 1: Notion API でタスク内容を取得 Step 2: Claude Code で実装コードを生成 Step 3: ブランチ作成 & コミット Step 4: シェルスクリプトにまとめる 4. まとめ 今回学んだこと 発展的な活用アイデア 5. おわりに 1. はじめに こんにちは！ご紹介に預かりました、iimonでフロントエンドエンジニアをしている「…

はじめに 大学入学編 なぜ大学に入学したのか 基礎を体系的に学びたい 海外への移住 大学選び 主な通信大学 大学通学編 メリット 知識の引き出し 学習習慣 デメリット 単位を取らねば 他の勉強に制限がかかる これから社会人大学生になろうと考えているあなたへ 単位認定を狙う 勉強スケジュールを立てる 試験日・課題提出期限を把握して予定を立てる 文明の利器を活用 おわりに はじめに こんにちは！iimonでフロントエンドエンジニアをしている「みよちゃん」です！なんと、アドベントカレンダー初日に選ばれるという栄誉にあやかることになりました！本当は選ばれたのではなく、カレンダー記入が遅く初日しか残って…

こんにちは！木村です！ 普段Reactを使用して開発をしているのですが、データの通信の扱いがなかなか難しいなと感じるこの頃です。そんな中で、なんだかちらちらと話に聞くReactServerComponentってどんな感じなんだろう。。。となったので、実際に触ってみました！今回はその際に学んだこと等をまとめました！よろしくお願いいたします！ CSR（クライアントサイドレンダリング） 通常Reactでは、CSRの方法でレンダリングされます。一応復習しました。 大体の流れで言えば、 サーバからHTMLの取得 JavaScriptの実行→コンポーネントを実行。 仮想DOMを作成 DOM（ブラウザ表示）…

はじめに こんにちは。iimonでエンジニアをしている保田です。 本日は、Web標準技術であるStreams APIについて、その基本と実装サンプルまでを解説します。TypeScriptを用いた具体的なコード例を交えながら、Streams APIがなぜ必要で、どのように活用すべきかを理解していきたいと思います。 Streams API とは まず、Streams APIとは何かを説明します。 Streams APIは、データの流れ（ストリーム）を効率的に処理するためのWeb標準技術です。 従来のアプローチでは、大容量のデータの場合、 全データが揃うまで待ってから処理を開始していました。 一方、…

FARM スタックとは？ こんにちは。クリスと申します。 私はジュニアエンジニアとして、さまざまな技術にいつも興味があり、その概念をできるだけ理解しようとしています。最近はフルスタックエンジニアを目指して勉強しているのですが、その中で、複数の技術やツールを組み合わせてフルスタックアプリケーションを構築しながら、開発の一連の流れを理解するのに役立つ技術に出会いました FARM スタックとは、以下の3つの強力な技術を組み合わせた、現代的な Web アプリケーション開発スタックです。 F: FastAPI（バックエンド） R: React（フロントエンド） M: MongoDB（データベース） これ…

はじめに こんにちは、木暮です。 最近、気温が一気に落ちてきてかなり過ごし易くなりましたね！ tech.iimon.co.jp 前回はコードレビューの目的やコードレビューを円滑に進めるためのルールの作り方について復習しました。 www.manning.com 今回はコードレビューが効果的ではなくなってしまうパターンをそれぞれ紹介し、なぜ良くないのか、ではどのように対応をすればよいのか深掘りをしていきます。 中には前回触れた内容とリンクするものもあるかと思います。 大量の変更があるプルリク Upon reaching the pull request (PR), you find 32 file…

みなさまこんにちは。たくしです。 最近は一段と冷えてきましたね〜！私はこの季節が一年で一番元気な時期です。（冬最高！） そして来月にはアドベントカレンダーも！皆さんが何を書くのか楽しみです！✨ ※（追記）記事内でGoogle Cloud Platformと書いてありますが、Google Cloudへの名称変更がされています！すっかり忘れていてそのまま書いてしまいましたが、略称GCPの方がわかりやすかったのでそのままにしました🙇 はじめに さて、今回は備忘録的なブログです。 最近は主にFirebaseを使用したプロダクトの開発をしているのですが、 あまりFirebaseが何に適しているのか、Go…