はてなブックマーク

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

はじめに AI-DLCとは なんの略称やねん AI-Driven Development Lifecycleの概念 開始( Inception )フェーズ 構築( Construction )フェーズ 運用( Operation )フェーズ スプリントでは遅い！？ボルトという単位 AI-DLC実践事例 そもそもこの記事を書こうと思った理由 事例1：CyberAgent社 - 既存フローへの統合 事例2：カカクコム社 - ワークショップで得た学び 開発効率1.x倍の壁 AIに対するマイクロマネジメント そろばんから電卓になっただけでは足りない！ 各フェーズの中でもステップごとに成果物を残す 設計手法に依存しない汎用性 他の事例 うちのコードベース、AIに説明できる状態ですか？ 弊チームの現状 [Keep]できていること [Problem]現状の課題 [Try]これからやること まとめ おまけ

はじめに 前提 EXPLAIN（実行計画)とは EXPLAINを使ってみる EXPLAIN の主なフィールドを見てみよーー インデックスありと無しのEXPLAINを比較してみた ▼ インデックス無しで検索した場合の EXPLAIN ▼ インデックスありで検索した場合の EXPLAIN カバリングインデックス実践編 カバリングインデックスとは ▼ idによるクラスター化インデックス ▼ nameによる非クラスタ化インデックス ▼ ルックアップが必要となる事例 ▼ 複合インデックスを検討してみる まとめ 参考 最後に はじめに 本記事はiimon Advent Calendar 2025 11日目の記事となります。 こんにちは、ｉｉｍｏｎエンジニアのmariです！最近、業務の中で 既存の SQL を見直す機会 が増えてきました。 その中で、 「これ、もっとパフォーマンス良くできるんじゃないかな

■はじめに ■環境 ■React Routerのインストール ■基本的なルーティングの定義 ◆コンポーネント ■ネストルーティングの定義 ◆パスを完全指定した場合のルーティング ◆ネストルーティングと< Outlet >を使った共通レイアウトの維持 ■ルーティング定義の分割 ■URLパラメータの活用 ■クエリパラメータの活用 ■stateを使ったページ間のデータ受け渡し ■JavaScriptでのページ遷移 ■まとめ ■最後に ■はじめに こんにちは！ ｉｉｍｏｎでエンジニアをしています「しらみず」です。 本記事はiimon Advent Calendar 2025１０日目の記事となります！ ｉｉｍｏｎに入社して早３年経ち、時の流れが早いなーと感じています。 最近、弊社で提供しているWebサービスをVue2→Reactへリプレースするプロジェクトが進行しているのですが、レビュアーをしている

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

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

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

1. はじめに 2. なぜE2Eテストの自動化を検討しているのか 現状の課題 自動化で解決したいこと 3. E2Eテストツールの比較 Playwright Puppeteer Cypress Selenium 比較まとめ 4. Chrome拡張機能のE2Eテスト、ここが難しい 通常のWebアプリとの違い 拡張機能特有の課題 5. Playwrightで試してみた（そしてハマった） セットアップ 拡張機能を読み込む設定 そしてエラー... 気づき！！ 6. 今後の方針 直近でやること 将来的にやりたいこと 参考にしている情報 まとめ：自動化と手動テストのバランス 7. おわりに 1. はじめに こんにちは！iimonでフロントエンドエンジニアをしている「奥島」です！ なんと、アドベントカレンダー6日目という大役を任されました！光栄です！ ...と言いたいところですが、実は体調不良でカレンダー

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

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

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

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でフロントエンドエンジニアをしている「みよちゃん」です！なんと、アドベントカレンダー初日に選ばれるという栄誉にあやかることになりました！本当は選ばれたのではなく、カレンダー記入が遅く初日しか残ってなかっただけです。。 唐突ではありますが、ここ2-3年は私にとってかなり激動の期間でした。人生におけるターニングポイントがこれでもかというほどにある、非常に濃密な期間を過ごすことになりました。 異業種

