Web開発

🚀 はじめに：この記事でできること App Routerの基本概念から最小実装、データ取得、Server Actions/Route Handlersまでを「操作→目的→結果→注意/補足」の順で習得します。ゴールは、app/ディレクトリで最小アプリを動かし、RSCのデータ取得と更新を体験できる状態です。 🧭 前提：対応バージョンと用語の整理 App RouterはNext.js 13.4以降で本格化したルーティングです。Pages専用API（getServerSideProps等）はApp Routerでは非推奨で、RSC（React Server Components）とファイル規約が基本になります。 操作 プロジェクトのNext.jsバージョンを確認し、app/ディレクトリが利用可能かを確認する 用語を把握：layout.tsx（レイアウト）/ page.tsx（ルート）/ loading.tsx / error.tsx / route.ts（API）/ RSC / Server Actions 目的 以降の手順で使う概念・ファイル規約の前提をそろえ、混乱を防ぐ 結果（この時点でできること） App Routerの章立てと各ファイル役割を前提知識として共有できる 注意 Pages RouterのAPI（getServerSideProps等）はApp Routerでは使わない クライアントでのみ動くAPI（window等）はClient Componentに分離（"use client"を付与） 🧩 App Routerとは？（概要） App Routerはフォルダ＝URL、page.tsx＝公開ルート、layout.tsx＝共通UIという規約で、RSC前提の「サーバ優先（Server First）」な構成を提供します。 操作 役割を把握： app/layout.tsx：アプリの共通レイアウト app/page.tsx：トップページ app/**/loading.tsx：セグメント単位のローディングUI app/**/error.tsx：セグメント単位のエラーUI app/api/**/route.ts：HTTPメソッドごとのAPIハンドラ 目的 ファイル規約とRSCの前提を結び付けて理解する 結果（この時点でできること） 「どのファイルが何を担うか」を説明できる 補足 レイアウトはナビゲーションでも状態が保持されやすい設計（ページだけ差し替え）です。 🗺️ 図解：App Routerのディレクトリと流れ 最小構成の関係性を図で理解します。 操作 以下の図/ツリーで、URLとファイルの対応を確認する 目的 セグメント（フォルダ）＝URLという対応付けを視覚的に理解する 結果（この時点でできること） どの階層にpage.tsx等を置けばURLが有効化されるか判断できる 補足 layout.tsxは上位レイアウトを継承しながら子ページを差し替えます。 ...

🚀 はじめに このガイドは、最新の 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 と PaperMod で作ったブログを、Cloudflare Pages を使って高速・無料で公開する方法を、初心者向けにわかりやすくまとめたガイドです。 この記事を読むと、次のことが理解できます。 Hugo + PaperMod + Cloudflare Pages の相性が良い理由 ローカル → GitHub → Cloudflare Pages の公開までの全体像 初心者がつまずきやすいポイントと回避方法 🧭 前提：必要な環境と対象読者 Cloudflare Pages で公開する前に、最低限そろえておきたい環境を整理します。 必要な環境 Hugo Extended v0.153.1 がローカルにインストール済み ※PaperMod v8.0 は SCSS を使うため Extended 版が必須 GitHub アカウント（push / pull ができる状態） Cloudflare アカウント（無料プランでOK） 想定する読者 コマンドは最低限なら使える GUI ベースの設定があると安心 「とにかく簡単に静的サイトを公開したい」人 💡 概要：Hugo + PaperMod + Cloudflare Pages の相性が良い理由 Hugo（静的サイトジェネレーター） Go 製でビルドが高速 Markdown で記事を書ける PaperMod などテーマが豊富 PaperMod（Hugo テーマ） 軽量・高速 ブログ向けの機能が充実 SCSS を使うため Hugo Extended が必須 Cloudflare Pages（ホスティング） 無料で使える グローバル CDN による高速配信 GitHub 連携で自動デプロイ HTTPS 証明書も自動発行 組み合わせるメリット git push するだけで自動デプロイ CDN による高速配信 無料枠が広く個人ブログに最適 Hugo のビルド設定が簡単 📱 Step 1：ローカルに Hugo + PaperMod 環境を用意する 1. Hugo Extended をインストール Windowsの場合 1. Hugo Extended の ZIP をダウンロード Hugo の公式 GitHub リリースページへアクセスします。 👉 https://github.com/gohugoio/hugo/releases (github.com) 2. ダウンロードするファイルを間違えないこと Windows 用の Extended 版は次のような名前です。 hugo_extended_0.153.1_windows-amd64.zip ※ `extended` と `windows-amd64` が入っているものを選ぶのがポイント。 3. ZIP を展開し、任意のフォルダに置く 例： `C:\Tools\Hugo\` など、わかりやすい場所に `hugo.exe` を置きます。 4. PATH を通す 1. Windows の検索で「環境変数」と入力 2. 「環境変数の編集」を開く 3. 「Path」を選択 →「編集」 4. `C:\Tools\Hugo\` を追加 5. OK を押して閉じる macの場合 brew install hugo インストール後、次で Extended 版か確認します。 ...

