mottox2 blog

2019年(1-6月)のプルリクエストを振り返る

dev

今年も始まって半分が経過しました。
ブログのメンタリングをしてくれたカック@ブロガー / k9u (@kakakakakku)さんがプルリクエストの振り返り記事を出していたので、インスパイアし自分も上半期のプルリクエストについて振り返ってみることにしました。OSSコントリビュートと思えるプルリクエストは13件でした。

2019/01

gatsbyjs/gatsby

公式のブログテンプレートへのコントリビュートです。
gatsby-node.jsではブログの詳細ページを作る際にgraphql関数を利用するのですが、graphql関数の返り値はPromiseです。修正前はgraphql関数をPromiseオブジェクトでラップしていたので、チュートリアルの書き方に揃えて直接graphqlの返り値を利用することにしました。
公式テンプレートは利用者から参考にされることが多いのでこういった変更も重要です。

Improve createPages of blog starter by mottox2 · Pull Request #10781 · gatsbyjs/gatsby

上記の変更をリポジトリにある全exampleに対して行ったプルリクエストです。結構な量の変更を行ったので大変でした。

docs: remove Promise clutter from createPages by mottox2 · Pull Request #10791 · gatsbyjs/gatsby

gridsome/gridsome

Gridsomeが公式プラグインとして提供している@gridsome/source-contentfulに対してのコントリビュートです。
当時はGridsomeが登場して間もなく、source-contentfulで扱えるデータは記事データのみでした。そのデータに加え画像などのアセットも扱えるようにしたのがこのプルリクエストです。
今や日本のGridsome第一人者であるtyankatsuさんが立てたIssueとTwitterを見て取り組みました。
このPRの後でリファクタリングが行われ、より使い勝手のよいプラグインになっていきました。

feat(contentful): Add ContentfulAsset by mottox2 · Pull Request #95 · gridsome/gridsome

当時、コミュニティのサイトをGridsomeで作っており、その際にGatsbyJSの様にyamlをマスターデータとして扱いたいと思いローカルプラグインとして開発していました。
そのプラグインをGridsome本体に移動したプルリクエストです。
当時、transformer-pluginはtransformer-jsonしかなく、本体のコードを読みながら実装を進めた記憶があります。現時点でも「transformerプラグインをsourceプラグインに統合すればいいのでは?」といったRFCがあります。

feat(transformer-yaml): add transformer by mottox2 · Pull Request #133 · gridsome/gridsome

2019/03

gatsbyjs/gatsby

GatsbyJSはサイト自体のブログも本体リポジトリに同梱しています。
当時リリースされたブログ記事でリンク切れを発見し対応したプルリクエストです。

Fix broken link in blog by mottox2 · Pull Request #12541 · gatsbyjs/gatsby

2019/04

gatsbyjs/gatsby

これもブログを見ていたときのTypo修正です。
GatsbyのTwitterアカウントをフォローしていると記事が流れてくるので要チェックです。

blog: fix typo by mottox2 · Pull Request #12971 · gatsbyjs/gatsby

技術書典6で頒布した「GatsbyJS Guidebook」の執筆中に見つけたドキュメントのリンク切れの修正です。
GraphQL周りの深掘りをしているときに見つけたもので、リンク先のコードを読みながら「どう説明すべきか?」みたいなことを永遠に考えていました。
技術同人誌は本を書くステップでもコントリビュートできます!

fix(docs): Fix broken link by mottox2 · Pull Request #13193 · gatsbyjs/gatsby

zeit/next.js

Next.jsでUIフレームワークを使うサンプルを探していたところ、README.mdにリンク切れを見つけたため修正しました。

Fix broken link by mottox2 · Pull Request #7087 · zeit/next.js

2019/05

mdx-js/mdx

Next.jsアプリケーションにMDXを組み込む際に、ドキュメントに書いてあったリポジトリを見たら「This repo is now deprecated」となっていました。
そこで推奨されていた移行先のリポジトリのセットアップ方法に書き換え、サンプルコードも同様に書き換えました。

Use @next/mdx to use mdx in Next.js by mottox2 · Pull Request #568 · mdx-js/mdx

bmcmahen/sancho

ブログでも紹介した「Sancho」に意図とは違う動きをするコンポーネントを見つけたのでCSSを修正したものです。
セレクトボックスのプルダウンアイコンにマウスカーソルを当てても、ポインターアイコンにならないのはやりがちなので気をつけていきたいところ。

Ignore select pointer event by mottox2 · Pull Request #18 · bmcmahen/sancho

zeit/next.js

『初夏のJavaScript祭』でSPAのSSR, SSGについて話してきました」の登壇資料を作っている際にソースを読んでいて、その時にリンク切れを見つけたので修正しました。
Next.jsではzeit/err-shという自作の短縮リンクを使っているのですが、その利用法が間違っていました。

Fix broken link by mottox2 · Pull Request #7378 · zeit/next.js

2019/06

bmcmahen/sancho

SanchoはTypeScriptで書かれているのですが、公式で提供しているPropTypesも同時に利用されています。PropTypesはコンポーネントに渡されたpropsの必須項目や型をチェックしてくれて、実行時にエラーメッセージを表示してくれるライブラリです。
TypeScriptの型とPropTypesの指定が一致しておらず、PropTypesの記述が不完全だったので修正しました。

Fix wrong proptypes by mottox2 · Pull Request #19 · bmcmahen/sancho

jser/jser.github.io

日本のJSerにおなじみのjser.github.ioのリポジトリです。サイトの記事にTypoを見つけたので修正しました。
このサイトには「Edit on GitHub」ボタンが用意されており簡単に修正リクエストを送ることができます。

2019-06-17のJS: react-redux 7.1.0(Hooksサポート)、Pika CDN、State of CSS 2019 - JSer.info

Fix typo by mottox2 · Pull Request #628 · jser/jser.github.io

まとめ

去年ほど活動はしていませんが、タイポやリンク切れに関しては迷わずプルリクエストを投げる習慣が付きました。

自作のOSSライブラリも1月に「gatsby-source-rss-feed」と「remark-code-titles」しか出せていないのでもうちょっと活発に動いていきたいです。

B!
design

SketchからFigmaに乗り換えるにあたり考慮したこと

自分は2015年ぐらいからSketchというMac専用のデザインツールを利用してきました。しかし、最近はFigmaというツールをよく聞き、知人から(とくに@takanorip氏)も評判がいいので触って

figma
dev

TypeScriptで始めるNext.js 1: セットアップ

日本国内で、SPAをベースにしたフレームワークはVueベースのNuxt.jsが有名です。しかし、Nuxt.jsはNext.jsというReactをベースにしたフレームワークを参考に作られたものです。

dev

GitHub Actionsをスケジューラとして利用する

GitHubが提供しているGitHub Actions(beta)は「ソフトウェアワークフローを簡単に自動化できる」とあります。その中にcron形式でワークフローを実行することが出来る仕組みがあり、定