https://watashi.xyz わたしの情報をわたします Fri, 17 Jul 2026 13:55:45 +0000 ja hourly 1 https://wordpress.org/?v=7.0.2 https://watashi.xyz/wp-content/uploads/2024/03/cropped-Watashi-32x32.png https://watashi.xyz 32 32 https://watashi.xyz/astro-middleware/ Thu, 16 Jul 2026 15:00:00 +0000 https://watashi.xyz/?p=7319 Astro Middlewareの使い方を分かりやすく解説。src/middleware.tsの基本からdefineMiddleware()やonRequest()の使い方、実行タイミング、JWT・Cookie認証、リダイレクト、context.locals、sequence()まで紹介

The post Astro Middlewareとは？使い方・実行タイミング・認証・SSR/SSGの違いまで徹底解説 first appeared on WATASHI.xyz.]]> https://watashi.xyz/view-transitions-astro/ Sun, 21 Jun 2026 07:29:11 +0000 https://watashi.xyz/?p=7285 AstroのView TransitionsでSPA風の滑らかなUXを実現する方法を解説します。導入手順はもちろん、遷移後にJavaScriptが動かない問題の解決法や、フォーム・状態維持のコツまで実務で役立つテクニックを網羅。さらにSEOやパフォーマンスを落とさないための重要ポイントも紹介しています。

The post 【Astro 6対応】View Transitions API実装ガイド！SPA風の画面遷移とJSが動かない時の解決法 first appeared on WATASHI.xyz.]]> https://watashi.xyz/astro-content-collections/ Mon, 08 Jun 2026 13:37:45 +0000 https://watashi.xyz/?p=7214 Astroのコンテンツ管理「Content Collections」を徹底解説！従来のMarkdown管理との違いや、Astro v5で進化した「Content Layer API」や「Content Loader」の全体像、使い分けの判断フローまで網羅。導入手順のベストプラクティスをコード付きで詳しくご紹介します。

The post Astro Content Collections完全ガイド【Astro v5対応】Zod型安全から外部API連携まで first appeared on WATASHI.xyz.]]> https://watashi.xyz/astro-blog/ Wed, 30 Apr 2025 15:00:00 +0000 https://watashi.xyz/?p=2628 Astroでブログを始めたい方に向けてディレクトリやコンテンツの構成、Markdownを使った記事管理、レイアウト設計の考え方をやさしく解説。さらに、記事の一覧表示や詳細ページの作り方、ルーティング設定、VercelやNetlifyを使った公開方法までカバー。Astroで快適なブログ制作のきっかけに。

The post Astroでブログを構築する方法｜レイアウト設計から記事管理・デプロイまでまるっと解説！初心者にも最適 first appeared on WATASHI.xyz.]]> https://watashi.xyz/astro-directory/ Sun, 27 Apr 2025 15:00:00 +0000 https://watashi.xyz/?p=2542 AstroJSプロジェクトのディレクトリ構成、どうするのが正解？基本的な構成から画像管理、実践的なコンポーネント配置、ブログのMarkdown/MDX構造、さらにAstro.globによる自動読み込みやルーティング、チーム開発のコツまでじっくり解説。これを読めば、あなたの開発効率がきっと上がります。

The post Astroでディレクトリ構成を最適化する方法｜初心者でもできる構造設計の完全ガイド first appeared on WATASHI.xyz.]]> https://watashi.xyz/astro-starter/ Sat, 26 Apr 2025 15:00:00 +0000 https://watashi.xyz/?p=2503 Astro JSを始めてみたいけれど、何から手をつければいいのか分からないという方も多いのではないでしょうか？この記事では、Astroの開発環境構築から最初のウェブページ作成までを初心者向けに分かりやすく解説しています。これからAstroを学びたい方にぴったりの内容ですので、ぜひ最後までご覧ください。

The post Astro JSの始め方ガイド：最初の一歩から応用まで｜初心者でもわかるステップバイステップ解説 first appeared on WATASHI.xyz.]]> https://watashi.xyz/astro-js-seo/ Mon, 10 Mar 2025 16:00:00 +0000 https://watashi.xyz/?p=1828 Astro.jsでSEO対策を完全攻略！高速化、メタタグ、サイトマップの実装手順から成功事例まで、初心者も上級者も検索上位を目指せるガイド。

