Github CLIは便利

GitHub CLI、今更ながら結構良い。本来はCIなどのリポジトリ管理系が主だろうけど、検索分野で結構楽になりそう。基本的にブラウザ開いた方ができることが多いので、僕は今のところ-wをデフォでつける設定を多用する方向にしてみた。

例えば、検索分野では以下のようなことができる。

この関数どうやって使うのかな、って時にコードの事例を検索してブラウザで開く
謎エラーの事例がバグや質問で上がっていないか検索する
リポジトリを検索してブラウザで開く
あるリポジトリのリリースで上がってるバージョンを検索したり、最新リリースをブラウザで開く

CLIからGitHubにアクセスできるので、選択肢が増えた感がある。特にfindエイリアスが協力で、例えばライブラリとかのドキュメントサイトとか、「awsomeなんとか」系リポジトリみたいなの調べるの面倒な際、これだとすぐ出てくる。でもGitHub Desktopもそうなのだが、必ず認証が必要なのが痛いかな。

以下は私の今のところのエイリアスの事例。

b: browse
code: search code $1 --language $2 -w
err: search issues $1 -w
find: search repos $1 --json fullName,name,description,url,license,homepage,stargazersCount,updatedAt --limit 2
go: repo view $1 -w
latest-rel: release view -w -R $1
goto: browse -R $1 $2
ls-rel: release list -R $1
me: 'api -H "Accept: application/vnd.github+json" -H "X-GitHub-Api-Version: 2022-11-28" /user'
prc: pr create -w
prco: pr checkout
sync: repo sync
user: 'api -H "Accept: application/vnd.github+json" -H "X-GitHub-Api-Version: 2022-11-28" /users/$1'
wf: workflow

なお、私はPowershellの補完機能はあまり好きではないのだが、gh completion -s powershellでスクリプトを吐き出せば最低限の補完機能が効くようになるので、しておくと良い（私はプロファイルのあるフォルダのautoloadというフォルダにスクリプトを吐き出すようにしている)

hygenとstorybook

私はWeb UIが得意ではないので、直近は少し色々学ぼうと思っている。この際、調べてみてReactアプリを作成する時にstorybookというツールがテストに優れており、hygenとの組み合わせが良さそうと思った。

ただし、どちらもどうもバグやレガシー化したイシューの放置といった状況があるらしく、ややクセありな第一印象だった。 hygenに関してはpropという代替ライブラリを勧めている記事を見た。正直ejsの方がhbsより好きだし、なんだかな～と思ったりする。仕組みは好きだと思ったんだけど、このツール、普通にesm関連のイシュークローズされてんのよね。。

コンポーネントを作成するコマンドを作成したい場合、_template/component/newなどとして、prompt.cjsを作成しておくと便利だと思った。テンプレートでのヘルパ関数もあるのだが、自分はテンプレートは簡潔にしたいので、js側のコードでトリミングみたいな処理を定義してみた。こうすると少し便利だと思う。

module.exports = {
  prompt: async ({ prompter, args }) => {
    const ans = await prompter.prompt({
      type: "input",
      name: "name",
      message: "What is component name?",
      validate: (value) => {
        if (value && value.trim().length > 0) {
          return true;
        }

        return "Please input component name";
      },
    });

    if (ans?.name) {
      ans.name = cleanValue(ans.name);
    }

    return ans;
  },
};

/**
 * @param {string} value
 * @returns {string}
 * @example my-component -> MyComponent
 */
const cleanValue = (value) => camelize(trimAndRemoveSpaces(value));

const trimAndRemoveSpaces = (value) =>
  value.replace(" ", "").replace("　", "").trim();

const camelize = (value) =>
  value
    .split("-")
    .map((v) => v.charAt(0).toUpperCase() + v.slice(1))
    .join("");

storybookは今のところ以下みたいなテンプレをcomponent.stories.ejs.tとして作ってみた。 jestみたいなテストツールを噛ませる場合、そのようなファイルも生成することを考えたら、かなりイケてるツールだと感じる。色々使い方は模索したい。

---
to: src/components/<%= name %>/<%= name %>.stories.tsx
---
import type { Meta, StoryObj } from "@storybook/react";
import <%= name %> from "./";

const meta = {
  title: "Components/<%= name %>",
  component: <%= name %>,
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
  tags: ["autodocs"],
  parameters: {
    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
    layout: "fullscreen",
    docs: {
      description: {
        component: "this is <%= name %> component",
      }, 
    },
  },
} satisfies Meta<typeof <%= name %>>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Main: Story = {
  args: {},
};

Github CLIは便利#

hygenとstorybook#

Github CLIは便利

hygenとstorybook