はじめに 無限スクロールとは react-windowとは react-window使ってみよ Profilerを使ってレンダリングの時間を計測してみた 最後に 参考文献 はじめに こんにちは、ｉｉｍｏｎ新卒エンジニアのみやこしです、最近業務でreactを使っている最中にAPIから配列のデータをfeatchして、それをテーブルに表示する際に大量のコンポーネントが作られ、パフォーマンスが悪くなりました。それを解決するために、色々探ったところ、無限スクロールというものを知り、それについて調べてみました！ 無限スクロールとは Slackのように画面のページの下部に近づくと自動的に新しいコンテンツを読…

こんにちは！ 株式会社iimonでEMをやっている松田です。 最近、なんとなく弊社の求人内容を見る機会がありました。（強引な導入やな） 下記がその求人内容です。 仕事内容 プロジェクトマネージャーとして、「速いもんシリーズ」の新規プロダクト開発 や、既存プロダクトの開発スケジュールの調整から開発要件とりまとめ、テ ストなど幅広く携わっていただきながら、テクノロジーで不動産業界の日常 を変化させるサービスを開発していただきます。 手法としては、アジャイル開発を利用し、市場やニーズに柔軟に対応して います。 ん？？？ 「アジャイル開発を利用し」・・・だって？？？ほんとにそんなこと言い切って大丈夫か…

はじめに Let's play！ ちなみに まとめ さいごに こんにちは！ 株式会社ｉｉｍｏｎに所属しているエンジニアのひがです！ これまで業務でWebフレームワークやライブラリに触る機会は多かったのですが、ふとした瞬間に「ブラウザ拡張機能開発のFWってどんなものがあるのだろうか？」と疑問に思い、この機に調べて実際に使ってみました🙌 是非みていっていただけると嬉しいです！ はじめに 今回はPlasmo Frameworkというブラウザ拡張機能専用のFWで遊んでみます！ 公式トップ: https://www.plasmo.com/ ドキュメント: https://docs.plasmo.com/…

はじめに！ 基本構文 マッチャー関数について！ モック関数について 参考 はじめに！ iimonでエンジニアをしています。奥島です 今回、プロジェクトで Jest を使ってテストを書く機会がありましたが、基本的な実装方法について曖昧な部分があり。復習を兼ねて Jest の基本を整理しました。 基本構文 基本的な3つのメソッドdescribe(ディスクライブ), test, expect(エクスペクト) 1.describeについて describe関数で、テストのグループ化する事が整理されて見やすくなります。 - 第一引数 : テストブロックの説明（テスト対象メソッドなどを記載）書きます。 -…

こんにちは！ 株式会社iimonでエンジニアをやっているあめくです！ 最近TypeScriptを触る機会が増え、まだまだ勉強中ですが日々切磋琢磨しながら頑張っています！💪 今回はTypeScriptのWikiに記載されてるパフォーマンスに関する内容を読んで コンパイルしやすいコード の書き方について学んでみました！ 参考URL: https://github.com/microsoft/TypeScript/wiki/Performance ※ 注意点 - プロジェクトやチームごとにコーディングルールが異なるため、あくまで参考としてご覧ください。 - 今回取り上げるのは 「コンパイル時のパフォ…

はじめに 訪問回数が多いサイト調べる データベースの接続 使用するテーブル 実装 実行結果 SQLクエリの説明 サイトを要約する Google Gemini APIを使う準備 実装 実行結果 さいごに 参考 はじめに はじめまして、3月まで新卒エンジニアのカトウです⛄️🌸 【この記事でやること】 何度も訪問しているWebサイトを調べて、内容を要約する Google Chromeの検索履歴データベースを使用して、アクセス回数の多いサイトを調べる Google Gemini APIを使用して、サイトの内容を要約する 【きっかけ】 入社して1年、何度も同じ検索クエリを打ち込み、何度も同じWebページ…

はじめに エンジニアの間で話題の2冊：概要と魅力 1. 『プログラマー脳』 2. 『世界一流のエンジニアの思考法』 レビューや実装が早い理由：優秀なエンジニアの「考え方」 1. 認知負荷を減らす：短期記憶とワーキングメモリの活用 短期記憶の限界 ワーキングメモリの活用 2. 長期記憶の重要性：エンジニアの「知識の基盤」 長期記憶の鍛え方 1. 繰り返し学習 2. 関連付け 3. アクティブリコール 4. 十分な休息と睡眠 コードを効率的に読むための具体的な方法 1. 手を動かす前に頭を使う 2. 感覚ではなくファクトに基づく判断 効率的な仕事術：2冊に共通するポイント 1. 無駄を省いて集中力…

