画像最適化

🚀 はじめに このガイドは、最新の Next.js（App Router） を最短ルートで体験するための入門書です。プロジェクト作成 → 最小ページ → 画像最適化 → Server Actions → 環境変数の順に、再現性高く学べます。 この記事でできること App Router で新規プロジェクトを作成し、ローカル起動できる Server Components / Client Components の使い分けと Server Actions を使った最小フォーム処理が作れる 画像最適化と環境変数の基本が理解できる（チェックリストつき） こんな人におすすめ 最短で Next.js を試したい初心者〜中級者 フロント〜バックを一体で動かす体験をしたい人（API設計の前に“動く全体像”を掴みたい） 前提（迷いやすいポイントの先出し） Node.js は LTS の最新（18 以上が目安、20+ 推奨） を利用 本記事は App Router 前提（app/ ディレクトリ） コードは TypeScript 想定（*.tsx） 💡 概要：Next.js の要点（App Router で何が変わる？） App Router は React Server Components を活用し、サーバ側での描画・データ取得が標準で簡素化。ファイルベースルーティング、ネストレイアウト、ストリーミング、部分的再生成（ISR） によって、実務で必要な機能が揃います。 RSC（Server Components）：デフォルトはサーバ実行。機密値や DB アクセスを安全に扱いやすい Client Components：UI操作やブラウザ API が必要な箇所に限定して use client を付与 Server Actions：フォーム送信やデータ更新を API ルートなし で実装可能 Turbopack：開発サーバが高速。互換性課題がある場合は webpack に切替可能 🗺️ 図解：Next.js の全体像（初心者向け） Next.js でのページ表示は、サーバ側でのデータ取得と描画を軸に、クライアント側の体験を必要最小限で足す「Server First」な設計です。 下図は、RSC/SSR/SSG・ルーティング・最適化機能の関係を簡略化したものです。 ...

🚀 はじめに：この記事でできること この記事は、Hugoのショートコード（Shortcodes）を使って、Markdown記事の表現力を高めるための完全ガイドです。 組み込みショートコードの使い方から、自作ショートコードの作成、PaperModでの最適化までを「操作→目的→結果→注意/補足」の順で、初心者でも迷わない構成で解説します。 補足 ショートコードは、YouTube埋め込み・画像最適化・カスタムHTMLの挿入・再利用可能なパーツ化などを簡単に実現できます。WordPressのショートコードに似ていますが、Hugoは高速でテンプレート連携が容易なのが特徴です。 🧭 前提：対象と環境 このガイドは Hugo + PaperMod + GitHub Pages でブログを運用する初心者〜中級者を対象に、記事内の表現力と保守性を高めるための実践的な手順をまとめています。 操作 作業環境：Hugo（最新安定版）・PaperModテーマ・GitHub Pagesで公開済み 記事はMarkdown（.md）で作成し、ショートコードを適宜挿入 目的 記事品質と生産性を両立：繰り返し使う表現をショートコード化し、統一感と更新容易性を確保する 結果（この時点でできること） 以降のセクションで、組み込みショートコードの活用から自作までをスムーズに実施できる 注意 テーマに同名ショートコードが存在する場合、プロジェクト側が優先されます。競合時は命名や配置を見直してください。 🧩 基本の使い方（組み込みショートコード） 組み込みショートコードの使い方を、操作→目的→結果→注意で確認します。この記事の例はPaperModでもそのまま使えます。 YouTube動画を埋め込む 操作 記事内で youtube ショートコードに動画IDを渡して埋め込みます。 目的 YouTube動画をレスポンシブ対応で簡単に埋め込む。 結果（この時点でできること） 記事本文に動画プレイヤーが表示され、モバイルでも崩れにくい。 注意 ページ表示速度への影響を抑えるため、動画の数は最小限に。必要なら折りたたみ（details）と併用して視認性を保つ。 操作（例） 🖼️ 画像ショートコード（figure） 画像をキャプション付きで挿入する標準ショートコードです。 ...