はじめに こんにちはiimonでエンジニアをしているhogeです。 最近ElasticSearchを勉強する機会がありました。アウトプットのためにElasticSearchに関する基礎的な知識を学びながら、OpenSearchとLambdaで物件検索APIを作ろうと思います。 AWSリソースは検証用のために簡易的に作ったため、本番環境では推奨されない設定が含まれますが、ご了承ください。 ElasticSearchとは ElasticSearchはElastic社が開発するApache Luceneを基盤とした検索エンジンです。ElasticSearchは以下の特徴を持ちます。 高速な全文検索や…

■はじめに こんにちはiimonでフロントエンドエンジニアをしている「奥島」です！ ■Reactとは Reactとは：UI 構成開発のためのライブラリだよ！ コンポーネントを組み合わせてWEB画面を作っていくのが特徴だよ！！ コンポーネント：Reactで画面に表示される部品のことで、表示に必要なデータや処理などを1つのオブジェクトにまとめたものです。画面に表示するための部品を作ることによって、いつでも簡単に組み込むことで部品を再利用することができます。 ■コンポーネントは大きく二種類あります クラスコンポーネント 関数コンポーネント なぜコンポーネントを使うのか： Reactのコンポーネントは…

こんにちは、iimonでエンジニアをしている須藤です。 今回はRAGを試してみたいと思って調べていたところ、Difyというサービスを利用するとGUI上から簡単に構築できるらしいので、実際にRAGを利用したチャットボットを構築してみました Dify(ディファイ)の概要 RAG(検索拡張生成)とは アプリケーションのタイプ チャットボット テキストジェネレーター エージェント ワークフロー ローカルで環境構築 Notionの連携 ナレッジの作成 ChatBotの作成 トラブルシューティング 公開 ステップを分岐 まとめ 参考 Dify(ディファイ)の概要 AI アプリケーションを構築するためのオー…

■はじめに ■Reactとは何か？ ■環境構築 ◆リポジトリをCloneする ■解説 ◆Reactの初期化 ◆App.jsxの説明 ◆Form.jsxの説明 ◆Advertisement.jsxの説明 ◆Text.jsxの説明 ◆Pictures.jsxの説明 ■まとめ ■はじめに こんにちは！ 株式会社iimonでフロントエンドを担当しているなかむです！ 私事ですが、最近5daysインターンが有り、大学生がiimonに来てくれました！ 私ともう一人の同期がメンターとなり、大学生と一緒にReactで不動産広告を作成しました。 Reactは今まで触ったことがなかったので、その再現が一人でできるか…

はじめに なぜリジェクトされたのか 対応方法 つまずいたポイント (余談)パッケージ内のリモートでホストされるコードがなくなっているのか確認 まとめ はじめに こんにちは！ 株式会社iimonでエンジニアをしている「あめく」です。 今回、Firebaseの認証パッケージを使用してるサービスがChromeウェブストアへアップロードできなかったためその内容を記載したいと思います。 なぜリジェクトされたのか まずリジェクトされた理由として、Chrome拡張機能ではセキュリティの強化のためリモートでホストされる（拡張機能のパッケージに含まれていない）ソースコードを読み込んでの実行が許可されていないので…

はじめに こんにちはiimonでフロントエンドエンジニアをしている「みよちゃん」です！ 普段業務でTypeScriptを使用していますが、皆さんもご存じのSetに関して、重複を削除する以外の用途で使用したことがなく、いまいちピンときていませんでした。 最近個人的に数学を勉強する機会があり、その中の一つに「群論」がありました。これは、代数学の基礎になる分野で「集合」や「関係」を含みます。この集合・関係について学ぶなかで、Setについてハッと思う部分があったので、まとめたいと思います！ ※この記事はお堅いタイトルですが、自分が数学を勉強する中でふと思ったことをベースに書いているため、数学的理論に基…

はじめに 成功体験 もうひとつの成功体験 悩みの答え合わせ 保守性を高めるための読書ガイド 理解容易性 変更容易性 テスト容易性 宣伝コーナー はじめに こんにちは、8月からマネージャーにジョブチェンジ（？）したマツダです。 今日は敬愛する t-wada さんのスライド「質とスピード」を参照しながら、私のこれまでの実体験を振り返りながら答え合わせをし、今後目指すべき開発スタイルを探っていきたいと思います。 質とスピード（AWS Dev Day 2023 Tokyo 特別編、質疑応答用資料付き） / Quality and Speed AWS Dev Day 2023 Tokyo Edition…

