How to contribute to Nuxt.js - エムスリーテックブログ

この記事はエムスリー Advent Calendar 2018 の20日目の記事です。

エンジニアリンググループの@suusan2goです。現在はAIチームで、機械学習以外のことを色々やっています。

エムスリーではVue.jsを様々なプロジェクトで活用しており、今年開催されたVue Fes Japan 2018のSILVERスポンサーとBEERスポンサーもやっていました！エムスリーでのNuxt.js、Vue.jsの活用については以下の記事をご参照ください。

employment.en-japan.com

私も今年はNuxt.jsに大変お世話になったので何かコミュニティに貢献したいと思い、先日Nuxt.jsにコントリビュートしたのでそのお話をします。How to contribute to Nuxt.js と大げさなタイトルをつけてますが、他のOSSと大きく異なることはないのでそんなに身構えることはないです。本記事は自分がコントリビューションしたときの体験記として読んでいただければ幸いです。

自分が取り組んだIssue

自分が取り組んだのは以下のIssueです。hacktoberfestのためにNuxt.jsのコアチームメンバーが用意してくれたもののようで、どこをどう対応すればいいかもかなり詳しくかいてくれています。

github.com

残念ながらIssueが作られてからNuxt.jsのディレクトリ構成が大きく変わって、lerna/lernaをつかった複数パッケージのモノレポ構成になったため、「ここを変えればいいよ！」と書かれていた箇所はリンク切れになっていましたが、それでもだいぶヒントになりました。

はじめに

何はともあれ、まずはコントリビューションガイドを読みましょう。

ja.nuxtjs.org

Nuxt.jsはコントリビューションガイドがかなり丁寧に整備されているので、これを読んでおけばどうやって動作確認すればよいか、どうやってローカルでテストしておけばよいかというのがわかります。

基本的には以下の手順で自分が手を加えたNuxt.jsを起動することができます。

# 依存パッケージのDL
yarn
# CLIツールなどの作成
yarn build
# nuxtの起動
yarn nuxt

特にあえて解説することもないのですが、自分が良いな―と思ったのは、公式のリポジトリ配下に動作確認するためのサンプルアプリが用意されているということです。自分はNuxt.jsの layout プロパティに関する変更だったので dynamic-layouts というサンプルアプリで動作確認しました。

サンプルアプリは以下のコマンドで起動できます。

yarn nuxt examples/hogehoge

自分が変更を加えたNuxt.jsが正しく動作するか確認したい場合には、上記のように適当なサンプルアプリを選んで起動してみればよいでしょう。逆に自分が何か大きな機能追加をした場合には examples/ 配下に動作確認ができるものを追加することが求められるようです。

実際に変更を加えてみる

上述の通り、内部は複数のパッケージからなる所謂モノレポの構成になっています。正直にいうと Nuxt.js内部の構成について詳しく理解しているわけではないのですが、Nuxt.jsが拡張するプロパティ(layout、fetchなど) は packages/vue-app 配下に記述されているようです。自分の場合は layout だったのでこのファイル packages/vue-app/template/App.js を変更すればOKでした。

プルリクエストを出してみる

Issueの情報をもとに、自分が出したプルリクエストがこちらになります。 github.com

Checklist があって、「テスト追加した？」とかもあるんですけど、自分の書いたところはもともとテストがなく、テストも書きにくそうなところだったので、とりあえずPR出して様子を見ることにしました。

指摘事項・質問事項としては、以下のようなものがありました。

layoutって string 以外に function も設定できるけど、このコードでいいんだっけ？
開発時にだけ例外にしたいので、debugモードのときだけ有効にしてくれる？

前者はコードを追っていくと問題ないことがわかり、後者の対応をしてpushしたところ無事マージしてもらえました。

Nuxt.jsのコードレビューがフレンドリーだった

実はこのエントリで一番言いたいことはこれなんですけど、Nuxt.js コアチームメンバーの @manniL さんのレビュ―がフレンドリーで嬉しかったです。 hacktoberfest のために？用意されたっぽいIssueだったからというのもあるとは思いますが、確認してほしいことや修正してほしいポイントの説明が丁寧で、またコントリビュートしたいなと思いました。

また今回この記事を書いているときに、コントリビューションガイドの記述に古いコマンドが残っていることに気がついてプルリクを出したのですが、こちらも @manniL さんがレビューとマージしてくれました。

github.com

nuxtは開発が活発なので、ドキュメントのちょっとした修正でもコントリビューションのチャンスがありそうだなと思いました。