ブログ/お知らせ Knowledge
「Astroフロントエンド開発の教科書」をご献本いただきました！
アルテガエンジニアのHarukichiです。
今回、WINGSプロジェクト様から「Astroフロントエンド開発の教科書」をご献本いただきました！
アルテガでは、お仕事に合わせて最適な技術選定を心がけていますが、最近はAstroも大活躍しています。
普段から使っているAstroの書籍が発売されたということで、ワクワクドキドキ1ヶ月間でコツコツと読み込みました。
少し感想を書いてみたいと思います。
同じく普段からAstroを使われる方や、これから使う予定のある方などのご参考になれば幸いです。
著者・WINGSプロジェクトについて
山田祥寛さんを筆頭にたくさんの技術書を執筆されている印象なのですが、
中でも私がお世話になったのは「JavaScript本格入門」です！
私にとってはJavaScriptの第一の教科書でした（今でも手元にあります）
また、独習シリーズもとても有名ですよね！
書籍の概要
目次ベースでざっくりご紹介すると、こんな内容が書かれています。
2. Astroコーディングの基本
3. コンポーネント間連携
4. ルーティングとレイアウト
5. コンポーネントベースのWeb制作
6. 動的サイトとSSR
7. Astroでのコンテンツの扱い
8. Astroのその他の機能
1-5章までは、Astro初心者から始めて静的なWebサイト1つを作り上げる難易度。
6章以降は、中級者以上に向けたより発展的な内容になっている印象です。
Astroフロントエンド開発の教科書
ここからは、いくつか嬉しいと思ったポイントやハイライトをお伝えできたらと思います!
TypeScriptの解説もあり
本書は、Astroってなんぞや？の部分から、実際の導入、初期設定まで本当に手取り足取りの解説付きのチュートリアルです。
全く知識がなくてもAstro入門できると思います。
個人的に地味に嬉しかったのは前半にTypeScriptの解説もあったことです。
初心者向けにAstro開発に必要な部分をかいつまんで解説してくれていて改めて勉強になりました。
(本書の目次を抜粋。© WINGSプロジェクト)
その後の開発内でもインターフェースを使ったTypeScriptの型定義やループとPropsを組み合わせるところも詳しく図解がありました。
がっつりTypeScript入門していたわけではないWeb制作者には嬉しい内容だと思います⇦私のこと
詳しいルーティングの説明
基本のAstroコーディングの後半には、ルーティングの説明が詳しくありました。
Astroはファイルベースの静的なルーティングと、1つのastroファイルから複数のパスを作れる動的ルーティングがあります。
動的ルーティングは、例えば、ヘッドレスCMS化でAstroを使う時に[slug].astroといったファイルを作って、複数の投稿詳細ページを動的に作ったりするときに使いました。
動的なルートを静的パスへと変換するためのgetStaticPaths()は、公式ドキュメントでしか勉強したことがないですが自分は結構混乱しました。説明が豊富だったのが嬉しいです。
ページネーション機能の説明もあります。
paginate()関数についての説明や、Pageオブジェクトの構成なども一覧化されていてわかりやすく、ヘッドレスCMS化の時に手元に欲しかった！笑
コンポーネントベースのWeb制作を体験できる
本書の中盤では、架空のキャンプ場を紹介するWebサイト制作のケーススタディを行うことができます。
それまでに解説されてきたAstroコンポーネントやルーティングを体験しながら1サイト作成することができるので、
初心者の方でもAstroを使ったWeb制作の全貌が掴みやすいと思います！
最後には実際にビルドをして、実際にdistの中にどのような静的ファイル（納品物）が生成されるのかを確認できました。
また、ニュースの詳細ページはマークダウンファイルで管理されていて、その点についてはケーススタディを進める中で追加で学習できるようになっています。
動的サイトとSSR
先ほどのキャンプ場の架空サイトに「Web APIを使った転機情報の動的取得」の機能を追加できる点も面白いです。
また、出来上がったサイトをSSRプロジェクトへ改造してNetlifyにデプロイする章がとても詳しかった！
環境変数の利用方法は、私も自社サイトのプレビュー機能でSSRを使った時に一度学習したのですが、復習に役立ったので嬉しいです。
実務に活かしたいポイント
巻末付近で、Storyblokを使用したニュースのヘッドレス管理の方法が詳しく載っていました👀
Storyblok自体を初めて知り、microCMSなどとのインテグレーションの紹介ではないんだ・・・！と興味津々に読みました。
(本書の解説（P.273）を抜粋。引用の範囲は必要最小限です。© WINGSプロジェクト)
あとは、多言語サイトに関する設定も載っていました。こちらも使ったことがないので新しい知識でした！
現在のパスからLocaleを判定してから言語を出し分けするなどの方法が必要だと思っていたので、Astroで簡単に多言語サイトが作れたら嬉しい👀
v4.0から追加されていたんですね・・・！
(本書の解説（P.334）を抜粋。引用の範囲は必要最小限です。© WINGSプロジェクト)
まとめ
本書『Astroフロントエンド開発の教科書』は実務で使える知識を体系的に、かつ入り口から丁寧に届けてくれる一冊でした！
Astroの基礎コーディングについて学んだらケーススタディで手を動かして体験できるので、Astroで1サイト作れるようになりたい方におすすめしたいです。
また、TypeScriptの基本や動的ルーティング、getStaticPaths／ページネーションの扱い方を実例込みで解説してくれつつ、SSR化や環境変数、実際のデプロイ周りの説明も実務で再確認したくなる内容で、個人的に復習にも使えて嬉しいです（個人的にはVercelの例もあるとさらに嬉しかったです）
Storyblokでのヘッドレス化や多言語対応といった応用的なトピックも後半に自然につながる構成になっていて、
Astroを使って本番構築したい人が手元に置いて参照し続けられる実用性があるなと思いました！
興味があればぜひお手に取って、Astro開発のリファレンスにしてみてください。
したっけね！
Search