はじめに とりあえず作ってみた 使うもの 1. Slack Appの設定 1.1. アプリの作成 1.2. 設定を控える 1.3. botの表示名を設定する 1.4. OAuthの設定 2. Spreadsheetの作成 3. GASの作成 3.1. GASへ記載するコード 3.2. コードの解説 3.3. Slackへの投稿部分の補足 3.4. Webアプリとして公開 4. スラッシュコマンドの適用 5. いざスラッシュコマンドを実行！ 6. まとめ 参考文献 はじめに えー、、気がつけば入社から一年が経過してました。 社歴としては2年生、そしてつい先日1.5成人を迎えました、まつむらです。…

こんにちは。 株式会社iimonでエンジニアをしている遠藤です。 つい最近年が明けたな〜なんて思っていたら、あっという間にもうすぐ3月になりますね。 3月といえば、新生活に向けて引越しをされる方も多いのではないのでしょうか。 ということで、今回は引越しにちなんで(?)Three.jsで試しに簡単なお部屋を作ってみました。 Three.jsとは 手軽にWebページ上に3Dコンテンツを表示するJavaScriptのライブラリです。 環境構築 普段業務でReactを使用しているので、今回はreact-three-fiberを使用してReactで実装していきます。 (Node.jsをインストール済みの…

はじめに 二分探索木とはなにか グラフ構造 木構造とは 二分探索木とは 二分探索木をjavascriptで擬似的に作ってみる Node クラス BinarySearchTree クラス まとめ 参考 はじめに エンジニアの齋藤です。基本情報技術者試験の勉強をしていて 科目AにもBにも二分探索木というものがでてきて詳しく知りたいと思ったのでまとめてみました。 二分探索木とはなにか データ構造の1つでグラフの木構造を利用しています …これだけではいまいち意味がわからないので1つ1つ単語ごとにまとめます グラフ構造 データをノード（頂点）とエッジ（辺）の集合で表したデータ構造です。 ノードがいくつか…

iimonでエンジニアをしています。腰丸です。 iimonの開発では、最近で見積もりや実装工数を記録するようにしていて、 普段は、見積もりスケジュールと照らし合わせて、実装ペースやスケジュール感を把握しています。 感覚的に、「ペース的にうまくいってないかも」とか、「この内容でこの内容のコードなら結構頑張ったかも」みたいな気持ちは持ちながら開発していますが、 成果物の内容を集計、可視化することで、より正確に振り返りや改善点を見つけることができるのではないかと思いました。 弊社では、Githubを使ってコードの管理をしているので、Githubの内容を集計することで、成果物の振り返りができればいいな…

みなさんこんにちは。 コードレビューにおいて、プルリク（以下、PR）の確認が遅れたり見落としたりして困ったことはありませんか？ 通知が埋もれてしまったり、後回しにして結局忘れてしまったりなど、 理由は様々ですが、PRの確認が遅れるとリリースまでのスピードが低下する可能性があります。 社内では朝会前後や就業前など、時間を決めてやるように取り組んでいますが 私自身、たまに漏れてしまうことがある状態です。 今回は、こうした確認漏れを防げるような仕組みを作れればと思っています！ 弊社のPRの考え方について PRの出し方 背景を記載する レビュワーはさまざまなタスクに関わっているため、PRだけでは意図を…

■はじめに ■Firestoreとは？ ■Firestoreのデータ構造 ■Firebaseプロジェクトを作成する ■Firebase SDKの追加 ■FirebaseSDKのセットアップ ■Firestoreデータベースを作成する ■TODOアプリでFirestoreに触れてみる ◆環境構築 ◆Firestoreへのデータ追加 ◆Firestoreのデータ更新 ◆Firestoreのデータ削除 ◆Firestoreのデータ一覧取得とリアルタイムアップデート ■Firestore無料枠 ■まとめ ■はじめに こんにちは。 株式会社iimonでフロントエンドを担当している白水です。 普段、フロン…

こんにちは！株式会社ｉｉｍｏｎでエンジニアをしている「まるお」です。 先日、拡張機能アプリの最新版をリリースする際に、manifest.jsonのバージョンを更新する前にタグを誤って先にプッシュしてしまいました。こうしたミスを防ぐために、リリース作業を少しずつ自動化していけたらと思い、GitHub Actionsのワークフローの書き方を一から学びました。 今回の最終的な目標は、 リモートリポジトリのmanifest.jsonとタグのバージョンを比較して、異なる場合はタグをプッシュできないようにするワークフローを作成する ことです！ GitHub Actionsを初めて触る方にお役に立つ記事にな…

こんちには！ 株式会社iimonでエンジニアをしている保田です。 今回は、ブログやメモなどを自分の見やすいデザインで管理できる場所を作成したいと思い、NewtというヘッドレスCMSを使用してみました。 その簡単な実装例とともに、Newtの特徴を紹介したいと思います。 ヘッドレスCMSとは まず、ヘッドレスCMSはバックエンドとフロントエンドを分離して運用できる便利なツールです。 一般的なCMSでは、コンテンツの作成や管理と同時に、そのコンテンツを表示するためのデザイン（ビュー）も含まれています。代表的なCMSには、WordPress、はてなブログ、Qiitaなどがあります。 ヘッドレスCMSは…

thisの指す内容は関数がどのように呼ばれたかで決まる メソッドとして呼ばれた場合 関数として呼ばれた場合 アロー関数として呼ばれた場合 thisを特定の値で指定する applyによるthisの束縛 callメソッドによるthisの束縛 bindによるthisの束縛 まとめ 参考文献・記事 こんにちは！ ｉｉｍｏｎのかねにわです。 クラスやメソッドを記述する際、thisを使ってプロパティ指定等をすることが多々ありますが、 具体的な挙動や意味をあまり理解できていませんでした。 過去に技術書でthisの項目を流し読みした際にも呼び出し方で参照先が変わる云々の記述があったのは覚えているのですが、 体…

はじめに こんにちは。木暮です。 今回はchromeExtensionのruntime.sendMessageについて解説させていただきます。 普段はcontent_script側の実装がメインでService Workerを用いた実装はあまり経験がありませんでした。 業務の中で別タブの情報を取得したいケースがあり、Service Workerを介して別タブに情報を取得しに行く処理を実装することができたので便利でしたので紹介させていただきます。 chromeExtensionの構造 本題に入る前にまず、簡単にcontent_scriptとservice workerがそれぞれどういった役割を担…

最近reactのhooksを勉強しました。実務でよく使うuseStateとuseEffect以外のhooksも勉強して「便利だな～～」と思いました。 今回はその中の一つ、「useTransition」について復習がてらまとめてみました。よろしくお願いいたします。まず、普通にタブのコンポーネントを実装します。このうち、タブ２はわざと非常に重い処理で表示までに時間がかかるようなものにしています。 import { memo, useState } from "react"; import styles from "./Content1.module.css"; const tabTitles = …

最近figmaで簡単なグラフを作りたくてプラグインを探していたのですが、 そういえばプラグインってどうやって作れるんだろう？とふと思い調べてみたところ、 プラグイン自体は比較的手軽に作れるようだったので試してみることにしました！ figmaプラグインとは Plugins are programs or applications created by the Community that extend the functionality of Figma's editors. Plugins run in files and perform one or more actions. Users …

こんにちは！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:、…

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

みなさま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の特徴 ✨ シンプルな重複削除の例 ⚠️ 注意点: オブジェクトや配列の扱い 実務で重複削除し…

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

typescriptシングルトンパターン設計について

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

◼️ はじめに ◼️ 前提条件 マシン環境 データベースについて ◼️ データ挿入に関して ◼️ 100万レコードでLIKE検索(前後の部分一致)と全文検索の比較 LIKE検索 全文検索 ◼️ EXPLAINで実行計画を確認 LIKE検索のEXPLAIN結果 全文検索のEXPLAIN結果 ◼️ EXPLAIN ANALYZEを確認 LIKE検索のEXPLAIN ANALYZE結果 全文検索のEXPLAIN ANALYZE結果 ◼️ リソース使用状況確認 全文検索のクエリのプロファイリングを確認 ◼️ INNODB_FT_INDEX_TABLEを確認 ◼️ テストデータを修正 最初に作成したレコ…

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