アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
by
弁護士ドットコム
×
Copy
Open
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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