iimon TECH BLOG

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

2024-01-01から1年間の記事一覧

vue双方向データバインディングを実現する仕組み

はじめに object.defineproperty() vue双方向データバインディングを実現する原理 まとめ 最後に はじめに はじめまして、株式会社iimonに4月入社した、フロントエンジニア担当しているみやこしです みなさんはvueを触るときになぜデータに入力した値がリア…

useReducerの使い方

useReducerとは? useReducerは、Reactのフックの一つで、現在の状態 (state) とアクション (action) を受け取って新しい状態を返すリデューサー関数を使用します。これにより、状態管理のロジックを外部に持たせることができ、テストがしやすくなるという利…

DNSの名前解決について

はじめに こんにちは。 株式会社iimonでバックエンドエンジニアをしている木暮です。 前回の記事はドメイン名についてまとめさせていただきました。 今回はDNSの名前解決の基本的な動作についてまとめてさせていただきます。 名前解決時に登場する概念 まず…

fetchを中断したい

目次 はじめに fetchとは fetchを中止する方法 どんなときにfetchを中止する? AbortController AbortSignal fetchを中止する流れ ユーザーによる停止 タイムアウトによる停止 さいごに 参考 はじめに はじめまして、株式会社iimonに新卒入社した、フロント…

Firestoreで複合インデックスを作成する方法

