Rails Develpers Meetup 2019 の参加を通して、OSS への貢献ができたお話 | Dev Driven 開発・デザインチーム Rails Develpers Meetup 2019 の参加を通して、OSS への貢献ができたお話 | 働くひとと組織の健康を創る iCARE

BLOG

Rails Develpers Meetup 2019 の参加を通して、OSS への貢献ができたお話

中村一星
2019/03/25

こんにちは、いっせー(@issei126)です。

2019/03/22, 23 と開催された Rails Developers Meetup 2019 に参加してきました。

railsdm.github.io

 

Keynote では Rails 本体の開発に携わっている DHH 氏や Jeremy 氏の話を聞いてこれからの Rails の進化にワクワクしました。
メインイベントではさまざまなセッションがあり、Rails について知らなかったりわからなかったりしていたことが聞けたり、
Rails にはとどまらずチーム開発についてや女性エンジニアについて考えるセッションなど、本当にバラエティが豊富なイベントでした。
特に「Ruby on Rails の正体と向き合い方」のセッションは話の流れがわかりやすく、
これからの Rails 開発で迷うときに助けになってくれる内容でした

speakerdeck.com

さて、このエントリでは Rails Developers Meetup (以下 RailsDM)で使われていた Ask Me Anything に Pull Request を出してマージして頂いたというお話をします。

TL;DR

長くなりそうなので先にまとめておくと

  • OSS に Pull Request 出すのはこわくない、積極的に出していこう
  • 解決策はシンプルに考えよう
  • もっと OSS と Rails に貢献いきたいと思った

といったことを伝えたいエントリです。
ひとりでも OSS に Pull Request を出してみよう!と思う方が生まれればうれしいなと思います。

Ask Me Anything に Pull Request を出してマージして頂いたお話

Ask Me Anything

RailsDM では質疑応答の際に、Ask Me Anything(AMA) という Web アプリが使われていました。

railsdm.herokuapp.com

議題(issue)とそれについてのコメントができ、その議題と投稿にいわゆるいいねがつけられます。

RailsDM では各セッションごとに issue が事前に建てられており、質問者は質問があれば各セッションごとの issue に投稿。
質疑応答はいいねの多い順に紹介されるという運用がされていました。

Pull Request を出すきっかけとなったもの

参加したセッションの質問を AMA に投稿したのですが、時間の都合で別途 AMA 上でご回答いただくことになりました。
帰り道の電車内で確認したので、スマートフォンから回答に対していいねをしようとしました。

するとできない、何度押してもできない。

自宅についてから PC のブラウザからいいねをしようとしたときにやっと「いいねするにはログインが必要」ということに気付きました。
会場ではデスクトップのChromeでアクセスをしていて、自然と GitHub 経由でログインしていたのですっかり忘れていました。

まずはアプリケーションにリンクが貼られていた AMA のリポジトリの issue を確認して、何か関係する issue がたっていないか、すでに close されていないかをまず確認しました。

github.com

特段たっていないのと、作者でもあり RailsDM のオーガナイザーであるカルパスさんが立てた issue のみだったので、
「issue 立ててもよいのかわからないなぁ。ダメ元で Twitter で聞いてみよう」 と思いました。

すると

と返事を頂いたので Pull Request を送ろう!と思いたったのでした。
このように丁寧に返事をいただけたのは本当に有難かったです。

まずはコードを読む

なぜ「いいねがクリッカブルか気づかないか」というと、まずリンクをマウスオーバーするとクリッカブルなことがわかるような実装になっていました。
またクリッカブルではない「いいね」とクリッカブルな「いいね」が同じデザインだったのもあり、ログインせずにひたすら画面をタップするということが発生していました。

なんとなく「CSSの問題じゃないかな〜。クリッカブルかわかるように直せばいいじゃないかな〜」という感じで探っていきました。
AMA は Rails で作られているので、見慣れたディレクトリ構造だったのもあり、改修箇所を見つけるのには苦労はしませんでした。
ここは Rails の強みだなと思います。

開発環境をつくる

オリジナルのリポジトリから fork して、ローカルに開発環境を作りました。
最初はベタにローカルに作ろうとしたのですが、 AMA は Ruby 2.6.1 を使っていて自身のローカルには入っていなかったのでセットアップに失敗してしまいました。
docker での開発環境も案内されていたので、そのコマンドをポチポチして GitHub のトークンをセットすると起動することができました。
やっぱりコマンド数個で開発環境ができるのはいいですね。
Pull Request を送りやすくするためにも docker での開発環境が作れるのは自身でなにか作る時にもやっておきたいな感じました。

