GitHub CLIを使ったissueベース開発で開発体験を嬉しくしてみる

GitHub CLIを使ったissueベース開発で開 発体験を嬉しくしてみる n13u 2024.02.27 @ MIERUNEE BBQ #7 1

自己紹介 Nishimura Wataru / n13u 2002年生まれ（午年）札幌生まれ育ちのフロントエンドエンジニア 受託開発会 社でソフトウェア開発とかウェブサイト制作とかの受託をやる仕事をして、現在転 職を検討中… Sapporo Engineer Baseという札幌市のITエンジニア育成支援事業や北海道の U25向けITエンジニア教育を行う社団の運営とかもしています X: _n13u_ Zenn: wataru_nishi731 2

• https://zenn.dev/wataru_nishi731
• https://x.com/_n13u_

最近ハマっていること Tech 主にフロントエンド フロントエンド史みたいなのをほそぼそとまとめてLT会や勉強会のたびに展開しています 最近はQwikが気になっています Hobby Next.js v14は使い倒している（現在進行系） 最近AOAOに行きました 水族館の夜間利用パス買いました（ 17:00~21:00まで3ヶ月で3,500円） ウマ娘はまってます 3

今日の話 GitHub CLIを使ったissueベース開発で開発体験を嬉 しくしてみる 4

突然ですが… 作業効率を改善して120時間時短できる裏技 知りたくないですか？ 5

今から教える方法で、なんと、120時間の作 業時間が時短できます！ それが… 6

CLI！ 7

〜CLIのすゝめ〜 みなさんCLI使っていますか？ 8

CLI（CUI）とは？ Command Line Interfaceの略称で、特定の命令＝コマンドを使ってコンピューターと処理や情報のや りとりをする方式 いわゆる、「ターミナル」とか「コマンド」と呼ばれる黒い背景に白い文字のアレ マウスを使わず、キーボードのみで操作できるためGUI特有のマウス移動やウィンドウの整理といった概 念がなく、作業はしやすい傾向にあると言われています OSの機能にアクセスしやすい、プロセス制御と かができるとかも利点ですね、 GUIと違って画面描画するためのリソースを削減できるので、リモート環境からサーバーにアクセスする 際や、実際にサーバーとして管理されているコンピューターの入力はCLIのみだったりする 9

これです 10

120時間の根拠は？ 『脱マウス最速仕事術』と呼ばれる書籍で紹介されていた内容を紹介していた記事の引用です。 Office を使った事務作業などで「脱マウス」をしたとき、1クリック0.05秒かかり1日4000回クリックする回 数が減るとしたときの合計時間が年間大体120時間位になるらしいです。 引用元：パソコン仕事で「マウスが手放せない人」が1年間で失う時間とは？ DIAMOND ONLINE 120時間は減らないまでも、なるべくマウスは使わずに、かつブラウザのタブ間移動やウィンドウの入れ 替えなどを減らしてなるべく作業効率化したいですよね… 11

• https://diamond.jp/articles/-/320334

GitHubにCLIからアクセスしたい！ とはいっても開発にまつわる大体のものはCLIからアクセスできちゃいます。 ただ、プロジェクトやタスク管理系のツールがCLIでアクセスできたらいいな…となるわけです。 もちろんみなさんお使いのGitはCLIからアクセスするのが基本です。ですがGitHubはどうでしょう か…？ CLIツールはあるのか、あっても便利なものなのか…？ そこで、「GitHub CLI」が使えます！ 12

GitHub CLI は超便利 1/2 GitHub CLI は GitHubが公式的に開発・公開している「GitHubにまつわるすべての作業を１箇所で 行う」ためのCLIツールです 以下のことをCLIからアクセスできるようになっています リポジトリの表示、作成、複製、フォーク Issue と pull request の作成、クローズ、編集、一覧表示 プルリクエストのレビュー、diff、マージ ワークフローの実行、表示、一覧表示 リリースの作成、一覧表示、表示、削除 gist の作成、編集、一覧表示、表示、削除 codespace の一覧表示、作成、削除、接続 GitHub API から情報を取得します 13

GitHub CLI は超便利 2/2 Golangで開発され、内部ではGitHub API v4が動いており、ユーザー自身がGitHub CLIのサブコ マンドであるapiを通して情報の取得・更新が可能 呼び出しはメインコマンドの み合わせて実行します gh とサブコマンドである issue や pr 、それらのオプションを組 短い文字でコマンドが実行できるのはかなり個人的評価が高い 対話型のコマンドが多く、 Y/N 形式で好きな形で操作できるのも評価が高い 14

GitHub CLIいかがでしたでしょうか？ 便利そうなツール、ぜひ普段の開発で使って みてはいかがでしょうか？… 15

そんなこと聞きに来たんじゃないのよ！ 便利なツールを知っても使わないと、知識が便秘しちゃいます。 アウトプットしないのは知識の便秘。 明日からでも皆様に使っていただけるよう「issue」の機能に絞って紹介します。 --help / -h ※ 基本的には大体のことが オプションを呼ぶと書いています。サブコマンドを指定した うえで オプションを付けるとそのサブコマンド専用のヘルプが表示されます ※ それでわかりにくい ときは公式マニュアル（英語）を見てください -h 16

