はじめに
この記事は、ミロゴス Advent Calendar 2022 10日目の記事です。
EventBridgeのcron式を確認するサイトが無さそうだったので、簡易作成し、github pagesで公開してみました。
機能としては入力したcron式に対して、次回実行時間・その次の実行時間を表示する というシンプルなものになっています。
✳︎ 実装はNextJsで行っています。
✳︎ サッと作ったので、うまく動いていない部分あるかと思います。
（リポジトリ公開しているので、contributeしていただけると嬉しいです）
実装
メインのparser部分はこちらの方のpackageをお借りしています。
https://github.com/beemhq/aws-cron-parser
下記の本体で「awsCronParser」としてimportしています。
今回は大きな実装でもないため create next app で新規環境を作成し、index.tsxを書き換える形で進めています。
本体(index.tsx)
index.tsx
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import awsCronParser from "aws-cron-parser";
import { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
type FormData = {
expression: string
}
export default function Home() {
const {
register,
watch
} = useForm<FormData>();
const [result, setResult] = useState('');
const [next, setNext] = useState('');
const input = watch('expression')
useEffect(() => {
try {
const numberOfSpace = input.match(/ /g);
if (numberOfSpace?.length! === 5) {
const cron = awsCronParser.parse(input);
const occurrence = awsCronParser.next(cron, new Date())!
const afterNext = awsCronParser.next(cron, occurrence)!
setResult(occurrence.toUTCString());
setNext(afterNext.toUTCString()!);
} else {
setResult('');
}
} catch {
setResult('');
}
}, [input]);
return (
<div className={styles.container}>
<Head>
<title>AWS Cron Checker</title>
<meta name="description" content="Checking the aws cron expression" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.main_title}>AWS Cron Checker</h1>
{result && <h2>Next execution time</h2>}
{result && <h2 className={styles.result}>{ result }</h2>}
{result && next && <h3>After next</h3>}
{result && next && <h3>next: { next }</h3>}
<div>
<input className={styles.input_field} {...register('expression')} placeholder="0 9 ? * 5 *"/>
</div>
<table className={styles.rule_table}>
<thead>
<tr>
<th>Field</th>
<th>Values</th>
<th>Wildcards</th>
</tr>
</thead>
<tbody>
<tr>
<td>Minutes</td>
<td>0-59</td>
<td>, - * /</td>
</tr>
<tr>
<td>Hours</td>
<td>0-23</td>
<td>, - * /</td>
</tr>
<tr>
<td>Day-of-month</td>
<td>1-31</td>
<td>, - * ? / L W</td>
</tr>
<tr>
<td>Month</td>
<td>1-12 or JAN-DEC</td>
<td>, - * /</td>
</tr>
<tr>
<td>Day-of-week</td>
<td>1-7 or SUN-SAT</td>
<td>, - * ? L #</td>
</tr>
<tr>
<td>Year</td>
<td>1970-2199</td>
<td>, - * /</td>
</tr>
</tbody>
</table>
</main>
</div>
)
}
今回フォームへの入力監視はuseFormを利用しており、値の変更をuseEffectで検知しています。
useForm便利なので、どんどん使っていきたいですね。
まとめ
今回は packageを利用してサクッと実装してみました。
個人的にフロントエンドがかなり弱いので、引き続きアウトプット頑張りたいなと思います。