貢献できるOSSの見つけ方 -完結編- / How to find "Good First Issues" Final

by Masato Ohba

Slide 1

Slide 1 text

#nodefest How to find “Good First Issues” How to find “Good First Issues” 貢献できるOSSの見つけ方　完結編 @ohbarye Node学園祭2018

Slide 2

Slide 2 text

#nodefest How to find “Good First Issues” OSSに貢献してますか？アンケート「なぜやるか」「やるべきか」はさておき 2 Introduction

Slide 3

Slide 3 text

#nodefest How to find “Good First Issues” OSSに貢献してますか？オープンソースの概念に基づき、ソフトウェアのソースコードが無償で公開され、改良や再配布を行うことが誰に対しても許可されているソフトウェアバグレポート、バグ修正、機能開発、テスト追加、ドキュメント修正などメンテナーにとって有益なあらゆること 3 Introduction

Slide 4

Slide 4 text

#nodefest How to find “Good First Issues” 本セッションでは OSS貢献に興味がある人を対象とします 4 Introduction

Slide 5

Slide 5 text

#nodefest How to find “Good First Issues” (OSS貢献に興味があるが) 貢献する課題を見つけるのに苦労している方、ど真ん中昔の自分に送りたい 5 Introduction

Slide 6

Slide 6 text

#nodefest How to find “Good First Issues” 対象： OSS貢献に興味がある人テーマ：貢献できるOSSの見つけ方 6 Introduction

Slide 7

Slide 7 text

#nodefest How to find “Good First Issues” Agenda | 01 02 03 04 05 General way of contributing to OSS “Contribution Accessibility”, Reason for giving up How to get over “Contribution Accessibility” What I've got so far Why I contribute to OSS 7 Introduction

Slide 8

Slide 8 text

#nodefest How to find “Good First Issues” ➔ OSS貢献において最も多くの初学者が突き当たる課題について ◆ Contribution Accessibility ➔ 課題を解決するために作ったアプリケーションgoofiの話 ◆ 過去に途中経過を2回発表しており、今回が完結編です ➔ 得られた成果、OSS貢献通して出会った面白話 ➔ 「なぜやるか？」はテーマから逸れるので最後に少し触れるのみ話すこと 8 Introduction

Slide 9

Slide 9 text

#nodefest How to find “Good First Issues” ➔ Contribution Accessibility以外の困難の乗り越え方 ◆ 時間、技術力、英語力... 『OSS貢献超入門』オススメ https://www.slideshare.net/shigemk2/oss-78585757 ➔ goofi開発にあたって使用した技術等の詳しい話 ◆ TypeScript, Next.js, GraphQL, Apollo Client, Now.sh ➔ GitHub以外で開発されているOSSへのアプローチ話さないこと 9 Introduction

Slide 10

Slide 10 text

#nodefest How to find “Good First Issues” General way of contributing to OSS 01 10 01 General way of contributing to OSS

Slide 11

Slide 11 text

#nodefest How to find “Good First Issues” プロジェクトを選ぶ取り組む課題を決める規約・ガイドを読む forkするコードを書く PRを作るあらゆる手を尽くす mergeされるフローチャート (GitHubで開発されている場合) 偶然発見 11 01 General way of contributing to OSS Start Start

Slide 12

Slide 12 text

#nodefest How to find “Good First Issues” プロジェクトを選ぶ ➔ 自発的に探しに行く ◆ 業務・趣味で使っているやつ ◆ 使っているライブラリの依存ライブラリ ◆ オーナー、メンテナーの別プロダクト ➔ 偶然見つける ◆ バグを踏む、ドキュメントにtypoを見つける etc. 12 01 General way of contributing to OSS

Slide 13

Slide 13 text

#nodefest How to find “Good First Issues” ➔ 自発的に探しに行く ◆ バグ修正、機能追加、テスト追加、翻訳、ドキュメンテーション、依存ライブラリや言語のバージョン更新、etc. ➔ 偶然見つけるケースは課題まで明確になっているはずなので「見つけ方」をテーマにした本セッションでは対象外取り組む課題を決める 13 01 General way of contributing to OSS

