【書評】速習Astro（ @yyamada )　 - 無限大な夢のあと

今回もWINGSプロジェクトの書籍レビュアーに応募し、献本してもらったので、書評を書きました。
WINGSプロジェクトの皆様、著者の山田様ありがとうございます。
今回は表題の書籍を献本していただきましたので、こちらのレビューをさせていただきます。

速習 Astro 速習シリーズ

作者:山田祥寛
WINGSプロジェクト

Amazon

経緯

役割がマネジメントに移行して1年弱が経ち、以前と変わらずに技術をキャッチアップしていきたい想いがありつつ、手を動かせていない期間が続いていました。
その中で、特にWebフロントエンドにおいては、Vue.jsやReactの経験はあるものの、その急速な変化についていけていませんでした。
どこかのタイミングで手を動かして最新の技術を把握したいと考えていたところ、今回Astroに関する書籍が出版されタイミング的にも非常に良かったため応募するきっかけとなりました。

導入/私の前提知識

Webフロントに関しては、Vueでの実務経験が半年、Reactは1年くらいの実務経験がありつつ、TypeScriptはFirebase Functionsなどでの経験があるくらいです。
主に最近の主戦場はモバイルアプリ、バックエンドでした。

書評のサマリー

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

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

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

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

書評

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

Astroが Astro Dev Toolbarなども提供していて便利だなーと印象を受けました。
React Dev ToolsのようにChrome拡張で入れるより筋は良いなと思っておりました。
また、Auditなどでアクセシビリティに関わる問題を指摘してくれて、昨今のダイバーシティにも配慮しているなと感じました。
また、Settingで詳細のログを出したり、ツールバーの表示場所を変えたり、通知を抑えたりもできるのは便利だなと思いました。
書籍では本番用にでもツールバーの表示/非表示をCLIで無効化の方法まで記載してあったのは親切でした。

Part2: Astroの基本

Astroの話

「---」をコードフェンスとして、JavaScriptを書く場所として分離しているとか発想がライブラリレベルでカバーしているのがすごいと思いました。
Scoped Styleもとても良いなと思っており、必要に応じてグローバルスタイルも選択できる思想は良いかと思いました。(実務では結構カオスになった現場を見てきたので、、)
Astroオブジェクトは大規模な作りや複雑な構成だと使い方ミスるとカオスになりそうですが、あくでも静的ジェネレータ的な使い方を中心にするなら良いかなと思いました。
そして、Routingもファイルベースルーティングなのも良いと思いました。

書籍の話

書籍としては、Noteで「Propsに予約語が含まれる場合」の対応方法が書いてあったり、実務では遭遇しそうなケースだったのでとても良いと思いました。
また、全体的にコードを全部載せるのではなく、必要な箇所だけ表示しているのはとてもわかりやすかったです。
加えて、パスエイリアスなども初心者向けにも説明があって良いと思いました。

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

Astroの話

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

書籍の話

set:htmlの説明をしていてくださっているおかげで、使う場合でもXSSの危険性を考慮して使えそうです。
また、初心者向けにmapメソッドが図付きで説明があるのも良いと思いました。
加えて、文字列リテラルも言語が違うとわからない概念の方もいると思うので、補足として良いと思いました。
Slotの使い方について、今回初めて概念が知った方でも使えるように、いろんなケースをカバーして記載してもらえて、実際に使う時には困らなさそうです。

Part4: コンポーネントの基本

Astroの話

TailWindをプロジェクトに導入するための仕組みがあるのは良いと思いました。
また、Script要素という形でクライアント処理も書こうと思えば書けるのは良いかと思いました。
加えて、React、Vue.js、Svelete、Litなどの連携もできるのはびっくりでした。
正直、静的コンテンツ中心なら個人用途などではこれで十分だなと思いました。

書籍の話

Tailwind CSSの導入をサンプルに入れたのは、最近のフロントエンドをやるにあたっては避けては通れないのでとても良いと思いました。
また、クライアントスクリプトの場所でもTypeScriptを使った場合に型アノテーションが除去されてTypeScriptのコードが処理されていることや、コンポーネントを複数回呼び出した場合にもスクリプトが読み込まれるのは一度だけだったりも記載しておりふ、フロントエンドをやったことがある人が気になるポイントも押さえていてよかったです。
加えて、Reactの連携部分もしっかり解説してもらえて、より実用的に近くなっていて実際に使う時には活用できそうです。
Noteという形でハイドレートについて解説があったのもとても勉強になりました。

Part5: ルーティング

Astroの話

静的ページ中心だったとしても、プリフェッチの機能など絶対に欲しくなるので、備わっているのはとても良いと思い、タイミングも調整できるのは便利だと思いました。
また、ページングやページャーも簡単に実装できるのはとても便利だと思いました。

書籍の話

実務的に必要になりそうな色々なケースの話の説明があったのが良かったです。
また、レストパラメーターの説明などもあって良かったです。
よりかゆいところに手が届くところだと、ルートの優先順位はとても勉強になりました。多分、現実に迷った時にこの書籍に立ち返った上で、公式ドキュメントを読む気がします。
リダイレクト/ページネーションもしっかり押さえていて、使う時にもまずは書籍を参照すると思います。