はじめに 早いものでこちらの記事が公開して約1年、ログラスでReactを書き始めて1年以上が経ちました。 今回はフロントエンドのアプリの中でも特段重要なフォーム、特にReact Hook Formについての解説をしていきます。 今回のTipsは公式がベストプラクティスとして発表しているものではなく、あくまで個人が1年間の経験の上で良いとしているものであしからず。 なるべく何故良いかの説明もしていきます。 目次 useFormをラップしてタイプセーフにする React Hook Formへの依存するコンポーネントを分ける yupを使って見通しの良いバリデーションを実装する 1. useFormをラップしてタイプセーフにする ログラスでは useForm をそのまま使うことはせずラップしています。理由は一部の型づけがゆるく実行時例外が起きる可能性があるためです。 問題なのは defaultVa

はじめに 明けましておめでとうございます！ 年末年始でKotlinで木構造を宣言的に扱うためのkotlin-treeというOSSを公開しました！ KotlinのCollection APIのように木構造を処理することができます。楽！ val treeNode: TreeNode<Int> = nodeOf( 1, mutableListOf( nodeOf( 11, mutableList( leafOf(111), leafOf(112) ) ), leafOf(12) ) ) // 1 // ├── 11 // │ ├── 111 // │ └── 112 // └── 12 treeNode.map { ele -> ele * 2 } // 2 // ├── 22 // │ ├── 222 // │ └── 224 // └── 24 以下作ったモチベーションをつらつら書きます。

この記事はクソアプリ Advent Calendar 2022の20日目の記事です。 めちゃくちゃ遅刻しました..！すみません！ はじめに いよいよ年末年始です。 皆さんはいつまで仕事でしょうか。 クリスマスを迎え、もうお休みモードなので、仕事に行きたくないですよね。 そういうわけで、簡単に仕事を休むための言い訳を考えることができるアプリを作りました。 絶対にサボってやるという強い意志を持った人が使えるアプリです。 使い方 使い方は「サボる理由を考える」ボタンを押すだけです。 母が部屋を修理して消えてしまったなら仕方ないですね！仕事休みましょう！ 技術スタック Next.js TypeScript Chakra UI Vercel あとは諸々のnpmパッケージ等 UIに関して 今回、なんてことないクソアプリなのですが、文字をパタパタさせるところだけ微妙にこだわりました。 このパタパタする感

はじめに 最近OpenAIが流行っているということで、私もOpenAIを使ったアプリを作りました。 アプリの紹介 AI Code Reviewerという名前の通り、AIがコードをレビューしてくれるアプリを作りました。 中身のAI部分はOpenAIのAPIを使っています。 例えば、const [count, setCount] = useState<string>(0);という型間違いのコードを渡すと、ちゃんとレビューしてくれます🎉 また、コードレビューだけだと面白くないと思って右下にチャットボットを入れました。 これでなにかあればすぐにAIに聞くことができますね！ チャットボットに関しては基本PCで利用することを想定しているので、ショートカットキーでメッセージを送信できるようにしています。 少しこだわったところとしては、多言語化を行っていて、現在中国語（簡体字）、英語、日本語の3言語に対

はじめに みなさん現状のチームに満足しているでしょうか。 働く上では概ね問題なくても、細かい部分で不満を感じていたり改善点を見つけたりすることはあると思います。 例えば忖度ない意見を言いにくかったり、職種が違うと話が通じにくかったりなどです。 また、昨今のリモート文化の浸透により自由な働き方ができるようになった一方で、相手の温度感がわかりにくかったり、気軽に話しかけて良いのかわからなかったりとデメリットも出てきたように感じます。 私が所属するチームでは決してチームの仲が悪いというわけではないのですが、様々な問題点を抱えていました。 そこで、リーダー的立ち位置で働いている身としては少しでもチーム改善をしたいと思い週一の振り返り会を導入することにしました。 チームの状況に関して チーム構成 私が所属するチームは下記の8人で構成されています。 ディレクター 1名 プロジェクトマネージャー 1名

import { parse } from 'csv-parse/sync' import fs from 'fs' import path from 'path' const ExportedCsvFile = path.join(__dirname, '../src/data/message.csv') type Data = { uuid: string name: string message: string } async function main() { // csvファイルの内容を読み込み const data = fs.readFileSync(ExportedCsvFile, { encoding: 'utf-8', }) const csvCells: string[][] = parse(data) let formattedData: Data[] = [] fo

はじめに 私事ですが11月12日に結婚式をあげました。 私達夫婦はよく一緒にアプリを作っているので、今回もなにか一緒に作れないかと思い、余興のクイズアプリを作ることにしました。 ついでに席札もQRコードにして、webアプリ内でメッセージも入れれるようにしました。 作ったもの ユーザーに配布用のサイトと、披露宴会場で投影する用のサイトの２つを作りました。 ユーザーに配布用のサイト 当日はこういう↓感じの席札を用意しました。 この席札は名刺サイズで印刷して一人ひとりラミネートしたのですが、地味に大変な作業でした。 QRコードを読み取ると、以下DEMO動画のようなサイトが現れます。 ちなみにクイズに関してはスクリーンに問題が表示されるまでは回答できないようになっています。（DEMO動画では省略） ページの表示速度を上げたかったので、uuid、名前、メッセージ等に関してはcsvでダウンロードしてか

夫婦でハッカソンに出て入賞＆決勝進出した話——Yahoo! JAPAN Hack Day 2022 参加記 Yahoo! JAPAN Hack Day 2022に夫婦で参加しました！ 結果、CLOVA Speech賞受賞と決勝進出を達成しました。 作ったもの YOSOという話し方を分析するサービスを作りました。 予選のプレゼンは以下のURLから確認できます。私達のプレゼンは3:25:51からです。 サービスの内容は、スピーチを分析して、ポジティブ度、声の大きさ、話す速さ、間のとり方、抑揚、えーっとの数（フィラー）の６項目でモニタリングし、点数や必要に応じて警告を出すというシンプルなものです。 まだエラーハンドリングなどが甘いのですが、β版ということでリリースしてるのでよければ使ってみてください。 レスポンスを待つ必要があるので、最初の解析は話し始めてから20秒ぐらいかかります。それ以降は裏

zodというnpmパッケージの存在をつい先日知りました。 zodを使うと非常に簡単にバリデーションチェックができてコードがスッキリしたので今回はその紹介をしたいと思います。 問題となったケース クエリパラメータをNextサーバー側で受け取る場合、以下のように書いていました。 export default async function handler(req, res) { const { hogeId, numberId } = req.query if (!hogeId || typeof hogeId !== 'string') { return res.status(422).send({ message: 'Query parameter is required', response: 'failureResponse', }); } if (!fugaId || typeof f

このツイートの通り、快適な開発環境を手に入れることが出来たので今回はその方法について書きます。 背景 OpenAPIを導入しているプロジェクトがあったのですが、中身の確認のためにはyamlファイルを読むか、SwaggerEditorを利用するしか方法がありませんでした。 そのため直感的に確認が出来ず、APIの仕様のレビューだけでも時間がかかってしまっていました。 そこで、OpenAPIの変更をコードベースではなく、UIでわかりやすく確認することにしました。 そのためにamplifyを使ってPRを上げたタイミングで、OpenAPIに関するディレクトリをホスティングして、確認用URLを発行することにしました。 ディレクトリ構成 今回はRailsのプロジェクトにdocsというフォルダを作り、その中にOpenAPIを入れているような構成でした。 ├── docs │ ├── openapi │ │