Slide 14

Slide 14 text

#nodefest How to find “Good First Issues” ➔ 長期的にはベスト。業務や趣味に直結するのでモチベーションが上がる ➔ 短期的には難しい可能性 ◆ 人気 or 巨大なレポジトリはハードルが高くなりがち ◆ チャンスが来る / 結果が出るまで時間がかかる ➔ (私見) プロジェクトにこだわらず小さな成功体験を重ねるほうがモチベーションが長続きする好きなプロジェクトをウォッチする？ 14 01 General way of contributing to OSS

Slide 15

Slide 15 text

#nodefest How to find “Good First Issues” “Contribution Accessibility”, Reason for giving up 02 15 02 “Contribution Accessibility”, Reason for giving up

Slide 16

Slide 16 text

#nodefest How to find “Good First Issues” OSS貢献にあたって何が課題か 16 02 “Contribution Accessibility”, Reason for giving up

Slide 17

Slide 17 text

#nodefest How to find “Good First Issues” プロジェクトを選ぶ取り組む課題を決める規約・ガイドを読む forkするコードを書く PRを作るあらゆる手を尽くす mergeされるこの辺の作法はWeb でもよく見かける初心者に難しいのはこの辺 17 02 “Contribution Accessibility”, Reason for giving up Start

Slide 18

Slide 18 text

#nodefest How to find “Good First Issues” OSS貢献する気持ちのある人が実際mergeされるに至るまでにどれだけ減ってしまうかのイメージ ※ohbarye体感 18

Slide 19

Slide 19 text

#nodefest How to find “Good First Issues” 19 プロジェクトまたはイシュー選定で離脱の谷コードが書けないで挫折の谷コード書けたら送るしかない mergeされるかは色んな要素次第挫折の谷はあるが比較的緩やか

Slide 20

Slide 20 text

#nodefest How to find “Good First Issues” 20 メンテナー・コミッターが活動に気づくのはこの辺り使われているが誰も貢献しない… メンテナー視点

Slide 21

Slide 21 text

#nodefest How to find “Good First Issues” Contribution Accessibility 21 02 “Contribution Accessibility”, Reason for giving up

Slide 22

Slide 22 text

#nodefest How to find “Good First Issues” I’d like to help, I don’t know which OSS I should/can contribute to... Need help! OSS committers Most developers Repo Issue Issue Issue Repo Issue Issue Issue So many “takers” in the world... ? ? ? ? ? Problem 22 02 “Contribution Accessibility”, Reason for giving up

Slide 23

Slide 23 text

#nodefest How to find “Good First Issues” I’d like to help, I don’t know which OSS I should/can contribute to... Need help! OSS committers Most developers Repo Issue Issue Issue Repo Issue Issue Issue So many “takers” in the world... ? ? ? ? ? Problem 23 02 “Contribution Accessibility”, Reason for giving up OSS fatigue Slightly related to moment().endOf(‘term’) in 2016/07 https://medium.com/@timrwood/moment-endof-term-522d8965689

Slide 24

Slide 24 text

#nodefest How to find “Good First Issues” Ideal World We can help & make the world better! Thanks for your help! OSS committers Most developers Repo Issue Issue Issue Repo Issue Issue Issue 24 02 “Contribution Accessibility”, Reason for giving up We all are “givers”.

Slide 25

Slide 25 text

#nodefest How to find “Good First Issues” How to get over “Contribution Accessibility” 03 25 03 How to get over “Contribution Accessibility”

Slide 26

Slide 26 text

#nodefest How to find “Good First Issues” I’d like to help, I don’t know which OSS I should/can contribute to... Need help! OSS committers Most developers Repo Issue Issue Issue Repo Issue Issue Issue So many “takers” in the world... ? ? ? ? ? Problem 26 03 How to get over “Contribution Accessibility”

Slide 27

Slide 27 text

#nodefest How to find “Good First Issues” プロジェクトを選ぶ取り組む課題を決める規約・ガイドを読む fork コードを書く PRを作るあらゆる手を尽くす merge ここが難しい簡略化する方法が欲しい 27 03 How to get over “Contribution Accessibility” Start