🚀 はじめに AndroidスマホにTermuxを入れるだけで、nginx（静的配信）とPython（動的アプリ）を組み合わせたミニサーバーを構築できます。この記事は、インストールから逆プロキシでFlaskを公開、つまずき対策までを一気通貫で解説します。 この記事で達成できること スマホ上でnginxを起動し、静的ファイルを配信 **Python（Flask＋Gunicorn）**でWebアプリを動かす nginxの逆プロキシでPythonアプリを外部公開 よくあるエラー（ポート、スリープ、権限）を回避 ※ Playストア版Termuxは更新停止。F-Droid版のTermuxが安全です。 🧭 前提と準備 本番前に、インストール元・権限・ポート・IPなど、初心者が混乱しやすい前提を整えます。 1-1. Termuxのインストール（F-Droid版推奨） 操作 F-Droidアプリをインストール → Termuxで検索 → 最新版をインストール 目的 保守されている配布元からTermuxを導入し、最新パッケージを利用可能にする。 結果（この時点でできること） 以降のpkgによる導入と更新が安定して行える。 注意/補足 Play版Termuxは古いため非推奨。F-Droid版を使用。 1-2. 初期設定（更新・権限・必須ツール） 操作 # パッケージ更新 pkg update && pkg upgrade -y # ストレージアクセス（/sdcard を使えるように） termux-setup-storage # よく使うツール pkg install -y git curl vim tmux # サーバー関連 pkg install -y nginx python # （必要なら）サービス管理とSSH pkg install -y termux-services openssh 目的 基本ツール・Webサーバー・Python環境を揃え、ストレージ権限を付与する。 結果（この時点でできること） nginxとpythonが利用可能、/sdcardへの読み書きも許可済み。 注意/補足 termux-setup-storageで権限付与。定期的にpkg upgradeで更新。 1-3. 使うポートとIPを確認 操作 ...

🚀 はじめに：この記事でできること この記事は、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） 画像をキャプション付きで挿入する標準ショートコードです。 ...

🧭 1. Hugoのマルチ言語機能とは？ Hugoは config に言語設定を追加するだけで、 言語別のURL生成・翻訳ファイル・メニュー・コンテンツ管理 を自動で行ってくれます。 Hugoのマルチ言語の特徴 言語ごとにフォルダを分けて管理できる 言語別のメタデータ（title, description）を設定可能 i18n翻訳ファイルでUI文言を切り替えられる 言語スイッチャー（Language Switcher）も簡単に実装できる 補足 Hugoは「多言語サイト」を最初から想定して設計されているため、WordPressよりも構築が簡単なケースもあります。 📁 2. ディレクトリ構成を理解する Hugoでは、言語ごとにコンテンツを分けるのが基本です。 例：日本語（ja）と英語（en）の場合 # content ディレクトリの構成例 content/ ja/ _index.md about.md en/ _index.md about.md 注意 言語フォルダ名は config の languages で設定したキーと一致させる必要があります。 ⚙️ 3. configファイルで言語設定を追加する Hugoのマルチ言語設定は config.yaml（または toml/json）に記述します。 基本的な設定例 # config.yaml defaultContentLanguage: ja # デフォルト言語 defaultContentLanguageInSubdir: true # /ja/ を付けるかどうか languages: ja: languageName: "日本語" weight: 1 title: "マイサイト（日本語）" en: languageName: "English" weight: 2 title: "My Website (English)" 補足 weight は言語の優先順位です。小さいほど優先されます。 ...