はじめに そもそもPythonの型ヒントとは何か なぜ型チェッカが必要なのか mypy Pyre Pyright Pytype まとめ 参考文献 はじめに こんにちは！ 株式会社iimonでエンジニアをしている遠藤です。 以前「ロバストPython 型チェックを効果的に導入するための考え方」という記事を書かせていただきました。この時に知った「Pytype」というツールについて気になっていたので、今回は、型チェッカを自分なりにまとめてみることにしました。 ここでは、以下の型チェッカについて取り上げます。 mypy Pyre Pyright Pytype そもそもPythonの型ヒントとは何か Pythonの型ヒントは、変数、クラス属性、関数のパラメータや返り値がどのデータ型を期待するかを明確にするためのものです。 Pythonは動的型付け言語なので強制はされませんが、オプションで以下のように

こんにちは！iimonでCTOをしているもりごです。 本記事はiimon Advent Calendar 2024最終日の記事となります！ 今年はふるさと納税で沖縄に沢山寄付をしたので、沖縄の名産品を食べるのが毎日の楽しみとなっています。 今回、フロントエンド・サーバーサイド・エッジコンピューティングの3つの環境でWASM（WebAssembly）を活用し、同じ処理を別の環境で動かす方法を試してみました。複数の環境で共通の処理を使う事ができれば、同じコードを複数の環境に記述する必要がなくなり、管理の煩雑さを軽減できると考えて試してみました。 例えばフォームのバリデーションのように、フロントエンドとサーバーサイドの両方で同じ処理が必要になるケースはよくあると思っています。弊社は不動産領域を扱っており、住所関連の処理で色々な場所で同じ処理が必要になることが多々ありました。これまでは、なるべく１

こんにちは！株式会社iimonでフロントエンジニアをしているおくしまです！ 本記事はアドベントカレンダー24日目の記事となります！ ■はじめに Bunのアイコンが可愛くて興味を持ち、調べてみたところ、処理速度が速いとのこと。ますます気になってきました！ なのでBunしていきます！ ■Bunについて BunはJavaScriptの実行環境で、Node.jsなどに似た役割を持つものです 現在、この JavaScript実行環境には、いくつかの種類がありますが、ここに新しく加わったのが「Bun」です。 ブラウザ環境：Google Chrome、Safariなど サーバーサイド環境:Node.js:、Deno、そしてBunです！ ■Bun には「便利な機能が沢山含まれています！」代表的な機能としては、以下のようなものがあります！！ 1.パッケージマネージャー Bun は npm, yarn, pn

よろしくお願いします！エンジニアのideです。 こちらはアドベントカレンダー23日目の記事になります！ 今年は体のあちこちに痛みを感じることが多かったので、来年こそは健康に過ごせる一年になるといいなと願っています。 さて、今回は今年やってきたことを振り返るのもいい機会だなと思い、特に触れる機会が多かったJavaScriptについてまとめてみることにしました。 結果的に基本的な内容が中心となりましたが、改めて理解を深める良いきっかけになったので、これはこれでよしとしています！ それではよろしくお願いいたします！ [目次] テンプレート文字列 スプレッド構文 分割代入 プロパティ名の短縮記法 オプショナルチェーン nullish(??)とfalsy(||)チェック ディープコピー アロー関数 Promise async/await forEachの中でasync/awaitが効かない おわりに

みなさまHappy December! どうでもいい話ですが、私は12月が1年の中で1番好きな月です。 街の雰囲気とか、冬らしさが出てきて「雪降らないかな〜」と勝手にワクワクする感じがなんともいえないのです！（先日ちょこっと降ったらしいのですが見逃しました。。ｷｨｨｨ） 文化等により様々な祝い方が存在するこの時期ですが、私個人的にはクリスマスカードを送り合う文化はなんとも素敵だなぁと思います。日本でいうところの年賀状のような感覚でしょうか。 少しだけ調べてみたのですが、初めてクリスマスカードが送られたのは1843年のロンドンだそうです。（ほぅ〜） そんなクリスマスカードも時代とともに発展し、今ではデジタルで作成しプリントされたものを送ったりなど作り方は様々。 私にも毎年送ってくれるお友達家族がいるのですが、自分がぼーっとしてるせいで時期がずれたり、送りそびれたり、、（毎年ありがとう。そして

