以前、Codewarsを社内に導入したとか、実装方法はGASでしたみたいな記事を書いていました。
実はこれ、割と反響が良かったのです。
ですが、エンジニアたるもの、新しいものには興味津々なのですが
「Codewarsを解く時間がない！」
「Codewarsちょっと難しそう！」
「飽きた！」（自分）
みたいな声がちらほらッと出てきます。
皆さんお忙しいので、お気持ちは分かります、ええ。
んで、考えました。
「毎日問題出す程度の BOT じゃ意味がないのでは？」
以前作ったものは、ただのBotだったんです。ただ、それじゃつまらない。
CodewarsとかTypeChallengeは他の人のコードが見れるものの「結局答え見てもよく分からん」って時があるんです。
というわけでプロトタイプ作りました、日本語での解説アプリです。
正直、ほぼ自分用ですが、皆さんの回答めちゃくちゃお待ちしております。
こちらがアプリです。
https://commentaries.vercel.app/
これを支えてるバックエンド側は、Spreadsheetになっておりまして、こちらから確認できます。
GitHub
https://github.com/Kojiro-schatten/commentaries
TypeChallengeとか、CodewarsってRailsで作られているので毎回のレンダリングが嫌いでした。
なので、このアプリではNext.jsを採用して高速化を狙っています。
アプリ内で今出来ることは2つ
１：右上のラベルのトグルで解答付きか、問題見るか、選べる
２：解答付きの方では、右側のXXXの回答を見るクリックで、解答が見れる（解説も出す）
今のところ、それしかできていないです！
技術構成
Next.js: 12.0.7
TypeScript: 4.5.3
React: 17.0.37
Hosting: Github (Github Actions)
Platform: Vercel
その他: GoogleSpreadSheet, sheetson(API)
アーキテクチャ
・スプレッドシートにある項目を Next.js のバックエンド側(Node.js)で取ってきます。フロントエンド側から Node.js を実行できない&サーバー置くほどでも無いため、GithubActions と yml と cron を組み合わせました。
・cron は1日1回実行するよう設定されています。ymlファイルは、リポジトリ内にあるpages配下には無い fetcher/package.json を動かします。つまり、フロントエンドコード群は ymlファイル内では実行させず、Node.js ファイル群が入っているディレクトリ内のみを動かします。
・yarn update コマンドを package.json に用意しておき、Node.js のコードが入っているファイルを実行するようにします。 node ~~ xxx/xxxs.ts みたいな形です。
・実行されたら、ymlの最後で push: true を設けてます。push → 最新の状態が Vercel にも反映される
といった流れで動いています。
取得するSpreadsheetはこちらになります。
（API処理には sheetson を使いました。GoogleSpreadSheetの値を簡単に取ってこれるので体験としてはとてもよかったです。）
今後の動き
①作ったは良いものの、他は何もできていない状態です。Next.js自体ガッツリ使ったのが今回初めてだったので、今後もドキュメント見ながらアレやコレや探っていこうと思います。
②SpreadSheetに回答を投げていただいた方とか、問題を解いた方とかに対する give を考えています。ランキング機能、i18n化、「おめでとうございます、XX問解きました」、みたいな機能などでしょうか。そうするとユーザー識別機能とかも必要になりますし、いくらでもタスクは出てきそうです。
まとめ
作っていく上で、モダンな技術を採用しました。コレは、自分の力試し + その方が魅力あるかなーと思い。
私自身、2日くらいで勢いで作成したため、継続的に開発するのかどうかすらも怪しいですが、もしアプリの方実装してみたい方がいる場合、めちゃ募集しているので興味あればDMください。
SpreadSheetの更新もお待ちしております！