LINEが公開するOSSにコントリビュートしてみた

LINEが公開するOSSにコントリビュートしてみた

Clock Icon2025.06.09

以前LINEの公開するcreate-liff-appという開発者向けのCLIツールにコントリビュートしたので紹介します。LINEヤフー社のOSSなら、コントリビュートするだけで他の人に自慢できちゃうかもしれません!

修正した内容はかなり軽微なものですが、コントリビュートの流れなどを紹介します。
こちらがcreate-liff-appのリポジトリです。
https://github.com/line/create-liff-app

create-liff-appはLINEの公式リポジトリで作られた、開発者向けのCLIツールです。LIFFアプリの開発を簡単に始められるように雛形(テンプレート)を生成してくれます。

LIFFアプリの開発ツールというとLIFF CLIの方が新しいですが、LIFF CLIにもv0.3.0で雛形を生成する機能が追加されました。ドキュメントを見ると内部的にはcreate-liff-appを実行しているようです。

機能紹介

create-liff-appでLIFFアプリの雛形を作成してみます。

npx @line/create-liff-app my-app

LIFF CLIのscaffoldコマンドを使っても同じことができます

liff-cli scaffold my-app --liff-id XXXXXXXXXX-XXXXXXXX

LIFFアプリ開発で利用したいフレームワーク(vanilla, react, vue, svelte, nextjs, nuxtjs)や言語(javascript, typescript)、パッケージマネージャー(yarn, npm)をそれぞれ選択します。

すると雛形のプロジェクトが生成され、 npm run dev ですぐに起動できます。

create-liff-app-demo

遭遇した不具合

自分が遭遇、解決した不具合は、Reactを使った雛形の生成後、npm run dev で実行してもブラウザ上でエラーが発生してページが真っ白のままというものです。ブラウザのコンソールには以下のようなログが出ていました。

Uncaught TypeError: ReactDOM.render is not a function

自分が不具合に遭遇した時にはすでに他の方がissueを立てていました。

https://github.com/line/create-liff-app/issues/42

原因

原因を確認するためソースコードを見てみました。

create-liff-appは、commander(引数・コマンドの定義)や、inquirer(対話的な入力機能)などのライブラリを利用して実装されていました。処理の流れとしては、引数を受け取った後、templates/配下にあるファイルを元に雛形を作成しています。

不具合の原因は、Reactのバージョンが上がり、ReactDOM.render()関数が廃止になったことが関係しています。雛形のもとになるテンプレート用のファイルで、その廃止になった関数を利用し続けていたためエラーが出ていました。

ReactDOM.render()createRoot().render()に置き換えてやるだけで解決しました。

コントリビュート

ここからはコントリビュートのやり方について説明します。

create-liff-appのルートにはCONTRIBUTING.mdというファイルがあり、コントリビュートについてお願いや手順などが書かれています。

一部抜粋ですが、以下のような内容が書かれていました。

  • issueやPRを作成する前に、すでに同じ内容のものがないか確認する
  • 一つのPRでは、問題の機能のみを修正/追加するか、広範囲をコードフォーマットするかのどちらかにする
  • 出来るだけ少ない変更行数で1つの問題に対処する

自分は不具合の修正と、CI/CDの追加という2種類の内容を1つのPRに含めており、レビューの際に2つのPRに分けるように指摘をいただきました。もう少し確認すれば良かったです。

PR作成までの手順

リポジトリを自分のGithubアカウントにフォークする

まずは公式リポジトリをforkします。
公式リポジトリに対して外部のユーザーがブランチを作成することはできません。

fork1

作成するforkリポジトリのオーナーを選択して、「Create fork」を押すだけで出来ます。

クローンしてブランチ作成

forkしたリポジトリをgit cloneしてローカルに持ってきます。
ブランチ名には簡潔で説明的な名前が求められます。今回はfeature/update-react-template というブランチ名にしました。

修正とコミット、プッシュ

今回は軽微だったのですぐに修正できました。ついでにCI/CDで自動テストも追加しました。
git push でforkしたリポジトリに対して変更をプッシュします。

PR作成

forkしたリポジトリでPRを作成します。作成するときにリポジトリの選択項目があるので、lineの公式リポジトリを選択します。概要に書く内容は、過去のPRを参考にしながら、PRテンプレートに沿って書きました。

choose-repo

今回自分が作成したPRは以下の二つです。

Reactテンプレートの修正

https://github.com/line/create-liff-app/pull/43

CI/CDの追加

https://github.com/line/create-liff-app/pull/31

自分の場合は確か1~2週間程度で見てもらえましたが、中には積極的にメンテナンスしていないリポジトリもあると思います。コントリビュートは最悪見てもらえないことも念頭におきながら取り組んだ方が良いです。

感想

OSSコントリビュートは、他の企業が書いてるコードに触れられるのですごく勉強になったり、転職や就活でも良いアピールになると思います。普段の開発でもOSSを利用する人は多いはずなので、恩返しとして貢献してみてはいかがでしょうか。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.