はじめに まずは戦う相手を見定めよう 戦術はいかに まずは関数を知る しゅ、しゅ、出力がないだってぇ！？ 型＝値の集合とはなんぞや？ まとめ おわりに 参考 はじめに 本記事はｉｉｍｏｎ Advent Calendar 2024　21日目の記事となります！ こんにちは！DDDとTDDには熱心だけど、推し活はDD（誰でも大好き）ではなく、とことん一途なエンジニアマネージャー、まつだです。 本日12月21日は私の誕生日ということで、なんと101101歳になってしまいました！（この手のやつ、16進数にしてるのはよく見るけど、2進数は斬新やな⋯） ちょっとでも誕生日を祝ってくれる気持ちのある方は、ぜひ↓のボタンをぽちっとしてブックマークでもしてやってください（笑） 今回は、私もさらに歳を重ねて型にはまった人間にならねば、ということで、「関数型ドメインモデリング」という本を読んで学んだことを普段の業

こんにちは！株式会社ｉｉｍｏｎでエンジニアをしている、Javascript勉強中の「まるお」です。 本記事はアドベントカレンダー20日目の記事になります！ 📚 本記事の内容 filter・Set・Mapを使った重複削除の方法 オブジェクト配列の重複削除の実装方法 パフォーマンス比較と便利なライブラリの紹介 📚 本記事の内容 はじめに 🔍 1. 重複削除したい！配列メソッドの課題… 🚀 filter() と indexOf() を使った重複削除 ❗️ 問題点 🛠 2. Set による重複削除 ✅ Setの特徴 ✨ シンプルな重複削除の例 ⚠️ 注意点: オブジェクトや配列の扱い 実務で重複削除したかったコード 💡 3. Map による重複削除 ✨ 実務で重複削除したかったコード キーが重複した場合の挙動 🚀 4. 大規模データでのパフォーマンス比較 📈 結果の比較 🔧 5.

こんにちは！株式会社ｉｉｍｏｎでフロントエンジニアをしている「ひが」です！ 本記事はアドベントカレンダー19日目の記事になります！ 先日夢で「メリークロージャマス！！！」と叫んでスベる夢を見ました。 冬だからか、みなさん冷たかったです（現実では暖かいです） そのようなこともあり、思い切って記事にしてみようと思いました！ どうか、暖かい目で見守っていただけると嬉しく思います！！ 本題 本題ですが、みなさんはクロージャをご存知でしょうか。 MDNよりお言葉を借りると クロージャは、組み合わされた（囲まれた）関数と、その周囲の状態（レキシカル環境）への参照の組み合わせ です！ 初見だと何言ってるかよくわからないですよね。 本記事でざっくり掘っていきますので、是非一緒に見ていただければ幸いです！ ※ 本記事は基本的にMDNの内容に沿う形で進めつつ、たまに脱線したり小ネタを挟んだりします ※ コード

こんにちは。iimonでエンジニアをしているhayashiと申します。 普段は主に拡張機能を開発しております。 今回はTypeScriptでのシングルトーンパターンについて解説したいと思います。 シングルトン（singleton）とは、オブジェクト指向プログラミングにおけるクラスのデザインパターンの一つで、実行時にそのクラスのインスタンスがアプリケーション全体で一つだけであることを保証するために使用されます これにより以下の利点があります。 グローバルな状態管理: アプリケーション全体で共有される状態を一元管理するためにシングルトンパターンを使用します。例えば、ユーザーの認証情報や設定など。 リソースの節約: 同じインスタンスを再利用することで、メモリやリソースの無駄を減らすことができます。 一貫性の確保: シングルトンパターンを使用することで、同じデータや状態が常に一貫して提供されること

