【テトリス #10】説明パネルの追加・GitHub Actionsの追加

テトリスを作っています。

テトリスカテゴリーの記事一覧 - スマレジエンジニアyushiのブログ

技術スタックは下記の通りです。

TypeScript
React
SCSS
Create React App

今回は、下記の2つの対応を行います。

説明パネルの作成
GitHub Actionsの追加

説明パネルの作成

機能がだいぶ揃ってきましたが、説明書きがないために初見では操作方法がわからない状態です。
そのため、説明のパネルを追加します。

宣言的UIはこういう所でも小さく活きていて、情報と描画の構造を分離できます。

import React from 'react';
import './ExplanationPanel.scss';

function ExplanationPanel() {
  const keyGuideList = [
    ['←, h', '左移動'],
    ['→, l', '右移動'],
    ['↑, k', '回転'],
    ['↓, j', '下移動'],
    ['Space', '下まで落下'],
  ].map(([key, text], i) => (
    <dl key={i}>
      <dt>{key}</dt>
      <dd>{text}</dd>
    </dl>
  ));
  return (
    <aside className="ExplanationPanel">
      <h3 className="subtitle">キー操作</h3>
      <dl>{keyGuideList}</dl>
    </aside>
  );
}

export default ExplanationPanel;

Pull Request

https://github.com/nek0meshi/tetris/pull/22

スクリーンショット

GitHub Actionsの追加

GitHub Actionsを利用して、2件の自動の処理を行います。

asdfの追加

asdfを利用してnode.jsのバージョン指定を行います。

https://asdf-vm.com/

asdf local nodejs 16.16.0

# => .tool-versionsというファイルが生成される。

Inspection

linter・testの自動実行を行います。

name: Inspction

on:
  pull_request:
    branches:
      - master

jobs:
  frontend-lint:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: 'frontend'
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version-file: 'frontend/.tool-versions'
          cache: 'npm'
          cache-dependency-path: 'frontend/package-lock.json'
      - run: npm ci
      - run: npm run lint
      - run: npm run test

masterに対してMergeするPull Requestにpushした際に、GitHub Actionsが実行されます。

node.jsのバージョン指定は、asdfの設定ファイル（.tool-versions）を指定します。
これにより、ローカルとGitHub Actionsのバージョンが常に一致するようにできます。

GitHub Pages

GitHub PagesにpushするActionを作成します。

GitHub側の設定を事前に行っておきます。

仕組みとしては、下記の通りです。

Create React App の機能で、静的ファイルを生成する
静的ファイルをdocs/以下に配置する
github-pagesのbranchとして force pushする
GitHubの仕組みで、GitHub Pagesのページ内容が更新される

name: Pages

on:
  push:
    branch:
      - gh-pages-release

jobs:
  deploy:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: 'frontend'
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version-file: 'frontend/.tool-versions'
          cache: 'npm'
          cache-dependency-path: 'frontend/package-lock.json'
      - run: npm ci
      - run: npm run gh-pages
      - run: |
          git add -A
          if ! git diff --cached --quiet
          then
            git config --global user.email "nekmeshi@gmail.com"
            git config --global user.name "nek0meshi"
            git rev-parse HEAD | xargs git commit -m $1
            git push origin HEAD:gh-pages -f
          fi