Angularを使ってボードゲームの得点計算ツールを作った話
Angular v21とSignals・Tailwind CSSで、ボードゲーム「世界の七不思議」の得点計算ツールを作った記録。状態管理の設計と、使って得られた知見、AIフレンドリーな雛形への驚きをまとめている。
#Angular
記事一覧
生成AIのコード品質とレビュー負担について考える
生成AIが書くコードの品質とレビュー負担について整理した考察。レビューが重くなる理由と品質の捉え方の違いを分析し、出力が安定するドキュメントを共有して仕様を明確にしてからAIに書かせる進め方を提案している。
#生成AI
Figma MCP試してみる
Figma MCPのデスクトップサーバを有効にしてClaude Codeに接続し、Figmaのデザインから実装させる手順を試した記録。AngularとTailwind CSSのプロジェクトで見た目の修正も試し、使用感をまとめている。
#生成AI
styled-componentsからTailwindCSSに移行する際に困ったこと
styled-componentsがメンテナンスモードになったため、Next.jsのプロジェクトをTailwind CSSへ移行した際に困った点の記録。tailwind.cssが404になる問題やテキスト指定が効かない問題の原因と対処をまとめている。
#作業ログ
MCPについて調べてみる
MCP(Model Context Protocol)とは何かを調べ、MCPサーバを実際に作ってClaudeから使ってみた記事。発生した問題と動作確認の結果を含め、思ったより簡単にサーバを立てられたという感想をまとめている。
#生成AI
VSCode拡張機能「Cline」を試してみる
ClaudeをVSCode内で使える拡張機能Clineを試した記事。インストールとAPIキーなどの事前準備、コード生成・修正やドキュメント作成の使い方、実際に記事を書かせた結果と利点・制限をまとめている。
#VSCode#生成AI
生成AIについて調べてみる
生成AIについて、ChatGPT・Claude・GeminiなどのテキストAI、DALL-E・Midjourneyなどの画像AI、VALL-Eなどの音声AIの代表的なサービスをざっくり調べてまとめた記事。
#作業ログ
Next.jsでbetterなディレクトリ構成を考える
Next.jsアプリのディレクトリ構成を、Bulletproof Reactや4層Layered Architectureを参考に検討したメモ。pages・features・componentsなど各ディレクトリの役割と配置ルールを整理している。
#Next.js
Tauriを試してみる
Rust製フレームワークTauri 1.0を試した記録。create-tauri-appとAngularでプロジェクトを作成して起動し、ウィンドウサイズの変更やRustの関数をJSから呼び出す方法、開発ツールのエラーを試している。
#Rust#Angular
Next.js+linariaを試してみる
Next.jsとCSS-in-JSライブラリlinariaを組み合わせて試した記事。インストール時に発生したエラーの原因と対処、linariaでのスタイリング、styled-componentsとの比較やIE11対応の注意点をまとめている。
#Next.js
Reactでa11y検証ツールを試してみる
Reactでa11y検証ツールを試した記事。eslint-plugin-jsx-a11y、@axe-core/react、storybook-addon-a11y、Lighthouseの導入方法と所感をまとめ、定期的な計測にはLighthouseが良さそうと結論している。
#React
JSで画像を扱うときのメモ
Reactで画像ファイルを扱う方法のメモ。input要素のファイル選択から値の取得、FileReaderを使ったbase64(データURL)への変換、取得時の注意点までをサンプルコード付きでまとめている。
#JavaScript#React