Slide 28

Slide 28 text

#nodefest How to find “Good First Issues” 過去の自分が欲しかったもの＝貢献できるOSSプロジェクトとイシューを探しやすくする何か 28 03 How to get over “Contribution Accessibility”

Slide 29

Slide 29 text

#nodefest How to find “Good First Issues” goofi https://goofi.now.sh 29 03 How to get over “Contribution Accessibility”

Slide 30

Slide 30 text

#nodefest How to find “Good First Issues” Demo 30 03 How to get over “Contribution Accessibility”

Slide 31

Slide 31 text

#nodefest How to find “Good First Issues” 31 03 How to get over “Contribution Accessibility” https://github.com/ohbarye/goofi

Slide 32

Slide 32 text

#nodefest How to find “Good First Issues” ➔ 表示するのはメンテナー・コミッターがコントリビューションを推薦しているイシュー ➔ 初心者でも以下を判断しやすい ◆ どのプロジェクトを選ぶのか ◆ どのイシューに取り組むのか何が嬉しいか 32 03 How to get over “Contribution Accessibility”

Slide 33

Slide 33 text

#nodefest How to find “Good First Issues” How does it work? 33 03 How to get over “Contribution Accessibility”

Slide 34

Slide 34 text

#nodefest How to find “Good First Issues” ➔ v1: Proof of concept -Working out loud- ➔ v2: GUI -美しきもののみが機能的である- ➔ v3: Reformation -Dance as though no one is watching you- 34 03 How to get over “Contribution Accessibility”

Slide 35

Slide 35 text

#nodefest How to find “Good First Issues” ➔ > Apply the `help wanted` and `good first issue` labels to issues in your repository to highlight opportunities for people to contribute to your project. ➔ https://help.github.com/articles/helping-new-co ntributors-find-your-project-with-labels/ “good first issue” 35 03 How to get over “Contribution Accessibility”

Slide 36

Slide 36 text

#nodefest How to find “Good First Issues” GraphQL ➔ ラベルだけでissueを探し回るより、貢献するレポジトリベースで選びたい ➔ GraphQLが得意とする用途 ◆ 取得するリソースが repository:issue = 1:N ◆ 取得するフィールドが限定的 36

Slide 37

Slide 37 text

#nodefest How to find “Good First Issues” GitHub APIのRepository検索を使いこなす 37 03 How to get over “Contribution Accessibility”

Slide 38

Slide 38 text

#nodefest How to find “Good First Issues” ➔ GraphQLクエリの結果を整形してspreadsheetに出力するだけのスクリプトを書いて、役立ちそうか検証してみた v1: Proof of concept 38 03 How to get over “Contribution Accessibility”

Slide 39

Slide 39 text

#nodefest How to find “Good First Issues” roppongi.js#4 39 03 How to get over “Contribution Accessibility”

Slide 40

Slide 40 text

#nodefest How to find “Good First Issues” ➔ 完成していなくても作業を共有・可視化し、早期にフィードバックを得るスタイル ➔ OSSでも活きる考え方 ➔ > 素晴らしいアイデアを隠しておいて、それが完成するまで誰にも話さないというのは、リスクの高い大きな賭けだ https://quipper.hatenablog.com/entry/2018/11/14/ working-out-loud 余談: Working Out Loud 40 03 How to get over “Contribution Accessibility”

Slide 41

Slide 41 text

#nodefest How to find “Good First Issues” ➔ この用途では向いていなかった ◆ star数でsortできない ◆ "good first issue"の誤用がノイズ ◆ 誤用でも何でもアップデートされると通知が来てしまう Another way: Jasper (GitHub issue reader) 41

Slide 42

Slide 42 text

#nodefest How to find “Good First Issues” ➔ v1: Proof of concept -Working out loud- ➔ v2: GUI -美しきもののみが機能的である- ➔ v3: Reformation -Dance as though no one is watching you- 42 03 How to get over “Contribution Accessibility”

Slide 43

Slide 43 text

