要点まとめ コンポーネント設計や実装では、特定の構成パターンをそのまま正解にしない 責務・境界・依存関係・変更理由を判断軸として持つ コンポーネントは「機能のまとまり」なのか「UI 部品」なのかを先に揃えるとぶれにくい ロジックと表示は常に分けるのではなく、複雑さや変更理由に応じて分ける 良い設計かどうかは、修正時に触る場所を見つけやすいか、機能を削除しやすいか はじめに フロントエンドのコンポーネント設計では、Atomic Design や features ベースの構成がよく話題に上がります。 ただ、実務ではそれらをそのまま持ち込んでも、うまく機能するとは限りません。 特...

はじめに AIエージェントの登場により、個人開発のスピードは大きく変わりました。 Cursor や Claude Code を使えば、UIや機能の実装を短時間で作れるようになっています。 一方で、実装スピードが上がるほど 変更による挙動のズレや回帰バグ も起きやすくなります。 AIに実装を任せる場合でも、アプリケーションの挙動を確認し、意図しない変更を検知できる仕組みが重要になります。 また、AIを使った開発では 仕様や期待する挙動を整理しておくこと も重要です。 仕様が曖昧なままだと、AIに依頼した実装が少しずつずれていくことがあります。 こうした課題を踏まえ、この1年ほど個人開発...

はじめに TechSeek は、技術書をタグやキーワードで探せる Web サービスです。 技術書探しでつまずきがちな点（キーワードが思い浮かばない、自分に合う本が分からないなど）を、少しでもスムーズにできたらと思い、つくりはじめました。 https://techseek.site/ この記事では、個人開発として無理なく続けていくために、 どんな技術を選定したのか、そして実際の運用で良かったこと・詰まったことをまとめました。 技術選定の方針 TechSeek では、個人開発として無理のない構成であることを重視しています。 基準は次の2点です。 1. 固定費で運用できること 従量...

要点まとめ Next.js（SSR）+ Kamal + VPSで月額約6〜700円の固定費インフラを構築できる（VPS 約600円 + ドメイン約100円）。KamalはDockerベースのアプリケーションをVPSに簡単にデプロイするツールで、リバースプロキシやSSL証明書の管理も自動化してくれる 基本的なセキュリティ設定も実装: SSH公開鍵認証、rootログイン無効化、パスワード認証無効化など、本番環境で必要な基本的なセキュリティ設定を実装できる 学習価値と汎用性の両立: Docker、サーバー管理、デプロイの仕組みを理解しながら、Next.js以外（Railsなど）...

はじめに AIツール（ChatGPT、GitHub Copilot、Cursor、Claude Code など）でUIコードを生成すると、スタイルがバラバラになりがちです。 しかし、デザイントークン・Storybook・プロンプト設計を組み合わせると、 最初から実用レベルでスタイルが統一されたUIコードを生成できます。 本記事では、個人プロジェクト「TechSeek」での実践をもとに、 AI活用時のUI設計と具体的な指示方法を紹介します。 こんな方におすすめ AIツールを活用した開発に取り組んでいる方 個人開発でUI/UXの品質向上を図りたい方 効率的なフロントエンド開発手法を...

ブラウザでURLを入力してからHTML（例：index.html）が返ってくるまでの流れを、TCP/IPモデルのしくみに沿って整理してみました。 まずは、自分の環境を簡単に図にしてみます。 この環境でブラウザでURLを入力したとき、どんな処理が順番に発生しているのかを整理します。 TCP/IP参照モデルとは インターネットの通信は、「TCP/IPモデル」と呼ばれる考え方に基づいて行われています。 通信を4つの層に分けて、それぞれが役割を分担することで、データを安全・確実にやりとりできるようになっています。 TCP/IPモデルの各層と役割 レイヤー名 役割 アプリケー...

SOP（Same Origin Policy: 同一オリジンポリシー） SOPとは → あるオリジンによって読み込まれた文書やスクリプトが、他のオリジンにあるリソースにアクセスできる方法を制限するもの オリジンとは → スキーム名（プロトコル）、ホスト名（ドメイン）、ポート番号の3つで構成 → すべてが同じなら同一オリジン、1つでも異なれば別オリジン 他のオリジンとは ページA ページB オリジンは同じ？ https://example.com/page1 https://example.com/page2 ✅ 同じオリジン （スキーム・ホスト・ポートが同じ）...