はじめに・やりたいこと APIを利用するにあたっての準備 Messaging APIの設定準備 OpenWeatherMapAPIの設定準備 GASでスクリプトを組む まとめ 参考 こんにちは！ ｉｉｍｏｎでフロントエンドエンジニアを担当しているたくふぉんです！ だんだんとクリスマスが近づいてきましたね🎄🎅⭐️ 本記事はアドベントカレンダー17日目の記事になります。 はじめに・やりたいこと 世の中には無料で便利に使える様々なAPIが存在しますが、そんなAPIを自在に操ることができるエンジニア像に何とはなしに憧憬の念を抱いており（？）、APIを使って自分でも何かツールを作ってみたいと思っていました。 そこで今回は、APIに触れる良い機会だと思いましたのでGAS（Google Apps Script）をベースに、OpenWeatherMapAPIとLINE Messaging API を利

◼️ はじめに ◼️ 前提条件 マシン環境 データベースについて ◼️ データ挿入に関して ◼️ 100万レコードでLIKE検索(前後の部分一致)と全文検索の比較 LIKE検索 全文検索 ◼️ EXPLAINで実行計画を確認 LIKE検索のEXPLAIN結果 全文検索のEXPLAIN結果 ◼️ EXPLAIN ANALYZEを確認 LIKE検索のEXPLAIN ANALYZE結果 全文検索のEXPLAIN ANALYZE結果 ◼️ リソース使用状況確認 全文検索のクエリのプロファイリングを確認 ◼️ INNODB_FT_INDEX_TABLEを確認 ◼️ テストデータを修正 最初に作成したレコード内容の一部 新たに作成したレコード内容の一部 LIKE検索 全文検索 ◼️ まとめ ◼️ 最後に ◼️ はじめに こんにちは！株式会社iimonでフロントエンジニアをしているあめくです！ 本記事は

はじめに 結合とはなに？？ 内部結合 外部結合 それぞれのメリットと適しているケース 内部結合のメリット 内部結合のデメリット 内部結合を選ぶべきケース 外部結合のメリット 外部結合のデメリット 外部結合を選ぶべきケース 基本構文 実際に使ってみた 注意すべき点 実際に結合したテーブルからデータを集計する(内部結合) 実際に結合したテーブルからデータを集計する(外部結合) 最後に 参考 はじめに こんにちは、株式会社iimonでフロントエンドエンジニアを担当している「たーくん、たー坊」です♪ 本記事はアドベントカレンダー15日目の記事になります。 フロントエンジニアながらサービスの運用・保守をするにあたりSQLでデータを見ることがあったり、バックエンドにも今後挑戦したいということもありSQLを勉強しています。 1からSQLを学んでいくと結合あたりから複雑になってくる印象があったので、実際に

はじめに こんにちは、株式会社iimonでフロントエンドエンジニアをしている木村です。 本記事はアドベントカレンダー14日目の記事になります！ cssって奥が深いですよね。勉強した気になっても自分の思い通りに一発でなってくれたことがありません。そんな中で、以前いつにも増して詰まった実装がありました。 「スクロールバーを縦と横に常時表示する」というものです。 入社して１ヶ月経たないぐらいに取り組んだこの実装、あまり理解できずに実装していた部分も大きいです。入社して半年と少し経った今なら、もっとちがう方法で、ちゃんと理解して実装できるんじゃないかとこの記事を書いてみました。 まだまだ勉強中のため、間違い等ありましたらご指摘お願い致します！ やりたいこと 固定の要素の中に大きな要素を入れて、ヘッダーは固定しつつ縦横にスクロールを常時つけたい 横のスクロールをした時はヘッダーも一緒にスクロールする

はじめに こんにちは！株式会社iimonでフロントエンドエンジニアをしているかとうです！ 本記事はiimonアドベントカレンダー13日目の記事となります！✨ サーバーから送信されたデータがShift_JISでエンコードされている場合、そのままだとJavaScriptで扱えないことがありました。 そこで、本記事では以下の内容についてお話しします！ エンコードについて レスポンスがShift_JISレスポンス形式の場合のデコード方法 JavaScriptエンコード/デコードメソッド はじめに エンコードを理解する エンコードとは 文字コード 文字コード規格 ASCII Unicode エンコーディング形式 Unicode（UTF-8/UTF-16） Shift_JIS 文字化けの原因 Shift_JISのレスポンスを扱う 困ったこと 解決した方法 JSのエンコードメソッド encodeURI(