#nodefest How to find “Good First Issues” v2 architecture HTTP (REST) Netlify Heroku GitHub GraphQL API v4 frontend api HTTP HTML CSS JS HTTP (GraphQL) 43 03 How to get over “Contribution Accessibility”

Slide 44

Slide 44 text

#nodefest How to find “Good First Issues” ➔ 現状の見た目と機能はほとんどここで完成 ◆ 言語ごとのフィルタリング ◆ ReactによるSingle Page Application ➔ フロントエンドとバックエンドそれぞれ分けて実装 ◆ React, Material UI, TypeScript ◆ Node.js, Express, GraphQL v2: GUI 44 03 How to get over “Contribution Accessibility”

Slide 45

Slide 45 text

#nodefest How to find “Good First Issues” 45 03 How to get over “Contribution Accessibility” 皆さんおなじみの技術スタックでした

Slide 46

Slide 46 text

#nodefest How to find “Good First Issues” ➔ 開発にはDocker Composeを利用 ➔ NetlifyとHerokuにそれぞれデプロイ ◆ sub-directoryをデプロイする方法を学んだ https://ohbarye.hatenablog.jp/archive/category/monorepo monorepo 46 03 How to get over “Contribution Accessibility”

Slide 47

Slide 47 text

#nodefest How to find “Good First Issues” ➔ Performance ◆ GitHubに毎回クエリを投げており、キャッシュしていない ◆ Heroku TTFB ➔ Rate limit ◆ GitHubの制約: 5,000 points per hour ◆ https://developer.github.com/v4/guides/resource-limitations/#rate-limit v2の大きな課題 47 03 How to get over “Contribution Accessibility”

Slide 48

Slide 48 text

#nodefest How to find “Good First Issues” v2の大きな課題 HTTP (REST) Netlify GitHub GraphQL API v4 frontend HTTP HTML CSS JS 48 HTTP (GraphQL) Heroku api Rate limit Performance 03 How to get over “Contribution Accessibility”

Slide 49

Slide 49 text

#nodefest How to find “Good First Issues” roppongi.js#5 「続・貢献できるOSSの見つけ方」＿人人人人人人＿＞　　「続」とは　　＜￣Y^Y^Y^Y^Y^Y^￣ 49 03 How to get over “Contribution Accessibility”

Slide 50

Slide 50 text

#nodefest How to find “Good First Issues” ➔ v1: Proof of concept -Working out loud- ➔ v2: GUI -美しきもののみが機能的である- ➔ v3: Reformation -Dance as though no one is watching you- 50 03 How to get over “Contribution Accessibility”

Slide 51

Slide 51 text

#nodefest How to find “Good First Issues” Now.sh GitHub GraphQL API v4 SSR server HTTP HTML CSS JS HTTP (GraphQL) Cache per query SSR with Next.js Accept GraphQL query HTTP (GraphQL) Apollo client New Features v3 architecture 51 03 How to get over “Contribution Accessibility”

Slide 52

Slide 52 text

#nodefest How to find “Good First Issues” LRU Cache Performance, Rate limit の問題を同時に解決 52 03 How to get over “Contribution Accessibility”

Slide 53

Slide 53 text

#nodefest How to find “Good First Issues” ➔ Next.jsを使ったSSR ➔ クライアントとサーバ間の通信のGraphQL化、Apollo ➔ Now.sh ◆ Clientとserverを一つに統合し、デプロイが楽になる ◆ Now.shは無料枠でもスリープしない設定にできる https://zeit.co/blog/scale v3 changes 53 03 How to get over “Contribution Accessibility”

Slide 54

Slide 54 text

#nodefest How to find “Good First Issues” ＿人人人人人人人人人＿＞　20,000行のdiff　＜￣Y^Y^Y^Y^Y^Y^Y^￣ 54 03 How to get over “Contribution Accessibility”

Slide 55

Slide 55 text

#nodefest How to find “Good First Issues” What I’ve got so far 04 55 04 What I’ve got so far

Slide 56

Slide 56 text