OAuth OAuthとは → ユーザー名やパスワードを渡さずに、あるサービスが別のサービスにアクセスを許可する仕組み（例：Googleアカウントの許可を得て、他のアプリがユーザーの情報にアクセスできる） OAuthは認可の仕組み → 認証の仕組み（ログイン）はアプリ側で実装する必要がある OAuthの登場人物 リソースオーナー: アクセスを許可するユーザー クライアント: ユーザーのデータを取得したいアプリ 認可サーバー: ユーザーの認可を管理し、アクセストークンを発行 リソースサーバー: ユーザーのデータを管理し、アクセストークンを使ってアクセスを制御 説明では、以下の役...

はじめに Webアプリケーションの認証方式を設計する際、 セッションベース認証（Cookie）とトークン認証（JWTなど）のどちらを採用すべきか迷うことはないでしょうか。 この選択は、プロダクトのアーキテクチャとセキュリティ方針によって決まります。 例えば次のような条件です。 SPAや複数オリジン構成か モバイルアプリからアクセスするか API中心の設計か セキュリティ対策（CSRF / XSS への対応） こうした条件によって、適した認証方式は変わります。 本記事では「セッションベース認証（Cookie）」と「トークン認証（JWT / Bearer Token）」の違いに焦点を...

要点まとめ ESLint の設定理解で最も重要なこと ESLint の設定ファイルには 4 つの設定項目があり、それぞれなぜ必要なのかを理解することが、プロジェクトに合った設定を作れる鍵になります： 環境指定 (env)：プロジェクトの実行環境（ブラウザ/Node.js）や ECMAScript バージョンを認識させるため これがないと、windowやdocumentが「未定義」と誤判定される パーサ設定 (parser)：TypeScript や JSX など、標準 JavaScript とは異なる構文に対応するため これがないと、TypeScript の型注記がパー...

TypeScriptの設定ファイルtsconfig.jsonに関する調査メモ target 出力するJavaScriptのバージョンを指定 デフォルトは、ES5 適切に設定することで コンパイル時間が短縮される ランタイム時の実行効率が向上する 開発時の型チェックが強化される targetのオプションごとの挙動の違い targetオプションごとの出力コードの違いを比較 TypeScriptコード（元のコード） const fetchData = async (url: string): Promise<{ data: string }> =>...

はじめに Active Recordは、Ruby on RailsにおけるORM（Object-Relational Mapping）ライブラリで、データベースとのやりとりを簡単に行うための便利な機能を提供します。 https://railsguides.jp/active_record_basics.html 最近、Active Recordモデルにattr_accessorで仮想的な属性（データベースには保存されない一時的な属性）を定義したコードを改修する中で、エラーの解消やデバッグに時間がかかることがありました。 コード例 class Record < Applicat...

要点まとめ Dev Container は Docker コンテナ内で開発環境を構築し、VS Code でシームレスに開発できる仕組み メリット： 環境再現性 → OS、言語バージョン、パッケージを統一 環境構築の簡略化 → VS Code で「Reopen in Container」を選ぶだけで完了 デメリット： 初期学習コスト → Docker の基本知識が必要 パフォーマンス → Windows（WSL2）や Mac ではファイル I/O が若干遅い場合がある はじめに 開発環境をセットアップするとき、「自分のマシンでは動くのに、他のマシンでは動かない」とい...

はじめに Dev Containerとは、開発環境をコンテナ化することで、開発者が簡単に統一された環境を利用できるようにする仕組みです。詳細は以下の記事をご参照ください。 https://zenn.dev/takayuu/articles/dev-container-80f6900ce9eb8c 本記事では、Dev Containerを使って以下の環境を構築する手順を解説します。 Sinatra・MySQL開発環境 Rubyの実行環境を整え、Bundlerを用いて依存関係を管理します。 さらに、Sinatra環境を構築し、MySQLとの接続を設定します。 コード品質管理環境 ...

はじめに Dev Containerとは、開発環境をコンテナ化することで、開発者が簡単に統一された環境を利用できるようにする仕組みです。詳細は以下の記事をご参照ください。 https://zenn.dev/takayuu/articles/dev-container-80f6900ce9eb8c 本記事では、Dev Containerを使って以下の環境を構築する手順を解説します。 Ruby開発環境 Rubyの実行環境と依存関係管理ツール（Bundler）を設定します。 コード品質管理環境 Prettier、Rubocop、RubyLSPを導入し、コード整形と品質管理を自動化し...

はじめに Dev Containerとは、開発環境をコンテナ化することで、開発者が簡単に統一された環境を利用できるようにする仕組みです。詳細は以下の記事をご参照ください。 https://zenn.dev/takayuu/articles/dev-container-80f6900ce9eb8c 本記事では、Dev Containerを使って以下の環境を構築する手順を解説します。 Node.js開発環境 Node.jsとパッケージ管理ツール（yarn）を設定します。 コード品質管理環境 PrettierとESLintでコード整形と品質管理を自動化します。 Dev Co...