• https://cli.github.com/manual/

GitHub CLIを使いこなして時短イシューベ ース管理術 今回は僕の個人開発中のCMS「ferraile」リポジトリ、 いる前提です WataruNishimura/ferraille で作業して バグを見つけたり新機能開発をイシューで管理しつつ、イシュー＝タスクとして消化していくという想 定です 17

issue作成編 今のとこferraileでは、機能開発段階なので必要な機能をなるべく細かくissue化していきたいです。 本来であればGitHubのブラウザを開き、ポチポチする必要があるんですが… GitHub CLI ならその作業もコマンドで一発です gh issue create --label "feature" でプレビューを表示しながら編集できるエディタ機能" --title "markdown --assignee "@me 対話型のインターフェイスでissueのボディにいれる文章をCLIエディタから指定することもできます （もちろんオプション指定も可） 私の場合はVimを指定しているのでVimでエディタが開きます 作ったissueは同じように gh issue edit コマンドを使うと、編集できます ※ label の作成は gh label create から行います。存在しないlabelを指定するとエラーが出ます ※ assignee にはユーザー名か @me が指定できます 18

issueを元に開発スタート編 今いるブランチを dev とします そこから先ほど作ったissue（今回は仮にidを1とします）に紐づくブランチをdevから作成したいです これもコマンド一発です gh issue develop 1 --name "feature/markdown-editor-with-preview" --base dev -c これでブランチが作れちゃいます c ※ オプションは自動でチェックアウトするものです ※ 既存ブランチの紐づけはAPI未提供のためでき ません。あしからず… 19

issue一覧編 issueを作ってからはや一週間、なんのissueを作ったか覚えていません そんなときもコマンド一発 gh issue list -S "is:opened" ※ -S 大文字Sオプションでは、GitHubのブラウザ上で利用している検索クエリがそのまま使えます 実行結果 20

issueコメント編 過去の作業が思い出せたところで、コメントしたいですよね。 それもコマンド一発 コメントをここに書く" gh issue comment $id -b " 21

issueクローズ編 もうわかってきましたね？ コマンド一発です gh issue close $id" ※同じように reopen のサブコマンドで再開もできます。 22

その他CLIの便利機能を一部ご紹介 gh repo create コマンド 既存のローカルリポジトリ上で実行するとディレクトリ指定する必要なく、既存のリポジ トリをそのまま公開しremoteの設定から最新コミットのプッシュをインタラクティブに やってくれます gh pr merge $id -d コマンド プルリクエストのidを指定するとmergeしてくれるコマンド。マージ方式も選べるがそれ 以上に フラグが優秀で、マージ時に対応するローカルリポジトリを削除し、マージ先 のブランチにチェックアウトしてくれる -d gh run rerun $run-id コマンド 指定したGitHub ActionsをCLIからre-runできる。 たものを再度流すなども可能 gh workflow run $workflow-id list コマンドなどと合わせて失敗し コマンド 指定したGitHub Actions Workflowをそのままdispatchする。空コミットとかいらな い。便利 他にもプロジェクトへのアイテム追加などもCLIからできます 23

GitHub CLI いかがでしょう？ これでみなさんも明日から使えるはずですね… でもITエンジニアのみなさんはこれだけじゃ足りないはず… 24

カスタマイズして使いたいですよね…？ そういえば、GitHub CLIの中身はGitHub API v4でユーザー自身にも操作可能とあったような… 25

正解🙆‍♀ 26

GitHub CLI Extensions作れちゃいます gh extension create --precompiled=go でgolangの開発環境が立てられます github.com/cli/go-gh/v2 パッケージを使えば、リポジトリの取得やGraphQL・RESTの認証済 クライアントがそのまま使えます でもドキュメント不十分で、特にGitHub API v4何ができるか分かりづらいんですよね… github.com/cli/go-gh/v2 とかだとリポジトリルートにある example_test.go が実 質的なドキュメントになっちゃってるし… 27

Zenn記事書きました！ （ダイレクトマーケティング） GitHub API v4 GraphQLをPostman経由でアクセスして遊ぶための記事です。 ♡お待ちしています。 https://zenn.dev/wataru_nishi731/articles/github-api-graphql-postman 28

• https://zenn.dev/wataru_nishi731/articles/github-api-graphql-postman

GitHub CLIってもしかして… CLIからアクセスできるタスク管理ツールでは！？ という気付きとともに終了です… 29

最後に Sapporo Engineer Base という取り組みやっています！ 札幌市が実施する「札幌にITエンジニアを増やすため」の取り組みです 賛同企業や公式ウェブサイトに掲載していただくコミュニティを募集中です！ ↕ 僕のことは忘れても だけは忘れないでください（（（ 明日北大の大学院関連の部署と共同で実施するイベントでメンターやっていただけるエンジニア募集 中！興味ある方後で連絡いただけると嬉しいです！ 30

ご清聴ありがとうございました… 31