サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
やろう!確定申告
tech.iimon.co.jp
こんにちは!iimonでCTOをしているもりごです。 本記事はiimon Advent Calendar 2024最終日の記事となります! 今年はふるさと納税で沖縄に沢山寄付をしたので、沖縄の名産品を食べるのが毎日の楽しみとなっています。 今回、フロントエンド・サーバーサイド・エッジコンピューティングの3つの環境でWASM(WebAssembly)を活用し、同じ処理を別の環境で動かす方法を試してみました。複数の環境で共通の処理を使う事ができれば、同じコードを複数の環境に記述する必要がなくなり、管理の煩雑さを軽減できると考えて試してみました。 例えばフォームのバリデーションのように、フロントエンドとサーバーサイドの両方で同じ処理が必要になるケースはよくあると思っています。弊社は不動産領域を扱っており、住所関連の処理で色々な場所で同じ処理が必要になることが多々ありました。これまでは、なるべく1
こんにちは!株式会社iimonでフロントエンジニアをしているおくしまです! 本記事はアドベントカレンダー24日目の記事となります! ■はじめに Bunのアイコンが可愛くて興味を持ち、調べてみたところ、処理速度が速いとのこと。ますます気になってきました! なのでBunしていきます! ■Bunについて BunはJavaScriptの実行環境で、Node.jsなどに似た役割を持つものです 現在、この JavaScript実行環境には、いくつかの種類がありますが、ここに新しく加わったのが「Bun」です。 ブラウザ環境:Google Chrome、Safariなど サーバーサイド環境:Node.js:、Deno、そしてBunです! ■Bun には「便利な機能が沢山含まれています!」代表的な機能としては、以下のようなものがあります!! 1.パッケージマネージャー Bun は npm, yarn, pn
よろしくお願いします!エンジニアのideです。 こちらはアドベントカレンダー23日目の記事になります! 今年は体のあちこちに痛みを感じることが多かったので、来年こそは健康に過ごせる一年になるといいなと願っています。 さて、今回は今年やってきたことを振り返るのもいい機会だなと思い、特に触れる機会が多かったJavaScriptについてまとめてみることにしました。 結果的に基本的な内容が中心となりましたが、改めて理解を深める良いきっかけになったので、これはこれでよしとしています! それではよろしくお願いいたします! [目次] テンプレート文字列 スプレッド構文 分割代入 プロパティ名の短縮記法 オプショナルチェーン nullish(??)とfalsy(||)チェック ディープコピー アロー関数 Promise async/await forEachの中でasync/awaitが効かない おわりに
みなさまHappy December! どうでもいい話ですが、私は12月が1年の中で1番好きな月です。 街の雰囲気とか、冬らしさが出てきて「雪降らないかな〜」と勝手にワクワクする感じがなんともいえないのです!(先日ちょこっと降ったらしいのですが見逃しました。。キィィィ) 文化等により様々な祝い方が存在するこの時期ですが、私個人的にはクリスマスカードを送り合う文化はなんとも素敵だなぁと思います。日本でいうところの年賀状のような感覚でしょうか。 少しだけ調べてみたのですが、初めてクリスマスカードが送られたのは1843年のロンドンだそうです。(ほぅ〜) そんなクリスマスカードも時代とともに発展し、今ではデジタルで作成しプリントされたものを送ったりなど作り方は様々。 私にも毎年送ってくれるお友達家族がいるのですが、自分がぼーっとしてるせいで時期がずれたり、送りそびれたり、、(毎年ありがとう。そして
はじめに まずは戦う相手を見定めよう 戦術はいかに まずは関数を知る しゅ、しゅ、出力がないだってぇ!? 型=値の集合とはなんぞや? まとめ おわりに 参考 はじめに 本記事はiimon Advent Calendar 2024 21日目の記事となります! こんにちは!DDDとTDDには熱心だけど、推し活はDD(誰でも大好き)ではなく、とことん一途なエンジニアマネージャー、まつだです。 本日12月21日は私の誕生日ということで、なんと101101歳になってしまいました!(この手のやつ、16進数にしてるのはよく見るけど、2進数は斬新やな⋯) ちょっとでも誕生日を祝ってくれる気持ちのある方は、ぜひ↓のボタンをぽちっとしてブックマークでもしてやってください(笑) 今回は、私もさらに歳を重ねて型にはまった人間にならねば、ということで、「関数型ドメインモデリング」という本を読んで学んだことを普段の業
こんにちは!株式会社iimonでエンジニアをしている、Javascript勉強中の「まるお」です。 本記事はアドベントカレンダー20日目の記事になります! 📚 本記事の内容 filter・Set・Mapを使った重複削除の方法 オブジェクト配列の重複削除の実装方法 パフォーマンス比較と便利なライブラリの紹介 📚 本記事の内容 はじめに 🔍 1. 重複削除したい!配列メソッドの課題… 🚀 filter() と indexOf() を使った重複削除 ❗️ 問題点 🛠 2. Set による重複削除 ✅ Setの特徴 ✨ シンプルな重複削除の例 ⚠️ 注意点: オブジェクトや配列の扱い 実務で重複削除したかったコード 💡 3. Map による重複削除 ✨ 実務で重複削除したかったコード キーが重複した場合の挙動 🚀 4. 大規模データでのパフォーマンス比較 📈 結果の比較 🔧 5.
こんにちは!株式会社iimonでフロントエンジニアをしている「ひが」です! 本記事はアドベントカレンダー19日目の記事になります! 先日夢で「メリークロージャマス!!!」と叫んでスベる夢を見ました。 冬だからか、みなさん冷たかったです(現実では暖かいです) そのようなこともあり、思い切って記事にしてみようと思いました! どうか、暖かい目で見守っていただけると嬉しく思います!! 本題 本題ですが、みなさんはクロージャをご存知でしょうか。 MDNよりお言葉を借りると クロージャは、組み合わされた(囲まれた)関数と、その周囲の状態(レキシカル環境)への参照の組み合わせ です! 初見だと何言ってるかよくわからないですよね。 本記事でざっくり掘っていきますので、是非一緒に見ていただければ幸いです! ※ 本記事は基本的にMDNの内容に沿う形で進めつつ、たまに脱線したり小ネタを挟んだりします ※ コード
こんにちは。iimonでエンジニアをしているhayashiと申します。 普段は主に拡張機能を開発しております。 今回はTypeScriptでのシングルトーンパターンについて解説したいと思います。 シングルトン(singleton)とは、オブジェクト指向プログラミングにおけるクラスのデザインパターンの一つで、実行時にそのクラスのインスタンスがアプリケーション全体で一つだけであることを保証するために使用されます これにより以下の利点があります。 グローバルな状態管理: アプリケーション全体で共有される状態を一元管理するためにシングルトンパターンを使用します。例えば、ユーザーの認証情報や設定など。 リソースの節約: 同じインスタンスを再利用することで、メモリやリソースの無駄を減らすことができます。 一貫性の確保: シングルトンパターンを使用することで、同じデータや状態が常に一貫して提供されること
はじめに・やりたいこと APIを利用するにあたっての準備 Messaging APIの設定準備 OpenWeatherMapAPIの設定準備 GASでスクリプトを組む まとめ 参考 こんにちは! iimonでフロントエンドエンジニアを担当しているたくふぉんです! だんだんとクリスマスが近づいてきましたね🎄🎅⭐️ 本記事はアドベントカレンダー17日目の記事になります。 はじめに・やりたいこと 世の中には無料で便利に使える様々なAPIが存在しますが、そんなAPIを自在に操ることができるエンジニア像に何とはなしに憧憬の念を抱いており(?)、APIを使って自分でも何かツールを作ってみたいと思っていました。 そこで今回は、APIに触れる良い機会だと思いましたのでGAS(Google Apps Script)をベースに、OpenWeatherMapAPIとLINE Messaging API を利
◼️ はじめに ◼️ 前提条件 マシン環境 データベースについて ◼️ データ挿入に関して ◼️ 100万レコードでLIKE検索(前後の部分一致)と全文検索の比較 LIKE検索 全文検索 ◼️ EXPLAINで実行計画を確認 LIKE検索のEXPLAIN結果 全文検索のEXPLAIN結果 ◼️ EXPLAIN ANALYZEを確認 LIKE検索のEXPLAIN ANALYZE結果 全文検索のEXPLAIN ANALYZE結果 ◼️ リソース使用状況確認 全文検索のクエリのプロファイリングを確認 ◼️ INNODB_FT_INDEX_TABLEを確認 ◼️ テストデータを修正 最初に作成したレコード内容の一部 新たに作成したレコード内容の一部 LIKE検索 全文検索 ◼️ まとめ ◼️ 最後に ◼️ はじめに こんにちは!株式会社iimonでフロントエンジニアをしているあめくです! 本記事は
はじめに 結合とはなに?? 内部結合 外部結合 それぞれのメリットと適しているケース 内部結合のメリット 内部結合のデメリット 内部結合を選ぶべきケース 外部結合のメリット 外部結合のデメリット 外部結合を選ぶべきケース 基本構文 実際に使ってみた 注意すべき点 実際に結合したテーブルからデータを集計する(内部結合) 実際に結合したテーブルからデータを集計する(外部結合) 最後に 参考 はじめに こんにちは、株式会社iimonでフロントエンドエンジニアを担当している「たーくん、たー坊」です♪ 本記事はアドベントカレンダー15日目の記事になります。 フロントエンジニアながらサービスの運用・保守をするにあたりSQLでデータを見ることがあったり、バックエンドにも今後挑戦したいということもありSQLを勉強しています。 1からSQLを学んでいくと結合あたりから複雑になってくる印象があったので、実際に
はじめに こんにちは、株式会社iimonでフロントエンドエンジニアをしている木村です。 本記事はアドベントカレンダー14日目の記事になります! cssって奥が深いですよね。勉強した気になっても自分の思い通りに一発でなってくれたことがありません。そんな中で、以前いつにも増して詰まった実装がありました。 「スクロールバーを縦と横に常時表示する」というものです。 入社して1ヶ月経たないぐらいに取り組んだこの実装、あまり理解できずに実装していた部分も大きいです。入社して半年と少し経った今なら、もっとちがう方法で、ちゃんと理解して実装できるんじゃないかとこの記事を書いてみました。 まだまだ勉強中のため、間違い等ありましたらご指摘お願い致します! やりたいこと 固定の要素の中に大きな要素を入れて、ヘッダーは固定しつつ縦横にスクロールを常時つけたい 横のスクロールをした時はヘッダーも一緒にスクロールする
はじめに こんにちは!株式会社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 >型 ◆説明 ◆どんなときに使えそう
はじめに コンポーネントの構成について 準備 Headerの実装 Itemのスタイル実装 Itemの実装 Footerの実装(チェックボックスに状態を持たせる) Footerのチェック機能 Footerの削除機能 まとめ 参考文献 はじめに こんにちは、iimon新卒エンジニアの「ばんり」です。 本記事はアドベントカレンダー11日目の記事になります! 最近業務でReactを使うことが多くなり、Reactをお勉強中です!今回は私がReactを勉強する際、最初に作ったToDoリストについて紹介します。 今回はReact 16.8 で追加された機能Hooksを使っています! 完成イメージ: コンポーネントの構成について まず、最初にコンポーネントの構成について考えてみましょ。 コンポーネントの分け方は人それぞれですが、今回私は下記のイメージのようにコンポーネントを分けて実装しました! 各コンポー
はじめに こんにちは、株式会社iimonでフロントエンドエンジニアをしている「みよちゃん」です。 本記事はアドベントカレンダー10日目の記事になります! 自分が参画しているプロダクトでは普段FWを使っていないのですが、せっかくのアドベントカレンダーなので普段やらないことをやりたい!ということで、少し(?)前から流行っているSvelteを触ってみることにしました! 後半は実際にSvelteを動かしながら、その記述方法や特徴にも触れているため、ぜひ一緒に動かしてみてください! Svelteの特徴 Svelteとは Svelteは、webアプリケーションを構築するためのツールです。他のUIFW同様「マークアップ」「スタイル」「振る舞い」を組み合わせたコンポーネントアプリを宣言的に構築することができます。これらのコンポーネントは小さくて効率的な JavaScript モジュールに コンパイル され
はじめに 株式会社iimonでSREエンジニアをしているhogeです。 本記事はiimonアドベントカレンダー9日目の記事となります。 今回の記事は技術的な棚卸しとして、普段大変お世話になっているWebサーバがどういった仕組みで動いているのかを実装しながら深堀りしていこうと思います。 弊社のバックエンドはDjango/FastAPI + Gunicornの構成で動作しているため、Pythonを絡めた説明が多くなるかと思います。サンプルコードもPythonで実装をしています。 途中、システムコールやファイルディスクリプタなどにも踏み込んだ話をするのですが、低レベルなプログラミングをちゃんとやったことがないため、間違えている部分があるかもしれません。今後学習して行く中で気づいたら都度修正していきたいと思います。 環境・使用ツール 言語 Python OS Ubuntu(Linuxのシステムコー
はじめに iimonでエンジニアをしている腰丸です。 最近業務でFirestoreRestAPIを使用する機会があったので、使い方を考えてみました。 通常のSDKを用いたコーディングと比べて、そのまま使おうとすると実行したい操作ごとにリクエストやレスポンスの処理を記述する必要があり、 コード量やメンテナンスの面でなかなか辛いものがあるので、そこら辺をうまく解消できるように考えました。 FirestoreRestAPIの使い方自体は、弊社の木暮さんが記事を出してくれています。 tech.iimon.co.jp やりたいこと FirestoreAPI経由で操作するコレクションのスキーマを定義する専用のファイルを作る Firestoreのコレクションスキーマの定義をすることでFirestoreRestAPIに対するインターフェイス(APIのやりとり)の処理は実装が終わっている状態にする。 定義済
はじめに 環境構築編 インストール 設定 設定の反映 確認編 digコマンドの実行 終わりに はじめに 株式会社iimonの木暮です。 今回は実際に構築した権威サーバへクエリを送ってレスポンスを確認するところまで行います。 今回の記事は、調べれば類似の記事がたくさん見つかるような内容ですが、「百聞は一見に如かず」という言葉を胸に、自分でしっかり手を動かしながら学んだことをまとめました。 本記事では、実際に調べたことや手を動かして試したプロセスを、順を追って整理しています。また、情報をまとめる際に参考にした素晴らしい記事を執筆された方々には心から感謝いたします。この場を借りて御礼申し上げます。 本記事はiimonアドベントカレンダー7日目の記事となります。 環境構築編 仮想環境にBINDをインストールしていきます。 本記事での操作は、以下の環境を前提としています 機種:MacBook Pro
こんにちは! 株式会社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
はじめに、株式会社iimonでエンジニアをしている須藤です。 最近フロントエンドを触る機会が多く、E2Eテストについて気になっていたので、 今回はPlaywrightでE2Eテストを書いてみようかと思います。 本記事はiimonアドベントカレンダー4日目の記事となります。 E2E(End to End) Testとは メリット デメリット Playwright概要 初期設定 テストを自動生成 テストの実行 エラーの挙動を確認 テスト内容の追加 HTMLレポートを確認してみる Chrome拡張機能のテスト まとめ 参考 募集 E2E(End to End) Testとは エンドユーザーの視点で、アプリケーションを操作し、プロセス全体が期待通りに動作することを確認するテスト メリット UI、API、Chrome拡張機能、WAF、CDNなどシステム全体を通した挙動を確認することができる ユーザー
はじめに テストの種類 テストレベル テストタイプ テスト戦略 Reactのテストで個人的に躓いたところ UIコンポーネントのテスト Reduxを使っている場合 @mui/x-date-pickerを使用している場合 MUIのコンポーネントでテーマを使用している場合 カスタムフックのテスト まとめ 参考記事 はじめに こんにちは、株式会社iimonでエンジニアをしている遠藤です! 本記事はiimonアドベントカレンダー5日目の記事となります。 最近、フロントエンドのコードでリファクタリングをしたい箇所があったのですが、該当箇所のテストコードがありませんでした。 また、自分自身「フロントエンドのテストコードって何をどうやって書けばいいんだ・・・?」という状態だったので、今回はテストの種類と戦略について学んだことを整理しつつ、実際にReactのテストで初心者の自分が躓いたポイントを紹介します。
nkmさんよりバトンを受け取りました! 株式会社iimonにてフロントエンドエンジニアをしております、まつむらです!エンジニア人生で初めてのアドベントカレンダー参加です! いつもの勉強会とは違って、変なことを書いても良いと言われたような気がしたので、今回は完全に趣味に振り切ろうかなと思います! 本記事はiimonアドベントカレンダー3日目の記事となります! はじめに 自宅でのオンプレ運用に必要な物 必要なもの あれば嬉しい物 どこまでを自作していくのか ネットワーク構成について 一般的なネットワーク構成図 今回目指すネットワーク構成図 ルータが2台ある理由 ipv4 と ipv6 について ルータ側の設定 IP アドレスの固定 ポートマッピング(NAT エントリー)の設定 サーバ側の設定もといセットアップ SSH 設定 ファイアウォール設定 再びのネットワーク設定とIPアドレスの固定 Ap
はじめに EMのスキルとは ピープルマネジメントのスキルとは 傾聴力 アイスブレイク 質問力 共感力 舐められ力 まとめ はじめに こんにちは! 株式会社iimonのエンジニアマネージャー、まつだです。 iimon2年目のアドベントカレンダー初日ということでそれにふさわしい内容にしようと思ったのですが、どうしてもRustについてしか書く気が起きず、あいだをとって(?)私のお仕事、「エンジニアマネージャー」(以下EM。エンジニアリングマネージャーともいう)について書きたいと思います! 先日、「EMゆるミートアップ」というイベントに初めて参加させていただいて、いろいろ考えることがありました。 EMのスキルとは 先述のイベントでまずはじめに話題になったのが「EMのスキルアップについて」です。 どなたかも当日質問されていましたが、そもそも「EMのスキル」とはなんでしょうか。 よく言われるものに、E
はじめに シャローコピーとディープコピーの基礎 オブジェクトの参照の仕組み シャローコピーとディープコピーの違い シャローコピーの3つの方法 それぞれの特徴 Object.assign()が配列に適さない理由 疎配列(sparse array)の扱い 配列メソッドの継承問題 使い分けの指針 ディープコピー ディープコピーの4つの方法 使い分けの指針 注意点とベストプラクティス シャローコピーで十分な場合 ディープコピーが必要な場合 まとめ おわりに 参考記事 はじめに こんにちは、株式会社iimonでフロントエンドエンジニアをしているnkmです! 本記事はiimonアドベントカレンダー2日目の記事となります。 今回は、以下について実践的な例を交えながら解説していきます! ・シャローコピーとディープコピーの基礎 ・シャローコピーとディープコピーの違い ・シャローコピーの3つの方法、使い分け
■はじめに ■実施環境 ■実際の状況 ■なぜmvコマンドで差分が出なかったのか ■git mvの挙動 ■まとめ 参考資料 ■はじめに こんにちは。 株式会社iimonでエンジニアをしている遠藤です。 以前ファイル名の大文字/小文字を変更したかったので、mvコマンドで変更したのですが、差分が認識されないということがありました。 その後、git mvでファイル名を変更することで無事に差分を反映することができました。 そこで、今回はmvコマンドで差分が認識されなかった理由と、git mvの挙動について調べてみました。 ■実施環境 PC: MacBook Pro (2023) Apple M2 Pro OS: macOS 13.3 ■実際の状況 実際にどういう状況だったのか再現します。 以下のように、ディレクトリ内にIndex.htmlという名称のファイルがあります。 本来はindex.htmlと
はじめに 結論 オブジェクトのメモリ参照イメージ シャローコピー シャローコピーの使用方法 ディープコピー ディープコピーの使用方法 最後に 参考記事 はじめに こんにちは、株式会社iimonでエンジニアをしている中村です。 業務では、主にフロントエンドを担当させていただいています。 今回は「シャローコピーとディープコピーの違い」について聞いたことはありますが、よくわかっていなかったので調べてみました。 結論 シャローコピーとディープコピーは、オブジェクトのコピーを作成する二つの異なる方法です。シャローコピーは参照アドレスのコピー、ディープコピーはオブジェクト自体のコピーのことを指します。 オブジェクトのメモリ参照イメージ そもそも、オブジェクトとは値を格納している場所(メモリ上のアドレス)を 格納します。 const Taro = {age: 20, job: "engineer"} 図
はじめに iimonでエンジニアをしています。腰丸です。 突然ですが、Go言語がクラス継承をサポートしていないことをご存知でしょうか?(結構有名かもしれません) 言語として、意図的にクラス継承をサポートしていないって大丈夫なのか?という疑問もありますが、確かにクラスの継承ってネックになることが多い気もしています。 ちょうど良い機会なので、Goを使用してクラス継承を使用せずに、クラス継承で行ってきたような実装を実現する方法と、クラス継承の良し悪しについて考えてみました! 私がクラス継承に関して思うところ 微妙だと思っているところ 抽象化の粒度がよくわからない(is-aとか範囲広すぎない?) 深いネストがあると見るのしんどい(ヨーヨー問題) 影響範囲わからなくて怖い SOLIDとかの原則を守るのが難しい(仮に現時点で問題なくても将来的に守れるのかがよくわからない) 良いなと思うところ 実装が楽
はじめに こんにちは。バックエンドエンジニアの木暮です。 前職では運用業務でサーバに入ってCUI環境で作業を行うことがありましたが、 現職はローカルでの開発業務がメインであまりそういったことを行う機会がありません。 しばらく触っていないと忘れてしまいそうなのでこの機会に使用頻度の高かったコマンドの復習をしてみました。 今回はサンプルとして以下のCSVファイルを使っています。 jusyo.jp 今回紹介するコマンドで行える操作は以下の通りです。 数は多くありませんがどれも便利なコマンドです。 はじめに 文字コードの確認と変換 CSVファイルの行数を確認 さまざまな検索 ファイルの差分を確認する CSVファイルから特定のデータを抜き出す おわりに 文字コードの確認と変換 まずはダウンロードができたのでファイルの中身を確認してみましょう。 [kogure:~/test] $ ls -l tota
次のページ
このページを最初にブックマークしてみませんか?
『iimon TECH BLOG』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く