アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes

2025年10月25日(土)「Vue Fes Japan 2025」に開催された、弁護士ドットコム株式会社 クラウドサイン フロントエンドエンジニアのツノが登壇した際の資料です。

セッションタイトル： アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜
https://vuefes.jp/2025/speaker/2nofa11

■ 弁護士ドットコム株式会社プロダクト組織について
https://speakerdeck.com/bengo4com/introduction-for-creators

■ 採用情報はこちら
https://hrmos.co/pages/bengo4/jobs

■ テックブログ：弁護士ドットコム Creators’ blog
https://creators.bengo4.com/

■ X(Twitter)：弁護士ドットコム CREATOR'S
https://x.com/bengo4_creators

Transcript

1. アウトプットから始める OSSコントリビューション eslint-plugin-vueの場合 弁護士ドットコム株式会社 ツノ 2025年10月25日
2. © 2025 Bengo4.com, inc. 2 ツノ Tsuno X（Twitter）アカウント @2nofa11 弁護士ドットコム株式会社 クラウドサイン フロントエンドエンジニア 自己紹介
3. © 2025 Bengo4.com, inc. 3 OSSへのコントリビューション （貢献） した記憶がある方？
4. © 2025 Bengo4.com, inc. 4 対象者 OSS への貢献ってハードル高いと思っている方 （過去の私） 伝えたいこと 気軽に OSS へ参加表明してこう （例：VueFesの感想つぶやくのも参加表明！ ）
5. © 2025 Bengo4.com, inc. 5 今回は 勉強のためのアウトプット が、 eslint-plugin-vue への貢献に繋がった 話
6. © 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 を題材にした発表 前提
7. 貢献の流れ
8. © 2025 Bengo4.com, inc. 8 での Anthony Fu さんの登壇 にて きっかけ
9. © 2025 Bengo4.com, inc. 9 登壇で紹介されたツール “ ESLint Typegen ” に感動 きっかけ
10. © 2025 Bengo4.com, inc. 10 登壇で紹介されたツール “ ESLint Typegen ” に感動 きっかけ ESLintのルールから 型定義を自動で生成してくれる
11. © 2025 Bengo4.com, inc. 11 The New Powerful ESLint Config with Type Safety eslint-typegen ツールの概要 • ESLint 実行時に起動 • ESLint の各ルールが提供する JSON Schema を取得
12. © 2025 Bengo4.com, inc. 12 • ESLint 実行時に起動 • ESLint の各ルールが提供する JSON Schema を取得 • JSON Schemaから型を生成 The New Powerful ESLint Config with Type Safety eslint-typegen ツールの概要
13. © 2025 Bengo4.com, inc. 13 ESLint Typegenの 仕組みを勉強 勉強内容を 登壇でアウトプット 勉強＆アウトプット
14. © 2025 Bengo4.com, inc. 14 登壇後... 太田さん eslint-plugin-vue のメンテナーが反応してくださった！
15. © 2025 Bengo4.com, inc. 15 登壇後... 太田さん eslint-plugin-vue のメンテナーが反応してくださった！ ESLint Typegen を導入する コントリビューションチャンス！
16. © 2025 Bengo4.com, inc. 16 登壇後... 太田さん やります！ ツノ eslint-plugin-vue のメンテナーが反応してくださった！
17. 17 DeepWiki 補助輪（AIツール）を使いつつ、コードリーディング &実装 やったこと リポジトリ全体の概要を理解 Cursor 対話的にコードリーディング
18. © 2025 Bengo4.com, inc. 18 成果 v10.3.0 で eslint-plugin-vue に ESLint Typegen が導入 🎉
19. 振り返り
20. © 2025 Bengo4.com, inc. 20 最新のVueプロジェクトの eslint.config.ts OSSへの貢献は、小さな改善でも感慨深い
21. © 2025 Bengo4.com, inc. 21 技術的に成長できた • eslint-typegen のコアモジュールを 利用 • パッケージ公開のタイミングで型定 義ファイルを出力 型出力の裏側
22. © 2025 Bengo4.com, inc. 22 カジュアルに OSS ヘの参加ができた Vue.js の非公式コミュニティ chibivue land の Discordチャンネル 起点で始まった！
23. © 2025 Bengo4.com, inc. 23 知識習得のため登壇したら、 eslint-plugin-vue に貢献できた。 Vue.js のコミュニティは参加表明しやすい！ まとめ
24. © 2025 Bengo4.com, inc. 24 ありがとうございました
25. © 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