iimon TECH BLOG

https://tech.iimon.co.jp/

iimonエンジニアが得られた経験や知識を共有して世の中をイイモンにしていくためのブログです

フィード

記事のアイキャッチ画像
B+Treeで理解するMySQLインデックスの基礎
iimon TECH BLOG
はじめに インデックスとは 二分探索木 B-Treeの構造を見ていく B+Treeの構造を見ていく インデックスの種類 クラスター化インデックス 非クラスター化インデックス 最後に 参考文献 はじめに こんにちは、iimonエンジニアのみやこしです、業務の中でSQLを扱う機会が多く、勉強を進めるうちに INDEXの構造 にとても興味を持ちました。 今回は、MySQLのINDEXである B+treeの基本的な構造 について紹介したいと思います。 インデックスとは インデックス(Index) とは、データベースのテーブルに対して検索を高速化するための仕組みです。 本でいう「目次」や「索引」のような…
3日前
記事のアイキャッチ画像
コンピュータの構成要素とCPUの仕組みの基本
iimon TECH BLOG
はじめに コンピュータとは 主な種類 コンピュータの構成要素 ハードウェアとソフトウェア 両者の関係 CPU(中央処理装置) 構成要素 主なレジスタ CPUの命令実行サイクル 割込み 割込みの種類 内部割込み 外部割込み 割込み処理の基本流れ 最後に 参考 はじめに この記事では、コンピュータの基本的な仕組みとCPUの動きについてまとめています⚡️⚡️ コンピュータが「入力を受け取り、処理し、記憶し、出力する」流れで動くことや、CPUがどのように命令を実行しているのか、さらに割込みによる効率的な処理の仕組みまで知ることができます🌟 コンピュータとは コンピュータとは、ソフトウェアプログラムの指…
4日前
記事のアイキャッチ画像
FastMCPでMCPアプリを構築して遊んでみる
iimon TECH BLOG
はじめに MCPとは FastMCPで遊んでみる さいごに はじめに こんにちは!iimonでエンジニアをしているひがです! 個人的な話ですが最近禁煙を始めて1ヶ月が経ちまして、禁断症状などもなく順調に進んで体調も良くなった気がします! 結構面倒くさがりな性格なので、タバコを買うのが面倒くさくて順調に禁煙できています!(あまり自分自身のことは好きじゃないですが、その性格の一部には感謝してます) ただ禁酒は無理そうです!ビールがすこぶる好きです!!あと猫も好きです!! ということで、今回はFastMCPを使って簡単にMCPサーバを立ててAPIとAIエージェントを組み合わせた機能を作って遊んでみよ…
6日前
記事のアイキャッチ画像
セキュリティ月間から7ヶ月程経ったので改めてセキュリティについて考えてみた
iimon TECH BLOG
はじめに なぜセキュリティ対策を行うのか どのような攻撃手法があるのか XSS(クロスサイトスクリプティング) 1 Stored XSS(格納型XSS/蓄積型XSS) 2 Reflected XSS(反射型XSS) 3 DOM-based XSS(DOMベースXSS) 各XSSの比較 CSRF(クロスサイト・リクエストフォージェリ) クリックジャッキング オープンリダイレクト まとめ 最後に 参考 はじめに こんにちは!株式会社iimonでフロントエンジニアをしているあめくです! 今回は「サイバーセキュリティ月間」から約7ヶ月が経ち、意識が薄れがちなこのタイミングで、改めてセキュリティの重要性…
15日前
記事のアイキャッチ画像
Git のブランチ操作で発生したトラブルと学び
iimon TECH BLOG
こんにちは!iimonでフロントエンジニアをしている「奥島」です! 記事を書くきっかけ 今回は、私自身が Git の操作で実際に経験したトラブルをまとめました。 同じようにブランチ操作や Revert で悩んでいる方の参考になれば嬉しいです。 何が起きたのか 作業中、develop にマージしたはずの変更が Revert コミットによって打ち消されてしまう という事態が発生しました。 原因をたどると、 似た名前のブランチを誤って操作してしまった Revert の仕組みを正しく理解していなかった という2点が重なって起きたものでした。 原因の整理 直接原因 Revert によって、取り込んだ変更…
25日前
記事のアイキャッチ画像
コードレビューはPvEであってPvPではないという話
iimon TECH BLOG
はじめに チーム内で取り入れているルール 1つのPRにて変更行数は500行以内、変更ファイル数は20ファイル以内にする PRのテンプレート設定とチケットのリンク チケット 概要 対応 動作確認 チェックして欲しい箇所 共有事項 PR作成後のセルフレビュー 朝会後のレビューRTA 個人的に意識していること 心理的安全性を担保する ラベルをつける コメントの内容に気を付ける おわりに 参考資料 はじめに こんにちは! 友人に光の戦士とやらになれるというオンラインゲームやらない?と誘われているものの、イマイチ踏み込めずに「そのうちやるわ〜」とお茶を濁す日々を過ごしております、まつむらです。 PvP(…
1ヶ月前
記事のアイキャッチ画像
スコープについて改めて学んでみた
iimon TECH BLOG
はじめに スコープとは グローバルスコープ 関数スコープ・ブロックスコープ 関数スコープを作らないvarとfunction スコープチェーン まとめ おわりに 参考記事 はじめに こんにちは、株式会社iimonでエンジニアをしているなかむーです! 実務ではTypeScriptを触っていますが、同じところで何度もエラーを出してしまったりするので、改めて基礎のJavaScriptの動作について学んでみました! 今回はスコープについて学んだことをまとめてみました スコープとは 実行中のコードから値と式が参照できる範囲のことです。 スコープには4種類ありますが、今回はモジュールスコープの話は除外して、…
1ヶ月前
記事のアイキャッチ画像
Copilot AgentでMCPサーバーを使ってみる
iimon TECH BLOG
はじめに iimonでエンジニアをしている腰丸です。ここ最近、業務で生成AIを活用しながら作業をすることが増えてきました。 そこで、これまではあまり積極利用していなかったのですが、MCPサーバーを利用して多少なりとも業務を効率化できないかを調査し、 「serena」と「github」のMCPサーバーを利用することで多少の効果がでた気がするので記事にまとめました。 普段の業務では、copilot Agentを使用しているので、そちらの手順をまとめました。(個人で課金して、claude codeに乗り換えたほうが良い気はしているのですが...) Serena MCP github.com 設定 u…
1ヶ月前
記事のアイキャッチ画像
よろしくおねがいしまーーーす!!!
iimon TECH BLOG
はじめに こんにちは!iimonでフロントエンジニアをしている「みよちゃん」です!8月も終盤に差し掛かってきましたが、まだ暑いですよね… エンジニア×夏 といえば、やはりあの映画でしょう!! 明言は避けますがあの映画です!! 毎年地上波で放送しているようですが、エンジニアの皆さんなら毎年欠かさず視聴していることと思います。 見た事のない方のためにざっくり内容をまとめると 「数学にめっっちゃ強い主人公が、ようわからん数字の羅列を見て何かを計算して世界を救う話」です! 今回は「ようわからん数字の羅列の計算」について勉強する機会がありましたので、お話ししたいと思います! RSA暗号 ようわからん数字…
1ヶ月前
記事のアイキャッチ画像
pre-commit × mypy を Docker イメージで動かして依存関係エラーを回避する方法
iimon TECH BLOG
こんにちは! 株式会社iimonでエンジニアをしている遠藤です。 今携わっているプロジェクトの Python バックエンドで、コミット時に mypy を走らせて型チェックをするようにしたいと思いました。 ただ、以前別のプロジェクトで同じことを試したときに、依存関係が不足してエラーにハマった経験があります。 そこで今回は、そのときのエラー例と、最終的に Docker イメージを使って解決できた方法 をまとめてみました。 ※本記事は --ignore-missing-importsを オフ にしている前提で書いています。 このオプションをオンにすると未解決の import は無視されますが、型チェ…
1ヶ月前
記事のアイキャッチ画像
Djangoで独自SQLを実行し、実行履歴を残す
iimon TECH BLOG
こんにちは、ideです。 SQLを使って手動でデータを変更する場合、どんな単純な作業でも手順ミスは起こりえるかなと思います。 そこで今回は、Django上で選択した内容に応じてSQLを作成して実行し、結果を実行ログとして残すまでの 一連の流れをまとめました。 UIはDjangoに統合する形にしています。 今回は新規権限をリリースしたあと、基準となる権限が付与されているアカウント全てに、新規権限を一括付与する といったユースケースを想定しています。 前提 Python 3.13 / Django 5.2(管理ユーザー作成済み) この記事で実装するもの 権限付与のフォーム 管理画面と同じ見た目で表…
1ヶ月前
記事のアイキャッチ画像
フィボナッチ数列から見る2つのアルゴリズム(分割統治法、動的計画法)
iimon TECH BLOG
はじめに フィボナッチ数列とは 再帰関数とは 再帰のメリットとデメリット メリット デメリット JavaScript での実装例 分割統治法(Divide and Conquer) 分割統治法の問題点 動的計画法(Dynamic Programming) 1. トップダウン方式(メモ化) 2. ボトムアップ方式(タビュレーション) O(n)とO(2ⁿ)のグラフ まとめ 参考 はじめに こんにちは!さいとーです。 個人的にフィボナッチ数列というものを最近よく耳にします。 会社内のプランニングポーカーに使われていたり、最近よんだ本にでてきたり、、 ちょこっと調べてみるとアルゴリズムを勉強できそうだ…
2ヶ月前
記事のアイキャッチ画像
vitestの巻き上げ
iimon TECH BLOG
こんにちは、kogureです。 最近はトレッキングに興味があります。 皆さんもぜひ登りましょう、楽しいですよ。 トレッキングの魅力もお伝えしたいのですが今回はvitestの巻き上げについて紹介します。 今年から本格的にテストコードを書くようになりました。 typescriptのテストを書くのはそれが初めてで当初、詰まったエラーを紹介させていただきます。 原因がわかってしまえばとても単純明快なことだったのですが、当時はまだまだ慣れていないこともあり解決するのに時間がかかりました。 サンプルコードなので実際のテストとは異なりますが、以下のようなテストを書いたらエラーが発生しました。 ・サンプル c…
2ヶ月前
記事のアイキャッチ画像
最近の CSS の機能を試してみた
iimon TECH BLOG
はじめに こんにちは。iimon でエンジニアをしている保田です。 最近 CSS を触る機会が減ったこともあり、ここ数年で追加された CSS や一部あまり使ったことのない CSSを見たり試したりしてみました。 それぞれの詳細を詳しく解説していくと中には1記事分ぐらいになってしまうので、今回はそれぞれの機能を簡単に紹介していこうと思いました。 text-wrap: balance テキスト行の文字数を均等にして折り返すことができる新しいプロパティです。 https://developer.mozilla.org/ja/docs/Web/CSS/text-wrap 設定方法 .text { tex…
2ヶ月前
記事のアイキャッチ画像
CSVとExcelファイルの構造について調べてみた
iimon TECH BLOG
■はじめに ■CSVファイルについて ◆CSVファイルとは? ◆CSVファイルの中身を確認してみる ◆CSVファイルの特徴 ●メリット ●デメリット ■Excelファイルについて ◆Excelファイルとは? ◆Excelファイルの特徴 ◆Excelファイルを解凍してみる ◆各ファイルの中身を確認してみる ●[Content_Types].xml ●_rels/.rels ●xl/workbook.xml ●xl/_rels/workbook.xml.rels ●xl/sharedStrings.xml ●xl/theme/theme1.xml ●xl/styles.xml ●xl/worksh…
2ヶ月前
記事のアイキャッチ画像
Figma AIで遊んでみる
iimon TECH BLOG
こんにちは。タクシです。 最近、社内でAIを活用した知識共有や開発に対して議論が活発になっており、時代の流れを感じている今日この頃でございます。 私はよくUI仕様を作成したりするのですが、 ワイヤーフレームや、プロトタイピングこそAIを活用してより加速できるといいな〜と思ったのでさっくり調べてみました。 First Draftでワイヤー作成をしよう FigmaではいくつかのAI機能が提供されています。 ビジュアル検索 画像背景除去 翻訳 テキストの書き換え / 要約 / 翻訳 (開発連携に特化)Dev Mode MCP Server などなど、結構面白そうな機能があります。 💡 現状無料で利用…
2ヶ月前
記事のアイキャッチ画像
変数の保護に関する基本的な知識
iimon TECH BLOG
こんにちは。。 新卒エンジニアの”クリス”と申します! 今日は、変数をしっかり保護するために実際に取れるいくつかのステップについて話したいと思います。 const 宣言は、現代のJavaScriptにおいて多くの用途があります。 一部の開発者は、変数に再代入する必要がない限り、デフォルトで全ての変数を const を使って宣言することを好みます。再代入が必要な場合にのみ、let を使用します。 しかし、オブジェクト(配列や関数も含む)を const で宣言した変数に代入した場合でも、そのオブジェクト自体はミュータブル(変更可能)であることを理解しておくことが重要です。const 宣言は、変数識…
3ヶ月前
記事のアイキャッチ画像
凝集度と結合度について調べて見た(part1凝集度編)
iimon TECH BLOG
こんにちは。iimonでエンジニアをしているhayashiと申します。 普段は主に拡張機能を開発しております。 いいコードを書きたくて最近調べているんですけど、その指標となる凝集度と結合度に ついて調べたので、今回は凝集度について解説していければと思います。 凝集度とは パッケージ クラス メソッド 上記モジュール内の協調度を示す指標です。 ここで言うメソッドというのは各メソッドを纏めて呼び出しているメソッドだったりを言っていて、定義の仕方によっては広い意味ではモジュールと捉えて使っています。 メソッドはモジュールの中に含まれる小さな単位で、厳密にはモジュールでは無いという考えもありますが、要…
3ヶ月前
記事のアイキャッチ画像
clearAllMocks() vs resetAllMocks()    違いと使い分けを完全解説
iimon TECH BLOG
こんにちは!Jest を勉強中の新卒エンジニアの”つかちゃん”と申します! ✨ 今回は、Jestでよく使われるモック関連の関数 clearAllMocks() と resetAllMocks() の違いについて、「どっちがどっちだっけ?」とテストを書いていてふと思ったので初心者の自分なりに調べたことをまとめてみました。同じようにモックの使い方で悩んでいる方の参考になれば嬉しいです! この記事では: モックってなに? clearAllMocks()とは? resetAllMocks()とは? どっちを使えばいいの? という順番で、わかりやすく解説していきます! 🧪 まず初めに「モック」ってなに?…
3ヶ月前
記事のアイキャッチ画像
スマホ向けアプリを気軽に作れる 「React Native EXPO」
iimon TECH BLOG
こんにちは!! iimonでエンジニアをしているいまいです。 折角プログラミングやっていることだしおもしろいものを作りたいですよね! というわけで今回はお気軽にスマホ向けアプリを開発できる『react expo』の紹介と実際に使ってみた感想をまとめます! react expo とは??? その解説の前に『React Native』を説明する必要があります。 React Nativeとは Facebook(現Meta社)が開発した、1つのコード(例えばJavascript)でiPhone、Androidアプリの両方を作れる開発用フレームワークです。通常、iPhoneアプリはSwift、Andro…
3ヶ月前
記事のアイキャッチ画像
【JavaScript】for文を使い分ける
iimon TECH BLOG
こんにちは。 iimonでエンジニアをしているかねにわです。 JavaScriptにおけるループ処理には、基本的なfor文からfor…of文など、いくつか種類がありますが、正直のところそれぞれの違いや特性をあまり理解せず、とりあえずでforEachを使っているような状態でした。 本記事では、JavaScriptの代表的なループ処理であるfor文、for…in文、for…of文、forEachについて、それぞれの特徴および使い分けを整理しました。 はじめに書いてしまうと、上記4つのループ文の違いは、ざっと以下のようになります。 これを踏まえ、それぞれの特徴を見ていきます。 目次 for文 for…
3ヶ月前
記事のアイキャッチ画像
currentTargetについて調べる
iimon TECH BLOG
はじめに こんにちは!木村です!普段ReactとTypeScriptを使用して開発しているのですが、非同期処理を扱っているイベントハンドラでつまづいた部分があったので、掘り下げて調べてみたことをまとめました。よろしくお願いします。 内容 内容としては以下のとおりです。 つまづいた箇所の解決策 event.targetとevent.currentTargetの違いについて currentTargetがリセットされるタイミングはいつか 問題 1. ボタンコンポーネントを押すと非同期処理でデータを取得する 2. setElementにe.currentTargetを渡して、取得したデータをモーダルに…
3ヶ月前
記事のアイキャッチ画像
AIを感じてみる
iimon TECH BLOG
はじめに そもそもAIって何? 機械学習について 機械学習の種類について 教師あり学習 教師なし学習 強化学習 モデルができるまで 分類と回帰について 訓練データとテストデータについて 過学習と学習不足について 評価指標について モデルの種類について アンサンブルについて 分類と回帰をやってみる さいごに はじめに こんにちは! 株式会社iimonでエンジニアをしているひがです! 最近AIを活用しよう!という風潮が流れていてエンジニアとしても社会人としてもAIを使いこなすことが求められてるように感じます。 そんな中、AIってそもそも何でしたっけ?という疑問を持たれる方も多い気がしたので(筆者も…
3ヶ月前
記事のアイキャッチ画像
ローカルMCPサーバを立ててClaudDesktopと繋いでみた
iimon TECH BLOG
◼️ はじめに ◼️ プロジェクト作成 ◼️ コード修正 ◼️ デバッグ方法 ◼️ ClaudeDesktopとの接続 ◼️ まとめ ◼️ 最後に ◼️ はじめに こんにちは!株式会社iimonでフロントエンジニアをしているあめくです! 前回は我らがEMの松田さんに「MCPサーバ」について熱く語っていただきました。 その熱き思いに心を打たれたこともあり、また私自身もMCPサーバとはなんぞやと言うことで実際にサーバを立てて動かしてみようと思いテックブログにさせていただきました。 MCPサーバの詳細については前回の記事をご覧ください! 駆け出しエンジニアはAI禁止!?使う前に身に着けてほしい2つの…
3ヶ月前
記事のアイキャッチ画像
github PRを管理するツールghstackを使ってみた!
iimon TECH BLOG
はじめに 依存関係のあるプルリクエスト ghstack PRの提出と更新 PRの構造 PRのマージ git rebase interactive(インタラクティブ)モード ghstack使ってみた 最後に 参考文献 はじめに こんにちは、iimonエンジニアのみやこしです、いきなりですが、皆さんは大きなプロジェクトを開発する際に、機能ごとに複数のプルリクエストを作成するのが面倒だと感じたことはありませんか? プルリクを小さな単位でレビューしやすく、かつ管理もしやすいツールがないか調べていたところ、ghstack という GitHub 向けの管理ツールを見つけました。 実際に使ってみたところ便利…
4ヶ月前
記事のアイキャッチ画像
駆け出しエンジニアはAI禁止!?使う前に身に着けてほしい2つの力〜RustもMCPも知らない中年エンジニアの奮闘から〜
iimon TECH BLOG
はじめに 今回の題材 MCPサーバってなんですのん? AIの助言を得て、自分で裏取りした最小限のMCPサーバに必要なこと Rustは知らない、でもTypeScriptやPHPは知っている TDDでやってくぞ! やってみてどうだった? おわりに 参考 はじめに こんにちは!ダービーで失ったお金を安田記念で取り返そうとしたら返り討ちにあったiimonのエンジニアマネージャー松田です。 私はEMとして、CTOの森さんと一緒にエンジニア組織の生産性やメンバーの育成方針などを毎週議論させてもらっていますが、最近の内容としては、やはりAIとの付き合い方、みたいなところが多かったりします。 なんでもかんでも…
4ヶ月前
記事のアイキャッチ画像
【JavaScript】undefinedをスプレッド構文で展開するとどうなるか
iimon TECH BLOG
はじめに 株式会社iimonでエンジニアをしているかとうです🦕 先に結論 undefinedをスプレッド構文で展開しようとすると以下の結果になります 結果 理由 オブジェクト { ...undefined } ✅ エラーにならない(無視される) スプレッド構文が undefined や null を無視するため 配列 [...undefined] ❌ エラーになる(TypeError) undefined は反復可能ではないため この記事でわかること 💡 オブジェクトでのスプレッド構文の性質 💡 配列でのスプレッド構文の性質 きっかけ Github Copilotに次のようなコードに対して、レ…
4ヶ月前
記事のアイキャッチ画像
TDDチョットワカル!になりたい!なんちゃってTDDを実践して見えたこと
iimon TECH BLOG
はじめに そもそもTDDってなんぞや? なるほど、よく分からん! 慣らし運転、始めました なんちゃってTDDで初めてみる テスト駆動で得られたもの 結果的に何が嬉しかったのか おわりに 参考文献 はじめに こんにちは!株式会社iimonにてフロントエンドエンジニアをしております、まつむらです! 今年もジメジメした季節がやってきますね。。 ただ、そんな湿度をも吹き飛ばすアツいムーブメントが弊社では起きています! 何がそんなにアツいのかというと、テストコード周りの改革がアツアツです! そもそもテストコードの工数も考慮して工数を出すようにする(極々当たり前ですが、、)。 みんなで過去のコードに対する…
4ヶ月前
記事のアイキャッチ画像
「Web Storage(localStorage・sessionStorage)の基本と使い方を解説!
iimon TECH BLOG
はじめに! ストレージの種類 参考 はじめに! iimonでエンジニアをしています。奥島です 今回は、データベースを使わずに、ブラウザだけで手軽にデータを保存できる「Webストレージ(localStorage・sessionStorage)」について調べてみました。 Webアプリやサイトの開発では、ちょっとしたユーザーデータを保存したい場面が多くありますが、そのようなときに便利なのがWebストレージです。 CookieやIndexedDB、Cache APIなど他の保存手段もありますが、Webストレージは実装が簡単で、軽量なデータの保存に特に適しているかと思います! ストレージの種類 ■ Co…
4ヶ月前
記事のアイキャッチ画像
SQL INDEX B-treeを見てみた
iimon TECH BLOG
はじめに iimonでエンジニアをしています。腰丸です。 SQLを触る際に、お世話になるINDEXですが、理解しているようで、実はよくわからないという方も多いのではないでしょうか。(自分は自信ないです) 今回は、SQLのINDEXについて、実際のデータを使ってB-treeの構造を確認しながら、理解を深めていきたいと思います。 弊社のサービスでは、MySQLを使用していますが、データの確認がしやすいため、今回はPostgreSQLを使用しています。 SQLのINDEX検索概要 基本的なRDBでは、INDEXを貼ることで、効率のよい検索を実現しています。 SQLデータベースにおけるBツリーの検索構…
4ヶ月前