こんにちは！iimonでCTOをしているもりごです。 本記事はiimon Advent Calendar 2024最終日の記事となります！ 今年はふるさと納税で沖縄に沢山寄付をしたので、沖縄の名産品を食べるのが毎日の楽しみとなっています。 今回、フロントエンド・サーバーサイド・エッジコンピューティングの3つの環境でWASM（WebAssembly）を活用し、同じ処理を別の環境で動かす方法を試してみました。複数の環境で共通の処理を使う事ができれば、同じコードを複数の環境に記述する必要がなくなり、管理の煩雑さを軽減できると考えて試してみました。 例えばフォームのバリデーションのように、フロントエンドとサーバーサイドの両方で同じ処理が必要になるケースはよくあると思っています。弊社は不動産領域を扱っており、住所関連の処理で色々な場所で同じ処理が必要になることが多々ありました。これまでは、なるべく１

2024-12-25 React・Node.js・CloudflareWorkersでRustから作成したWASMを動かす こんにちは！iimonでCTOをしているもりごです。 本記事はiimon Advent Calendar 2024最終日の記事となります！ 今年はふるさと納税で沖縄に沢山寄付をしたので、沖縄の名産品を食べるのが毎日の楽しみとなっています。 今回、フロントエンド・サーバーサイド… #wasm #wasm-bindgen #Cloudflare Workers #Cloudflare #Rust 2024-12-24 Bun + Vite を使って速度を比較してみる！！ こんにちは！株式会社iimonでフロントエンジニアをしているおくしまです！ 本記事はアドベントカレンダー24日目の記事となります！ ■はじめに Bunのアイコンが可愛くて興味を持ち、調べてみたところ、処理

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

こんにちは。iimonでエンジニアをしているhayashiと申します。 普段は主に拡張機能を開発しております。 今回はTypeScriptでのシングルトーンパターンについて解説したいと思います。 シングルトン（singleton）とは、オブジェクト指向プログラミングにおけるクラスのデザインパターンの一つで、実行時にそのクラスのインスタンスがアプリケーション全体で一つだけであることを保証するために使用されます これにより以下の利点があります。 グローバルな状態管理: アプリケーション全体で共有される状態を一元管理するためにシングルトンパターンを使用します。例えば、ユーザーの認証情報や設定など。 リソースの節約: 同じインスタンスを再利用することで、メモリやリソースの無駄を減らすことができます。 一貫性の確保: シングルトンパターンを使用することで、同じデータや状態が常に一貫して提供されること

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