#nodefest How to find “Good First Issues” Contribution成果 ➔ 今年入ってから送ったPull Requestsが約50本 ◆ JavaScriptのメジャープロジェクトにコントリビューションできた ◆ goofiを開発する中で偶然見つけて送ったPRもある ➔ OSSとの繋がりをさらに意識できるようになった 56 04 What I’ve got so far

Slide 57

Slide 57 text

#nodefest How to find “Good First Issues” 送ったPull requestsの一部 57 04 What I’ve got so far

Slide 58

Slide 58 text

#nodefest How to find “Good First Issues” 副次的成果 ➔ JavaScriptやフロントエンドが苦手だったが開発を通して諸々のツールや技術を使うことができた ➔ コードを読み書きする機会が増えたことでJavaScriptや周辺エコシステムと仲良くなれた ➔ ふだんからJavaScriptに馴染みのある方ならもっとやれそう 58 04 What I’ve got so far

Slide 59

Slide 59 text

#nodefest How to find “Good First Issues” 過去の自分が欲しかったものを作れた 59 04 What I’ve got so far

Slide 60

Slide 60 text

#nodefest How to find “Good First Issues” おまけ OSS活動をしていて面白かったこと 60 04 What I’ve got so far

Slide 61

Slide 61 text

#nodefest How to find “Good First Issues” 1. OSS貢献でお金を得た話 61 04 What I’ve got so far

Slide 62

Slide 62 text

#nodefest How to find “Good First Issues” OSS貢献でお金を得られることもある 62 04 What I’ve got so far ➔ https://tip4commit.com/ ➔ 登録されたOSSにcontributeすると、投げ銭で集まったデポジットからコントリビュータのアカウントにBTCが支払われる仕組み ➔ 約6,000円のBTCを貰った ➔ 値上がりするのでは…!?

Slide 63

Slide 63 text

#nodefest How to find “Good First Issues” 63 04 What I’ve got so far ＿人人人人人人人人人人人人人人人人人人＿＞　現在の貨幣価値にして1824.72円である　＜￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣が・・・・・　駄目っ・・・・・！

Slide 64

Slide 64 text

#nodefest How to find “Good First Issues” 賛否はある 64 04 What I’ve got so far ➔ https://ja.wikipedia.org/wiki/ロウソク問題 ➔ (私見) お金のためにやるわけではないが、感謝を表す手段は欲しい ➔ この話もblogに書いてみた https://ohbarye.hatenablog.jp/entry/2018/01/ 14/185720

Slide 65

Slide 65 text

#nodefest How to find “Good First Issues” 2. 色のアクセシビリティ 65 04 What I’ve got so far

Slide 66

Slide 66 text

#nodefest How to find “Good First Issues” ➔ `yarn outdated` が色覚障害者に優しくない問題プログラマも気にしたい色のアクセシビリティ 66 04 What I’ve got so far

Slide 67

Slide 67 text

#nodefest How to find “Good First Issues” ➔ 色を変えるパッチを送ってみたがリジェクト ◆ 第2色覚異常には嬉しいが、第3色覚異常には嬉しくない ➔ https://speakerdeck.com/ohbarye/color-accessibility-that-engineers-should-care Issueはあるが答えが見えていないこともある 67 04 What I’ve got so far

Slide 68

Slide 68 text

#nodefest How to find “Good First Issues” OSS貢献を通じた様々な学びがあった 68 04 What I’ve got so far

Slide 69

Slide 69 text

#nodefest How to find “Good First Issues” Why I contribute to OSS 05 69 05 Why I contribute to OSS

Slide 70

Slide 70 text

#nodefest How to find “Good First Issues” ➔ キャリアの責任は自分で持つ ➔ 武器を得る ➔ 射撃しつつ前進 05 Why I contribute to OSS 70

Slide 71

Slide 71 text

#nodefest How to find “Good First Issues” キャリアの責任は自分で持つ ➔ > 君のキャリアの責任は君にある。君の市場価値を決めるのは雇用主ではない ➔ > 時代に取り残されないようにするには、弁護士や医者と同じようなことをすればいい。オープンソースプロジェクトで無償の貢献をするのだ。プロジェクトの数は多い。スキルのレパートリーを増やすには、誰かが関心を持つことを実際にやるより他にないと思う。 ➔ 『Clean Coder』 https://amzn.to/2Q4pVbN 71 05 Why I contribute to OSS

