#フレームワーク

129 件の記事

Starlightでマニュアルを作る #1 インストールから最初のドキュメントまで
読了 4分

Starlightでマニュアルを作る #1 インストールから最初のドキュメントまで

AstroのStarlightで、チームドキュメントや製品マニュアルサイトの土台を組み立てます。Node.jsの準備からcreate astroでサイトを生成し、開発サーバーで最初のドキュメントを表示するところまで一気に進めます。

Hugoでマニュアルを作る #1 インストールから最初のドキュメントまで
読了 5分

Hugoでマニュアルを作る #1 インストールから最初のドキュメントまで

Hugo と Hextra テーマでチームドキュメント・製品マニュアルサイトの骨格を立てます。Hugo Extended と Go のインストールから、新しいサイトの作成、テーマの接続、ローカルサーバーで最初のドキュメントを表示するところまで一気に進めます。

Next.jsでECサイトを作る #5 注文完了ページとデプロイ
読了 10分

Next.jsでECサイトを作る #5 注文完了ページとデプロイ

注文完了ページを作ってシリーズのユーザーフローを閉じ、Vercelにデプロイして実際にインターネットに公開します。メモリストアの限界と、実サービスに進むなら手を入れるべきところまで押さえてまとめます。

Next.jsでショップを作る #4 チェックアウトと決済シミュレーション
読了 9分

Next.jsでショップを作る #4 チェックアウトと決済シミュレーション

Server Actionsで注文を作成し、偽の決済ゲートウェイで成功/失敗をシミュレーションします。useActionStateとuseFormStatusでフォーム状態を扱う実戦パターンまで整理します。

Next.jsでショップを作る #3 カート
読了 9分

Next.jsでショップを作る #3 カート

Client ContextとlocalStorageでカートの状態を管理します。リロードしても維持される永続カート、数量変更、合計計算、hydration安全パターンまで整理します。

Next.jsでショップを作る #2 商品カタログ
読了 8分

Next.jsでショップを作る #2 商品カタログ

Server Componentで商品一覧と詳細ページを作り、searchParamsでカテゴリフィルタを付けます。next/image、generateStaticParams、notFoundまで一度に整理します。

Next.jsでショップを作る #1 開始と設計
読了 10分

Next.jsでショップを作る #1 開始と設計

Next.js App RouterでECショップを一から作ります。最初の記事は要件、技術決定、ルート構造、商品データモデル、プロジェクトのセットアップまで整理します。

Angular実践 #6 テストとデプロイ — トラック総仕上げ
読了 11分

Angular実践 #6 テストとデプロイ — トラック総仕上げ

実践講座の最終回です。作ったダッシュボードにテストを埋め、Docker でまとめて Cloudflare Pages にデプロイしたあと、GitHub Actions で CI/CD まで一周回します。そして Angular トラック 27 編をひと所で振り返ります。

Django DRF #6 テストとデプロイ — Docker、gunicorn、nginx
読了 12分

Django DRF #6 テストとデプロイ — Docker、gunicorn、nginx

APITestCase / APIClient / pytest-django / factory_boy で統合テスト、そして Docker のマルチステージ + gunicorn + nginx + docker-compose でプロダクションデプロイまで。

Angular実践 #5 チャートとデータテーブル
読了 9分

Angular実践 #5 チャートとデータテーブル

ダッシュボードの肝は結局のところ可視化です。Angular Material の MatTable で並び替え・ページネーション・検索を備えたデータテーブルを作り、ng2-charts で売上・カテゴリのチャートを描いて、このダッシュボードを本物の「見える」画面に仕上げていきます。

Django DRF #5 OpenAPI ドキュメント — drf-spectacular
読了 9分

Django DRF #5 OpenAPI ドキュメント — drf-spectacular

drf-spectacular で DRF API の OpenAPI 3.x スキーマ / Swagger UI / ReDoc を自動生成し、デコレータでレスポンス・エラー・認証を精密に明記する方法。

Angular実践 #4 状態管理 — SignalStore で整理する
読了 9分

Angular実践 #4 状態管理 — SignalStore で整理する

前回 ProductService に直接埋め込んでいたシグナル状態を、今回は @ngrx/signals の SignalStore に移して整理します。withState/withComputed/withMethods/withHooks の 4 兄弟で、状態・派生値・メソッド・ライフサイクルを 1 カ所にまとめる流れを順を追って見ていきます。