はじめに こんにちは！株式会社iimonでフロントエンドエンジニアをしているかとうです！ 本記事はiimonアドベントカレンダー13日目の記事となります！✨ サーバーから送信されたデータがShift_JISでエンコードされている場合、そのままだとJavaScriptで扱えないことがありました。 そこで、本記事では以下の内容についてお話しします！ エンコードについて レスポンスがShift_JISレスポンス形式の場合のデコード方法 JavaScriptエンコード/デコードメソッド はじめに エンコードを理解する エンコードとは 文字コード 文字コード規格 ASCII Unicode エンコーディング形式 Unicode（UTF-8/UTF-16） Shift_JIS 文字化けの原因 Shift_JISのレスポンスを扱う 困ったこと 解決した方法 JSのエンコードメソッド encodeURI(

■はじめに ■ユーティリティ型とは？ ■Partial< Type >型 ◆説明 ◆どんなときに使えそう？ ■Required< Type > 型 ◆説明 ◆どんなときに使えそう？ ■Readonly< Type >型 ◆説明 ◆どんなときに使えそう？ ■Record< Keys, Type >型 ◆説明 ◆どんなときに使えそう？ ■Pick< Type, Keys >型 ◆説明 ◆どんなときに使えそう？ ■Omit< Type, Keys >型 ◆説明 ◆どんなときに使えそう？ ■Exclude< UnionType, ExcludedMembers >型とExtract< Type, Union >の型 ◆説明 ◆どんなときに使えそう？ ■NonNullable< Type >型 ◆説明 ◆どんなときに使えそう？ ■ReturnType< Type >型 ◆説明 ◆どんなときに使えそう

はじめに こんにちは、株式会社iimonでフロントエンドエンジニアをしている「みよちゃん」です。 本記事はアドベントカレンダー10日目の記事になります！ 自分が参画しているプロダクトでは普段FWを使っていないのですが、せっかくのアドベントカレンダーなので普段やらないことをやりたい！ということで、少し(?)前から流行っているSvelteを触ってみることにしました！ 後半は実際にSvelteを動かしながら、その記述方法や特徴にも触れているため、ぜひ一緒に動かしてみてください！ Svelteの特徴 Svelteとは Svelteは、webアプリケーションを構築するためのツールです。他のUIFW同様「マークアップ」「スタイル」「振る舞い」を組み合わせたコンポーネントアプリを宣言的に構築することができます。これらのコンポーネントは小さくて効率的な JavaScript モジュールに コンパイル され

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 私が勤めている株式会社ｉｉｍｏｎでは、COOが管轄する部署にPMが所属し、そのPMからCTO管轄のエンジニアに対してタスクを依頼していく流れになっています。 そのせいか、自社サービスを提供する会社にも関わらず、どうもエンジニア全体が社内受託開発のような雰囲気になっていました。 具体的にいくつか例をあげると、「PMから言われたスケジュールには反論しづらい」「PMが作った仕様をエンジニア側でレビューせず、違和感があってもそのまま実装」「エンジニア側からの意見・提案が出づらい」などです。 この記事では、2024年8月に社内初のEM（

はじめに 環境構築編 インストール 設定 設定の反映 確認編 digコマンドの実行 終わりに はじめに 株式会社iimonの木暮です。 今回は実際に構築した権威サーバへクエリを送ってレスポンスを確認するところまで行います。 今回の記事は、調べれば類似の記事がたくさん見つかるような内容ですが、「百聞は一見に如かず」という言葉を胸に、自分でしっかり手を動かしながら学んだことをまとめました。 本記事では、実際に調べたことや手を動かして試したプロセスを、順を追って整理しています。また、情報をまとめる際に参考にした素晴らしい記事を執筆された方々には心から感謝いたします。この場を借りて御礼申し上げます。 本記事はiimonアドベントカレンダー7日目の記事となります。 環境構築編 仮想環境にBINDをインストールしていきます。 本記事での操作は、以下の環境を前提としています 機種：MacBook Pro

はじめに テストの種類 テストレベル テストタイプ テスト戦略 Reactのテストで個人的に躓いたところ UIコンポーネントのテスト Reduxを使っている場合 @mui/x-date-pickerを使用している場合 MUIのコンポーネントでテーマを使用している場合 カスタムフックのテスト まとめ 参考記事 はじめに こんにちは、株式会社iimonでエンジニアをしている遠藤です！ 本記事はiimonアドベントカレンダー5日目の記事となります。 最近、フロントエンドのコードでリファクタリングをしたい箇所があったのですが、該当箇所のテストコードがありませんでした。 また、自分自身「フロントエンドのテストコードって何をどうやって書けばいいんだ・・・？」という状態だったので、今回はテストの種類と戦略について学んだことを整理しつつ、実際にReactのテストで初心者の自分が躓いたポイントを紹介します。

こんにちは！ 株式会社iimonにてエンジニアをしております、分割マスターのほでぃです。 この記事はiimonアドベントカレンダー6日目の記事です。 今回はCSSフレームワーク「Panda CSS」を紹介します。 この記事ではPanda CSSの利点や基本的な使い方について整理していきます。 Panda CSSとは Panda CSSは、Chakra UIチームが開発した新しいCSSフレームワークです。 特徴は「ゼロランタイムCSS-in-JS」で、パフォーマンスや型安全性を重視しています。 panda-css.com Panda CSSの特徴 ゼロランタイム：静的なCSSをビルド時に生成し、ランタイムのオーバーヘッドを削減。 型安全：TypeScriptを活用した補完機能で効率的にコーディング可能。 軽量: アトミックCSSで重複のない最小限のCSSを生成。 最新機能対応: @layer

nkmさんよりバトンを受け取りました！ 株式会社iimonにてフロントエンドエンジニアをしております、まつむらです！エンジニア人生で初めてのアドベントカレンダー参加です！ いつもの勉強会とは違って、変なことを書いても良いと言われたような気がしたので、今回は完全に趣味に振り切ろうかなと思います！ 本記事はiimonアドベントカレンダー3日目の記事となります！ はじめに 自宅でのオンプレ運用に必要な物 必要なもの あれば嬉しい物 どこまでを自作していくのか ネットワーク構成について 一般的なネットワーク構成図 今回目指すネットワーク構成図 ルータが2台ある理由 ipv4 と ipv6 について ルータ側の設定 IP アドレスの固定 ポートマッピング（NAT エントリー）の設定 サーバ側の設定もといセットアップ SSH 設定 ファイアウォール設定 再びのネットワーク設定とIPアドレスの固定 Ap

こんにちは、iimonのデッサンです。 本記事はiimonアドベントカレンダー25日目の記事となります。 メリークリスマス！ 会社ではフロントエンドに挑戦させてもらっていますが、 関係のないElasticsearchについての記事になります。 Elasticserachとは 全文検索: Elasticsearchは、大量のテキストデータを高速に検索することができます。これにより、文書、ログ、ウェブページなどのテキストデータの索引付けや検索が容易になります。 JSON形式のドキュメント: ElasticsearchはJSON形式でドキュメントを格納します。これにより、柔軟なデータ構造を扱うことができる。 多彩なクエリ機能: Elasticsearchは、複雑なクエリや絞り込み条件を使用してデータを検索できます。フルテキスト検索や範囲検索、複雑なフィルタリングが可能。 リアルタイム検索: デー

こんにちは、iimonフロントエンジニアのさいとーです。本記事はiimonアドベントカレンダー21日目の記事となります。 はじめに devtoolでデバッグをしてみる watch(監視) 条件付きブレークポイント Eventlistenerブレークポイント(click) Break on まとめ 最後に 参考 はじめに みなさんはdeveloper toolをつかってデバッグをしてますでしょうか。 elementsやsource、networkなど見れる便利なツールです。フロントエンドで開発するなら必須のツールです。 しかし、いろいろな便利な機能があるのは知っていましたが、曖昧な理解のまま使っていました。 曖昧な理解だったため、自分がデバッグのときに使っているなと思っている機能をまとめてみました。 devtoolでデバッグをしてみる サンプルコード <!DOCTYPE html> <htm

こんにちは~~~~☆:.｡. o(≧▽≦)o .｡.:☆ 株式会社iimonでエンジニアをしている「マウンテンぴー」です！！！！ 本記事は株式会社iimonアドベントカレンダー19日目です！ 今回は「React」＋「WebAPI」に関して調べてみました！！ いちばんの目的は画像検索アプリの実装までできればと思います。 どうぞ最後までよろしくお願い致します。 Reactについて ReactはWebサイトやWebアプリのUI部分を開発する際に活用するユーザインターフェース構築のための JavaScript ライブラリです！！ VueやAngularなどのWEBフロント用ライブラリに並ぶ人気のライブラリです m(・・)m Reactの3つの特徴について 1. 宣言的な View ReactではJSX 記法を使ってコーディングしていきます！ JSXとは"JavaScript XML"の略で，Rea

こんにちは、CTOの森です。 本記事はiimonアドベントカレンダー16日目の記事となります。 普段機械学習を使うことは無いのですが、勉強も兼ねてCloudFrontのログを機械学習させてみたらどうなるのか試してみました。 検証した環境 ログデータの形式 使用したログデータのフィールド 分析までの手順 正しくデータを読み込む 学習できる形式に変換 method result_type path_num path_0 ~ path_4 query_num query_len sc-status time-to-first-byte 学習 元のデータと結合 CSVファイルに出力 コード全体 分析結果 (比較的)うまくいった結果 うまくいかなかった結果 参照したサイト まとめ 最後に 今回ログデータをIsolation Forestという手法を用いて分析してみました。Isolation Fore

目次 1.はじめに 2.VSCodeの拡張機能紹介 3.コーディングのポイント 4.よく使われる英単語一覧 5.エラーとの向き合い方 6.テストで動作確認 7.検索の極意 8.公式ドキュメントに慣れる 9.リファクタリングでさらに読みやすく 10.資料作成で気をつけること 11.Gitで管理 12.よく使うLinuxコマンド一覧 13.仕事の進め方 14.プログラム以外で意識するところ 15.初心者こそ読んで欲しい本 16.まとめ 1. はじめに プログラミングは現代のデジタル社会において重要なスキルです。 AIがコードを書いてくれる時代ですが、それでも人の手によるプログラミングはいまだに必要です。それはAIが完璧なコードを書いてくれるわけではないからです。 この記事では、プログラミングの世界に新たに足を踏み入れた皆さんを全力でサポートします。 VSCodeの便利な拡張機能から始まり、コー

はじめに こんにちは！株式会社iimonでフロントエンドエンジニアをしている「みよちゃん」です！ 本記事は株式会社iimonアドベントカレンダー15日目です！ 弊社では不動産仲介業者向けのサービスを開発しています。 私が所属しているチームでは、chromeの拡張機能を開発しており、IndexeDBを使用する機会が多くあります。 今回は普段使用するIndexedDBについて調べたことを以下にまとめていきたいと思います！ IndexedDB 1. IndexedDBとは IndexedDBとはブラウザに実装されているデータベースの機能です。ブラウザ内で処理を完結させることができるので、通信が発生せずオフラインの状態でも使用することができます。データベースはRDB(Relational Database)ではなくキーバリューストアです。 2. ブラウザが持つほかのデータ管理機能との違い ブラウザ

React-three-fiber セットアップ 立方体 Canvas mesh boxGeometry meshStandardMaterial 回る立方体 useFrame まとめ 参考 こんにちは。 アドベントカレンダー14日目！ 担当のタクシです。 普段はフロントエンド中心の業務をしています。 アドベントカレンダーを書くために、最近あまり触れていないThreejsについて調べていたのですが、 「React three js」 と検索したらReact-three-fiberというものが出てきました。 Reactでthreejsがオーバーヘッドなしに使える！らしいので試してみました！ （あまり体力が続かなかったのでThreeやReactに関する詳しい説明を省いてしまっています。。すみません。。） React-three-fiber React-three-fiberはReactコンポー