正規表現を関数で書けるサイトを作ってみた【Next.js】

2 min read

昨日Next.jsに入門したので、試しに正規表現を関数で書けるサイト「Regex Generator」を作ってみました。正規表現ってすぐ忘れてしまって毎回ググるはめになるので、こういうのちょっとだけ欲しかったんですよね。

https://nishidate-yuki.github.io/regex-generator/

上にコードを書くと下にRegexが生成されるという簡単なアプリです。お遊び程度なので、全然実用レベルではないです。

中身の挙動は以下のような感じです。useState()regexを持たせておいて、コードが入力されたらそれを実行し、regexにセットするだけ。めちゃめちゃ簡単ですね。

export default function Home() {
  const [regex, setRegex] = useState(".*");

  return (
    <Container>
      {/* input */}
      <Textarea
        onChange={(event) => {
          const value = event.target.value;
          const result = compile(value);
          if (result) {
            setRegex(result);
          }
        }}
      ></Textarea>

      {/* output */}
      <Textarea
        value={regex}
      ></Textarea>

    </Container>
  );
}

Next.jsの意味があることを1ミリもやっていないんですが、備忘録的にやったことを記録しておきます。

やったこと

Next.js使ってみた

アプリを作成して開発スタート

npx create-next-app
npm run dev

Nextに限らないですが、2行でHello Worldできるのが本当に素晴らしいですね。

Chakra UI使ってみた

CSS Framework使うほど複雑なことしてないんですが、なんとなく...。

インストールして、

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

テーマを書いて渡すだけ。Web周りの開発体験ってやつは素晴らしいですね(複雑なものを書いたことないだけかも)。

import {ChakraProvider, extendTheme} from "@chakra-ui/react";

const theme = extendTheme({
  styles: {
    global: {
      body: {
        backgroundColor: "#111",
        color: "white",
      },
    },
  },
});

export default function Home() {
  return (
    <ChakraProvider theme={theme}>
    </ChakraProvider>
  );
}

GitHub ActionsでGitHub Pagesにデプロイしてみた

無料でここまでできていいんですかね、すごすぎる。

.github/workflows/jekyll.ymlを作っておくと、devブランチにpushするとgh-pagesブランチにデプロイされます。もちろん便利ですし、単純に裏で勝手になんか走らせるのって「効率化している感」があっていいですよね。

name: Deploy Next.js app

on:
  push:
    branches: [dev]
  pull_request:
    branches: [dev]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 14.x

      - name: Install NPM packages
        run: npm ci

      - name: Build Next.js app
        run: npm run build
        env:
          URL_PREFIX: regex-generator

      - name: Export Next.js app
        run: npm run export

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: out

おわり。

Discussion

ログインするとコメントできます