はてなブックマーク

はじめに 株式会社iimonでフロントエンドを担当している新卒のクリスです。 この記事では、初心者でも10分で作れるシンプルな REST API を Node.js と Express を使って作る方法を紹介します。 「APIって何？」という人でも大丈夫です。 必要なコードはほんの数行で、すぐに動かすことができます。 1. 　まず以下のツールが必要です Node.js (v20 以上 推奨) npm (Node.js に付属) VSCode（任意） Postman または curl（動作確認用） 2. 　これから、プロジェクトの作成します。 以下のディレクトリを作成します： mkdir express-api cd express-api npm init -y package.json が作成されます。 3. 　Express のインストール npm install express 4.

1. はじめに この記事で作るもの 対象読者・前提条件 2. 使用ツールの準備 Notion API Claude Code gh（GitHub CLI） 3. 【ハンズオン】Notion タスク → 実装自動化 完成イメージ Step 1: Notion API でタスク内容を取得 Step 2: Claude Code で実装コードを生成 Step 3: ブランチ作成 & コミット Step 4: シェルスクリプトにまとめる 4. まとめ 今回学んだこと 発展的な活用アイデア 5. おわりに 1. はじめに こんにちは！ご紹介に預かりました、iimonでフロントエンドエンジニアをしている「なかむー」です！ みよちゃん（と呼んだことはあんまりないのですが笑）は会社員と、学生と、父親という３足のわらじを履きながら、いつも明るくチームを引っ張ってくれるので隣から見ていても本当にすごいです！

はじめに 大学入学編 なぜ大学に入学したのか 基礎を体系的に学びたい 海外への移住 大学選び 主な通信大学 大学通学編 メリット 知識の引き出し 学習習慣 デメリット 単位を取らねば 他の勉強に制限がかかる これから社会人大学生になろうと考えているあなたへ 単位認定を狙う 勉強スケジュールを立てる 試験日・課題提出期限を把握して予定を立てる 文明の利器を活用 おわりに はじめに こんにちは！iimonでフロントエンドエンジニアをしている「みよちゃん」です！なんと、アドベントカレンダー初日に選ばれるという栄誉にあやかることになりました！本当は選ばれたのではなく、カレンダー記入が遅く初日しか残ってなかっただけです。。 唐突ではありますが、ここ2-3年は私にとってかなり激動の期間でした。人生におけるターニングポイントがこれでもかというほどにある、非常に濃密な期間を過ごすことになりました。 異業種

はじめに そもそもPythonの型ヒントとは何か なぜ型チェッカが必要なのか mypy Pyre Pyright Pytype まとめ 参考文献 はじめに こんにちは！ 株式会社iimonでエンジニアをしている遠藤です。 以前「ロバストPython 型チェックを効果的に導入するための考え方」という記事を書かせていただきました。この時に知った「Pytype」というツールについて気になっていたので、今回は、型チェッカを自分なりにまとめてみることにしました。 ここでは、以下の型チェッカについて取り上げます。 mypy Pyre Pyright Pytype そもそもPythonの型ヒントとは何か Pythonの型ヒントは、変数、クラス属性、関数のパラメータや返り値がどのデータ型を期待するかを明確にするためのものです。 Pythonは動的型付け言語なので強制はされませんが、オプションで以下のように

こんにちは！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:、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年のロンドンだそうです。（ほぅ〜） そんなクリスマスカードも時代とともに発展し、今ではデジタルで作成しプリントされたものを送ったりなど作り方は様々。 私にも毎年送ってくれるお友達家族がいるのですが、自分がぼーっとしてるせいで時期がずれたり、送りそびれたり、、（毎年ありがとう。そして

はじめに まずは戦う相手を見定めよう 戦術はいかに まずは関数を知る しゅ、しゅ、出力がないだってぇ！？ 型＝値の集合とはなんぞや？ まとめ おわりに 参考 はじめに 本記事はｉｉｍｏｎ Advent Calendar 2024　21日目の記事となります！ こんにちは！DDDとTDDには熱心だけど、推し活はDD（誰でも大好き）ではなく、とことん一途なエンジニアマネージャー、まつだです。 本日12月21日は私の誕生日ということで、なんと101101歳になってしまいました！（この手のやつ、16進数にしてるのはよく見るけど、2進数は斬新やな⋯） ちょっとでも誕生日を祝ってくれる気持ちのある方は、ぜひ↓のボタンをぽちっとしてブックマークでもしてやってください（笑） 今回は、私もさらに歳を重ねて型にはまった人間にならねば、ということで、「関数型ドメインモデリング」という本を読んで学んだことを普段の業

こんにちは！株式会社ｉｉｍｏｎでエンジニアをしている、Javascript勉強中の「まるお」です。 本記事はアドベントカレンダー20日目の記事になります！ 📚 本記事の内容 filter・Set・Mapを使った重複削除の方法 オブジェクト配列の重複削除の実装方法 パフォーマンス比較と便利なライブラリの紹介 📚 本記事の内容 はじめに 🔍 1. 重複削除したい！配列メソッドの課題… 🚀 filter() と indexOf() を使った重複削除 ❗️ 問題点 🛠 2. Set による重複削除 ✅ Setの特徴 ✨ シンプルな重複削除の例 ⚠️ 注意点: オブジェクトや配列の扱い 実務で重複削除したかったコード 💡 3. Map による重複削除 ✨ 実務で重複削除したかったコード キーが重複した場合の挙動 🚀 4. 大規模データでのパフォーマンス比較 📈 結果の比較 🔧 5.

こんにちは！株式会社ｉｉｍｏｎでフロントエンジニアをしている「ひが」です！ 本記事はアドベントカレンダー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 を利

◼️ はじめに ◼️ 前提条件 マシン環境 データベースについて ◼️ データ挿入に関して ◼️ 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って奥が深いですよね。勉強した気になっても自分の思い通りに一発でなってくれたことがありません。そんな中で、以前いつにも増して詰まった実装がありました。 「スクロールバーを縦と横に常時表示する」というものです。 入社して１ヶ月経たないぐらいに取り組んだこの実装、あまり理解できずに実装していた部分も大きいです。入社して半年と少し経った今なら、もっとちがう方法で、ちゃんと理解して実装できるんじゃないかとこの記事を書いてみました。 まだまだ勉強中のため、間違い等ありましたらご指摘お願い致します！ やりたいこと 固定の要素の中に大きな要素を入れて、ヘッダーは固定しつつ縦横にスクロールを常時つけたい 横のスクロールをした時はヘッダーも一緒にスクロールする

はじめに こんにちは！株式会社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の削除機能 まとめ 参考文献 はじめに こんにちは、ｉｉｍｏｎ新卒エンジニアの「ばんり」です。 本記事はアドベントカレンダー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