Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
「こわくない」Vuetifyで始めるOSSコントリビュート
Search
Kenji Kawanobe
June 16, 2022
1
190
「こわくない」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
110
Development of LINEBot for predicting bicycle theft using open data!!
kenji7157
0
120
自転車盗難推測Botの開発
kenji7157
0
20
Featured
See All Featured
Facilitating Awesome Meetings
lara
51
6.2k
Raft: Consensus for Rubyists
vanstee
137
6.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
380
Mobile First: as difficult as doing things right
swwweet
222
9.2k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Site-Speed That Sticks
csswizardry
3
310
Making the Leap to Tech Lead
cromwellryan
133
9.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
30
2.1k
Embracing the Ebb and Flow
colly
84
4.5k
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!!