こんにちは エンジニアのタクシです。 Firestoreの複合インデックスの作成方法、関連情報について調査していたのでそのメモをまとめた記事になります。 (今回はインデックスについてのお話のみなので、Firebase・Firestoreの細かい部分などかなり詳細省いて…

Google Chrome のデベロッパーツール【Network編】について調べてみました。

二度目まして! 株式会社iimonでエンジニアをしている奥島です。 今回は普段使うデベロッパーツールの【Network】について調べてみました。 はじめに Chrome デベロッパー ツールとは Google Chromeにデフォルトで搭載されている開発者向けの検証ツールにな…

Jest Mockマスターへの道(番外編) グローバルオブジェクトのmock化

こんにちは。iimonでエンジニアをしている林と申します。 前回はjestのmockの概要やマッチャーや外部APIを叩く処理のmock化をハンズオン形式で紹介しましたが、今回は番外編としてグローバルオブジェクトのmock化についてlocalStorageのmock化を例にして解説…

オブジェクト指向における再利用のためのデザインパターン 

はじめに デザインパターンとは? Creational(生成に関するパターン) シングルトン(Singleton) ファクトリーメソッド(Factory Method) ビルダー(Builder) Structural(構造に関するパターン) アダプター(Adapter) デコレーター(Decorator) ファ…

Amazon Verified Permissionsで、API Gateway + Cognito構成のAPIの認可設定をする

はじめに こんにちは、iimonでエンジニアをしているhogeです。 普段通り生活していたら、ふと思い立ったかのように API Gateway + Cognito構成のサーバレスのアプリケーションに認可を組み込む方法が気になることってありますよね。 AWSの最近のアップデート…

今更学ぶFormData〜multipart/form-dataを添えて〜

1. はじめに こんにちはiimonでフロントエンドエンジニアを担当している「みよちゃん」です! 業務中にAPIにリクエストを送信することが多々あり、その際にFormDataを使用しているのですが、お恥ずかしながらその正体をちゃんと理解しないまま使用していまし…

改善チームのエンジニアとして意識していること

背景 ️ 今やっていること 意識していること 運用チームとのコミュニケーション 技術調査結果の共有はするが提案はしない ‍♂️ 運用チームごとの開発の進め方にしたがう Reviewerになってもらう運用チームのメンバーの負担を考える Reviewerになった時に…

JavaScript 従来の関数とアロー関数の違い

1. コンストラクタとしての使用 2. thisのバインディング 3. superのバインディング 4. メソッドとしての使用 5. argumentsの有無 6. prototypeプロパティの有無 7. call、apply、bind の使用 8. ジェネレータとしての使用 まとめ こんにちは! 株式会社iimo…

ベクトルデータベースについて調べてみた

こんにちは、iimonでエンジニアをしている須藤です。 今回は、AWSのdocumentを読んでいて、ベクターストアという記述があり気になったので調べてみました。 ベクトルデータベースとは ベクトル化について ベクトル化に利用するモデルと概要 ドキュメントベー…

実録!別れて幸せになる方法(あくまでもコンポーネント設計の話

はじめに こんにちは!4月にジョインしましたマツダと申します。 これまではどちらかというとバックエンドの開発を主1にやっていたのですが、 iimonに入ってからはフロント中心に担当させていただいています。 これまではTDD(テスト駆動開発)での開発経験…

VueRouterを使ったSPAに触れてみる

■はじめに ■前提 ■SPAのメリット・デメリット ◆メリット ◆デメリット ■環境構築 ■VueCLIで作られた雛形のコードを確認してみる ■通信の中身を見てみる ■動的ページを追加してみる ◆ステップ1:viewファイルを作成 ◆src/App.vueに一覧ページへ遷移するリンク…

TypeScriptのclassってなんだ?

はじめに はじめまして!株式会社iimonにてフロントエンドエンジニアをしております、ガジェットおじさんです! 業務では主にTypeScriptの型と睨めっこをしています! TypeScript書いてますか?静的型付け言語はいいぞ! 文字通り型をつけられるので事故が減…

#Web開発でよく使うHTTPメソッド、冪等性(べきとう)、安全性に関して!

こんちは〜 おくしまです!! 今回はよく使う代表的なHTTPメソッドと冪等、安全に関して調べてみました! HTTPメソッドの種類について(主なHTTPメソッド) GETメソッド(データ取得) GETメソッドが使われる場面 Webページ(HTML, もしくはプログラムによっ…

「APIってなに?」から「実際に作ってみた!」

こんにちは!なかむらです。 普段はChrome拡張機能の「入力速いもん」フロント側の開発を行っています。 タスクでデータの流れを見る際にAPIに渡しているデータをみることが時々あるのですが、正直APIっていまいちピンと来ていませんでした。 なので、今回は…

エンジニアの作業効率化に役立ちそうなツールを紹介

はじめに こんにちは。 エンジニアの腰丸です。 普段皆さんは、どのようなツールを使っているでしょうか。 今回は、自分が数年間エンジニアとして業務をしていくなかで、 生産性の向上につながっていると感じたツール類を紹介します。 Raycast www.raycast.c…

JavaScriptでコードゴルフをやってみよう!

はじめに こんにちは。 エンジニアのデッサンです。 今日はコードゴルフを社内のみなさんと一緒にやってみようと思います。 コードゴルフとは まず最初にコードゴルフとは、 お題に対してできるだけ短いコードで実装することを目指すゲームです。 名前はゴル…

ブラウザのオブジェクトモデルの構築について

はじめに こんにちは。 株式会社iimonでフロントエンドを担当している保田です。 今回はブラウザがレンダリングする際に構築されるDOM(Document ObjectModel)とCSSOM(CSS Object Model)について書きました。 レンダリングとは? ブラウザに指定されたURL…

ドメイン名について

はじめに こんにちは。 株式会社iimonでバックエンドエンジニアをしている木暮です。 自身のキャリアを振り返るとコードを書くことは長年やってきたのですがインフラ周りやミドルウェア関連の知識がまだまだだなと感じていました。 CTOにオススメいただいたD…

コンピューターはどうやって計算しているの??

1.はじめに こんにちは!株式会社iimonでフロントエンドエンジニアをしてる「みよちゃん」と申します! チームメンバーの誰も「みよちゃん」と呼んでくれないので、そろそろ自称するのを辞めようかと悩んでいます。。 そんなことはさておき、今回のテーマは…

git mvの挙動を解説

■はじめに ■実施環境 ■実際の状況 ■なぜmvコマンドで差分が出なかったのか ■git mvの挙動 ■まとめ 参考資料 ■はじめに こんにちは。 株式会社iimonでエンジニアをしている遠藤です。 以前ファイル名の大文字/小文字を変更したかったので、mvコマンドで変更し…

ハードリンクとシンボリックリンクについて

はじめに リンク inode ファイルの情報について ハードリンク シンボリックリンク どちらをつかう?? 最後に はじめに iimonのフロントエンジニアをしてます齋藤です。 業務でシンボリックリンクを使うことがあり、今までできるだけlinuxの操作を避けてきた…

Webpackを使ってバンドルしてみる

■はじめに ■環境構築 ■前提 ■TypeScriptコンパイラーとESModuleを使ってコンパイルと実行してみる ■Webpackを使って、バンドルしてみる ◆Webpackで必要なライブラリのインストール ◆Webpackの設定 ■まとめ ■はじめに こんにちは。 株式会社iimonでフロントエ…

やっと触ってみるDeno

こんにちは。 エンジニアのタクシです。 今日はDenoについて。 Denoとは? 公式から抜粋 Deno (/ˈdiːnoʊ/, pronounced dee-no) is an open source JavaScript, TypeScript, and WebAssembly runtime with secure defaults and a great developer experience.…

目指せ!mockマスター!!!!!~jestのMockテストについて~

こんにちは。iimonでエンジニアをしている林と申します。 本記事はiimonアドベントカレンダ11日目の記事の続きで前回は基本のjestテストの方法を記載しましたが今回はその続きでmockテストについて記載していこうと思います。 mockの概要 mockとはソフトウェ…

SPAサイトをS3 + Cloudfrontにデプロイする方手順を解説する

はじめに こんにちは、インフラエンジニアのhogeです。 この記事では、AWSを使用してSPAアプリケーションを公開する手順を解説します。 はじめに 構成 使用しているサービスのざっくりとした説明 クライアントがアクセスし、レスポンスが返されるまでの流れ …

Nuxt2からReactに移行を決めた話

以下の理由でReactに移行を踏み切りました。 Nuxt3への移行とReactへの移行を比較したがNuxt3への移行コストが思った以上に高い 今後を考えた際の運用のし易さ(情報量の多さ、ライブラリ等)