初めてのGitHub Actions / GitHub Actions at First

## repository

https://github.com/tooppoo/github-actions-hands-on

## 手順書

https://github.com/tooppoo/github-actions-hands-on/blob/main/docs/hands-on.md

## 独自actionの定義例

https://github.com/tooppoo/reportage-actions/tree/main/setup

## Cloudflare Pages へのデプロイ例

https://github.com/tooppoo/ac6_assemble_tool/blob/main/.github/workflows/web-create-release.yml#L29-L54

Transcript

1. 初めてつくる GitHub Actions 2026-08-01 みんなで持ち寄りハンズオン会！＠札幌 @Philomagi 1 / 29
2. 発表者 @Philomagi WEB系プログラマ 自称フロントエンド寄り 最近は Rust とか Go とか 2 / 29
3. 今日のゴール workflow の YAML を読めるようになる 自分のリポジトリで workflow を動かせるようになる 公開されている action を呼び出せるようになる 自分で action を定義できるようになる GitHub Actionsを「読める」「動かせる」「作れる」 3 / 29
4. 進め方 説明 STEP 1 STEP 2 STEP 3 STEP 4 GitHub Actions の読み方 リポジトリを fork する hello-world.yml を動かす README.md を出力する 自分の action を作る 4 / 29
5. 事前準備 GitHub アカウント ブラウザ 作業はすべて GitHub の画面上で完結する 題材リポジトリをforkして使用する ローカルに clone して進めてもOK 題材リポジトリ: https://github.com/tooppoo/github-actions-hands-on 手順書: https://github.com/tooppoo/github-actions-hands-on/blob/main/docs/hands-on.md 5 / 29
6. GitHub Actions とは GitHub に組み込まれた、コマンドの実行環境 push や pull request をトリガーに動く テスト、Lint、ビルド、デプロイの自動化に使われる 何を実行するかは、リポジトリ内の YAML に書く リポジトリで起きたことに反応して、用意されたマシンでコマンドを流す仕組み 6 / 29
7. 用語の地図 workflow .github/workflows/*.yml job runner 1 台に対応 step run: コマンド / uses: action workflow が job を含み、job が step を含む 7 / 29
8. STEP1: workflow YAML を読む .github/workflows/hello-world.yml name: CI on: push: branches: - main workflow_dispatch: jobs: check: runs-on: ubuntu-latest permissions: contents: read steps: - run: echo "Hello, World!" 8 / 29
9. STEP 1 リポジトリを fork する 自分のアカウントに作業用のコピーを作る 9 / 29
10. STEP 1 の手順 題材リポジトリをブラウザで開く https://github.com/tooppoo/github-actions-hands-on 右上の Fork を押す Owner を自分のアカウントにして Create fork 以降の作業は、すべて fork した側のリポジトリで行う 10 / 29
11. STEP 2 hello-world.yml を動かす 編集して push し、Actions タブで実行を見る 11 / 29
12. STEP 2 の手順 .github/workflows/hello-world.yml steps: - run: echo "Hello, GitHub Actions!" - run: date を上のように書き換える commit・pushする Actions タブを開き、実行されたことを確認する 一覧に並ぶ名前は、ファイル名ではなく name: の値（ CI ） steps 12 / 29
13. Actions タブの読み方 Actions タブ 実行の一覧 → workflow run 1 回の実行 → job: hello-world runner 1 台分 → step のログ コマンドの出力 失敗したときは、赤くなった step のログを開く 13 / 29
14. 補足: 実行トリガー に書いたものが、workflow のきっかけになる on.push.branches に main を書くと、main への push で動く workflow_dispatch: は手動実行を許可する on: Actions タブの Run workflow から、push なしで実行できる 試すだけなら、毎回コミットしなくてもよい 14 / 29
15. STEP 3 README.md の中身を出力する 公開されている action を呼び出してみる 15 / 29
16. actions/checkout を使ってみる runner ファイルは何もない → actions/checkout checkoutを実行 → runner リポジトリの内容が置かれた状態 runner は毎回まっさらな状態で起動する actions/checkout で runner にチェックアウトする 16 / 29
17. STEP 3 の手順 .github/workflows/hello-world.yml steps: - uses: actions/checkout@v7 - run: cat README.md を上のように書き換え、main へ直接コミットする Actions タブで、README.md の中身が出力されたことを確認する 余裕があれば checkout の行を消して、失敗を見てみる steps 17 / 29
18. uses とバージョン指定 の形で、公開された action を呼ぶ action は GitHub Marketplace などから探せる @v7 のようにバージョンを固定するのがベター uses: <owner>/<repo>@<ref> 固定しないと、action 側の更新で急に壊れることがある 自分で書かずに済むものは、たいてい誰かが action にしている 18 / 29
19. STEP 4 自分の action を作る 独自の action を書いて、呼び出す 19 / 29
20. なぜ自分で action を作るのか 同じ step の並びを、複数の workflow で使い回したい step のかたまりに名前を付けて、意図を示したい composite action なら、YAML を書くだけで作れる JavaScript で action を定義する方法もある（今回は範囲外） actions/checkout と同じ <owner>/<repo> の形で呼べる 自作の action も、公開されている action も、呼ぶ側から見れば同じ 20 / 29
21. STEP 4-1: 独自action定義 新規作成: リポジトリのルートに action.yml name: greet description: 挨拶を出力する runs: using: composite steps: - shell: bash run: echo "Hello, GitHub Actions!" composite の run step には shell の指定が必要 21 / 29
22. STEP 4-2: 独自action呼び出し 書き換え: .github/workflows/hello-world.yml steps: - uses: <owner>/github-actions-hands-on@main は自分の GitHub アカウント名 action.yml を先にコミットしてから workflow を書き換える checkout は要らない。action は GitHub 側から取得される <owner> 22 / 29
23. TypeScriptをビルドする 書き換え: .github/workflows/hello-world.yml build: runs-on: ubuntu-latest permissions: contents: write steps: - uses: actions/checkout@v7 - uses: actions/setup-node@v7 - run: npm install - run: npm run build - uses: actions/upload-artifact@v7 with: name: 'js-app' path: dist 23 / 29
24. TypeScriptをビルドする（解説） リポジトリをチェックアウト Node.jsをrunner にインストール TypeScript や型定義ファイルをインストール TypeScriptファイルをビルド ビルドしたファイルをartifactとしてアップロード 24 / 29
25. 余裕があれば: action を増やす 新規作成: actions/bye/action.yml name: bye description: 別れの挨拶を出力する runs: using: composite steps: - shell: bash run: echo "Bye!" 呼び出し: リポジトリ名のあとにディレクトリを続ける - uses: <owner>/github-actions-hands-on/actions/bye@main 25 / 29
26. 独自action定義例: E2Eテストランナーのセットアップ https://github.com/tooppoo/reportage-actions/tree/main/setup バージョンの解決 ツールのインストール 26 / 29
27. 実際の利用例: Cloudflare Pagesへのデプロイ https://github.com/tooppoo/ac6_assemble_tool/blob/main/.github/workflows/webcreate-release.yml#L29-L54 env fileの生成（L29-L35） アプリケーションのビルド（L36-37） Cloudflare Pagesへのデプロイ（L48-54） 27 / 29
28. まとめ workflow は on と jobs と steps の 3 つで最低限読める runner はまっさらなマシン。リポジトリのファイルが要るなら checkout する 公開された action は uses で呼び、バージョンを固定する 自作の action も、同じ <owner>/<repo> の形で呼べる 28 / 29
29. Next Step action の inputs / outputs reusable workflow GitHub Actions 公式ドキュメント 29 / 29