Zenn
🌌

【Astro】Javascriptを引っぺがして爆速ウェブサイトを作ろう

2021/07/21に公開
JavaScript
Node.js
frontend
Astro
tech

見出し

Astroを使って爆速のウェブサイトを作ってみよう
2021/7/21時点で日本語ドキュメントがないので試しに使って増やしていこう

はじめに

想定読者

「Astro」という単語を知らなかった人
とにかく爆速のウェブサイトを作ってみたい人

目的

  • Astroの概要をつかむ
  • Astroを使ってちょっとしたWebページをデプロイしてみる
  • ついでにちょこっとだけソースコードを読んで使ってみたい度を上げる
  • これを読んで気になったオタクが日本語記事にするのを願う

Astroとは

Astroとは最近できた静的サイトビルダー。Gatsbyのような静的サイトジェネレーターに近いイメージを持つとわかりやすい。自分の好きなフレームワークやライブラリを使い開発を行い、Astroを通してビルドする。最終ビルドの際AstroはJavascriptを全て引っぺがす。(デフォルト設定の場合)
これによってAstroは高速なウェブページ表示をサポートする。もちろんJavascriptを追加することはもできる(ハイドレーション)
最終ビルドの際にJavascriptを全てひっぺがすため、TypescriptやSass、その他npmパッケージは動作する。

On-Demand Components: Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.

実際に使ってみよう

任意の作業ディレクトリでastroを使う。凄い簡単

mkdir hogeDir
cd hogeDir
npm init astro

今回は試しに使えればよいのでStarter Kitを選ぶ

Welcome to Astro! (create-astro v0.5.0)
If you encounter a problem, visit https://github.com/snowpackjs/astro/issues to search or file a new issue.

> Prepare for liftoff.
> Gathering mission details...
? Which app template would you like to use? » - Use arrow-keys. Return to submit.
>   Starter Kit (Generic)
    Blog
    Documentation
    Portfolio

使用する予定のフレームワークをSpaceで選択する(複数回答可)
今回はReactを選択する

√ Which app template would you like to use? » Starter Kit (Generic)
? Which frameworks would you like to use? »
Instructions:
    ↑/↓: Highlight option
    ←/→/[space]: Toggle selection
    a: Toggle all
    enter/return: Complete answer
( )   Preact
(*)   React
( )   Svelte
( )   Vue

自分の好きなツールでinstallする。個人的にpnpmが好きなので今回はpnpmを使う。
npmでもyarnでも良い。

pnpm install
pnpm start


localhostで動かせた例

ビルドしてNetlifyに上げる。ビルド先はdistディレクトリがデフォルト。

pnpm build

Netlifyに上げたものはリンク先へ。

パフォーマンスを見てみる


デフォルトしか追加していないが速い。無駄なjavascriptがほとんど走っていないのがわかる。React部分だけハイドレーションでjsが追加されている。

ソースコードをちょこっとだけ読んでみる

大体のディレクトリ構成図

/
├── public/
│   ├── robots.txt
│   └── favicon.ico
├── src/
│   ├── components/
│   │   └── Tour.astro
│   └── pages/
│       └── index.astro
└── package.json

astroファイルという独自のファイルを扱う。基本的にはhtmlでJSXになんとなく似ているように思う。VSCodeでは既に拡張機能が作られているのでハイライトは機能する。


---
import Tour from '../components/Tour.astro';
import ReactCounter from '../components/ReactCounter.jsx';
let title = 'My Astro Site';
---
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{title}</title>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <link rel="stylesheet" href="/style/global.css">
    <link rel="stylesheet" href="/style/home.css">

    <style>
        header {
            display: flex;
            flex-direction: column;
            gap: 1em;
            max-width: min(100%, 68ch);
        }
    </style>
</head>
<body>
    <main>
        <header>
            <div>
                <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
                <h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
            </div>
        </header>

        <Tour />

        <ReactCounter client:visible />
    </main>
</body>
</html>

特徴

  • htmlの記述内容を変更したい場合以下のように中かっこで囲む。

<title>{title}</title>

  • ビルド後もjsxを動作させたい場合はハイドレーションを行う。

<ReactCounter client:visible />

きちんと運用するためのポイント

動的なものを使わない場合は脳死でサクサクウェブページを作成できる。
もしも動的なものを扱いたい場合はきちんとハイドレーションを行うこと。

これから始めたい人向け

https://docs.astro.build/getting-started

Discussion