設定ファイルをパッケージ化して幸せになる話

1.3K Views

April 25, 24

スライド概要

2024年4月25日に株式会社Progate様で開催されたエンジニア交流イベントLTの登壇資料です。

profile-image

電気通信大学 CSプログラム Webのこと / Cloudflare Workers / Hono など

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

設定ファイルを パッケージ化して 幸せになる話 5 2 4 0 4 2 0 2 sushi-chan(Kentaro Suzuki) @ . .

2.

sushi-chan / 鈴 電気通信 謙太郎 学B フロントエンドとか 学サークルの情報基盤作り 最近はCloudflare WorkersとHono :fire: 木 大 3 大 学外での登壇は初めてです 己 自 大 紹介

3.

本編

4.

おしながき • Linterやツールの設定がつらい • パッケージ化した 見 • 副次的効果 / 知

5.

おしながき • Linterやツールの設定がつらい • パッケージ化した 見 • 副次的効果 / 知

6.

Linter使ってますか?

7.

• 間より賢い • 同じ間違いには忘れず毎回同じ指摘をしてくれる • 初学者でも 比 人 Linterやツールの嬉しいところ 較的安全なコードが書ける

8.

• 間より賢い • 同じ間違いには忘れず毎回同じ指摘をしてくれる • 初学者でも 比 人 Linterやツールの嬉しいところ 較的安全なコードが書ける

9.

Linterのつらいところ

10.

Linterやツールの設定

11.

Linterやツールの設定 多すぎ!!!!!!!

12.

Linterやツールの設定がつらい 無限に増殖する恐怖の設定ファイル • あまりにも多すぎる設定項 • 毎回違うリポジトリからコピペしてきていた tsconfig.json … 目 •

13.

おしながき • Linterやツールの設定がつらい • パッケージ化した 見 • 副次的効果 / 知

14.

パッケージ化した • 違うリポジトリからのコピペを不要にするには?

15.

パッケージ化した • 違うリポジトリからのコピペを不要にするには? パッケージで配布すればいいのでは...?💡

16.

ということで作りました

17.

パッケージ化した @virtual-live-lab/js-config • pnpm workspaceでモノレポ • ESLint, Prettier, Stylelint, tsconfig

18.

Before & After: ESLint before: after: npm install -D eslint eslint- npm install -D eslint config-hogehoge …以下10個以上のeslint系パッ ケージ @virtual-live-lab/eslint-config

19.

Before & After: ESLint before: after: npm install -D eslint eslint- npm install -D eslint config-hogehoge …以下10個以上のeslint系パッ ケージ @virtual-live-lab/eslint-config すごく楽

20.

Before & After: tsconfig.json

21.

Before & After: tsconfig.json すごく楽

22.

おしながき • Linterやツールの設定がつらい • パッケージ化した 見 • 副次的効果 / 知

23.

• monorepoの知 • ができた 動リリースの便利さを知った 見 • 初めてnpmにパッケージを公開した 見 自 副次的効果 / 知

24.

• monorepoの知 • ができた 動リリースの便利さを知った 見 • 初めてnpmにパッケージを公開した 見 自 副次的効果 / 知

25.

monorepoの知 ができた • monorepo特有のbuildやdependencies事情 見 な場合に採 用 用 • 有 する決断がしやすくなった

26.

• monorepoの知 • ができた 動リリースの便利さを知った 見 • 初めてnpmにパッケージを公開した 見 自 副次的効果 / 知

27.

自 自 動リリースの便利さを知った • 分でタグつけたりパッケージレジストリに 公開したりするのはすごく苦しい • Pull Requestベースで簡単に管理

28.

• monorepoの知 • ができた 動リリースの便利さを知った 見 • 初めてnpmにパッケージを公開した 見 自 副次的効果 / 知

29.

初めてnpmにパッケージを公開した • 意外とパッケージ公開って 理ハードルがある • Linter Ruleなどは、あまりバンドルなどの 心 苦しい分野が出てこないので初めてにいいかも

30.

まとめ

31.

自 まとめ • Linter設定のパッケージ化は幸せ • パッケージ公開を経験するのに最適な難易度 • 分が好きな設定ファイルを配布しよう!

32.

ありがとうございました!