【個人開発】CtoCのコードレビューサービス Kanon Code

# CtoCのコードレビューサービス Kanon Codeをリリースしました
![note_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302326/44fad773-3b61-2504-24a4-362593d3a472.png)

本サイト
[Kanon Code](https://kanon-code.com)

## どんなサービス？
レビューして欲しい人がコードを投稿し、自由にレビューしてもらえるサービスです。
ユーザー登録でレビュイーにもレビュワーにもなれます。

また、レビューは販売することも可能で、販売システムは[note](https://note.com)を参考にしています。
もちろん無料でのレビューも可能です。

## 技術スタック
- Next.js
- Lambda(node.js)
- DynamoDB
- vercel
- SAM
- Material UI
- styled-component

## 実際の画面
![スクリーンショット 2021-09-05 10.12.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302326/fcae0f9c-2565-4c9e-6622-3d3b4f57ad4b.png)
トップ画面はこのようなデザインになっています。
サインインボタンを押すと、モーダルが表示され画面遷移することなくサインインが可能です。
また、サインインはGoogleサインインを実装しているため、ワンクリックでサインインすることが可能です。

![スクリーンショット 2021-09-05 10.15.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302326/ad711510-729f-196a-1426-c3c352f6ce04.png)
次に投稿画面です。
投稿画面ではタイトルさえ入力していれば下書き保存が可能になっており、中途半端な状態でも下書き記事として保存することが可能です。

また、コードレビューではそのファイルがどのディレクトリのファイルと依存関係にあるのかも大切だと考えているため、ファイルまでのパスを入力するとツリー形式で閲覧画面に表示されます。
![tree.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302326/81b92b57-f1bf-f449-8e91-0483b35b0d35.gif)

## なぜ開発したのか
自分は今の案件に入るまで、コードレビューを文化として取り入れている企業で働いたことがありませんでした。
また、プライベートでの開発ももちろん1人のため「**動くものは作れるがもっといい書き方があるはずだ**」と常に思っていました。
しかし、コードを部分的に見てくれるサービスは探したところ[MENTA](https://menta.work/)くらいしかなく、使ってみたのですが契約制ということもありライトに見てもらいたい時には少しハードルが高いなと思いました。

そこで「**もっとライトに使えて、コードを投げておけばレビューしてくれるサービスがあればいいな**」と思いKanon Codeを開発しました。

## 特にどんな人に使ってもらいたいか
これは自分の経験なのですが「**成長したいが行き詰まっている**」「**自分のアーキテクチャから抜け出せない**」という方に特に使って欲しいなと思っています。
冒頭にも記述したように自分は今の案件に入るまで、コードレビューを文化としている企業で働いたことがありません。
そのため長い間、オレオレ流のコードや設計になっていました。
もちろん技術記事などを見て参考にできる部分はしているのですが、レビューがあるのとないのとではきっと成長スピードは違うんだろうなと思うのです。

1人でもがいているエンジニアさんの助けになれれば嬉しいです。

## 使った技術への感想
今回使った技術はほぼ全てが初めての技術でした。
Dynamoは以前使ったことはあるのですが設計は違う人が行っていたためただただ取得・保存などのAPIを叩く実装をフロントで行うだけでした。

Next.jsにおいてはレンダリング方式がpagesによって使い分けられるのがいいなと思いました。
また、ドキュメントの充実具合やNext.jsに関する記事も多いため開発する分には困らないかなと思います。
ただ、レンダリングの効率化を行うのはまだまだ難しいなと感じました。
どのcomponentでstateを持たせ、useCallbackなどのメソッドを使って効率化していくのはまだまだ経験不足なので学んでいく必要があるなと思います。

Lambdaに関してはSAMを使って構築してみました。
以前の職場で他のエンジニアがサーバレスで開発されたサービスのLambdaを、コンソールから構築していたのですがかなり大変そうでした。
その経験があるためSAMでの開発スムーズに進んだなといった印象です。
yamlの記述方法やどんなプロパティが使えるのかなど、やりたいことに関してどのように記述するのかといったルールを理解するのには少し時間がかかりましたが、理解してからは特に詰まらずに開発できたのでなはいかと思います。

個人的に嬉しかったのはAPIGatewayのcognito認証の有無をAPI毎に設定できると言った点です。
調べてみると少し前まではできなかったみたいなのでAWS様ありがたや〜と言った感じです。

Dynamoの設計についてはドキュメントを参考にしながら非正規化するべきと思った部分は非正規化したり、複合ソートキーを作成したりして設計しています。
複合ソートキーに関してはうまく機能しているな〜と思うのですが、全体を通しての設計は運用していかないと分からないな〜と思います。
[ソートキーの設計](https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/bp-sort-keys.html)

ただ一つ思うのは、このスキーマが必要だなと思った時、既存のアイテムにどうやってスキームを追加するのだろうか。
alter table的なのってないよなーと思うのですが、もしご存知の方がいたら教えてください🙇‍♂️

## まとめ
純粋に新しい技術に触れるのは楽しいです。

また、技術を理解したい時はよくあるTODOではなく個人開発サービスとして**リリース**することをオススメします。
過去自分は、新しい言語に触れる際はTODOを作って理解を深めていたのですが「誰かに使われる」と言うことを想定していないので、考えられるケースも少なくなり結果「なんだか作って終わり」みたいになっていました。

ですが、今回個人開発としてリリースして「この場合どうする？」と言うケースが山ほど出てきて、レンダリングの仕組みやDBの設計など勉強になりました。

改めてKanon Codeの報告になりますが、まだまだ機能面でも充実しておらず不便を感じさせてしまう面もあるかと思いますが、運用しグロースさせていこう！と思っていますので使用された際はご感想頂ければ嬉しいです！

最後まで読んでいただきありがとうございました！
[Kanon Code](https://kanon-code.com)

## Kanon Code note
- [Kanon CodeのUpdate情報 【募集中の表示】 - vol-01](https://note.com/kanon_code/n/n0f9fe9fd8f89)
- [Kanon CodeのUpdate情報 【OGPの表示】 - vol-02](https://note.com/kanon_code/n/n519fa674ea42)