「こわくない」Vuetifyで始めるOSSコントリビュート

Vuetifyにコントリビュートする方法についてまとめたスライドです。

Transcript

1. 「こわくない」Vuetifyで始めるOSSコ ントリビュート 2022/10/16 Vue Fes Japan Online 2022
2. kenji7157 (kawanobe kenji) SoftwareEngineer #ENECHANGE #Vue #Nuxt #Firebase #GCP Twitter: @kenji7157 Github: @kenji7157
3. ENECHANGE
4. ENECHANGE
5. ENECHANGE 検索 We are hiring!!! https://www.wantedly.com/companies/enechange
6. 伝えたいこと Vuetifyにコントリビュートするのは 「こわくない」
7. アジェンダ 1. はじめに a. Vuetifyとは b. コントリビュートするメリット 2. 環境構築 3. issue選定 4. 改修作業 5. PR作成
8. 1. はじめに
9. a. Vuetifyとは • Vuetify …UIフレームワーク • デザインの知識が無くてもマテリアルデザインに則って開発できる • https://next.vuetifyjs.com/
10. 👆個人開発で作ったサービス（Ticketnote） デザイン知識がなくても、Vuetifyのおかげでいい感じのUIで実装できました👍
11. b. コントリビュートするメリット • Gitアカウントのプロフィールが充実する • コーディング・リーディング力が身に付く • 就職・転職の際にアピールできる • etc
13. 2. 環境構築
14. 事前準備 • npm：v8.8.0 • node：v14.17.4 • エディタ：VSCode
15. 環境構築 https://github.com/vuetifyjs/vuetify にアクセスして[Fork]をクリック。
16. 環境構築 デフォルトのまま[Create fork]をクリック。
17. 環境構築 Vuetifyのコードが、Forkされていることを確認。 （リポジトリ名が「Gitのアカウント名/vuetify」となっていればOK）
18. 環境構築 cloneするのでコピー
19. 環境構築 • ターミナルで以下のコマンドを実行 $ git clone https://github.com/{Gitのアカウント名}/vuetify.git • 実行結果
20. 環境構築 • cloneしたディレクトに移動し「yarn」を実行 $ cd vuetify $ yarn • 実行結果
21. 環境構築 • ビルド実行後にローカルサーバーを起動 $ yarn build $ yarn dev • http://localhost:8080/#/page1 を開いて以下のような画面が出ればOK
22. 環境構築 http://localhost:8080/#/page1 には packages/vuetify/dev/Playground.vueの内容が表示される。
23. 環境構築 http://localhost:8080/#/page1 には packages/vuetify/dev/Playground.vueの内容が表示される。 これで環境構築は完了です。👏 この後は、取り組むバグissueを選びます。
24. 3. issue選定
25. issue選定 issuesタブを開く
26. issue選定 ラベルの「T: bug」でフィルタするとバグissueが一覧に表示される。
27. issue選定 あとはタイトルや説明を読んでみて軽めのissueを探しましょう。 （英語が苦手な私は翻訳機能を使って探しています。）
28. issue選定 @kenji7157 が過去に取り組んだissue
29. issue選定 [Bug Report] v-select baseline changes when empty string is selected https://github.com/vuetifyjs/vuetify/issues/13007 翻訳：「空の文字列を選択すると、v-select のベースラインが変わる」
30. issue選定 deepLでIssueの本文を翻訳してみた。
31. issue選定 以下は、issueに添付されている再現キャプチャ。 「空文字を選択すると、余白がずれている」事が報告されていることがわかる。
32. issue選定 以下は、issueに添付されている再現キャプチャ。 「空文字を選択すると、余白がずれている」事が報告されていることがわかる。 これなら取り組めそうだな。😏 この後は、このバグの改修作業を説明します。
33. 3. 改修作業
34. 改修作業（ローカルでバグを再現させる） バグ報告されているissueには、再現する コードが確認できるリンクが記載されています。 私が改修したissueにも記載されていました。🙆 こちらを確認して、開発環境にコードをコピペして、 ローカルでバグを再現させます。
35. 改修作業（ローカルでバグを再現させる）
36. 改修作業（ローカルでバグを再現させる） HTMLタブの赤枠内のコードを開発環境の Playground.vueの<template>部分に記述する。
37. 改修作業（ローカルでバグを再現させる）
38. 改修作業（ローカルでバグを再現させる） 次に、JSタブの赤枠内のコードを開発環境の Playground.vueの<script>部分にコピペする。
39. 改修作業（ローカルでバグを再現させる）
40. 改修作業（ローカルでバグを再現させる） http://localhost:8080/#/page1 を開いて ローカルでもバグが再現するか確認しましょう。
41. 改修作業（ローカルでバグを再現させる） Issueに記載されている事象と同じ事象が起きればOKです。 あとは、Chromeの開発者ツールなどを使ってスタイルの不具合を見つけていきましょう。🔧
42. 改修作業（作業ブランチのチェックアウト） # issueのタイトルをハイフン繋ぎにした値で、作業ブランチを作成/切り替え $ git checkout -b v-select-baseline-changes-when-empty-string-is-selected
43. 改修作業（作業ブランチのチェックアウト） 今回のバグはsassを２行追加することで改修できた。
44. 改修作業（commit/pushする） • commit 「fix(対象コンポーネント): 修正内容」をメッセージにしてコミット $ git commit -m "fix(VSelect): specify min-height 10px" • push $ git push origin v-select-baseline-changes-when-empty-string-is-selected ※コミットメッセージやブランチ名が不適切な場合はPRで指摘してくれるので恐れずにpushしましょう！ 参考：https://vuetifyjs.com/ja/getting-started/contributing/#section-30b330df30c330c8306e7a2e985e
45. 改修作業（commit/pushする） • commit 「fix(対象コンポーネント): 修正内容」をメッセージにしてコミット $ git commit -m "fix(VSelect): specify min-height 10px" • push $ git push origin v-select-baseline-changes-when-empty-string-is-selected ※コミットメッセージやブランチ名が不適切な場合はPRで指摘してくれるので恐れずにpushしましょう！ 参考：https://vuetifyjs.com/ja/getting-started/contributing/#section-30b330df30c330c8306e7a2e985e これで改修作業は完了です。👏 この後は、PRを作成します。
46. 4. PR作成
47. PR作成 masterブランチに向けてPRを作成します。 ベースブランチの指定について： https://vuetifyjs.com/ja/getting-started/contributing/#section-30d930fc30b930d630e930f330c1306e9078629e
48. PR作成 以下を記載してレビュアーにも親切なPRを作成しましょう ・Description：修正対象のissue ・Motivation and Context：修正動機や修正することで得られるメリット等 ・visually：修正前後のキャプチャ等 👀
49. PR作成 以下を記載してレビュアーにも親切なPRを作成しましょう ・Description：修正対象のissue ・Motivation and Context：修正動機や修正することで得られるメリット等 ・visually：修正前後のキャプチャ等 👀 これでPR作成は完了です。👏 あとはレビューされるのを待ちましょう。🙏
51. Thank you!!