こんにちは！ 株式会社iimonでエンジニアをしている遠藤です。 NoSQLデータベースってどんなタイプのものがあって、それぞれどういう特徴があるのか、概念的なことは何となくわかってきたような気がする(?)けど、実際にNoSQLのデータベースを使用して開発するイメージ(DBとSQLを使わずにやりとりするイメージ)があまり沸かないな…と思ったので、 今回はDynamoDB Localでローカルにデータベースを立てて、Djangoでデータをやり取りする簡単なAPIを生成することで、少しでもイメージを掴んでみよう！という記事になります。 この記事でやることは以下になります。 実際にローカルで動かせる…

はじめに というか実現できるの？ chrome拡張機能について マニフェスト サービスワーカー コンテンツスクリプト ツールバーアクション とりあえず先人の知恵を借りながら作ってみる。 カスタムについて まとめ 参考URL 宣伝コーナー はじめに 今年の夏も暑すぎませんかね……。 暑すぎて涼しい夜に蝉が鳴いていたり、庭に湧いたコガネムシやカメムシがぶんぶん飛び交ったり。 年々、最高気温の記録が更新されすぎて暑さのボジョ○ヌーヴォ感。 夏って何ですかね……。 とまあ夏の暑さについては置いといて、、 入力チームにてフロントエンドを担当しております、入社半年の新人（だと思いたい）まつむらです。 ii…

はじめに abstract classとはなにか 抽象クラスを使うメリット 実際にabstractを使ってみる abstractの欠点 abstractとinterface 終わりに はじめに iimonでフロントエンジニアをしてますさいとうです。 今回は業務で見かけたabstract について気になったので調べてみました abstract classとはなにか abstractは抽象クラスを作成する時に宣言する修飾子になります。 抽象クラスとは抽象メソッドを1つ以上持つクラスのことです。 特徴としては以下の点が挙げられます 1．インスタンス化できない 抽象クラス自体は直接インスタンス化できず…

はじめに iimonでサーバーサイドエンジニアをしている腰丸です。皆さんはアプリケーションのデバッグをどのように行っているでしょうか？ 今回は、簡単なログイン認証機能のコードをもとに、自分がどのような手順でデバッグ作業を行っているかをご紹介します。 あくまで、自分がどうやっているかの紹介なので必ずしも、今回の手順が良いというわけではないのです。 アプリの概要 フロントエンド React TypeScript サーバーサイド Nest TypeScript データベース SqLite 認証 GitHub Apps 機能の概要 ログインボタンをクリックすると ログイン完了後の画面に遷移する デバッ…

■はじめに ■ChromeExtensionAPIとは何か？ ■環境構築 ◆リポジトリをCloneする ◆package.jsonの説明 ◆webpack.config.jsの説明 ◆manifest.jsonの説明 ◆ChromeExtensionのインストール ■content_script.jsとbackground.jsが正しく動作しているか確認 ◆content_script.jsの実行確認 ◆background.jsの実行確認 ■background.jsで通信を確認してみる ■content_script.jsに通信の情報を渡してみる。 ■まとめ ■はじめに こんにちは。 株式…

こんにちは！iimon に 4 月に新卒で入社した木村と申します！今回は、React と Vue について、調べたことをまとめてみました。普段業務で使用しているのは React のため、Vue についての解像度が低いかもしれませんがご容赦ください。 React React はMeta(旧 Facebook)社が開発した UI 構成開発のためのライブラリです。 他のライブラリとともに利用してレンダリングします。 React のサイトで謳われている特徴は以下の三つです。 宣言的な View 宣言的な View を用いてアプリケーションを構築することで、コードはより見通しが立ちやすく、デバッグのしや…

はじめに こんにちはいでです。 この記事では、JavaScriptでHTTPリクエストを行う際の主要な手段であるaxiosとfetchについて比較し、違いやそれぞれのメリットデメリットを説明したいと思います。 fetch とは fetchは、ChromeやFirefoxモダンブラウザに標準で組み込まれているAPIです。外部ライブラリをインストールする必要なく、HTTPリクエストを行うことができます。 fetchのインターフェースがシンプルで直感的です。URLを指定して呼び出すだけでチクエストを送信することができます。 一方でHTTPエラーステータス（404や500など）をエラーとして扱わず、P…

はじめに object.defineproperty() vue双方向データバインディングを実現する原理 まとめ 最後に はじめに はじめまして、株式会社iimonに4月入社した、フロントエンジニア担当しているみやこしです🍤 みなさんはvueを触るときになぜデータに入力した値がリアルタイムで画面に反映されるか疑問に感じたことありませんか。vueではこのようなことを双方向データバインディングと言います 今回は「vueの双方向データバインディング」はどのように実現しているのかについて話します！ object.defineproperty() まず初めにobject.definepropertyにつ…

