KIRO Specを用いてVibe Codingしてみた 所感 自分でコーディングした方がいいと感じてしまった 機能が上手く動かない時に、適切に直してもらえなかったり、lintエラーの修正に時間がかかるのがまどろっこしかった KIRO Specで出してもらったr
Cursor cliでできることを尋ねてみた プロンプト1 あなたは何ができますか？ 回答1 簡潔に自己紹介します。あなたの開発作業を支援するために、できることを要点でまとめます。 できること • リポジトリ理解: コード検索・読解、依存関係の把握、設計の要約
CIDRをきちんと分ける CIDRをきちんと分けることで、階層的かつ効率的なIPアドレス設計を行うことができる。 ネットワーク計算してくれるサイトなどを探すことで、効率的に設計を行える。 ネットマスクが/20だと4000くらいのIPアドレス範囲になる。/19だと8100く
AWS Lambdaを触ってみた 昨日の経験を活かして、handler関数に処理を記述してLambda関数の実行ができた。 決まった定数を出力することや汎用的なロジックはchatgptを使うことですぐにかけるので時間をかけなくていいなと思った。 環境変数がない場合に、エラーと
初めて対応したインフラの改修の流れ 1.現状確認 どんなAWSリソースが現状使われているかわからなかったので本番環境とステージング環境を確認した。 だいぶ前に作られていたAWS構成図はあったがそのAWS構成とは異なる部分もあったので、きちんと更新していかないと調査の工数が
AWS ECSでNext.js Webアプリを構築する手順書 0. 準備 AWSアカウントの作成と初期設定（IAMユーザー、AWS CLIのセットアップなど）が完了していること。 ローカル環境にDockerがインストールされていること。 Next.jsアプリケーショ
Next.jsをAWSで稼働させる最適な構成の提案 現在のプロジェクト状況を確認した結果、以下の構成を提案いたします： 現在の設定分析 Next.js 15.3.1使用 output: 'export'でSSG（静的サイト生成）モード React Server C
EC2 (Amazon Linux 2023) から CloudWatch にアクセスログを送る手順 目的: EC2 のアクセスログを CloudWatch に送信する 1. EC2 を作成 セキュリティグループ（SG）を作成 .pem キーを作成し、権限を c
2024年10月28日 就寝前の1日振り返り 今日はバックエンドの分離作業のためにAWSでの作業内容の洗い出しとアーキテクチャ図を少し書いた。インフラの構成を変えるので、コスト面についてもきちんと共有して進めていかなければいけないと指摘されて気づいた。AWS関連の作業は実務で
2024年10月29日 就寝前の1日振り返り 今日もバックエンドの分離作業のためにAWSでの作業内容の洗い出しとアーキテクチャ図を書いて先輩エンジニアに軽く相談した。インフラを構成するときに、サービスがどれくらいの利用者で売り上げを目指しているから、インフラにこれくらいの費用
2024年10月30日 就寝前の1日振り返り 今日もバックエンド分離作業の調査を行なっていた。コスト周りの調査を行なっていた。既存の本番とステージングでかかっているお金を調査したり、分離した後にかかりそうな金額を算出していた。思っているよりもECSとRDSの金額が高いと思うの
2024年11月15日 就寝前の1日振り返り IAMは新しくする。AWSで新たなリソースを作るときはIAMユーザーを新しくする。IAMユーザーに付与するポリシーは適切な区別をしてポリシーを管理する必要がありそう。 既存のIAMユーザーのポリシーはいろんなAWSリソースの権限を
2024年11月18日 就寝前の1日振り返り データベースを作成したら、アクセス権限を最小にする。 アクセスのためのパスワードやホストの情報が万が一流出してしまった場合を考えて、データベースに作成するユーザーの権限を必要な権限だけにしておく。 必要なアクション: CRUD処理
2024年11月21日 就寝前の1日振り返り 最近DDDを用いたAPIの開発をやっていて気がついたことがある。(結構当たり前のこと) フロントエンドもurl設計やコンポーネント設計、ディレクトリ設計を開発のフローに組み込むのが良いのではないか。 DDDではコーディングルールの
2024年11月26日 就寝前の1日振り返り 今日の学び。 パフォーマンスを改善するには、以下の手順を必ず行う。計測、仮説、検証、改善。 推測で仮説をしたり、いきなり改善に手を出してしまうと適切に対応することができない。できてもまぐれでできるだけ。 計測をきちんと行う。 D
2024年11月30日 就寝前の1日振り返り 今日はLambdaとAPI Gatewayを用いて、APIを作ってみようと色々模索していた。 従来のやり方に似せてECRでImageを管理してLambdaでそのImageを使う方法が良いのではと思い、色々調べたり試した。 だが、全
2024年12月1日 就寝前の1日振り返り 前月の AWS 請求書は、新しい月の初めに確定します。その後まもなく、通常はその月の 3 日目から 5 日目までの間に、デフォルトの支払い方法に請求 https://repost.aws/ja/knowledgecenter/mo
2024年12月23日 就寝前の1日振り返り <div <strongDouble Buffering</strong <br / ゲームなどで利用されている技術。 画面を連続的に描画する際に同じ
マスキングするsql <div <div className="fontbold"名前、パスワード、メールのマスキング</div <div className="textgray400" UPDATE yourtable SET name = 'ma
【備忘録】カスタムデザインシステムのtailwind cssのeslint設定方法 ✅ 前提 このルールは "className" に直接文字列で Tailwind クラスを記述している場合に有効です。 例： 🧩 1. eslintplugintailwin
【備忘録】boolean型の変数の命名規則を静的解析するためのeslint設定方法 ✅ 1. 必要なパッケージをインストール ✅ 2. .eslintrc.json にルールを追加 以下のように設定してください： ✅ 3. チェック対象のコード
初めてのFlutter ✅ Flutter環境構築（Mac向け・VS Codeを使う場合） 1. Flutter SDKのインストール 🔗 公式サイトからダウンロード ✅ インストール手順（macOS） 1. Flutter SDKを解凍して任意の場所に配置（
GTMについて GTMとは？ WEBサイトに埋め込むタグを一元管理するGoogle公式ツール タグ(xを)とトリガー(xxな条件の時に)を設定することで動作する GTMを使わない場合、GA4をを全ページに追加する必要がある。GTMを使えばGTMのツール内でGA4を設
マネジメントについて考える マネジメント 1.セルフマネジメント 2.相手へのマネジメント(自分と同じ立場やそれよりも低い立場の人との関わり合いのことが多い) 3.チームマネジメント(複数人がいる際の関わり合い) 2と3は信頼している関係であると、より成果を上げや
Backlog 生産性可視化 ツール機能 機能概要 Backlog REST API v2 から課題を取得し、完了タスクを Excel 形式（.xlsx）でダウンロードできる機能を追加しました。 ディレクトリ構成 コア実装 1. Backlog か
Playwright MCP 実装詳細ガイド 概要 Playwright MCP（Model Context Protocol）は、Microsoftが開発した次世代のブラウザ自動化ツールです。アクセシビリティツリーを活用してUI要素を認識・操作することにより、UI変更へ
今やりたいことについて考える もっとフロントエンドの領域の知識を深くして、専門領域とする。インフラ周りも理解できるようにする。 やりたいこと。 1.ReactおよびNext.jsについてもっと学んで思想を掴みたい。 2.UI/UXについて学んでより良い画面や機能を作り
React Fiberについて知った単語 FIBER AS A DATA STRUCTURE Fiber Node tag type props startNode double burrering Fiber Reconcilation
SOLID原則を用いたReactの書き方(発展) 1.Single Responsibility Principle formの入力値の変更やバリデーションなどを自作で書くよりも、React Hook FormやZodなどを用いることで、入力値の管理やバリデーションを簡
SOLID原則を用いたReactの書き方 1.Single Responsibility Principle すべてのクラスは1つの責務を持つべきという考え方 適切にコンポーネントを分割する。レンダリングする内容次第ではコンポーネントが肥大化するのを防ぐ データをフ
ReactでVurtial DOMがどのようにActual DOMに変更をかけているのか この記事の目的は、「Reactが内部でどういう流れで差分を検知し、Actual DOMに変更をかけているのか」を理解して、メンタルモデルを作るのを助けること。 Virtual DO
Reactの差分検知(Fiber Reconciliation)のRender phaseについて 差分検知を理解するために、「Component(JSX)→ React.createElement → vDOMのオブジェクト」を理解して頭に入れておく必要がある Com
Reactでのデザインパターン 1.Single Responsibilityによるデザインパターン 記事一覧を例に挙げる 記事一覧画面(Article List Pageコンポーネント) データを取得して、一覧のレイアウト画面をレンダリングする責務
React公式の学習 Reactはエンジニアが書いたコードが全て純粋関数であると仮定している。つまり、Reactコンポーネントは与えられた入力が同じであれば、常に同じJSXを返す必要がある。 返すJSXがpropsの値に依存しているのが好ましい 特定の順序でコンポーネ
Reactの流儀からUI設計を学ぶ 公式ドキュメントに書かれている「Reactの流儀」について書かれている5のステップをまとめます。 UI構築時の5つのステップ 前提: デザイナーから画面のモックアップをもらっている。APIが返すJSONが決まっている ステッ
Reactでのレンダーとコミット Reactで書いたコンポーネントは画面に表示する前に、Reactによっとレンダーされる必要がある。 Reactで書いたコンポーネントを表示する3つのステップ ステップ 1: レンダーのトリガ 1.コンポーネントの初回のレン
Reactの流儀を実践してみた 以下のモック画像があったとします。  このUIを実装するために、Reactの流儀の5つのステップを行います。 ステップ 1: UI をコンポー
コンポーネントのメモリ レンダー間で情報を記憶しておく必要があるコンポーネントにはstateを使う コンポーネントは複数の状態を持つことができる。内部では呼び出し順を用いて対応 Reactは全てのコンポーネントに対してstateのペアの配列を保持している。ペアインデック
Compound Pattern とSuspenseについて考える Zenn(akfmsato):Reactチームが見てる世界、Reactユーザーが見てる世界 https://zenn.dev/akfm/articles/reactteamvision 上記
フロントエンドのデザインパターンと自律分散アーキテクチャ リンク1: [フロントエンドのデザインパターン](https://zenn.dev/morinokami/books/learningpatterns1) リンク2: [自律分散アーキテクチャ](https://z
Reactでのエラーハンドリング server actionsのエラーハンドリング server actionsでは入力値のバリデーションを行い、エラーメッセージを返す。 (zodなどのライブラリを用いても良いし、カスタマイズしても良いのかも)
Next.jsでserveronlyを使う必要がある？(短文) 環境変数や内部ビジネスロジック(時限式のコード)をクライアント側に公開しないためには、serveronly をライブラリでインストールして明示的に定義する。 そうすることで開発者によるミスを防ぐことができる。 注
レートリミッターの設計 APIリクエストの数がレートリミッターにより閾値を超えると過剰なAPIリクエストを防ぎDoS攻撃を防止する。 レートリミッターはさまざまなアルゴリズムで実装可能。 レートリミッターはクライアントよりもサーバー側で実装されたり、APIサーバーより手前のミ
drawerを開けたらチェックがついている年月にスクロール 過去に、イベント発火したら、特定のスクロール箇所が表示される要件があった。 スムーズにスクロールするのではなく、瞬時に表示したかった。 その時は、refを使ってスクロール箇所を特定して、表示できるようにした。 その時
React Queryのグローバルなエラーハンドリング React QueryでAPI呼び出し時のエラーをグローバルにハンドリングする方法についてまとめます。 1. QueryClientの設定 2. コンポーネントでのAPI呼び出し例 QueryCl
React ViewTransitionを使ってみた React ViewTransitionを使ってみた。 手順1: React v19.1.0をインストール npm install react@19.1.0 reactdom@19.1.0 手順2: Next.
2024年振り返り 【できたこと】 インフラの実務経験(初) APIサーバー(ECS), RDSを新たに作成してALBでトラフィックを切り替え メンテナンス画面の作成およびメンテナンス画面への切り替え ブルーグリーンデプロイの仕組み作成 フロントエンド
SEOを高めるための調査 タイトルタグ <div<title> ページの内容 サイト名 </title></div のように構成するとよい。キーワードを詰め込みすぎず、なるべく簡素にページの内容を説明する。
UIとUXの法則について ヒックの法則 取りうる選択肢の数や複雑性に応じて、意思決定にかかる時間が長くなる <a href="https://baigie.me/blogui/2022/03/29/psychologyforuidesign/" UIデザインのための心理学：
系列位置効果(UI・UX法則) 一連の情報の位置が人の記憶に影響を与える。 最初と最後の情報(項目)が記憶に残りやすく、中間の情報は記憶に残りにくい。 重要な情報を最初か最後に配置するとユーザーの意識に留まりやすくなる。 一方で、重要な情報を真ん中に配置すると意識から漏れ
UI整合性確認ツール FigmaデザインとReactコンポーネントのUIの整合性をリアルタイムで確認するための方法について、以下のようにいくつかのアプローチを考えました。 1. デザイントークンとFigma APIの活用 デザイントークンを用いることで、Figmaのデ
デザインシステム構築手順 ステップ1：基礎を築く（Lay the groundwork） まずは「なぜデザインシステムが必要なのか？」をしっかり定義します。 製品にプラットフォーム間での一貫性の欠如があるか？ 手作業による更新に時間がかかっているか？ デザイナー
デザイナーさんに聞いてみたデザインシステムを見てみる デジタル庁 デザイナーさんからのコメント 構造がシンプルなのでわかりやすい(参考にしやすい) リンク サイト:[ようこそデジタル庁デザインシステムへ](https://design.digital