【新刊紹介】『速習 Astro』発売、短時間でAstroの基本を学べる解説書

　執筆コミュニティ「WINGSプロジェクト」代表の山田祥寛さんのKindle電子書籍『速習 Astro』が8月8日に刊行されました。手軽に学べる初級者のためのAstro解説書です。

　本書は、Astroの基本について、9つのPartに分けてサンプルコードとともに詳しく解説しています。

　本書掲載のサンプルは、サポートページからダウンロード可能です。どんどん動かして試してみてください。

担当編集者からのコメント

　『「速習」シリーズ』は、WINGSプロジェクトが進めるAmazon Kindle電子書籍のシリーズ。気になる技術をサクッと短時間で学ぶ、「時間もお金も低コストに」をコンセプトとしています。

　おかげさまで、隙間時間に基本を学習するのにちょうど良い、といずれもご好評いただいており、今回はシリーズとして25冊目になります。

　その本書『速習 Astro』は、JavaScriptフレームワーク「Astro」の解説書です。JavaScriptフレームワークというと、まずはReact、Vue.js、Angularなどが思い浮かびますが、「その二番煎じだろう」と思ってAstroに触れてみると、雰囲気は結構違います（編集者的には、良い意味で予想が外れた感じです）。

　まず、AstroはWebアプリではなく、Webサイトの開発を得意とするフレームワークです。コンポーネントを組み合わせてページを作成する点はおなじみながら、最終的に生成された結果は、HTML＋CSSで構成される静的なページです（こんな性質を、公式サイトでは「デフォルトでゼロJS」と謳っています）。

　もちろん、JavaScriptを含めることもできますが、基本は「あまり変化しない」コンテンツ中心のページがターゲットなわけです。その性質上、静的サイトジェネレーター（SSG：Static Site Generator）と呼ばれます。

　少しフロントエンドに触れたことがある人であれば、この部分だけでも、React、Vue.js、AngularなどのJavaScriptフレームワークとは、ちょっと違いそうだな、と思われるのではないでしょうか。

　具体的な内容について、興味を持たれた方は、是非、本書をご覧いただければと思います。Kindle Unlimitedでお読みいただくことも可能です。

　本書が、皆さんにとってAstroに触れる一助となることを願っています。ご感想、ご意見などもお待ちしております。以下、本書をお読みいただいた「嶽 雅也」さんからのレビューもどうぞ！

一般読者からのコメント（嶽 雅也さん）

導入／私の前提知識

　Webフロントに関しては、Vueでの実務経験が半年、Reactは1年くらいの実務経験がありつつ、TypeScriptはFirebase Functionsなどでの経験があるくらいです。

　主に最近の主戦場はモバイルアプリ、バックエンドでした。

書評のサマリー

　端的に自分がSSGの理解はしていたものの、実際にGatsbyやAstroなどを使ったことがなかったので、それらの概念を速習で手を動かして学べて勉強になりました。

　SPAではなくMPAなので、技術が一周回ってきた感じがありますが、作るものによってはReactで実装しており、Astroで十分だろうなとは思いました。

　また、フロントエンドに詳しくない方でもnpmの使い方（npm runするとどこのコマンドが叩かれるなど）から解説していて、初心者向けにも説明が充実している印象を受けました。

　加えて、Astroで実際にWebサイトを作るとしたら、必要な要素がモリモリ詰め込まれていてとても勉強になり、Webフロントに詳しくない人にもぜひ読んでもらいたい内容が多いと感じました。

書評

　以下、書籍あるいはAstroに関しての内容をつらつらと記載していきます。

Part2：Astroの基本

　「---」をコードフェンスとして、JavaScriptを書く場所として分離しているとか発想がライブラリレベルでカバーしているのがすごいと思いました。

　Scoped Styleもとても良いなと思っており、必要に応じてグローバルスタイルも選択できる思想は良いかと思いました（実務では結構カオスになった現場を見てきたので……）。

　Astroオブジェクトは大規模な作りや複雑な構成だと使い方をミスるとカオスになりそうですが、あくまでも静的ジェネレータ的な使い方を中心にするなら良いかなと思いました。

　そして、Routingもファイルベースルーティングなのも良いと思いました。

　書籍としては、Noteで「Propsに予約語が含まれる場合」の対応方法が書いてあったり、実務では遭遇しそうなケースだったのでとても良いと思いました。

　また、全体的にコードを全部載せるのではなく、必要な箇所だけ表示しているのはとてもわかりやすかったです。

　加えて、パスエイリアスなども初心者向けにも説明があって良いと思いました。

Part3：コンポーネントの基本

　Slotという概念を初めて聞いて便利だなと思いました。さっとググりましたが、ReactにはなくてVueにはあるようです。

　set:htmlの説明をしていてくださっているおかげで、使う場合でもXSSの危険性を考慮して使えそうです。

　また、初心者向けにmapメソッドが図付きで説明があるのも良いと思いました。

　加えて、文字列リテラルも言語が違うとわからない概念の方もいると思うので、補足として良いと思いました。

　Slotの使い方について、今回初めて概念を知った方でも使えるように、いろんなケースをカバーして記載してもらえて、実際に使う時には困らなさそうです。

　レビューの続き、詳細はブログをご覧ください。

仕様

• 書名：『速習 Astro』
• 著者：山田祥寛
• 出版社：WINGSプロジェクト
• 頁数：261ページ
• 定価：700円（税込）
• 色数：4色
• 刊行日：2024年8月8日

目次

Part 1：イントロダクション

• 1.1 WebアプリとWebサイト
• 1.2 ページ開発を効率化するためのフレームワーク「Astro」

Part 2：Astroの基本

• 2.1 Astro開発の準備
• 2.2 基本的なアプリの作成
• 2.3 サンプルアプリの内容を読み解く
• 2.4 以降の学習を進めるにあたって

Part 3：コンポーネントの基本

• 3.1 {…}式
• 3.2 条件分岐と繰り返し処理
• 3.3 スロット

Part 4：スタイルとクライアントスクリプト

• 4.1 スタイルシート
• 4.2 クライアントスクリプト

Part 5：ルーティング

• 5.1 ファイルベースルーティング
• 5.2 動的ルーティング
• 5.3 ページネーション

Part 6：組み込みコンポーネント

• 6.1 画像を最適化する - Imageコンポーネント
• 6.2 デバイスに応じて最適な画像を選択する - Imageコンポーネント（2）
• 6.3 ページ遷移にアニメーション効果を付与する - ViewTransitionsコンポーネント
• 6.4 ソースコードをハイライト表示する - Codeコンポーネント
• 6.5 オブジェクトの値を簡単に確認する - Debugコンポーネント

Part 7：データベース連携

• 7.1 Prismaの準備
• 7.2 アプリからPrismaへのアクセス
• 7.3 オンデマンドレンダリング

Part 8：さまざまなコンテンツ形式

• 8.1 Markdown形式
• 8.2 MDX形式
• 8.3 エンドポイント（.ts／.js形式）

Part 9：コンテンツコレクション

• 9.1 コンテンツコレクションの準備
• 9.2 コンテンツコレクションの取得