npm package

依存パッケージのアップデートはしていますか？ フロントエンドの開発を行っていく中で依存パッケージのアップデートは欠かせないものだと思います。 例えば、以下のようなnpm updateやyarn upgrade、npm-check-updatesをコマンドラインから実行したり、GitHub Appで自動化するならRenovate や Dependabot を使っているのではないでしょうか。 今回は、4ヶ月もアップデートから取り残されていたパッケージを見つけたお話です。 パッケージ名が変わっていた 今回は開発中にreact-use-gestureのドキュメントを読みに行く際に、パッケージ名前が@u…

CIで脆弱性チェックがエラーとなり、npm audit以外の方法で応急処置をしたのでメモ。 修正後は要動作確認。 coin-look.pages.dev npm audit まずは npm audit 等で検出されたパッケージのレポジトリを調べ、必要であれば package.json のバージョンを修正後にnpm audit fixを実行。 node_modules や package-lock.jsonは削除した方が間違いが無さそう。 $ npm audit fix npm-force-resolutions github.com npm audit fixで解決しなかった場合に、どうにかし…

転職会議事業部の srkw です。 今期事業部内で利用する eslint および prettier の共通ルールを管理するパッケージを作成したので、その工程と成果物をご紹介したいと思います。 なお、今回紹介するパッケージの内容には多分に要修正箇所があり、今後他のプロジェクトとの優先順位を鑑みて、都度改善される可能性があります。その際はこちらの記事も併せて更新できればと考えています。 TL;DR 最終成果物は以下のリポジトリで公開しています。利用リポジトリ側での設定等は README に記載しております。 https://github.com/livesense-inc/eslint-confi…

はじめに 皆さんこんにちは、フロントエンドエンジニアのWooです。⚡️🌪 npmモジュール（npm パッケージ)を作成しデプロイしてオープンソースとして使えるところまでやってみたいと思います。 npm (Node Package Manager) 開始する前に、簡単にnpmについて調べてみたいと思います。 npmの役割はパッケージ管理ツールです。 ソフトウェアを管理し、インストールをサポートしてくれます。 この記事を書いた時点では公開のパッケージ数約1,688,642個以上のnpmパッケージが公開されており現在もまだnpmのパッケージが増えています。 npm インストール Node.jsをイン…

個人のWebサービスで利用しているpackage managerをyarnからnpmに移行したのでメモ📝 移行のモチベーション 移行手順 関連ライブラリを最新の状態にする npmを最新のバージョンに更新 package.jsonの書き換え yarn.lock、node_modulesを削除してnpm installする 移行のモチベーション 以下のようなモチベーションでYarnからnpmへの移行を行うことにしました。特にネイティブで利用できるのが大きいかなと思います。 npmはネイティブでinstallされてお環境をシンプルに出来る Yarnの1系を利用していたがv3系の最新のstableバー…

皆さんこんにちは。おっくんです。 去る 2023 年 2 月 24 日に Deno 1.31 がリリースされました。 今回も、リリースノートを参考に 変更事項の気になるところを紹介します。 Deno 1.31 Deno 1.31 での変更事項をDeno 1.31 リリースノートを元に確認します。 package.json のサポートが追加されました このリリースで package.json がサポートされ、 Node.js プロジェクトから Deno へ開発者がより簡単に移行することができるようになります。 package.json を Deno は自動的に検出して依存関係を解決します。 また…

こんにちは、フロントエンドエンジニアの堀江（@nandemo_3_）です。 フロントエンドチームの業務改善の観点から、以前からissueに上がっていた本件を調査、対応しましたので備忘録として紹介いたします。 背景 フロントエンドチームが開発、運用しているSYNMNアプリの管理画面では、HTMLヘッダーのメタ情報に、package.jsonのversionを指定しております。 現状、こちらのバージョン管理は手動で行なっており、以前から手間という認識をしておりました。 緊急性は高くありませんが、業務改善となるので取り組んでみました。 現状 以下のように、package.jsonのversionをH…

uiu です。 株式会社ハローでは AutoReserve を運営していますが、サービスの裏側で飲食店やユーザーのサポートのためコールセンターを運用しています。直近では日本語だけでなく英語等多言語でのカスタマーサポートを提供しています。 昨年、カスタマーサポートが利用するコールシステムを、外部のIP電話サービス(MiiTel) から Twilio Flex を使った内製のコールセンターシステムに切り替えました。 Twilio Flex 製システムを運営し始めてから半年以上経つなかで、カスタマイズの知見などが見えてきたので、今回紹介しようと思います。 背景 カスタマーサポートではIP電話サービス…