🧭 はじめに：静的サイトはSEOに弱いって本当？ 「静的サイトはSEOに弱い」という言葉を聞いたことがあるかもしれません。 しかし、これは半分正しくて、半分誤解です。 結論から言うと、 静的サイトはSEOに弱くありません。むしろ高速で軽量なため、SEOに強い側面が多いです。 ではなぜ「弱い」と言われるのか？ どうすれば静的サイトでも検索上位を狙えるのか？ この記事では初心者にもわかりやすく、丁寧に解説します。 🧱 静的サイトとは？（まずは前提を整理） 静的サイトとは、事前に生成されたHTMLファイルをそのまま配信するサイトのことです。 Hugo・Jekyll・Next.js（SSG）・Astro などが代表的です。 静的サイトの特徴 表示が高速（サーバー処理が不要） セキュリティリスクが低い GitHub Pages や Netlify で無料公開できる CMSのような動的処理は苦手 補足 「静的＝古い」というイメージがありますが、近年はJAMstackの普及で再評価されています。 🔍 静的サイトはSEOに弱いと言われる理由 実は、静的サイトそのものが弱いのではなく、運用方法によって弱く見えるだけです。 よくある誤解ポイント 更新頻度が低くなりがち → CMSのように管理画面がないため、更新が面倒と感じる人が多い。 内部リンク設計が弱い → 自動で関連記事を生成しないテーマもある。 メタタグや構造化データを自分で設定する必要がある → 初心者はここでつまずきやすい。 サイトマップやrobots.txtの設定を忘れがち → 動的CMSでは自動生成される部分。 注意 これらは「静的サイトだから弱い」のではなく、設定を怠ると弱くなるだけです。 🚀 静的サイトがSEOに強い理由 実は、Googleが重視する指標の多くは静的サイトが得意とする部分です。 静的サイトがSEOに強いポイント 表示速度が速い（LCP改善） サーバー負荷が少ない モバイル表示が安定しやすい 不要なスクリプトが少なく、読み込みが軽い セキュリティが高く、エラーが少ない 特にHugoやPaperModは、Core Web Vitalsで高得点を取りやすいのが大きなメリットです。 🛠️ 静的サイトで必ずやるべきSEO対策（初心者向け） ここからは、静的サイトでもSEOを強くするための実践的な方法を紹介します。 🗺️ 1. サイトマップとrobots.txtを整備する Hugoなら自動生成されますが、設定を確認しておきましょう。 # hugo.yaml のSEO関連設定 enableRobotsTXT: true # robots.txt を出力 canonifyURLs: true # 正規URLに整形 sitemap: changefreq: daily # 更新頻度 priority: 0.5 filename: sitemap.xml # 自動生成される 補足 GitHub Pages でも問題なく動作します。Search Console への登録も忘れずに。 ...

