---
title: 設定ファイルをパッケージ化して幸せになる話
tags: 
author: [sushichan044](https://convert.docswell.com/user/sushichan044)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/LELPWD5Q7R.jpg?width=480
description: 2024年4月25日に株式会社Progate様で開催されたエンジニア交流イベントLTの登壇資料です。
published: April 25, 24
canonical: https://convert.docswell.com/s/sushichan044/Z24RL4-2024-04-25-progate-lt
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/LELPWD5Q7R.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/4JM49PRK7W.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/PJRWG1R679.jpg)

本編


# Page. 4

![Page Image](https://bcdn.docswell.com/page/PEXPXYRD7X.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/3EKDW3RDJD.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/L73R1G8PJ5.jpg)

Linter使ってますか？


# Page. 7

![Page Image](https://bcdn.docswell.com/page/87DYX1M37G.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/VJP6PQRPE8.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/2EV325RV7Q.jpg)

Linterのつらいところ


# Page. 10

![Page Image](https://bcdn.docswell.com/page/57G3R6M1JL.jpg)

Linterやツールの設定


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4EQ5V4RNJP.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/KJ49MQ8371.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/LE1K8P2ZJG.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/GEWDZ2R6J2.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/47ZG1DRRE3.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/YJ6YL1R17V.jpg)

ということで作りました


# Page. 17

![Page Image](https://bcdn.docswell.com/page/GJ5G148LJ4.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/9E2Y1VK3ER.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/D7YGZ3N87M.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/VENG3VX9J8.jpg)

Before &amp; After: tsconfig.json


# Page. 21

![Page Image](https://bcdn.docswell.com/page/Y79W968373.jpg)

Before &amp; After: tsconfig.json
すごく楽


# Page. 22

![Page Image](https://bcdn.docswell.com/page/G78N9Z8LJD.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/L7LPWDRQJR.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/4EM49PPKJW.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/PERWG116J9.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/P7XPXYYDJX.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/37KDW33DED.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/LJ3R1GGPE5.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/8JDYX113JG.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/VEP6PQQP78.jpg)

まとめ


# Page. 31

![Page Image](https://bcdn.docswell.com/page/27V3255VJQ.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/5JG3R661EL.jpg)

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


