【新刊】Astroのビギナー向け入門書リリース

Astroの入門書リリース

本日、日本でも人気を集めるウェブフレームワークAstroの入門書『はじめてつくるAstroサイト（三好アキ著）』をリリースしました。

ビギナーを対象にしているので、JavaScriptやReact、Vueなどの知識は不要です。

Astroは最新バージョンの5（Beta）を使っています。

Kindle Unlimited利用者は無料購読可能です。

はじめてつくるAstroサイト

【2024年11月リリース。人気のフレームワーク「Astro」の使い方をすばやくマスターできる本】

680円 → 0円

Amazonのページに移動する

HTMLとCSSを終えたビギナーに最適なAstro

Astroは2021年にベータ版がリリースされた比較的新しいウェブ開発ツールです。

シンプルなウェブサイト（静的サイトジェネレーター）から、ログイン機能をもった本格的なウェブアプリケーションまで開発できる守備範囲の広さを強みとしています。

Astroは他のフロントエンド・フレームワーク、特にNext.jsやNuxtなどと並んで紹介されることがよくありますが、実際にはこれらとはやや異なる位置付けの開発ツールです。

Astroは、ReactやVueといった特定のJavaScriptフレームワークをベースにしていません。

そのため必要となる前提知識が少なくてよく、HTMLとCSSを知っていればAstroを使えてしまいます。

本書を読んでもらうとわかりますが、Astroで使う.astroファイル内で書くコードはHTMLとほとんど同じです。

同時に.astroファイルでは、importで他のコンポーネントを読み込んだり、JavaScriptのコードを書くことも可能です。

つまりAstroであれば、HTMLというすでに慣れ親しんだ知識をベースとしながら、ゆっくりとJavaScriptのコード、さらにはReact／Vue開発で標準となっているコンポーネントの使い方にも慣れていくことができるのです。

HTMLとCSSを終えた人が、次の一歩へ進むときに最適なツールがAstroだと思います。

フロントエンド学習の順番として「HTML → CSS → JavaScript」、あるいは「HTML → CSS → React・Vue（JavaScript）」という流れが一般的です。

ここにAstroを「HTML → CSS → Astro → React／Vue／JavaScript」と挟めば、よりスムーズにモダンなウェブ開発スキルを身につけられるでしょう。

本書の特徴（2部構成）

本書の大きな目的の一つは、「Astroサイトをできるだけ早く完成させて達成感を得る」ということです。

細かな知識や包括的理解を最初から目指すのではなく、とにかくAstroサイトをひとつ、すばやく完成させるのです。

そのため本書は以下のような2部構成となっています。

• 最低限の機能を使ってすばやくAstroサイトを完成させ、達成感を得る前半部（第1-3章）

• 発展的事項を紹介しながらサイトの完成度を高める後半部（第4-5章）

各章のくわしい内容は本記事下部にある目次を参考にしてください。

姉妹書について

本書は下記既刊書の姉妹書という位置付けです。

はじめてつくるNext.jsサイト

【最新バージョンのNext.jsとAppフォルダで、時短でNext.jsを習得。作りながら学ぶ実践形式】

1848円 → 0円

Amazonのページに移動する

はじめてつくるNuxtサイト

【Vueフレームワークで一番人気のNuxt。最新Nuxtの基礎と使い方をしっかりマスターできる】

1848円 → 0円

Amazonのページに移動する

はじめてつくるGatsbyサイト

【人気フレームワークGatsbyを2時間でマスター。ハイパフォーマンスのウェブサイトを簡単に作ろう】

1760円 → 0円

Amazonのページに移動する

これらの既刊書では同一のウェブサイトを、Next.js、Nuxt、Gatsbyという異なるツールで作りました。

本書はAstroを使って同じウェブサイトを作り上げます。

上記姉妹書と合わせて読むことで、AstroとNext.js／Nuxt／Gatsbyの違いや、どの場面でどのツールを選ぶべきかを理解できます。

目次（はじめてつくるAstroサイト）

はじめてつくるAstroサイト

【2024年11月リリース。人気のフレームワーク「Astro」の使い方をすばやくマスターできる本】

680円 → 0円

Amazonのページに移動する

第1章　基礎知識と開発ツールの準備
Astroの特徴
ターミナルの使い方
Node.js
npm
VS Code
エラーが発生した場合の対処方法

第2章　Astro開発
Astroのインストール
フォルダの中身
Astroを起動する
Astroのページの仕組み
トップページ開発
Imageコンポーネント
コンタクトページ開発
共通コンポーネントの作成
ブログページ開発（記事一覧ページ）
ブログページ開発（個別記事ページ）

第3章　サイト公開
ビルド
Netlify Drops
ゼロJavaScriptの確認

第4章　ブラッシュアップ
メタデータ
コンタクト機能
ページ移動をなめらかにする
スキーマ
記事の前後移動機能
ページネーション

第5章　Astroの様々な機能
styleタグ
API
ReactやVueをAstroで使う
srcとpublicフォルダの違い
レンダリングモードの切り替え