🚀 この記事のゴール YouTube Data API を使って「動画タイトル」「再生回数」「チャンネル情報」などを取得し、アプリやブログに活用できるようになること。 🎯 YouTube Data APIとは？ YouTube Data API は、YouTube 上の 動画・チャンネル・再生リスト などの情報を取得できる公式APIです。 アプリ開発、データ分析、ブログ自動生成など、幅広い用途で利用できます。 🧰 前提条件（必要な環境） Googleアカウント Google Cloud Console にアクセスできる環境 コマンドライン（curl）または Python が使える環境 注意：YouTube Data API は無料枠がありますが、利用量に応じてクォータが消費されます。 🔑 APIキーの取得方法 YouTube Data API を使うには、まず APIキー を取得します。 1. Google Cloud Console にアクセス https://console.cloud.google.com/ 2. 新規プロジェクトを作成 画面上部のプロジェクト選択 → 「新しいプロジェクト」 3. API を有効化 「APIとサービス」→「ライブラリ」→ YouTube Data API v3 を検索して有効化。 4. APIキーを作成 「認証情報」→「認証情報を作成」→ APIキー 補足：APIキーは外部に漏れると不正利用される可能性があります。GitHubなどに公開しないよう注意。 📦 基本的なAPIリクエストの仕組み YouTube Data API は REST API 形式で、URLにパラメータを付けてアクセスします。 ...

🚀 はじめに：この記事で学べること 本記事では、Hugo + GitHub Pages でブログを運用している初心者の方向けに、 GitHub Actions を使って自動デプロイする仕組みを、できるだけ分かりやすく解説します。 GitHub Actions が何をしているのか Hugo のビルドがどのように自動化されるのか gh-pages ブランチへ自動デプロイされる仕組み 実際に使えるワークフローのテンプレート 補足 「自動デプロイ」は、記事を更新するたびに手動で hugo → git push → gh-pages へ反映…という作業をなくすための仕組みです。 🧱 Step 1：GitHub Actions の基本を理解する GitHub Actions は、GitHub が提供する 自動実行の仕組み（CI/CD） です。 🔧 何が自動化されるのか？ Hugo のインストール サイトのビルド（hugo コマンド） public/ の生成 gh-pages ブランチへのデプロイ これらを YAMLファイル（ワークフロー） に書いておくことで、GitHub が自動で実行してくれます。 📁 Step 2：ワークフローの配置場所を知る GitHub Actions の設定ファイルは、リポジトリ内の以下に置きます。 .github/workflows/deploy.yml 注意 ディレクトリ名 .github/workflows/ を間違えると、GitHub Actions が認識しません。 ⚙️ Step 3：Hugo 自動デプロイ用ワークフローの例 以下は、Hugo サイトを GitHub Pages に自動デプロイする最小構成の例です。 ...

🧭 はじめに：この記事で理解できること Hugo は高速で柔軟な静的サイトジェネレーターですが、フォルダ構造が分かりにくいと感じる初心者は多いです。 この記事では、以下のことを丁寧に解説します。 Hugo プロジェクトのフォルダ構造の全体像 各ディレクトリの役割 PaperMod を使う場合の注意点 GitHub Pages で運用する際に理解しておくべきポイント 補足 Hugo のフォルダ構造は「必要なものだけ作ればよい」仕組みです。最初から全部覚える必要はありません。 🗂️ 全体構造：Hugo プロジェクトの基本フォルダ まずは、Hugo プロジェクトの典型的な構造を見てみましょう。 # Hugo プロジェクトの基本構造（例） . ├─ config/ または hugo.yaml # サイト設定 ├─ content/ # 記事（Markdown） ├─ layouts/ # テンプレート（上書き用） ├─ static/ # 静的ファイル（画像・HTMLなど） ├─ assets/ # SCSS/JS（Hugo Pipes） ├─ themes/ # PaperModなどテーマ ├─ archetypes/ # 記事テンプレート └─ public/ # ビルド後の出力（自動生成） 注意 public/ は Hugo がビルド時に自動生成するため、手動で編集しないようにしましょう。 📁 1. config/（または hugo.yaml）：サイト全体の設定 Hugo の設定は config ディレクトリまたは hugo.yaml に記述します。 PaperMod を使う場合、hugo.yaml で管理するのが一般的です。 ...