修正を考える

ここから割と長いです ?

実装の意図を考えてみる

まずは

「CSSの問題じゃないかな〜。クリッカブルかわかるように直せばいいじゃないかな〜」

という考えで、それを設定している CSS を探していきました。
すると AMA で利用している Bootstrap 4 の text-muted というクラスがあたっているためだとわかりました。
それを外し、通常のリンクのように青くなったのを確認し、他にも修正漏れがないかなと思いソースコード検索。
すると他の多くのリンクには text-muted というクラスがあたっていました。

そこで「これはどういう意図なんだろう」と考えました。

これは自分が想像したことで、カルパスさんに確認していないので的外れだったら申し訳ないのですが、
『GitHubのようなUI』を意識したのではないかなと思いました。
RailsDMでは参加者の多くがエンジニアであり、GitHub に使い慣れている方が多いかと思います。
であれば GitHub のようなUIにしたほうが心地よいかなと思いました。

GitHub のリンクを見てみるとたしかにマウスオーバーするとリンクだとわかる箇所がおおく(すべてがそうではなさそう)
そのような配色と実装にしたのではないかなと思いました。
そうするといいねの部分だけクラスを変更するのはどうかなぁと思うようになりました。

本当に解決したいことを考える

クラスの変更でいいのか?と考え始めるうちに別の考えも生まれました。

「デザインの変更で『ログインしていればクリッカブルなこと』はわかるが、そもそもログインしていない状態ではいいねができないことを伝えるべきでは?」

ログインしたことがあれば「あの表示ならクリックできないな」と思えるかもと思うのですが、他のリンク箇所はかわっていないしあまり解決になっていないなと。

そこで『GitHubのようなUIを意識したのであろう』という仮説 思い込みにより、GitHub でログインしていない状態でリアクションをつけたらどうなるかを調べました。
GitHub では以下のようにモーダルが表示されていました

f:id:icareofficial:20190325123224p:plain

AMAは Bootstrap を使っていて Bootstrap にはモーダルがあるのでそれを利用すればいいのではないか?と思いました。

ただこの案は試行錯誤したのですが、いろいろと問題がありました。

  • jQuery が必要で、BootStrap を動かすために AMA でも読み込んでいるもの、JavaScript 部分は StimulusJS を使っていて jQuery は使っていなかった
    • 世間の流れ的に jQuery を今から使おうとするのも、やりたいことに対してコスパが悪そうだと思った
  • jQuery がいらないNative JavaScript for Bootstrap の利用も考えましたが、すでに Bootstrap が入っているので重複してしまうので違うなと思った。
  • StimulusJS で UI をゴリゴリする方法が調べた限りわからなかった
    • たぶんそういう使い方はしないんじゃないかなと思う(たぶん)

やりたいことに対して「ソースコードを汚してしまう」コストが高くなりそうだなぁと思い始めました
そうやって試行錯誤していくうちにまた別の考えが生まれました。

「結局ログインしなきゃいけないんだからログインしてもらうよう遷移すればいいのでは?」
と考え、「ログインしていない状態でいいねをしようとすると GitHub ログイン画面に遷移させる」という変更に落ち着きました。
結局2ファイル2箇所の修正を行うことにし、Pull Request を出しました。

github.com

100点満点の解決策ではないですが、「非ログイン状態でスマートフォンからいいねしようとした時に戸惑わないようにする」という点ではコスパのいい解決策だったのではないかと思います。
遠回りしましたが、シンプルな解決策になることができ、満足しています。

そしてありがたいことにマージして取り込んでいただくことができました!

まとめ

思えばこの Pull Request は「master に取り込んで頂けた、はじめての OSS への Pull Request」でした。
一エンジニアとして自信につながる出来事になりました。

RailsDM への参加、そして AMA への Pull Request を通じてもっと Rails が好きになりましたし、もっと OSS や Rails に恩返しの貢献をしていきたいと思いました!
そういった場を提供して頂き、またパッチを当てることを案内して頂いたカルパスさんにはとても感謝です ?

Pull Request 出すのは勇気がいりましたが、丁寧に対応していただいたのでほっとしました。
他の OSS 開発者の方もこちらが丁寧に Pull Request を出せば優しく対応してくれると思います。
これからも Pull Request 出せるように頑張っていきたいです。

このエントリが Rails エンジニアが増えるきっかけや OSS への貢献をしようときっかけになれば幸いです。

ではまた!