プロジェクトの設定ファイル使い回しを支える技術

私はQiitaやブログに記事を書くときは、なるべく動くサンプルコードを提示するようにしています。そのため記事を書くたびにサンプルコードが増えていき、それを管理しているレポジトリも増えました。

レポジトリを作る頻度はかなり高いのですが、作るたびに環境構築に時間がかかってしまっており、なるべく早くプロジェクトの環境構築を済ませる方法を考えています。扱う分野によっては儀式的な設定をたくさんする必要があり、毎回セットアップするのは大変です。そこで既存プロジェクトからコピペするわけですが、どのプロジェクトがどの技術で作られていたかは覚えておらず、どれをコピペしたらいいかよくわからなくなりました。そういった環境構築のためのコピペを 労力のかからないシンプルな方法で少し効率的にする方法を紹介します。

template を作成しておく

素早く環境を作る方法として、一つにはGitHubのtemplateを使う方法があります。GitHubにあらかじめテンプレートを登録しておけばそこからある程度設定された状態でプロジェクトを始めることができます。

テンプレートはレポジトリのSettingから作れます。ここでチェックを入れるとそのレポジトリのコードをテンプレートとして呼び出せるようになります。

テンプレートはレポジトリを作成するときに呼び出せます。

あらかじめtemplateさえ作っておけば問題は解決しそうです。しかし、実際には templateだけで事が足りることは少なく、大抵の場合は細かい調整などをしていく必要があります。そこで既存プロジェクトから必要な設定だけをコピペできる仕組みも作ります。

Topics でレポジトリにタグを付ける

既存プロジェクトからのコピペも素早い環境構築には有効な方法です。しかしたくさんプロジェクトを作っているとどのプロジェクトをどのような技術で作ったかを忘れています。たとえばこのような状態からどのレポジトリからコピペしたらいいかを判別できますか。

リポジトリタイトル名からわかるものもあれば、そうでないものもあります。たとえばここから「TSで書かれていて、GitHub PagesにGitHub Actions経由でデプロイされるコードはどれか」と探せるでしょうか。とても探しにくいと思います。そこで、このようにタグを付けます。

これでどのレポジトリにどのような設定があるかわかるようになりましたね。この場合だと threejs-handle というレポジトリが良さそうです。この設定を使いたければ、あとはここからコピペするだけです。

インストールコマンドを抜き出すコマンドを作る

コピペで設定を作る事ができるようになりましたが、パッケージ情報まではコピーしたくないです。それはバージョンが古いライブラリが混じっていると脆弱性の問題があるからです。そのため利用パッケージのバージョンだけは最新に保ちたいです。

そこで既存プロジェクトで使われている設定ファイルから、インストールすべきライブラリをインストールするコマンドを生成するCLIを作りました。

それがこの npmingen というコマンドです。名前はnpm install generator の略です。今回はJavaScriptを対象にしていますが、他の言語でも似たようなものは作れると思います。

このコマンドの良いところは設定ファイルが置かれてあるURLを指定するだけで、そのプロジェクトで使われているライブラリのインストールコマンドを出力できるところです。URLを指定するだけなので自分がターミナルでどの階層にいても欲しいライブラリを指定できます。

$ npmingen https://raw.githubusercontent.com/sadnessOjisan/HelloWorldEnterpriseEdition/master/package.json

npm install react react-dom

npm install-D @babel/cli @babel/core @babel/plugin-transform-react-jsx @babel/plugin-transform-typescript @babel/preset-env @commitlint/cli @commitlint/config-conventional @storybook/addon-actions @storybook/addon-essentials @storybook/addon-links @storybook/react @testing-library/jest-dom @testing-library/react @types/jest @types/react @types/react-dom @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-loader css-loader eslint eslint-config-prettier eslint-plugin-react firebase-tools html-webpack-plugin husky jest lint-staged prettier react-is style-loader typescript webpack webpack-cli webpack-dev-server webpack-merge

URL経由でライブラリの一覧を取得する技として、GitHub上の Raw file を使います。たとえば、https://github.com/ojisan-toybox/test-template/blob/main/package.jsonの Raw は https://raw.githubusercontent.com/ojisan-toybox/test-template/main/package.json?token=ADIT2SZQOPVX3SV7HS4MJFS74BB62であり、各ファイルにはRawファイルが存在しています。Raw はそのファイルのコードそのものをWeb上から取得できるエンドポイントです。ここにアクセスすることで、dependenciesとdevDependenciesを取得しています。

JS版

では実装を紹介します。簡単に実行できるものとしてNodeJSのCLIとして用意しました。

importrequestfrom"request";consturl=process.argv[2];if(url===undefined){console.error("please give me a url.");}request(url,(error,response,body)=>{// エラーチェックif(error!==null){console.error("error:",error);returnfalse;}// レスポンスコードとHTMLを表示if(response.statusCode!==200){console.error("invalid status code");}letbodyJson;try{bodyJson=JSON.parse(body);constdependencies=bodyJson.dependencies;constdevDependencies=bodyJson.devDependencies;if(dependencies===undefined||devDependencies===undefined){console.error("parsed data is not pacage.json");}constdependenciesArray=Object.keys(dependencies);constdevDependenciesArray=Object.keys(devDependencies);console.log(`npm install ${dependenciesArray.join("")}\n`);console.log(`npm install -D ${devDependenciesArray.join("")}`);}catch(e){console.error("body parse error.");}});

npm i -g npmingen

$ npx npmingen https://raw.githubusercontent.com/sadnessOjisan/HelloWorldEnterpriseEdition/master/package.json

npm install react react-dom

npm install-D @babel/cli @babel/core @babel/plugin-transform-react-jsx @babel/plugin-transform-typescript @babel/preset-env @commitlint/cli @commitlint/config-conventional @storybook/addon-actions @storybook/addon-essentials @storybook/addon-links @storybook/react @testing-library/jest-dom @testing-library/react @types/jest @types/react @types/react-dom @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-loader css-loader eslint eslint-config-prettier eslint-plugin-react firebase-tools html-webpack-plugin husky jest lint-staged prettier react-is style-loader typescript webpack webpack-cli webpack-dev-server webpack-merge

ソースコード: https://github.com/sadnessOjisan/npmingen-js