<p>こんにちは！<a href="https://peraichi.co.jp/" target="_blank" rel="nofollow noopener noreferrer">株式会社ペライチ</a>でフロントエンドエンジニアをしている秋本です。</p>
<p>最近プライベートで OSS コントリビュートに挑戦しました。<br>
その経験を元に以下をお話できればと思っています。</p>
<ul>
<li>OSS コントリビュートのメリット</li>
<li>具体的なやり方</li>
<li>簡単な感想</li>
</ul>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p><strong>そもそも OSS（オープンソースソフトウェア） とは？</strong> 🤔</p>
<p>オープンソースソフトウェアは、ソフトウェアのソースコードが一般に公開され、商用および非商用の目的を問わずソースコードの利用・修正・再頒布が可能なソフトウェアと定義される。(参照： <a href="https://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2" target="_blank" rel="nofollow noopener noreferrer">Wikipedia</a>)</p>
<p>要は、誰でもソースコードが見れて、誰でも使っていいツールという感じでしょうか。<br>
最近だとサービス終了で話題になった「接触確認アプリ<a href="https://github.com/cocoa-mhlw/cocoa" target="_blank" rel="nofollow noopener noreferrer">COCOA</a>」も OSS です。</p>
</div></aside>
<h1 id="%E8%83%8C%E6%99%AF">
<a class="header-anchor-link" href="#%E8%83%8C%E6%99%AF" aria-hidden="true"></a> 背景</h1>
<p>「OSS コントリビュート」と聞くと、何かすごい難しそうだなという印象があったのですが、選んだ issue が簡単だったこともあり、やってみた感想としては「意外といけるじゃん！」でした。</p>
<p>もちろん中には非常に難易度の高い issue も存在しますが、それはつよつよエンジニアに任せましょう。<br>
軽微なバグや、少しの修正で解消する issue もあるので、「OSS に貢献したい！」という気持ちが少しでもある方は挑戦してみることをオススメします。</p>
<p>今回私が挑戦したのは、<a href="https://vuetifyjs.com/ja/" target="_blank" rel="nofollow noopener noreferrer">Vuetify</a>という Vue.js にマテリアルデザインを提供してくれるライブラリです。</p>
<p>▼ 実際に取り込んでもらえたプルリクエスト<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__44328a1dc8b39" src="https://embed.zenn.studio/card#zenn-embedded__44328a1dc8b39" data-content="https%3A%2F%2Fgithub.com%2Fvuetifyjs%2Fvuetify%2Fpull%2F15709" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/vuetifyjs/vuetify/pull/15709" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/vuetifyjs/vuetify/pull/15709</a></p>
<h1 id="oss-%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AA%E3%83%93%E3%83%A5%E3%83%BC%E3%83%88%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88">
<a class="header-anchor-link" href="#oss-%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AA%E3%83%93%E3%83%A5%E3%83%BC%E3%83%88%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88" aria-hidden="true"></a> OSS コントリビュートのメリット</h1>
<p>簡単に OSS コントリビュートするメリットをまとめてみました。</p>
<ol>
<li>マージされたら愛着が湧く</li>
<li>マージされたらいい気分になる</li>
<li>他のエンジニアに自慢ができる 👺</li>
<li>PR したときに、レビューがもらえる可能性がある</li>
<li>他人（つよつよエンジニア）のコードが見れて勉強になる</li>
<li>github プロフィールの「Organizations」に OSS のアイコンが載る可能性がある</li>
</ol>
<p>メリットは上げたらきりがなさそうですね。<br>
どうでしょうか。みなさんも挑戦したくなったのではないでしょうか？😎</p>
<h1 id="%E5%85%B7%E4%BD%93%E7%9A%84%E3%81%AA%E3%82%84%E3%82%8A%E6%96%B9">
<a class="header-anchor-link" href="#%E5%85%B7%E4%BD%93%E7%9A%84%E3%81%AA%E3%82%84%E3%82%8A%E6%96%B9" aria-hidden="true"></a> 具体的なやり方</h1>
<p>それではここから具体的な方法を記載していきます。</p>
<h2 id="%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89">
<a class="header-anchor-link" href="#%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89" aria-hidden="true"></a> 環境構築</h2>
<p>まず環境構築（ローカル環境で動作する状態まで）です。</p>
<p>今回は、私が挑戦した <a href="https://github.com/vuetifyjs/vuetify" target="_blank" rel="nofollow noopener noreferrer">Vuetify</a> をベースに進めていきます。<br>
基本的な OSS コントリビュートの流れは以下の図のような形になります。</p>
<p>▼ コントリビュートの流れ<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--ohR3L9jz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/215a65b150ae26c8eb5a6b0f.png%3Fsha%3D8a0d9d1b981a745efb754b5f08bdb63a1bb64324" alt loading="lazy" class="md-img"></p>
<p>通常の開発と異なる点としては、<code>Fork</code>をしている点です。<br>
Fork の詳細に関しては記事の趣旨とずれるため割愛します 🙏（参照したい方: <a href="https://docs.github.com/ja/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks" target="_blank" rel="nofollow noopener noreferrer">Fork について</a>）</p>
<h3 id="%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%AB%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%B3%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%AB%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%B3%E3%81%99%E3%82%8B" aria-hidden="true"></a> ローカルにクローンする</h3>
<p>Fork してきたリポジトリを、<code>git clone</code>でリモート環境に保存します。</p>
<div class="code-block-container"><pre><code>git clone git@github.com:{githubのアカウント名}/vuetify.git
</code></pre></div><h3 id="%E5%85%AC%E5%BC%8F%E3%81%AE%E6%A1%88%E5%86%85%E3%81%AB%E6%B2%BF%E3%81%A3%E3%81%A6%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89%E3%82%92%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E5%85%AC%E5%BC%8F%E3%81%AE%E6%A1%88%E5%86%85%E3%81%AB%E6%B2%BF%E3%81%A3%E3%81%A6%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89%E3%82%92%E3%81%99%E3%82%8B" aria-hidden="true"></a> 公式の案内に沿って環境構築をする</h3>
<p>今回参考にしている Vuetify は、公式ドキュメントにローカル環境の立ち上げ方法が記載されています。<br>
<a href="https://vuetifyjs.com/ja/getting-started/contributing/#section-30ed30fc30ab30eb958b767a" target="_blank" rel="nofollow noopener noreferrer">こちら</a>を参考に進めていきます。</p>
<div class="code-block-container"><pre><code># vuetify フォルダに移動
cd vuetify