The post Astro.jsでSEO対策を実装する方法：初心者向けガイド first appeared on WATASHI.xyz.]]> https://watashi.xyz/astro-ssr-start/ Wed, 05 Mar 2025 05:21:52 +0000 https://watashi.xyz/?p=1700 Astro.jsのSSR（サーバーサイドレンダリング）を活用して、動的データを表示しながらSEOを最適化する方法を解説。SSGとの違いや実装手順を詳しく紹介します。

The post Astro.jsでSSRを導入！設定からデプロイまで解説 first appeared on WATASHI.xyz.]]> https://watashi.xyz/astro-routing/ Wed, 26 Feb 2025 16:24:06 +0000 https://watashi.xyz/?p=1584 Astro初心者向けにのルーティングを基礎を詳しく解説！ファイルベースの静的ルーティングはもちろん、動的ルーティングの設定方法やAPI連携によるデータ取得まで幅広く紹介します。具体的なコード例を交え、実践的な活用方法も紹介。Astroを活用した効率的なルーティングを学び、柔軟で高速なWebサイトを構築しましょう！

The post ここまで出来る！Astro.jsルーティングの基本と動的ルート実装 first appeared on WATASHI.xyz.]]> https://watashi.xyz/about-astro/ Fri, 21 Feb 2025 08:00:00 +0000 https://watashi.xyz/?p=1463 Astro JSは、超高速＆最適化された次世代フレームワーク！JavaScriptを最小限に抑えつつ、ReactやVueともスムーズに統合可能。アイランドアーキテクチャで必要な部分だけを動的にし、パフォーマンスを最大化。静的サイトを速く、美しく作りたい開発者必見！詳しく紹介します。

The post なぜ使わないの？Astro.jsでモダン＆最速のWebサイト構築！Asrotoとは first appeared on WATASHI.xyz.]]> https://watashi.xyz/astro-with-tailwindcss/ Sat, 23 Nov 2024 10:51:36 +0000 https://watashi.xyz/?p=1295 はじめに 静的サイトジェネレーターAstroフレームワークにCSSフレームtailwindcssを導入する方法を記します。 tailwindcssの導入によってクラス名に悩んだりメディアクエリを無駄に増やすことを避けられ […]

The post 2手で完了!? Astroフレームワークにtailwindcssを追加する方法 first appeared on WATASHI.xyz.]]> https://watashi.xyz/astro-with-react-start/ Sat, 09 Nov 2024 15:51:36 +0000 https://watashi.xyz/?p=1229 Astro.jsは超高速な静的サイトジェネレーターとして注目されていますが、Reactと組み合わせることで、柔軟でインタラクティブなサイト制作が可能になります。本記事では、AstroとReact の組み合わせによる開発手 […]

The post Astro.jsにReactを導入する完全ガイド｜Astro×Reactでインタラクティブなサイトを作る first appeared on WATASHI.xyz.]]> https://watashi.xyz/astrojs-change-folder/ Thu, 04 Apr 2024 15:07:27 +0000 https://watashi.xyz/?p=1179 最新のWEBフレームワーク「Astro.js」で静的サイトを作成するために覚えておくとよいこと第2弾です。 今回はビルドコマンドで生成されるフォルダをデフォルトの「dist」から任意の名前に変更する方法です。 なぜ任意の […]

The post Astroフレームワークで生成フォルダをdistから任意のフォルダ名にする方法 – Astro.jsで静的サイト制作 first appeared on WATASHI.xyz.]]> https://watashi.xyz/astro-relative-link/ Fri, 29 Mar 2024 14:47:47 +0000 https://watashi.xyz/?p=1160 はじめに ウェブフレームワークAstro（Astro.js）を利用して静的サイトを作成する際に各画像パスだったりサイト内リンクが相対リンクだと便利です。この記事を読むとAstro.jsでの相対リンクのプラグインの設定方法 […]

The post Astroフレームワークを相対リンクにする方法 first appeared on WATASHI.xyz.]]>