次のふたつを初めて試したので、その時の備忘録です。 registry に GitHub Packages を使う private で publish する 公開するための Node.js モジュールを用意 まずはモジュールを用意する。ここはあまり重要ではないので、Creating Node.js modules | npm Docs を参考に用意した。スコープを設定したいので npm init 時にオプションで指定する。 npm init --scope=@kasaharu GitHub Actions で GitHub Packages に publish する 「Publish Node.…

この記事ではnpmパッケージの公開・バージョンアップ・削除方法を紹介します。 npmパッケージを公開するには、事前にnpmアカウントの作成とGitHubリポジトリの作成が必要です。 docs.npmjs.com 1. 環境 2. npmパッケージの公開 2-1. package.jsonの作成 2-2. 依存するパッケージの追加 2-3. npmレジストリへの公開 3. npmパッケージのバージョンアップ 4. npmパッケージの削除 1. 環境 macOS：13.1 Node.js：18.12.1 npm：8.19.2 2. npmパッケージの公開 2-1. package.jsonの作成 …

テクノロジー本部 エンジニアリング統括部 サービス開発部でエンジニアをしている青木です。今年、担当していたプロジェクトでGithub Packagesを用いてprivate packageを作成した話を紹介します。 こんな人に見てほしい 複数プロジェクト間でUIのリソースを共有したい github repository間で共有したいリソースがある npm packageを作る上での選択肢を知りたい 背景 当時担当していたプロジェクトでは、以下のような状況でした。 サブプロジェクトA,Bの間でリソースを共有したい UIコンポーネント ユーティリティ、など サブプロジェクトA,Bに関しては同じ技術…

プロジェクトで使用している npm パッケージのアップデート方法のメモ npm update でアップデート npm outdated から手動でアップデート npm-check-updates を使ったアップデート 結論 新しいバージョンなど所謂バージョンを上げたいようなケースは 2 もしくは 3 で行うのが良い 1. npm update でアップデート npm update では package.json で指定されているバージョン内でしかアップデートできない example ^ キャレット表記でバージョンが指定されている場合 // package.json "dependencies"…

※ こちらはミツモアAdvent Calendar 2022の16日目の記事です。 こんにちは、ミツモアのエンジニアの邢(@keidarcy)です。今年も昨年に引き続きアドベントカレンダーをやってます。昨年の記事については ミツモアAdvent Calendar 2021 こちらを見てみてください。 今回は、JavaScript Monorepo 開発改善への取り組みについて紹介したいと思います。 背景 Monorepo(モノレポ)とは、アプリケーションやマイクロサービスの全コードを単一のモノリシックなリポジトリ (普通は Git) に保存するパターンを指します。 今まで meetsmore.…

テックタッチアドベントカレンダー 12 日目を担当する、フロントエンドエンジニアの taka です。 今回は TanStack Query を利用する上でパフォーマンスの問題に遭遇してしまったので、その内容について共有したいと思います。 tl;dr TanStack Query (react query) とは 遭遇したパフォーマンス問題 react query で再描画を抑制するためのポイント object rest destructuring を利用してはいけない プロパティ参照は描画中に行う selector を使って必要なデータのみを参照する おわりに tl;dr useQueryの返…

こんにちは、 Web フロントエンドエンジニアの @progfay です。 この記事は Recruit Engineers Advent Calendar 2022 の 12 日目の記事です。 今回はプロジェクト内で使っている @graphql-codegen/typescript-react-apollo package との思い出を書き綴っていきます。 出会い 私の所属するスタディサプリ中学講座の開発プロジェクト (通称: tara) では通信に GraphQL を採用しています。 また、 GraphQL Code Generator を使って GraphQL にまつわる型や関数の生成を行…

japan.cnet.com 欧州連合（EU）のプライバシー規制当局は現地時間12月5日、Meta Platformsが運営する「Facebook」と「Instagram」が、これらのアプリ内での操作に基づくターゲティング広告に同意することを、同アプリを利用する際の条件にしてはならないとする裁定を下したという。The Wall Street Journal（WSJ）が報じた。 Metaのターゲティング広告モデル、EU規制当局の新たな決定に直面か - CNET Japan ⇧ う～む、業績の悪化と株価暴落のMeta（旧：Facebook）にとって嬉しくない判決ですかね... Reactとは？ W…