ファインディ株式会社でフロントエンドのリードをしております 新福(@puku0x)です。 この記事では、ファインディで導入しているモノレポ管理ツール「 Nx 」について紹介します。 モノレポとは Nxとは Nxワークスペースの作成 Nxの機能 コード生成 変更検知 依存関係の管理 キャッシュ機構 自動マイグレーション まとめ モノレポとは モノレポは全てのコードベースを単一のリポジトリで管理する手法です。 monorepo.tools コードの共通化や可視化、ツール・ライブラリの標準化、一貫性のあるCI/CDパイプラインを構築できるといったメリットがあります。また、マイクロサービスと相性が良いとも言われています。 circleci.com ファインディでは主にフロントエンド系のリポジトリをモノレポとして運用しています。 アプリケーションとそれに関連するフィーチャー、UIライブラリがひとつに
ProductivitySave time to drink a 🍺, get your api ready out of the box in a few seconds. Prevent human error, be sure on the return result by imposing standard formatting. Error boundaryGet your contract ! With the combination of orval and openapi, you have a strong standard for your team which avoid any problem of missunderstanding and give you the possibility to focus on your ui. API mockingDon'
🐷 What's Poku?A cross-platform test runner that brings the JavaScript essence back to testing. ⚡️ Quick Tutorials
背景 ESLint v9からflat configがデフォルトとなり、将来のリリースで古いconfigの書き方は廃止される予定なのは把握していた。その後本格的に調べないままになっていたが、そろそろまずいかもなと思って概要だけでも調査したメモ。 先に簡単なまとめ 次のメジャーバージョンv10で古いconfigは廃止だが、そのリリースは2024年末〜2025年初頭 移行は @eslint/migrate-config を使いつつ Configuration Migration Guide を参照 flat configとは何か ESLintの新しい設定システム(config system)のこと。 flat config導入の背景 ESLint's new config system, Part 2: Introduction to flat config - ESLint - Pluggab
まじめに Flat Config の移行をするととっても時間かかりますよね?いくつもリポジトリ持ってるとどんどん時間が溶けていきます。 それでも ESLint v9 の新機能は使いたいんだよなーとか、ESLint v9 にしないと dependabot や renovate がうるさくてかなわんとか、という人(それはつまり僕のこと)のための選択肢をいくつか書いてみようと思います。 @eslint/migrate-config使う 物はこれです。 この方法は次のドキュメントに書いてあります。 以下のコマンドでとりあえず Flat Config で動きそうなeslint.config.*が生成されます。 npx @eslint/migrate-config .eslintrc.js # .eslintrc.json 使っている場合 # npx @eslint/migrate-config .e
全部読んで、使うのか使わないのか、使うならどういう設定にするか、を全部考える。 airbnb-base を使いがちだったが自社のルールセット作るうえでは通ったほうが良い道なのではと思ったので、やる。 array-callback-return ArrayやArray.prototypeに生えている関数(Arrany.fromやArray.prototype.everyなど)が引数にcallbackを取る場合に、callbackで必ずreturnを書くことを強要するルール。 // だめな例 /*eslint array-callback-return: "error"*/ var indexMap = myArray.reduce(function(memo, item, index) { memo[item] = index; // returnがない }, {}); var foo =
Wallaby.js is a developer productivity tool that runs your JavaScript and TypeScript tests immediately as you type, highlighting results in your IDE right next to your code. Test execution results, including code coverage, are displayed and updated in realtime right where you need to see them — in your code editor, next to the line of code that you're editing. Say goodbye to context switching. The
Lost Pixel Lost PixelとはWeb UIのビジュアル回帰テスト(VRT)のためのツールであり、キャプチャの撮影と差分の検出を一つのプロセスで行うことができるオープンソースライブラリです。 Web UIのVRTというと、storycap + reg-suit や、Playwrightのスナップショット機能、または Chromatic のようなサービスを思い浮かべる方も多いと思いますが、まさにそれらの類似ツールにあたるものであると捉えていただいて差し支えありません。 本記事では具体的な導入手順などは省き、Lost Pixelの特徴や他の類似ツールとの比較、または筆者の用途とカスタマイズについて紹介します。 記事を読んで、実際に導入を検討される場合のインストール方法やセットアップに関しては、公式のドキュメントを参照してください。 また、Lost Pixelにはプラットフォームモ
SimpleWith intentionally small tooling, a tiny API, and out-of-the-box configuration, Stencil gets out of the way and lets you focus. PerformantA tiny runtime and the raw power of native Web Components make Stencil one of the fastest compilers around. Future proofBuild cross-framework component libraries on open web standards, and break free of Framework Churn. Framework-agnosticStencil components
最近の流れを見ていての感想文なので、ideaとして投稿します。筆者のバックグラウンドとしては、Remixの商業記事を書いたり、App Routerの商業記事を書いたりしている人です。 さて、筆者は2022年の秋から、社内システムではありますがRemixをプロダクション運用しています。また、Next.jsのApp Routerについても、パラダイムとしてはRemixにインスパイアされた部分が多い[1]おかげで、順調にキャッチアップできています。 RemixとApp Routerは、ルーティングとデータフェッチを高度に統合しており、Progressively Enhanced SPA(PESPA)と呼ばれることもあるそうです。PESPAについては、次の記事が話題になりましたね。 このPESPAであるRemixを実運用する中で、フレームワークの手触りが近年触ってきたものと大きく違っている点があっ
import { globalStyles } from './stitches.config'; import { Section, SandpackLogo, SectionHeader, SandpackTitle, Link } from './components'; export default function App() { globalStyles(); return ( <Section> <SectionHeader> <Link href="https://sandpack.codesandbox.io/docs"> Docs </Link> <Link href="https://github.com/codesandbox/sandpack"> GitHub </Link> </SectionHeader> <SandpackLogo /> <SandpackT
先日だれでもAIメーカーというWebサービスをリリースしました。このサービスは例によってOpenAI APIを使っており、トークンの使用量がランニングコストに大きく影響します。 また、気軽に使ってもらえるよう未ログインでも使用できる仕様にしているため、気をつけないと悪意のある人に大量にトークンを使用されてしまう可能性があります。 ノーガードだとどうなるか 例えば、POST /api/askという「リクエストbodyのpromptの値を取り出し、OpenAI APIのChat Completionsに投げる」という単純なエンドポイントを作ったとします。 「未ログインでも使ってもらいたいから」と認証を一切しなかった場合どうなるでしょうか? 悪意のある攻撃者に見つかれば、promptを上限ギリギリの長さの文章に設定したうえで、/api/askに対してDoS攻撃するかもしれません。 トークンを大量
この記事は YAMAP エンジニア Advent Calendar 2022 7日目の記事です。 mswとは? ネットワークレベルでAPIリクエストをモックできるAPIモックライブラリです。 MSW – Seamless API mocking library for browser and Node | Mock Service Worker Node.js18とグローバルfetch() 今まではfetch()を利用したフロントエンドのコードをNode.js環境でユニットテストを実行するには、グローバルスコープにfetch()が存在しないので、モックをしたりテスト実行時にnode-fetchをPolyfillとして適用してグローバルスコープにfetch()を生やすなどの対応をしていました。 Node.js18から新たにグローバルスコープのfetch APIがデフォルトで利用可能になり、モ
単方向通信であるということと、HTTP/1.1上で動作しているのが大きな特徴です。 また、HTTP上で動作することから、通信の互換性が高く、セキュリティモデルも使いまわせるので安心です。 どんな用途と相性がいいの? 双方向通信がしたいわけでなければ、相性の幅がとても広いです。 今回の ChatGPT のような、GPT がトークンを生成するごとに送るケースはもちろん、通知の未読件数バッジの更新、ニュース速報の表示など、サーバからイベントを送りたい時ならなんでも使えます。 HTTP/1.1で動くカラクリ SSEはHTTPのレスポンスヘッダにContent-Type: text/event-streamを指定した上で動作します。 SSEが動く流れ クライアントがサーバーに HTTP/1.1 リクエストを送信し、イベントストリームに接続します。 サーバーは、Keep-Alive 接続を使用して、T
Wantedlyではこのたび、フロントエンドアプリケーションのひとつをNative ESM化しました。本記事ではNative ESM化の必要性と、必要な作業について説明します。 この記事の概要Node.jsにはNative ESMというモードがある。Native ESMはまだ普及していないが、ライブラリ側の更新が進み、移行が必要になりつつある。Native ESMをめぐる状況は (この記事の長さからわかるように) 色々複雑で、概念をちゃんと説明するだけでも大変。Native ESMへの移行にあたってはさまざまな困難が待ち受けている。Native ESMとは歴史的経緯から、JavaScriptには複数のモジュールシステムがあります。そのうちNode.js周辺でよく使われるのはCommonJS ModulesとES Modulesです。 CommonJS Modules (CJS) は実質的に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く