useReducerとは？ useReducerは、Reactのフックの一つで、現在の状態 (state) とアクション (action) を受け取って新しい状態を返すリデューサー関数を使用します。これにより、状態管理のロジックを外部に持たせることができ、テストがしやすくなるという利点があります。 reducerは、現在のstateとactionを受け取って新しいstateを返す関数です。この考え方はuseReducerでも使われており、状態管理ライブラリであるReduxでも一般的に使用されています。 useReducer – React 基本的な構文 reducer: 現在の状態とアクション…

はじめに こんにちは。 株式会社iimonでバックエンドエンジニアをしている木暮です。 前回の記事はドメイン名についてまとめさせていただきました。 今回はDNSの名前解決の基本的な動作についてまとめてさせていただきます。 名前解決時に登場する概念 まずは名前解決の際に出てくる概念について説明します。 権威サーバー DNSサーバーとも呼ばれています。 権威サーバーは名前解決するための情報を持っています。 持っている情報のことをゾーン情報、ゾーン情報の中身をリソースレコードと言います。 こちらについては後述します。 権威サーバーは自身が管理している情報をフルリゾルバーへ返却します。 この際に、権威…

目次 はじめに fetchとは fetchを中止する方法 どんなときにfetchを中止する？ AbortController AbortSignal fetchを中止する流れ ユーザーによる停止 タイムアウトによる停止 さいごに 参考 はじめに はじめまして、株式会社iimonに新卒入社した、フロントエンジニアのかとうです🐣 時間のかかるfetchリクエストを途中でやめたくなったので、fetchを中止する方法をまとめました。 fetchとは fetchは、Javascriptでリクエストを行うためのAPIです。非同期にサーバーから文書や写真などのデータを取得するために使用されます。 fetch…

こんにちは エンジニアのタクシです。 Firestoreの複合インデックスの作成方法、関連情報について調査していたのでそのメモをまとめた記事になります。 （今回はインデックスについてのお話のみなので、Firebase・Firestoreの細かい部分などかなり詳細省いているのでご了承ください。。！） 結論 早速ですが結論として、Firestoreで複合インデックスを作成する方法は主に2つあります。 今回は仮にemployeesというコレクションがあるとし、 "age"と"salary"というフィールドで複合インデックスを作成する場合の手順を紹介します。 ① Firebaseコンソール上から作成す…

二度目まして！ 株式会社iimonでエンジニアをしている奥島です。 今回は普段使うデベロッパーツールの【Network】について調べてみました。 はじめに Chrome デベロッパー ツールとは Google Chromeにデフォルトで搭載されている開発者向けの検証ツールになります！！！！ Webサイトのパフォーマンスを向上させるための多くの機能が搭載されています。 Networkパネルでできること デベロッパーツールには、機能ごとに分かれたパネルが11個存在しています。今回のNetworkパネルはその中の1つになります。 Networkパネルは、現在開いている画面上で実行した通信のログを確認…

こんにちは。iimonでエンジニアをしている林と申します。 前回はjestのmockの概要やマッチャーや外部APIを叩く処理のmock化をハンズオン形式で紹介しましたが、今回は番外編としてグローバルオブジェクトのmock化についてlocalStorageのmock化を例にして解説していきたいと思います。 こちら参照して頂ければ考え方は同じなのでグローバルオブジェクト(windowオブジェクト)にあるメソッドのmock化は大体問題なく出来るかなって思います。 ぜひご覧頂ければ幸いです。 こちらは以前に記載した2つの記事の知識を前提に解説させて頂いておりますので、まだ未読で気になった方は是非併せて…

はじめに デザインパターンとは？ Creational（生成に関するパターン） シングルトン（Singleton） ファクトリーメソッド（Factory Method） ビルダー（Builder） Structural（構造に関するパターン） アダプター（Adapter） デコレーター（Decorator） ファサード（Facade） Behavioral（振る舞いに関するパターン） オブザーバー（Observer） ストラテジー（Strategy） コマンド（Command） ストラテジー（Strategy）とコマンド（Command）の使い分け まとめ デザインパターンのメリット デザイン…

はじめに こんにちは、iimonでエンジニアをしているhogeです。 普段通り生活していたら、ふと思い立ったかのように API Gateway + Cognito構成のサーバレスのアプリケーションに認可を組み込む方法が気になることってありますよね。 AWSの最近のアップデートでAmazon Verified Permissionsを使って、Amazon Cognitoグループに対して簡単に認可を設定できるようになったようだったので、試してみたいと思います。 https://aws.amazon.com/about-aws/whats-new/2024/04/amazon-cognito-cus…

