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