mottox2 blog

Nuxt.jsにコントリビュートしたら体験が良かった話

mottox2
mottox2
2018/11/19

最近はOSSに貢献したいという気持ちを持っていて、今月はGatsby.js、ReactNative, netlify-lambdaのコードの改善や新機能のコントリビュートをしていた。
Reactを頑張りたいフロントエンドエンジニアですが、今回はVueのフレームワークであるNuxt.jsにコントリビュートした。

Nuxt.jsにコントリビュートしたところ非常に体験が良かったので、いいOSSコントリビュート体験についてメモ

そもそもなにをやったか

Nuxt CLIの提供しているgenerate/buildコマンドにそれぞれdevtoolsオプションを追加しました。

https://github.com/nuxt/nuxt.js/pull/4357

経緯

Nuxt CLIの提供しているgenerateコマンドでは、作成しているVueのアプリケーションを静的ファイルとして出力します。その出力結果をデプロイして本番環境で動かすわけなのですが、本番環境ではVue Devtools(Vueのインスペクトツール)が有効になっておらずデバッグには向いていません。

このIssueではその設定を有効にするworkarroundが紹介されていたのですが、「これをCLIのオプションに追加したらどうか?」というところでIssueのやりとりが終わっていました。

またこのIssueにはhacktoberfestタグが付与されており、最初に取り組むのにはピッタリだと感じたので実際に取り組んでみました。

https://github.com/nuxt/nuxt.js/issues/4117

いい体験だと思ったこと

2分でファーストレビュー

最初の反応が約2分後にあり、オプションのリネームの提案がありました。
自分がやっているOSSのコントリビューションではマージまで半日〜数日待つことが多いのですが、2分で反応がありました。

プルリクエストを出したタイミングが4:30で寝ようかと思っていたのですが、反応がついたのが嬉しくてその場で修正してしまいました。PRのオーサーの熱量を保ったまま、リードタイムも短くなり、3.5時間(8:00にはマージされていた)という速さでマージまでたどり着きました。

学びたいポイント

OSSに限らないのですが、例えばesa.ioという情報共有サービスに問い合わせをすると30分以内には大体反応があり、翌日には修正されていることがあります。

問い合わせや、OSSのコントリビュートというのはアクションするユーザーにとっては不安なアクションなので、まずは反応して相手の不安を取り除いてあげるのは有効です。

普段の仕事Slackでも、メンションつけてくれた方には :eyes: なリアクションをとりあえず返してあげるようなことはしています。それに限らず相手の不安を取り除くというのは意識してやっていきたいです。

簡潔なContribution-Guide

普段Gatsbyへの貢献を多くやっているのですが、Nuxtは要点が絞ってContributionGuideが書かれていて、非常に良かったです。

参考: Nuxt.jsのContribution Guide / GatsbyのHow to contribute

Gatsby Nuxt
スクリーンショット 2018-11-19 0.11.12.png (604.5 kB) スクリーンショット 2018-11-19 0.11.27.png (461.6 kB)

見てもらうとわかるのですが(画像はらないUXは許して…)、Gatsbyと比べてNuxtは文章構成がGetting Startのような構成になっており非常にセットアップやテストの流れが簡潔にかかれています。

また、スタイルの問題だとは思うのですが、Gatsbyは非常に密度が濃く英語が母国語じゃない人としては読むハードルが高いです。
対して、Nuxtはordered-listや見出しとの大きめなジャンプ率、広めの行間で工夫していたり、文字色を#555に設定しているため目に優しい感じになっています。
Gatsbyがセリフ体とNuxtがサンセリフ体を設定しているのも興味深いですね。

学びたいポイント

「なんとなく読みやすい」ぐらいに思われる文章を目指します。

読む人を考えた文章構成、スタイリングを意識していきたい。

文章構成は自分の中で答えが出ていないので、自分がいいと思った文章をためていこうと思っています。
ただ、スタイリングに関しては、基本的なフォント選び・行間/色の設定などで読みやすくできることはわかっているのでしっかり実践出来る形に落としていきます。

お気持ち

新機能の思想にもReactと圧倒的な差を感じられて、同じIssueがGatsbyにたったら「シンプルじゃないからPluginで対応して欲しい」って理由でCloseされる気がする。
Vueはoptionとかどんとこい感がすごいw

Vueについてのお気持ちです。Reactな人なので異文化を感じました。(否定しているわけではありません。)

少なくとも、日本で熱いNuxtにコントリビュートできて嬉しいです。ちゃんとレビューしてもらえるのも「最高」というお気持ち。

@mottox2フリーランスWebデベロッパー

都内でフリーランスエンジニア・デザイナーとしてWebサービスやスマホアプリを作っています。Ruby on Railsでの新規事業の爆速立ち上げや、使いやすいSPAの開発が得意です。

お問い合わせはこちら

自分のGitHubから読み取る挫折の歴史 in 2018

この記事は、「Crieitアドベントカレンダー」9日目の記事です。遅刻ごめんなさい。 Crieitはプログラマー・クリエイターのためのサイトなので、自分のクリエイターになろうとして失敗した記録をG

Netlify Functions + TypeScriptのボイラープレートを作った

8月に書いた「Netlify FunctionsでTypeScriptを使う」という記事で、netlify-lambdaをフォークしてTypeScriptを使っていると書きました。 数ヶ月経ち、フォ

netlify

Netlify FunctionsでTypeScriptを使って開発する

この記事は既に内容が古くなっています。最新の内容は「Netlify Functions + TypeScriptのボイラープレートを作った」をご覧ください 先日Netlify Functionsの

netlify

技術ブログを支える技術(Gatsby + esaio)

2018年5月に公開を始めた当ブログですが、Gatsbyをより多くの人に使ってもらいたいと考えソースコードをオープンにしたので、ブログで用いている技術について説明します。 > 当サイトについて当サ

esaiogatsby