Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
「こわくない」Vuetifyで始めるOSSコントリビュート
Search
Kenji Kawanobe
June 16, 2022
1
180
「こわくない」Vuetifyで始めるOSSコントリビュート
Vuetifyにコントリビュートする方法についてまとめたスライドです。
Kenji Kawanobe
June 16, 2022
Tweet
Share
More Decks by Kenji Kawanobe
See All by Kenji Kawanobe
Nuxt.jsとFirebaseで個人開発した話
kenji7157
0
94
Development of LINEBot for predicting bicycle theft using open data!!
kenji7157
0
120
自転車盗難推測Botの開発
kenji7157
0
20
Featured
See All Featured
Building Adaptive Systems
keathley
38
2.3k
Embracing the Ebb and Flow
colly
84
4.5k
The Cost Of JavaScript in 2023
addyosmani
45
6.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
The Cult of Friendly URLs
andyhume
78
6.1k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Ruby is Unlike a Banana
tanoku
97
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
Adopting Sorbet at Scale
ufuk
73
9.1k
Code Review Best Practice
trishagee
64
17k
Side Projects
sachag
452
42k
Transcript
「こわくない」Vuetifyで始めるOSSコ ントリビュート 2022/10/16 Vue Fes Japan Online 2022
kenji7157 (kawanobe kenji) SoftwareEngineer #ENECHANGE #Vue #Nuxt #Firebase #GCP Twitter:
@kenji7157 Github: @kenji7157
ENECHANGE
ENECHANGE
ENECHANGE 検索 We are hiring!!! https://www.wantedly.com/companies/enechange
伝えたいこと Vuetifyにコントリビュートするのは 「こわくない」
アジェンダ 1. はじめに a. Vuetifyとは b. コントリビュートするメリット 2. 環境構築 3.
issue選定 4. 改修作業 5. PR作成
1. はじめに
a. Vuetifyとは • Vuetify …UIフレームワーク • デザインの知識が無くてもマテリアルデザインに則って開発できる • https://next.vuetifyjs.com/
👆個人開発で作ったサービス(Ticketnote) デザイン知識がなくても、Vuetifyのおかげでいい感じのUIで実装できました👍
b. コントリビュートするメリット • Gitアカウントのプロフィールが充実する • コーディング・リーディング力が身に付く • 就職・転職の際にアピールできる • etc
None
2. 環境構築
事前準備 • npm:v8.8.0 • node:v14.17.4 • エディタ:VSCode
環境構築 https://github.com/vuetifyjs/vuetify にアクセスして[Fork]をクリック。
環境構築 デフォルトのまま[Create fork]をクリック。
環境構築 Vuetifyのコードが、Forkされていることを確認。 (リポジトリ名が「Gitのアカウント名/vuetify」となっていればOK)
環境構築 cloneするのでコピー
環境構築 • ターミナルで以下のコマンドを実行 $ git clone https://github.com/{Gitのアカウント名}/vuetify.git • 実行結果
環境構築 • cloneしたディレクトに移動し「yarn」を実行 $ cd vuetify $ yarn • 実行結果
環境構築 • ビルド実行後にローカルサーバーを起動 $ yarn build $ yarn dev •
http://localhost:8080/#/page1 を開いて以下のような画面が出ればOK
環境構築 http://localhost:8080/#/page1 には packages/vuetify/dev/Playground.vueの内容が表示される。
環境構築 http://localhost:8080/#/page1 には packages/vuetify/dev/Playground.vueの内容が表示される。 これで環境構築は完了です。👏 この後は、取り組むバグissueを選びます。
3. issue選定
issue選定 issuesタブを開く
issue選定 ラベルの「T: bug」でフィルタするとバグissueが一覧に表示される。
issue選定 あとはタイトルや説明を読んでみて軽めのissueを探しましょう。 (英語が苦手な私は翻訳機能を使って探しています。)
issue選定 @kenji7157 が過去に取り組んだissue
issue選定 [Bug Report] v-select baseline changes when empty string is
selected https://github.com/vuetifyjs/vuetify/issues/13007 翻訳:「空の文字列を選択すると、v-select のベースラインが変わる」
issue選定 deepLでIssueの本文を翻訳してみた。
issue選定 以下は、issueに添付されている再現キャプチャ。 「空文字を選択すると、余白がずれている」事が報告されていることがわかる。
issue選定 以下は、issueに添付されている再現キャプチャ。 「空文字を選択すると、余白がずれている」事が報告されていることがわかる。 これなら取り組めそうだな。😏 この後は、このバグの改修作業を説明します。
3. 改修作業
改修作業(ローカルでバグを再現させる) バグ報告されているissueには、再現する コードが確認できるリンクが記載されています。 私が改修したissueにも記載されていました。🙆 こちらを確認して、開発環境にコードをコピペして、 ローカルでバグを再現させます。
改修作業(ローカルでバグを再現させる)
改修作業(ローカルでバグを再現させる) HTMLタブの赤枠内のコードを開発環境の Playground.vueの<template>部分に記述する。
改修作業(ローカルでバグを再現させる)
改修作業(ローカルでバグを再現させる) 次に、JSタブの赤枠内のコードを開発環境の Playground.vueの<script>部分にコピペする。
改修作業(ローカルでバグを再現させる)
改修作業(ローカルでバグを再現させる) http://localhost:8080/#/page1 を開いて ローカルでもバグが再現するか確認しましょう。
改修作業(ローカルでバグを再現させる) Issueに記載されている事象と同じ事象が起きればOKです。 あとは、Chromeの開発者ツールなどを使ってスタイルの不具合を見つけていきましょう。🔧
改修作業(作業ブランチのチェックアウト) # issueのタイトルをハイフン繋ぎにした値で、作業ブランチを作成/切り替え $ git checkout -b v-select-baseline-changes-when-empty-string-is-selected
改修作業(作業ブランチのチェックアウト) 今回のバグはsassを2行追加することで改修できた。
改修作業(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
改修作業(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を作成します。
4. PR作成
PR作成 masterブランチに向けてPRを作成します。 ベースブランチの指定について: https://vuetifyjs.com/ja/getting-started/contributing/#section-30d930fc30b930d630e930f330c1306e9078629e
PR作成 以下を記載してレビュアーにも親切なPRを作成しましょう ・Description:修正対象のissue ・Motivation and Context:修正動機や修正することで得られるメリット等 ・visually:修正前後のキャプチャ等 👀
PR作成 以下を記載してレビュアーにも親切なPRを作成しましょう ・Description:修正対象のissue ・Motivation and Context:修正動機や修正することで得られるメリット等 ・visually:修正前後のキャプチャ等 👀 これでPR作成は完了です。👏 あとはレビューされるのを待ちましょう。🙏
None
Thank you!!