iimon TECH BLOG

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

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

フィード

記事のアイキャッチ画像
フィボナッチ数列から見る2つのアルゴリズム(分割統治法、動的計画法)
iimon TECH BLOG
はじめに フィボナッチ数列とは 再帰関数とは 再帰のメリットとデメリット メリット デメリット JavaScript での実装例 分割統治法(Divide and Conquer) 分割統治法の問題点 動的計画法(Dynamic Programming) 1. トップダウン方式(メモ化) 2. ボトムアップ方式(タビュレーション) O(n)とO(2ⁿ)のグラフ まとめ 参考 はじめに こんにちは!さいとーです。 個人的にフィボナッチ数列というものを最近よく耳にします。 会社内のプランニングポーカーに使われていたり、最近よんだ本にでてきたり、、 ちょこっと調べてみるとアルゴリズムを勉強できそうだ…
14日前
記事のアイキャッチ画像
vitestの巻き上げ
iimon TECH BLOG
こんにちは、kogureです。 最近はトレッキングに興味があります。 皆さんもぜひ登りましょう、楽しいですよ。 トレッキングの魅力もお伝えしたいのですが今回はvitestの巻き上げについて紹介します。 今年から本格的にテストコードを書くようになりました。 typescriptのテストを書くのはそれが初めてで当初、詰まったエラーを紹介させていただきます。 原因がわかってしまえばとても単純明快なことだったのですが、当時はまだまだ慣れていないこともあり解決するのに時間がかかりました。 サンプルコードなので実際のテストとは異なりますが、以下のようなテストを書いたらエラーが発生しました。 ・サンプル c…
14日前
記事のアイキャッチ画像
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…
21日前
記事のアイキャッチ画像
Figma AIで遊んでみる
iimon TECH BLOG
こんにちは。タクシです。 最近、社内でAIを活用した知識共有や開発に対して議論が活発になっており、時代の流れを感じている今日この頃でございます。 私はよくUI仕様を作成したりするのですが、 ワイヤーフレームや、プロトタイピングこそAIを活用してより加速できるといいな〜と思ったのでさっくり調べてみました。 First Draftでワイヤー作成をしよう FigmaではいくつかのAI機能が提供されています。 ビジュアル検索 画像背景除去 翻訳 テキストの書き換え / 要約 / 翻訳 (開発連携に特化)Dev Mode MCP Server などなど、結構面白そうな機能があります。 💡 現状無料で利用…
1ヶ月前
記事のアイキャッチ画像
変数の保護に関する基本的な知識
iimon TECH BLOG
こんにちは。。 新卒エンジニアの”クリス”と申します! 今日は、変数をしっかり保護するために実際に取れるいくつかのステップについて話したいと思います。 const 宣言は、現代のJavaScriptにおいて多くの用途があります。 一部の開発者は、変数に再代入する必要がない限り、デフォルトで全ての変数を const を使って宣言することを好みます。再代入が必要な場合にのみ、let を使用します。 しかし、オブジェクト(配列や関数も含む)を const で宣言した変数に代入した場合でも、そのオブジェクト自体はミュータブル(変更可能)であることを理解しておくことが重要です。const 宣言は、変数識…
1ヶ月前
記事のアイキャッチ画像
凝集度と結合度について調べて見た(part1凝集度編)
iimon TECH BLOG
こんにちは。iimonでエンジニアをしているhayashiと申します。 普段は主に拡張機能を開発しております。 いいコードを書きたくて最近調べているんですけど、その指標となる凝集度と結合度に ついて調べたので、今回は凝集度について解説していければと思います。 凝集度とは パッケージ クラス メソッド 上記モジュール内の協調度を示す指標です。 ここで言うメソッドというのは各メソッドを纏めて呼び出しているメソッドだったりを言っていて、定義の仕方によっては広い意味ではモジュールと捉えて使っています。 メソッドはモジュールの中に含まれる小さな単位で、厳密にはモジュールでは無いという考えもありますが、要…
1ヶ月前
記事のアイキャッチ画像
clearAllMocks() vs resetAllMocks()    違いと使い分けを完全解説
iimon TECH BLOG
こんにちは!Jest を勉強中の新卒エンジニアの”つかちゃん”と申します! ✨ 今回は、Jestでよく使われるモック関連の関数 clearAllMocks() と resetAllMocks() の違いについて、「どっちがどっちだっけ?」とテストを書いていてふと思ったので初心者の自分なりに調べたことをまとめてみました。同じようにモックの使い方で悩んでいる方の参考になれば嬉しいです! この記事では: モックってなに? clearAllMocks()とは? resetAllMocks()とは? どっちを使えばいいの? という順番で、わかりやすく解説していきます! 🧪 まず初めに「モック」ってなに?…
1ヶ月前
記事のアイキャッチ画像
スマホ向けアプリを気軽に作れる 「React Native EXPO」
iimon TECH BLOG
こんにちは!! iimonでエンジニアをしているいまいです。 折角プログラミングやっていることだしおもしろいものを作りたいですよね! というわけで今回はお気軽にスマホ向けアプリを開発できる『react expo』の紹介と実際に使ってみた感想をまとめます! react expo とは??? その解説の前に『React Native』を説明する必要があります。 React Nativeとは Facebook(現Meta社)が開発した、1つのコード(例えばJavascript)でiPhone、Androidアプリの両方を作れる開発用フレームワークです。通常、iPhoneアプリはSwift、Andro…
1ヶ月前
記事のアイキャッチ画像
【JavaScript】for文を使い分ける
iimon TECH BLOG
こんにちは。 iimonでエンジニアをしているかねにわです。 JavaScriptにおけるループ処理には、基本的なfor文からfor…of文など、いくつか種類がありますが、正直のところそれぞれの違いや特性をあまり理解せず、とりあえずでforEachを使っているような状態でした。 本記事では、JavaScriptの代表的なループ処理であるfor文、for…in文、for…of文、forEachについて、それぞれの特徴および使い分けを整理しました。 はじめに書いてしまうと、上記4つのループ文の違いは、ざっと以下のようになります。 これを踏まえ、それぞれの特徴を見ていきます。 目次 for文 for…
2ヶ月前
記事のアイキャッチ画像
currentTargetについて調べる
iimon TECH BLOG
はじめに こんにちは!木村です!普段ReactとTypeScriptを使用して開発しているのですが、非同期処理を扱っているイベントハンドラでつまづいた部分があったので、掘り下げて調べてみたことをまとめました。よろしくお願いします。 内容 内容としては以下のとおりです。 つまづいた箇所の解決策 event.targetとevent.currentTargetの違いについて currentTargetがリセットされるタイミングはいつか 問題 1. ボタンコンポーネントを押すと非同期処理でデータを取得する 2. setElementにe.currentTargetを渡して、取得したデータをモーダルに…
2ヶ月前
記事のアイキャッチ画像
AIを感じてみる
iimon TECH BLOG
はじめに そもそもAIって何? 機械学習について 機械学習の種類について 教師あり学習 教師なし学習 強化学習 モデルができるまで 分類と回帰について 訓練データとテストデータについて 過学習と学習不足について 評価指標について モデルの種類について アンサンブルについて 分類と回帰をやってみる さいごに はじめに こんにちは! 株式会社iimonでエンジニアをしているひがです! 最近AIを活用しよう!という風潮が流れていてエンジニアとしても社会人としてもAIを使いこなすことが求められてるように感じます。 そんな中、AIってそもそも何でしたっけ?という疑問を持たれる方も多い気がしたので(筆者も…
2ヶ月前
記事のアイキャッチ画像
ローカルMCPサーバを立ててClaudDesktopと繋いでみた
iimon TECH BLOG
◼️ はじめに ◼️ プロジェクト作成 ◼️ コード修正 ◼️ デバッグ方法 ◼️ ClaudeDesktopとの接続 ◼️ まとめ ◼️ 最後に ◼️ はじめに こんにちは!株式会社iimonでフロントエンジニアをしているあめくです! 前回は我らがEMの松田さんに「MCPサーバ」について熱く語っていただきました。 その熱き思いに心を打たれたこともあり、また私自身もMCPサーバとはなんぞやと言うことで実際にサーバを立てて動かしてみようと思いテックブログにさせていただきました。 MCPサーバの詳細については前回の記事をご覧ください! 駆け出しエンジニアはAI禁止!?使う前に身に着けてほしい2つの…
2ヶ月前
記事のアイキャッチ画像
github PRを管理するツールghstackを使ってみた!
iimon TECH BLOG
はじめに 依存関係のあるプルリクエスト ghstack PRの提出と更新 PRの構造 PRのマージ git rebase interactive(インタラクティブ)モード ghstack使ってみた 最後に 参考文献 はじめに こんにちは、iimonエンジニアのみやこしです、いきなりですが、皆さんは大きなプロジェクトを開発する際に、機能ごとに複数のプルリクエストを作成するのが面倒だと感じたことはありませんか? プルリクを小さな単位でレビューしやすく、かつ管理もしやすいツールがないか調べていたところ、ghstack という GitHub 向けの管理ツールを見つけました。 実際に使ってみたところ便利…
2ヶ月前
記事のアイキャッチ画像
駆け出しエンジニアはAI禁止!?使う前に身に着けてほしい2つの力〜RustもMCPも知らない中年エンジニアの奮闘から〜
iimon TECH BLOG
はじめに 今回の題材 MCPサーバってなんですのん? AIの助言を得て、自分で裏取りした最小限のMCPサーバに必要なこと Rustは知らない、でもTypeScriptやPHPは知っている TDDでやってくぞ! やってみてどうだった? おわりに 参考 はじめに こんにちは!ダービーで失ったお金を安田記念で取り返そうとしたら返り討ちにあったiimonのエンジニアマネージャー松田です。 私はEMとして、CTOの森さんと一緒にエンジニア組織の生産性やメンバーの育成方針などを毎週議論させてもらっていますが、最近の内容としては、やはりAIとの付き合い方、みたいなところが多かったりします。 なんでもかんでも…
2ヶ月前
記事のアイキャッチ画像
【JavaScript】undefinedをスプレッド構文で展開するとどうなるか
iimon TECH BLOG
はじめに 株式会社iimonでエンジニアをしているかとうです🦕 先に結論 undefinedをスプレッド構文で展開しようとすると以下の結果になります 結果 理由 オブジェクト { ...undefined } ✅ エラーにならない(無視される) スプレッド構文が undefined や null を無視するため 配列 [...undefined] ❌ エラーになる(TypeError) undefined は反復可能ではないため この記事でわかること 💡 オブジェクトでのスプレッド構文の性質 💡 配列でのスプレッド構文の性質 きっかけ Github Copilotに次のようなコードに対して、レ…
2ヶ月前
記事のアイキャッチ画像
TDDチョットワカル!になりたい!なんちゃってTDDを実践して見えたこと
iimon TECH BLOG
はじめに そもそもTDDってなんぞや? なるほど、よく分からん! 慣らし運転、始めました なんちゃってTDDで初めてみる テスト駆動で得られたもの 結果的に何が嬉しかったのか おわりに 参考文献 はじめに こんにちは!株式会社iimonにてフロントエンドエンジニアをしております、まつむらです! 今年もジメジメした季節がやってきますね。。 ただ、そんな湿度をも吹き飛ばすアツいムーブメントが弊社では起きています! 何がそんなにアツいのかというと、テストコード周りの改革がアツアツです! そもそもテストコードの工数も考慮して工数を出すようにする(極々当たり前ですが、、)。 みんなで過去のコードに対する…
2ヶ月前
記事のアイキャッチ画像
「Web Storage(localStorage・sessionStorage)の基本と使い方を解説!
iimon TECH BLOG
はじめに! ストレージの種類 参考 はじめに! iimonでエンジニアをしています。奥島です 今回は、データベースを使わずに、ブラウザだけで手軽にデータを保存できる「Webストレージ(localStorage・sessionStorage)」について調べてみました。 Webアプリやサイトの開発では、ちょっとしたユーザーデータを保存したい場面が多くありますが、そのようなときに便利なのがWebストレージです。 CookieやIndexedDB、Cache APIなど他の保存手段もありますが、Webストレージは実装が簡単で、軽量なデータの保存に特に適しているかと思います! ストレージの種類 ■ Co…
3ヶ月前
記事のアイキャッチ画像
SQL INDEX B-treeを見てみた
iimon TECH BLOG
はじめに iimonでエンジニアをしています。腰丸です。 SQLを触る際に、お世話になるINDEXですが、理解しているようで、実はよくわからないという方も多いのではないでしょうか。(自分は自信ないです) 今回は、SQLのINDEXについて、実際のデータを使ってB-treeの構造を確認しながら、理解を深めていきたいと思います。 弊社のサービスでは、MySQLを使用していますが、データの確認がしやすいため、今回はPostgreSQLを使用しています。 SQLのINDEX検索概要 基本的なRDBでは、INDEXを貼ることで、効率のよい検索を実現しています。 SQLデータベースにおけるBツリーの検索構…
3ヶ月前
記事のアイキャッチ画像
初めてエンジニアイベント(TSKaigi)に参加してみた! ~リモートで見られる時代で現地参加する意味とは?~
iimon TECH BLOG
はじめに はじめまして、株式会社iimon でフロントエンジニアをしている、なかむと申します。 普段は不動産会社の業務効率化サポートツール「入力速いもん」を開発をしており、メインでTypeScriptを使っています。 お恥ずかしながら、今回初めてエンジニアイベント「TSKaigi」に参加させて頂きました! 今回は、そんな初めて参加したイベントで感じたこと、考えたこと、試したことなどを元にルポを作成してみたので、良かったら読んでいただけると嬉しいです! イベントの紹介 2025.tskaigi.org www.youtube.com github.com TSKaigiは、日本最大級のTypeS…
3ヶ月前
記事のアイキャッチ画像
GitHub Actionsでリリース作業を簡略化した!
iimon TECH BLOG
こんにちは。 GitHub Actions を使ってリリース作業を改善しました。 すぐにできるだろうと思っていたのですが、詰まることもあったため、備忘録も兼ねて記事にしました。 はじめに Chrome拡張機能のリリース作業で、以下のような課題がありました。 manifest.json のバージョンを手作業(シェル)で更新していた リリースタグを作成するため、mainやdevelop ブランチへの直プッシュを許可していた これらの課題を解決して全体の安全性を高めつつ、リリース作業も簡略化することがゴールになります。 自動化の処理フロー(順序と連携) manifest.jsonのバージョン更新 G…
3ヶ月前
記事のアイキャッチ画像
CASLⅡで学ぶアセンブリ【入門】
iimon TECH BLOG
はじめに こんにちは!iimonでフロントエンドエンジニアをしている「みよちゃん」です! 突然ですが自分はiimonで働きながら、通信制の大学(CS系)にも通っていて、今年から2年生になりました!その中で、現在アセンブリについて勉強しているのですが、普段の業務と全く関係のないように思える内容でも学びがあるな〜と思い記事にしてみました! 前提 今回使用する言語はCASLⅡです。CASLⅡはCOMETⅡという仮想CPU上で動作するアセンブリ言語です。動作を実際に確認したい方は、オンライン上のCASLシュミレータやシュミレータソフトを使用してください。 今回の記事では、COMETⅡの構成から始まり、…
3ヶ月前
記事のアイキャッチ画像
React × Viteでコードレビュー効率化のためのChrome拡張機能を作った話
iimon TECH BLOG
はじめに こんにちは。 株式会社iimonでエンジニアをしている保田です。 今回は、自身がレビュワーに設定されているPRを一覧で確認することができるChrome拡張機能を開発したので、その内容についてお話ししたいと思います。 また、この拡張機能はGitHubでのPRレビューを効率化したいという思いがあり、業務では拡張機能の開発をしていますが、個人では開発したことがなかったので良い機会だと思い、成果物を Chrome Web Store に公開するところまで行いました。 エンジニアは日常業務において毎日のようにコードレビューを行なっていると思いますが、 以下のような課題があり、どうにか解決できな…
3ヶ月前
記事のアイキャッチ画像
OpenID Connectとは?OAuth2.0との違いを解説
iimon TECH BLOG
こんにちは! 株式会社iimonでエンジニアをしている遠藤です。 今まで「OAuth2.0は“認可”のためのプロトコル」と理解していたつもりでしたが、ソーシャルログインなど“認証”の文脈で登場すると、「あれ?認証もできるの?」とモヤモヤすることがよくありました。 これは、OAuth2.0の設計思想と、OAuth2.0をベースにした認証プロトコルの存在をきちんと理解していなかったからだと気づきました・・・。 ということで本記事では、オープン・スタンダードであるOpenID Connectについて、OAuth2.0と比較しながら整理します。 今回はそれぞれの役割や概念を整理し、OpenID Con…
3ヶ月前
記事のアイキャッチ画像
Viteについてまとめました。
iimon TECH BLOG
はじめに Viteとは 結局、何のために使うの? 実際にViteをつかってみる Vite+TypescriptでTodoList 従来のビルドツール(Webpackなど)の違い 開発ビルドと本番ビルドは何が違う?? 開発ビルド(run dev) 本番ビルド(run build) 本番ビルドの必要性 軽くプロジェクトフォルダの構成 おわりに 参考 はじめに こんにちは!さいとーです。 皆さんはフロントエンドの開発で開発用ビルドと本番用ビルドを意識して開発していますか?? 開発用ビルドと本番用ビルドはビルドツールによって違う方法でビルドされています。 自分は恥ずかしながら全く意識していなかったです…
4ヶ月前
記事のアイキャッチ画像
LGTM!
iimon TECH BLOG
こんにちは まだ読んでいる最中ですが最近会社内の輪読会で読んでいる本の復習として記事をまとめさせていただきました! 著者はAdrienne BraganzaさんでタイトルはLooks Good to Meです 2025年4月現在は翻訳されていない本になります。早く日本語版読みたいですね! www.manning.com コードレビューの目的 まずはなぜ、コードレビューを行う必要があるのかを確認しましょう。 A code review is a process software developers use to inspect each other’s code, making sure it…
4ヶ月前
記事のアイキャッチ画像
色について気になったので少し調べてみました
iimon TECH BLOG
お花見はしましたか? 桜は毎年見ても飽きないですね。 一般的に、桜といえば、淡いピンク色が綺麗なソメイヨシノを思い浮かべる方も多いのではないでしょうか。 私の地元ではカンヒザクラという桜が主流で、ソメイヨシノと比べるとめっちゃ濃いピンクです。 同じ桜でもいろんな色の違いなども ウェブ上でも結構微妙な色の違いなものもあって、桜の花びらのように、微妙な調整もできますよね。 ちょい薄いピンク!とか濃ゆめと薄めのグラデーション、とか。 ウェブでそれを表現するのは主にCSSなどを使うと思うのですが、 その時って、#ffffffとか、rgb(0 0 0)など、ぱっと見ではわからない値で設定されています。 …
4ヶ月前
記事のアイキャッチ画像
新規サービス開発を担当した振り返り
iimon TECH BLOG
■はじめに ■実装期間・開発人数・担当領域 ■新規開発する上で心がけたこと(やって良かったこと) ◆見積もりの粒度がちょうどよかった ◆「サービスの用途」や「ターゲット」を理解する ◆フローチャートを作成して、仕様の認識ズレを減らすように努めた ◆テストを書きながら小さく進められてこと ◆APIの作成やER図作成など体験できたこと ◆ドキュメントを整備できたこと ■今後に活かしたいこと ◆見積もりに抜けがあることを前提にする ◆簡単そうに見えて、意外と難しいこともある ◆追加の要望が来ることも見越しておく ◆新規サービス・新機能の説明会を開く ■まとめ ■はじめに こんにちは。 株式会社iim…
4ヶ月前
記事のアイキャッチ画像
複数VPCのインターネット通信を1つのVPCに集約する構成をTerraformで書いてみた
iimon TECH BLOG
はじめに こんにちは、iimonでエンジニアをしているhogeです。 現在、弊社のワークロードで使っているVPCの数は多くありませんが、将来的にVPC数が増えた場合、NAT GatewayやVPC Endpointの費用が大きくなる可能性があります。そこで、Transit Gatewayを利用してインターネット通信を1つのVPCに集約する構成を検討し始めました。実際に導入するとなったときに素早く構築できるように、Terraformを使ってインターネット通信を集約する構成を一通り書いてみたので、今回はそれを紹介したいと思います。 インターネット通信を集約するとどれくらいコストを節約できるか まず…
4ヶ月前
記事のアイキャッチ画像
jestでchrome extentionsのchrome storageのtestを書き方
iimon TECH BLOG
こんにちは。iimonでエンジニアをしているhayashiと申します。 普段は主に拡張機能を開発しております。 今回はchrome拡張機能のlocalStorageのmock化について解説していきたいと思います。 今まで書いたjestのブログ記事の知識を前提に進めて行きますので、まだの方は是非読んで頂ければ幸いです。 jest基礎とテスト戦略 目指せ!mockマスター!!!!!~jestのMockテストについて~ Jest Mockマスターへの道(番外編) グローバルオブジェクトのmock化 spyOnでの監視やmockテスト解説 chrome storageとは Google Chrome …
4ヶ月前
記事のアイキャッチ画像
Docker基礎の基礎
iimon TECH BLOG
こんにちは。 iimonでエンジニアをしているかねにわです。 業務の中でバックエンド側プロジェクトを実行する際など、時折Dockerに触れることがあるのですが、門外漢も甚だしく、おざなりな内容理解に留まっている状態でした。 ここで、以下の書籍が大変分かりやすく参考になりましたので、自学を兼ねて、本書をベースにDocker基礎について記事の形でまとめさせていただきました。 Docker&仮想サーバー完全入門 目次 Dockerとコンテナ コンテナと仮想マシン コンテナを使うメリット コンテナの設計図であるコンテナイメージ コンテナのライフサイクル Dockerのアーキテクチャ Docker De…
4ヶ月前