はてなブックマーク

これはなに 自身のプロジェクトに適合した ESLint Config の設計および実装方法についてまとめたものです。 業務や趣味プロに関わらず、 JavaScript / TypeScript でコーディングする際に ESLint は非常に有用なツールであり、広く使われています。ほとんどの場合において ESLint 基盤はプロジェクトごとに必要なパッケージをインストールして設定ファイルを作成し、構築されます。しかしその設定内容がプロジェクト間で重複することは珍しくなく、プロジェクトの数が増えるにつれ冗長となりがちです。そこで、複数プロジェクト間で共通のルールセットを定義して単一の ESLint Config として再利用することで、メンテナンス性や再利用性の向上が期待できます。本稿では、そのような用途で使える自分だけの ESLint Config を設計・実装する方法を紹介します。 前提

これはなに 長らく node パッケージマネージャーとして npm が使われてきたプロジェクトを yarn v4 に移行する手順をまとめたものです。 単純に移行するだけなら何も考えず yarn を導入して終わりですが、依存する node パッケージのバージョンを一切変更することなく移行するとなれば一筋縄ではいかなくなります。立ち上げ時から増改築を繰り返して膨大な数の node パッケージに依存しているプロジェクトですと、ほんの少しバージョンがズレただけで壊れてしまうことも珍しくありません。本稿ではそのような類のプロジェクトでも可能な限り安全に npm から yarn4 へ移行する手順をご紹介します。 前提 プロジェクトが依存するパッケージ情報は ^ 付きで package.json にバージョンが記載されているものとする。 プロジェクトには package-lock.json があるものと

これはなに CircleCI が提供する Docker イメージ cimg/node のバージョンアップデートを Renovate で適切に管理するための設定手順をまとめたものです。 Renovate による Node.js のアップデート管理 Renovate は以下のファイルに記載されている Node.js のバージョンのうち LTS バージョンのみを自動で検知し、アップデート Pull Request を作成します。 package.json 中の engines フィールド package.json 中の volta フィールド .nvmrc .node-version .tool-versions .travis.yml 中の node_js フィールド cimg/node について cimg/node は Node.js がインストールされた Docker イメージであり、Ci

これはなに コードベースに対し JSDoc の記述を必須化するための ESLint 設定手順をまとめたものです。 JSDoc を始めとする Doc コメントはコードに最も近いドキュメントであり、これがあるのと無いのとではコードベースの保守性に天と地ほどの差が生まれます。そんな JSDoc ですが、OSS ならともかく（内製・受託を問わず）商業ソフトウェア開発の現場では軽視されがちです。後からコーディング規約を定めたところで開発メンバーにドキュメントを書く習慣が備わっていなければ書き漏れが頻発するのが関の山です。 コードレビューで都度指摘するにはあまりにコストがかかるため、ESLint に委ねるのが望ましいです。 前提 フレームワークは React（or Next.js）を使っている。 TypeScript を主体としている。 ビルドスクリプトや設定ファイルは JavaScript も併用し

これはなに pnpm workspaces で構築した monorepo プロジェクトで Storybook による UI カタログを構築するまでの手順をまとめたものです。 2023 年 4 月 3 日に Storybook v7 がリリースされました。このメジャーアップデートにより pnpm が正式にサポートされ、monorepo 構成下でも正常に動作するようになりました。 Storybook 6.5 でも pnpm + monorepo 構成にて動作させることは可能でしたが、 v6.5 は TypeScript 5.x を正式にサポートしておらず、ビルドに失敗することがあります。これを解消するには Storybook を v7 にマイグレーションする必要があります。 本稿では、必要な node モジュールをイチから手動でインストールしてセットアップする手順と、既存の Storybook

イントロダクション jscodeshift という codemod ツールキットを使って JavaScript / TypeScript コードをリファクタリングするための基礎テクニックをご紹介します。 codemod とは AST に変換したコードに何かしらの手を加えて別のコードに変換する技術の通称です。grep 置換や IDE を駆使した置換はあくまでコードを文字列のままで書き換えますが、codemod は構造体に変換してから書き換えるというステップを踏むため、非常に複雑なコード変換が可能です。 ちなみに codemod は JavaScript 特有のものではなく、Ruby や JVM 系などさまざまなプログラミング言語の世界にも存在します。 AST とは 正式名は Abstract Syntax Tree （抽象構文木）。簡潔に言うと、構文構造をデータ構造に書き起こしたものです。お

これはなに 筆者は ES Modules ベースのコードの import 文を自動フォーマットするツールとして長らく prettier-plugin-organize-imports を愛用しています。一時期は ESLint でフォーマットしていましたが、試行錯誤の末にこのプラグインによるフォーマット方法に至りました。 本稿ではその導入手順をフォーマットの仕組みを軽く交えながら紹介します。 prettier-plugin-organize-imports の概要 TypeScript ( or JavaScript ) コードにある import 文を自動フォーマットする Prettier のプラグインです。ここでいうフォーマットは主に以下の 3 つの挙動を意味します。 import 文をアルファベット昇順でソート。 {} 内のモジュールもソートする。 冗長に書かれた import 文を結

これはなに pnpm をベースにして実践的な monorepo プロジェクトを構築するまでの手順をまとめたものです。アプリケーション開発の実務では長らく yarn を常用してきましたが、極端に攻めたアプローチをしなければ pnpm でも十分に実務に耐えられると実感しました。筆者が実務で求める要件は大まかに以下のとおりです。 monorepo をサポートしている プロジェクトルートからサブパッケージの npm scripts を直接実行できる GitHub Action / CircleCI が動作する Renovate のサポート対象に含まれる 本稿では備忘録代わりとしてその内容をご紹介します。 pnpm とは yarn 同様、npm の代替として開発されているサードパーティのパッケージマネージャーです。インストールの速さと（ディスクスペースの）効率性に主眼を置いています。 Next.js