Slide 1

Slide 1 text

アウトプットから始める OSSコントリビューション eslint-plugin-vueの場合 弁護士ドットコム株式会社 ツノ 2025年10月25日

Slide 2

Slide 2 text

© 2025 Bengo4.com, inc. 2 ツノ Tsuno X(Twitter)アカウント @2nofa11 弁護士ドットコム株式会社 クラウドサイン フロントエンドエンジニア 自己紹介

Slide 3

Slide 3 text

© 2025 Bengo4.com, inc. 3 OSSへのコントリビューション (貢献) した記憶がある方?

Slide 4

Slide 4 text

© 2025 Bengo4.com, inc. 4 対象者 OSS への貢献ってハードル高いと思っている方 (過去の私) 伝えたいこと 気軽に OSS へ参加表明してこう (例:VueFesの感想つぶやくのも参加表明! )

Slide 5

Slide 5 text

© 2025 Bengo4.com, inc. 5 今回は 勉強のためのアウトプット が、 eslint-plugin-vue への貢献に繋がった 話

Slide 6

Slide 6 text

© 2025 Bengo4.com, inc. 6 eslint-plugin-vue は Vue.js 公式の ESLint プラグイン https://ota-meshi.github.io/vue-fes-japan-2023-slide/1 Vue 3 × eslint-plugin-vue メンテナーとして 太田さん (Vue.jsコアチームメンバー ) が活躍 参考:eslint-plugin-vue を題材にした発表 前提

Slide 7

Slide 7 text

貢献の流れ

Slide 8

Slide 8 text

© 2025 Bengo4.com, inc. 8 での Anthony Fu さんの登壇 にて きっかけ

Slide 9

Slide 9 text

© 2025 Bengo4.com, inc. 9 登壇で紹介されたツール “ ESLint Typegen ” に感動 きっかけ

Slide 10

Slide 10 text

© 2025 Bengo4.com, inc. 10 登壇で紹介されたツール “ ESLint Typegen ” に感動 きっかけ ESLintのルールから 型定義を自動で生成してくれる

Slide 11

Slide 11 text

© 2025 Bengo4.com, inc. 11 The New Powerful ESLint Config with Type Safety eslint-typegen ツールの概要 ● ESLint 実行時に起動 ● ESLint の各ルールが提供する JSON Schema を取得

Slide 12

Slide 12 text

© 2025 Bengo4.com, inc. 12 ● ESLint 実行時に起動 ● ESLint の各ルールが提供する JSON Schema を取得 ● JSON Schemaから型を生成 The New Powerful ESLint Config with Type Safety eslint-typegen ツールの概要

Slide 13

Slide 13 text

© 2025 Bengo4.com, inc. 13 ESLint Typegenの 仕組みを勉強 勉強内容を 登壇でアウトプット 勉強&アウトプット

Slide 14

Slide 14 text

© 2025 Bengo4.com, inc. 14 登壇後... 太田さん eslint-plugin-vue のメンテナーが反応してくださった!

Slide 15

Slide 15 text

© 2025 Bengo4.com, inc. 15 登壇後... 太田さん eslint-plugin-vue のメンテナーが反応してくださった! ESLint Typegen を導入する コントリビューションチャンス!

Slide 16

Slide 16 text

© 2025 Bengo4.com, inc. 16 登壇後... 太田さん やります! ツノ eslint-plugin-vue のメンテナーが反応してくださった!

Slide 17

Slide 17 text

17 DeepWiki 補助輪(AIツール)を使いつつ、コードリーディング &実装 やったこと リポジトリ全体の概要を理解 Cursor 対話的にコードリーディング

Slide 18

Slide 18 text

© 2025 Bengo4.com, inc. 18 成果 v10.3.0 で eslint-plugin-vue に ESLint Typegen が導入 🎉

Slide 19

Slide 19 text

振り返り

Slide 20

Slide 20 text

© 2025 Bengo4.com, inc. 20 最新のVueプロジェクトの eslint.config.ts OSSへの貢献は、小さな改善でも感慨深い

Slide 21

Slide 21 text

© 2025 Bengo4.com, inc. 21 技術的に成長できた ● eslint-typegen のコアモジュールを 利用 ● パッケージ公開のタイミングで型定 義ファイルを出力 型出力の裏側

Slide 22

Slide 22 text

© 2025 Bengo4.com, inc. 22 カジュアルに OSS ヘの参加ができた Vue.js の非公式コミュニティ chibivue land の Discordチャンネル 起点で始まった!

Slide 23

Slide 23 text

© 2025 Bengo4.com, inc. 23 知識習得のため登壇したら、 eslint-plugin-vue に貢献できた。 Vue.js のコミュニティは参加表明しやすい! まとめ

Slide 24

Slide 24 text

© 2025 Bengo4.com, inc. 24 ありがとうございました

Slide 25

Slide 25 text

© 2025 Bengo4.com, inc. 25 参考資料 ● eslint-typegen ● eslint-plugin-vue ● 20201208-Vue3-and-eslint-plugin-vue ● eslint-plugin-vueの現状と今後 ● The New Powerful ESLint Config with Type Safety ● DeepWiki vuejs/eslint-plugin-vue