Slide 72

Slide 72 text

#nodefest How to find “Good First Issues” ➔ キャリアの責任は自分で持つ ➔ 武器を得る ➔ 射撃しつつ前進 72 05 Why I contribute to OSS

Slide 73

Slide 73 text

#nodefest How to find “Good First Issues” 武器を得る ➔ > 今までは、仕事は会社から与えられるもので、面白い仕事が当たればラッキーだけどそうじゃない場合もあったわけです。ところが、オープンソースの活動で自分の名前が表に出れば、今までとは違って「武器」を手に入れることができる ➔ オープンソースへの取り組みはエンジニアにとって強力な「武器」になる https://doda.jp/engineer/it/guide/001/02b.html 73 05 Why I contribute to OSS

Slide 74

Slide 74 text

#nodefest How to find “Good First Issues” ➔ キャリアの責任は自分で持つ ➔ 武器を得る ➔ 射撃しつつ前進 74 05 Why I contribute to OSS

Slide 75

Slide 75 text

#nodefest How to find “Good First Issues” 射撃しつつ前進 ➔ > 生産性の鍵とは、ただ始めること ➔ > この射撃しつつ前進の原理が、人生でものごとを成し遂げるときのやり方でもあることに気づくには、さらに15年かかった。あなたは毎日少しずつ前へ進む必要がある。あなたのコードがまずくてバグだらけで誰もほしがらなくても問題じゃない。あなたが前へ進み続けるなら、コンスタントにコードを書き、バグを直し続けるなら、時があなたの味方となる。 ➔ 射撃しつつ前進 http://local.joelonsoftware.com/wiki/射撃しつつ前進 75 05 Why I contribute to OSS

Slide 76

Slide 76 text

#nodefest How to find “Good First Issues” …とか考えていたけどやっていたら楽しくなってきた 76 04 What I’ve got so far

Slide 77

Slide 77 text

#nodefest How to find “Good First Issues” 楽しいからやる、も今の自分の一つの答え自分なりの持続可能なやり方を模索していきたい 77 04 What I’ve got so far

Slide 78

Slide 78 text

Slide 79

Slide 79 text

#nodefest How to find “Good First Issues” ➔ Engineering Manager in ➔ 趣味：ブログなど ➔ Engineering Manager Meetup Organizer @ohbarye (Masato Ohba) 79 本セッションの感想・フィードバックを貰えると嬉しいです https://twitter.com/ohbarye

Slide 80

Slide 80 text

#nodefest How to find “Good First Issues” #3 on 2018-12-14 https://engineering-manager-meetup.connpass.com/event/107676/ 80

Slide 81

Slide 81 text

#nodefest How to find “Good First Issues” Let’s find your good first issue with “goofi” 81

Slide 82

Slide 82 text

#nodefest How to find “Good First Issues” Thank you! 82

Slide 83

Slide 83 text

#nodefest How to find “Good First Issues” ➔ dependabot を使う https://dependabot.com/ ◆ アップデートに詳しくなる ◆ OSSに繋がっている感覚を増やせる ➔ Localizationは最もとっつきやすいテーマ余談 83

Slide 84

Slide 84 text

#nodefest How to find “Good First Issues” 参考資料 ➔ https://doda.jp/engineer/it/guide/001/02b.html ➔ https://www.slideshare.net/shigemk2/oss-78585757 ➔ https://medium.com/@timrwood/moment-endof-term-522d8965689 ➔ https://speakerdeck.com/ohbarye/color-accessibility-that-engineers-should-care ➔ https://speakerdeck.com/mtsmfm/you-must-send-a-pr-for-yourself ➔ http://local.joelonsoftware.com/wiki/射撃しつつ前進 ➔ https://ohbarye.hatenablog.jp/entry/2018/10/01/increase-output-to-seize ➔ http://developer.hatenastaff.com/entry/opensource-activity 84