1. はじめに こんにちはiimonでフロントエンドエンジニアを担当している「みよちゃん」です！ 業務中にAPIにリクエストを送信することが多々あり、その際にFormDataを使用しているのですが、お恥ずかしながらその正体をちゃんと理解しないまま使用していました。 このままではいけない！と思い今回復習を兼ねて記事にまとめていきます！ 2. そもそもFormDataって? FormDataインターフェイスは、フォームフィールドとそれらの値から表現されるkeyとvalueのセットを簡単に構築することができる手段です。FormDataはfetch やXMLHttpRequest.send、novig…

背景 🖼️ 今やっていること 🏃 意識していること 🧠 運用チームとのコミュニケーション 🗣 技術調査結果の共有はするが提案はしない 🙅‍♂️ 運用チームごとの開発の進め方にしたがう 🏃 Reviewerになってもらう運用チームのメンバーの負担を考える 🤔 Reviewerになった時に開発をなるべく止めないようにする 🚄 技術調査したものを形にして残す ✏️ 当たり前に疑問を持つ 🤔 業界、顧客の業務に関心を持つ 🕵️ 最後に 🔥 参考 📚 背景 🖼️ 初めまして！たいせいです。 私は1人目改善チームのエンジニアになり、ほぼ1年経ちました。 元々フロントエンドの経験が多いですが、改善チームに入…

1. コンストラクタとしての使用 2. thisのバインディング 3. superのバインディング 4. メソッドとしての使用 5. argumentsの有無 6. prototypeプロパティの有無 7. call、apply、bind の使用 8. ジェネレータとしての使用 まとめ こんにちは！ 株式会社iimonでエンジニアをしている遠藤です。 最近ふと、アロー関数と従来のfunction式を用いた関数(以降「従来の関数」と呼びます)の違いをあまり意識せずに、何とな〜くでアロー関数を使ってしまっているな〜と思うことがありました。 そこで、今回は従来の関数とアロー関数の構文以外の主な違いに…

こんにちは、iimonでエンジニアをしている須藤です。 今回は、AWSのdocumentを読んでいて、ベクターストアという記述があり気になったので調べてみました。 ベクトルデータベースとは ベクトル化について ベクトル化に利用するモデルと概要 ドキュメントベースのモデル(意味的関連性) bag-of-words(文章を単語に分けて順序関係なしに袋に詰めるイメージ) LSA、PLSA、LDA(トピックモデル) ニューラルネットワークを用いたアプローチ word2vec(単語の意味を考慮できるモデル、意味的類似性) RNN(リカレントニューラルネットワーク) LSTM(長・短期記憶) Transf…

はじめに こんにちは！4月にジョインしましたマツダと申します。 これまではどちらかというとバックエンドの開発を主1にやっていたのですが、 iimonに入ってからはフロント中心に担当させていただいています。 これまではTDD（テスト駆動開発）での開発経験もあって、自動テストがもたらしてくれる安心感に身を委ねる開発スタイルにすっかり慣れてしまっていたのですが、今の担当プロダクトではテストが書かれているのは一部に留まっているようでした。 また、コンポーネント設計はatoms,molecules,organismsからなる、いわゆるAtomic Designを採用しているのですが、見た目とロジックが混…

■はじめに ■前提 ■SPAのメリット・デメリット ◆メリット ◆デメリット ■環境構築 ■VueCLIで作られた雛形のコードを確認してみる ■通信の中身を見てみる ■動的ページを追加してみる ◆ステップ１：viewファイルを作成 ◆src/App.vueに一覧ページへ遷移するリンクを作成する ◆VueRouterの設定を追加 ◆画面の動きと通信を確認してみる ■まとめ ■はじめに こんにちは。 株式会社iimonでフロントエンドを担当している「白水」です。 今回は「VueRouterを使ったSPAに触れてみる」というテーマで書いていきたいと思います。 ■前提 SPAとは「Single Pag…

はじめに はじめまして！株式会社iimonにてフロントエンドエンジニアをしております、ガジェットおじさんです！ 業務では主にTypeScriptの型と睨めっこをしています！ TypeScript書いてますか？静的型付け言語はいいぞ！ 文字通り型をつけられるので事故が減ったり、予測が容易になったりとメリットが多い。 一度、型を使ったらもう素のJavascriptなんて恐ろしくて使えない……。 今回はそんな中毒性のある言語であるTypeScriptにおけるクラスについて書いていこうかなと思います！ はじめに classってなんだ？ namespaceとは implementsとextendsについ…