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

はじめに 株式会社ｉｉｍｏｎエンジニアのかとうです！ Macのファンがうるさくなったり、動きが遅くなったり固まったりしたときに、私はまずアクティビティモニタを確認します💧 不要なプロセスの終了にしか使用したことがなかったので、他にもどのように使えるか調べてみました。 本記事では、アクティビティモニタのCPU・メモリ・エネルギータブに表示される項目の意味と見方について解説します☘️ アクティビティモニタとは macOSには アクティビティモニタ というシステムモニタリングツールが最初から入っていて、Macで実行しているプログラム（プロセス）が使用しているメモリの容量やCPU時間などを知ることがで…

導入 こんにちは！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版）既存のコードを安全に改…

はじめに みなさま、本年もよろしくお願いいたします。 現在のMySQLは本番環境でもカラム追加も懸念すべきことも少なくなり、ALTER TABLE ... ADD COLUMN を実行すれば、テーブルのサイズやレコード数に関係なく一瞬で完了するようになりました。 以前は本番環境でカラムを1つ追加するだけなのに、数時間掛かることもあったため メンテナンス画面（サービス停止）にして対応することもありました。 この記事では、MySQLのDDL（スキーマ変更）の技術の進歩を、MySQL5.5系から現在までまとめてみようと思います ※ この記事ではInnoDBを前提としています。 ※ Amazon Au…

■はじめに ■認証とは？ ■JWT認証とは ■セッション認証方式 ◆処理フロー ◆セッション認証方式の課題点 ■JWTの構造 ■HMAC（Hash-based Message Authentication Code）とは ■アクセストークンとリフレッシュトークン ■JWTを使った認証フローを確認してみる ■悪者がJWTを盗んで偽造した場合に検知される仕組み ■まとめ ■参考記事 ■はじめに 株式会社iimonでエンジニアをしている「白水（しらみず）」です。 みなさま、明けましておめでとうございます。 本年もよろしくお願いいたします。 新規サービスの開発にあたり認証周りをどうするか考えていたので…

はじめに こんにちは、保田です。本記事は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コーディングエージェントを作る…