# すべてのプロジェクト依存関係をインストール
yarn

# ERRが出る場合
npm install -g node-gyp

# パッケージをビルド
yarn build

# devフォルダに移動
cd packages/vuetify/dev

# develop立ち上げ
yarn dev
</code></pre></div><p>あとは、<a href="http://localhost:8080" target="_blank" rel="nofollow noopener noreferrer">http://localhost:8080</a> にアクセスすると真っ白い画面が開きます。<br>
<code>packages/vuetify/dev/Playgroud.vue</code>を書き換えてもらえると反映されます。</p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p><strong>コントリビュート用のドキュメントについて</strong>🗺️<br>
有名な OSS になると、コントリビュート用のドキュメントや README.md が用意されていることが多いです。<br>
慣れないうちは、専用の資料が用意されている OSS を選ぶことをオススメします。</p>
</div></aside>
<h2 id="issue-%E3%81%AE%E6%8E%A2%E3%81%97%E6%96%B9">
<a class="header-anchor-link" href="#issue-%E3%81%AE%E6%8E%A2%E3%81%97%E6%96%B9" aria-hidden="true"></a> issue の探し方</h2>
<p>環境構築ができたら、<a href="https://github.com/vuetifyjs/vuetify/issues" target="_blank" rel="nofollow noopener noreferrer">Vuetify の issue ページ</a>で探していきます。</p>
<p>闇雲に issue を一つ一つ見ていってもいいのですが、Vuetify はありがたいことに初心者コントリビュータ向けに<code>good first issue</code>という<code>Label</code>を用意してくれています。<br>
<code>good first issue</code>以外にも<code>T:bug</code>も内容によっては簡単なものが多い気がします。</p>
<p>ちなみに私が挑戦した <a href="https://github.com/vuetifyjs/vuetify/issues/14922" target="_blank" rel="nofollow noopener noreferrer">issue</a> は、<code>VMenu</code>,<code>good first issue</code>,<code>T: bug</code>のラベルがついているものでした。</p>
<p>issue の中身覗いてもらうと、詳細が記入されています。<br>
issue によってはすでに原因が究明できていて、あとは直すだけという状態のものも存在します。<br>
そのため、issue 内でコメントがある場合、がんばってやり取りを追ってもらえると「ここを修正すればいいのか。」というヒントが得られます。</p>
<p>この issue をやる！キミにきめた！<br>
となったら issue 内で<strong>決意表明をすること</strong>をオススメします。<br>
人気の OSS だと、他のコントリビューターとバッティングすることがあるため、assign を明示的に示しておくことで余計なコミュニケーションコストを回避することができます。</p>
<p>また issue は全文英語ですが、毛嫌いせず読んでいきましょう。<br>
僕は友達の DeepL 君に翻訳してもらいました。</p>
<h2 id="%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%A7%E5%86%8D%E7%8F%BE%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B">
<a class="header-anchor-link" href="#%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%A7%E5%86%8D%E7%8F%BE%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> ローカルで再現してみる</h2>
<p>issue を見ると、事象を再現できるようコードが用意されている場合があります。<br>
その場合は、コピペで<code>packages/vuetify/dev/Playgroud.vue</code>に貼り付けて事象を再現します。</p>
<p>ローカルで反映が完了したら、バグの特定に移ります。</p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p><strong>ガイドラインがある場合</strong>🧭<br>
公式ドキュメントにコントリビュートガイドラインの項目があった場合、すべて目を通しておくことをオススメします。<br>
Vuetify を例に上げると、commit ガイドラインやラベルルール等記載されています。<br>
様々な人が開発しているので各々の開発手法があると思いますが、ソフトウェアを尊重しガイドラインを踏襲して開発するようにしましょう。<br>
「郷に入れば、郷に従え 🐯」です。</p>
</div></aside>
<h2 id="%E4%BF%AE%E6%AD%A3%E3%81%8C%E5%AE%8C%E4%BA%86%E3%81%97%E3%81%9F%E3%82%89%E3%83%BB%E3%83%BB%E3%83%BB">
<a class="header-anchor-link" href="#%E4%BF%AE%E6%AD%A3%E3%81%8C%E5%AE%8C%E4%BA%86%E3%81%97%E3%81%9F%E3%82%89%E3%83%BB%E3%83%BB%E3%83%BB" aria-hidden="true"></a> 修正が完了したら・・・</h2>
<p>とりあえず、お疲れさまでした。<br>
あとは、PR を作成するだけです。</p>
<p>Vuetify の PR は日本語ではなく英語で記載します。<br>
翻訳君を利用しながら作成していきましょう。</p>
<p>すでに<a href="https://github.com/vuetifyjs/vuetify/blob/master/.github/PULL_REQUEST_TEMPLATE.md" target="_blank" rel="nofollow noopener noreferrer">テンプレート</a>は用意されているため、PR を作成すると題目が反映されます。<br>
テンプレートをベースに直近に取り込まれた PR のコメントを参考に作成してもらうと良いかと思います。</p>
<p>現在（2022 年 9 月）テンプレートの題目は以下の６つで構成されています。</p>
<h3 id="1.-description">
<a class="header-anchor-link" href="#1.-description" aria-hidden="true"></a> 1. Description</h3>
<p>今回 PR した内容の全体説明です。対応した issue を貼っている方や細かく修正した内容を記述したりやり方は様々です。</p>
<h3 id="2.-motivation-and-context">
<a class="header-anchor-link" href="#2.-motivation-and-context" aria-hidden="true"></a> 2. Motivation and Context</h3>
<p>日本語に訳すと「動機と背景」です。修正しないと何が起こるのかを記述している方が多いです。</p>
<h3 id="3.-how-has-this-been-tested%3F">
<a class="header-anchor-link" href="#3.-how-has-this-been-tested%3F" aria-hidden="true"></a> 3. How Has This Been Tested?</h3>
<p>再現方法です。codepen のリンクを貼ったり、どういった環境で起こったかを記述します。</p>
<h3 id="4.-markup">
<a class="header-anchor-link" href="#4.-markup" aria-hidden="true"></a> 4. Markup</h3>
<p><code>How Has This Been Tested?</code>の環境かつ、実際に再現できたコードを記述します。</p>
<h3 id="5.-types-of-changes">
<a class="header-anchor-link" href="#5.-types-of-changes" aria-hidden="true"></a> 5. Types of changes</h3>
<p>すべてで４つの項目があり、今回の変更がどの項目に該当するかチェック入れれば OK です。</p>
<ul class="contains-task-list">
<li class="task-list-item enabled">
<input class="task-list-item-checkbox" type="checkbox"> Bug fix (non-breaking change which fixes an issue)</li>
<li class="task-list-item enabled">
<input class="task-list-item-checkbox" type="checkbox"> New feature (non-breaking change which adds functionality)</li>
<li class="task-list-item enabled">
<input class="task-list-item-checkbox" type="checkbox"> Breaking change (fix or feature that would cause existing functionality to not work as expected)</li>
<li class="task-list-item enabled">
<input class="task-list-item-checkbox" type="checkbox"> Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)</li>
</ul>
<h3 id="6.-checklist">
<a class="header-anchor-link" href="#6.-checklist" aria-hidden="true"></a> 6. Checklist</h3>
<p>今回の変更の最終チェック項目になります。（親切ですよね）<br>
PR のタイトルは 64 文字いないか、コードルールに沿っているかなどがあります。</p>
<ul class="contains-task-list">
<li class="task-list-item enabled">
<input class="task-list-item-checkbox" type="checkbox"> The PR title is no longer than 64 characters.</li>
<li class="task-list-item enabled">
<input class="task-list-item-checkbox" type="checkbox"> The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).</li>
<li class="task-list-item enabled">
<input class="task-list-item-checkbox" type="checkbox"> My code follows the code style of this project.</li>
<li class="task-list-item enabled">
<input class="task-list-item-checkbox" type="checkbox"> I've added relevant changes to the documentation (applies to new features and breaking changes in core library)</li>
</ul>
<p>６項目を確認したら PR しましょう！</p>
<h3 id="merge-%E3%81%95%E3%82%8C%E3%82%8B%E3%81%BE%E3%81%A7%E3%81%AE%E6%B5%81%E3%82%8C">
<a class="header-anchor-link" href="#merge-%E3%81%95%E3%82%8C%E3%82%8B%E3%81%BE%E3%81%A7%E3%81%AE%E6%B5%81%E3%82%8C" aria-hidden="true"></a> merge されるまでの流れ</h3>
<p>PR を送った後は、CI のチェックやレビュアーからのコードレビューがあります。<br>
また、リポジトリによっては、CLA(contributor license agreement) への同意が求められることがあります。その場合は bot などによって手順がコメントされるので、そちらに従って同意しましょう。</p>
<p>PR の内容に問題がなければそのまま merge されますが、レビュアーから request changes や suggestion などを受けることがあります。<br>
コードをより良くするための意見なので、その場合もビビらず、真摯に対応しましょう。</p>
<p>全てのチェックが完了すると、管理者によって merge されます。<br>
私の場合は、特に戻しなどなく 1 週間ほどで merge していただけました。</p>
<h1 id="%E6%9C%80%E5%BE%8C%E3%81%AB">
<a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h1>
<p>いかがだったでしょうか！<br>
ぜひ自分の成長のためにも OSS コントリビュート挑戦してみてください！</p>
<h1 id="%E6%8E%A1%E7%94%A8%E6%83%85%E5%A0%B1">
<a class="header-anchor-link" href="#%E6%8E%A1%E7%94%A8%E6%83%85%E5%A0%B1" aria-hidden="true"></a> 採用情報</h1>
<p>現在エンジニア募集しています！</p>
<p>▼ 採用ページ<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a86ffb41134a7" src="https://embed.zenn.studio/card#zenn-embedded__a86ffb41134a7" data-content="https%3A%2F%2Frecruit.peraichi.co.jp%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://recruit.peraichi.co.jp/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://recruit.peraichi.co.jp/</a></p>
<p>▼ 選考をご希望の方はこちら（募集職種一覧）<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__848552d1b0ab1" src="https://embed.zenn.studio/card#zenn-embedded__848552d1b0ab1" data-content="https%3A%2F%2Fhrmos.co%2Fpages%2Fperaichi%2Fjobs%3Fcategory%3D1629135637016141824%26utm_source%3Dtechblog%26utm_medium%3Dreferral%26utm_campaign%3Darticle-01gdc6magrrt10vtvzhe75s9pv" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://hrmos.co/pages/peraichi/jobs?category=1629135637016141824&amp;utm_source=techblog&amp;utm_medium=referral&amp;utm_campaign=article-01gdc6magrrt10vtvzhe75s9pv" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://hrmos.co/pages/peraichi/jobs?category=1629135637016141824&amp;utm_source=techblog&amp;utm_medium=referral&amp;utm_campaign=article-01gdc6magrrt10vtvzhe75s9pv</a></p>
<p>▼ まずはカジュアル面談をご希望の方はこちら<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__2262941d1057b" src="https://embed.zenn.studio/card#zenn-embedded__2262941d1057b" data-content="https%3A%2F%2Fhrmos.co%2Fpages%2Fperaichi%2Fjobs%2F0000029%3Futm_source%3Dtechblog%26utm_medium%3Dreferral%26utm_campaign%3Darticle-01gdc6magrrt10vtvzhe75s9pv" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://hrmos.co/pages/peraichi/jobs/0000029?utm_source=techblog&amp;utm_medium=referral&amp;utm_campaign=article-01gdc6magrrt10vtvzhe75s9pv" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://hrmos.co/pages/peraichi/jobs/0000029?utm_source=techblog&amp;utm_medium=referral&amp;utm_campaign=article-01gdc6magrrt10vtvzhe75s9pv</a></p>
<p>募集中の職種についてご興味がある方は、お気軽にお申し込みください（CTO がお会いします）</p>


OSSコントリビュータのススメ

OSS コントリビュートのメリット

公式の案内に沿って環境構築をする

Discussion