業務を支える、堅牢なシステムをつくる。code lightのポートフォリオサイトです。
こんにちは、ライトです。 前回は、Next.jsでレスポンシブ対応の管理画面レイアウトを作成しました。 PCではサイドバー、タブレットではアイコンのみのサイドバー、モバイルでは開閉式メニューになるようにし、管理画面シリーズの土台を作りました。 今回は、その管理画面の中で使う小さなUI部品として、ステータスバッジを作成します。 ステータスバッジは、一覧画面や詳細画面で状態をわかりやすく表示する...
こんにちは、ライトです。 これまで、フォーム入力、バリデーション、トースト通知など、管理画面でも使える小さなコンポーネントを作成してきました。 次は、それらを配置するための土台として、管理画面レイアウトを作成します。 管理画面では、一覧画面、登録画面、編集画面、分析画面、設定画面など、複数の画面を行き来することが多くなります。 そのため、PCでは左側にサイドバーを表示し、主要なメニューへすぐ...
こんにちは、ライトです。 前回は、React Hook Formの送信結果をトースト通知で表示する仕組みを作成しました。 フォーム送信が成功した場合は success のトースト通知、失敗した場合は error のトースト通知を表示する形です。 try { await createUser(data); showToast({ type: "success", message:...
こんにちは、ライトです。 これまでの記事では、Next.jsで使える再利用コンポーネントを少しずつ作ってきました。 まず、フォーム入力欄として TextInput コンポーネントを作成しました。 次に、React Hook Formと組み合わせて入力フォームを作成し、さらにZodを使ってバリデーションルールを整理しました。 また、トースト通知コンポーネントも作成し、Context...
主にバックエンドの開発をしています。 AIを業務に使いながら、「もっと早く知りたかった」と思うことが山ほど出てきました。 そのリアルな気づきや失敗も含めて、エンジニアに届けたくてnoteを始めました。 現場目線の発信を目指します。 https://code-light.jp/
勤務時間の記録から給与計算、扶養の上限チェックまで。毎日のはたらくをもっとシンプルに管理できます。
こんにちは、ライトです。 今回は、Reactの画面に用意したボタンを押すと、Resendを使ってメールを送信する簡単な仕組みを作ります。 構成はシンプルです。 .envにAPIキーを設定 送信用のAPIルートを作成 React側に送信用ボタンを作成 ボタン押下でメール送信 注意点として、ResendのAPIキーをReact側に直接書いてはいけません。 ブラウザ側にAPIキーが見えてしまうと危...
こんにちは、ライトです。 最近、開発でAIを使う機会が増えました。 コードを書いてもらったり、エラーの原因を調べてもらったり、文章を整えてもらったりと、便利な使い方はいろいろあります。 その中でも個人的に相性が良いと感じているのが、設計を固める前段階でAIを使うことです。 最初から仕様がきれいに決まっていることは、あまり多くありません。 たとえば、 顧客管理アプリを作りたい 顧客情報を登録し...
こんにちは、ライトです。 Webシステムを開発していると、日々いろいろなことが起きます。 仕様を確認したり、画面を作ったり、DBを設計したり、エラーと向き合ったり。 今回は、そんなWebシステム開発エンジニアなら少し共感できそうな「あるある」をまとめてみます。 仕様を確認すると、仕様が増える 「ここってどういう動きですか?」と確認しただけなのに、 そういえば、ここも対応したいです。...
こんにちは、ライトです。 前回、自作 PHP 8.5 フレームワークに SQLite マイグレーション機能を追加しました。 これまでは、ogp_cache や posts テーブルを個別の初期化コマンドで作成していました。 php console db:ogp-cache:init php console db:posts:init ただ、テーブルが増えてくると初期化コマンドも増えてしまいます。...