Sota Tech Blog.

Astroを使ってみる - 環境設定編投稿日: 2023年 3月14日

Astroの概要

ずっと触ってみたいと思っていた。
今までは英語学習をやっていた関係もあってプログラミング自体は取りやめていたが最近無事に目標達成をしたので、昨日無事にブログの開発も一度完了としたことでようやく機会がやってきた。

Astroとは

公式サイト
簡単に紹介をするとよくページスピードインサイトなどでページを確認してみると必要ないJSコードがある場合がかなり多いがこのフレームワークを利用することで、不必要なJSを排除してHTMLとCSSで構成されるものになっている。
また、比較的新しいフレームワークになっており、実際にドキュメントを見てみると様々な場面でのユースケースを想定していることがわかるようになっている所感がある。

利用背景

今後プロフィールサイトを刷新する際に選択肢の一つとなることになる点やReactを長く利用している自分にとってもあまり学習コストの障壁を高めることなく開発することができると考えているため。
また、その際の機能についての要件もAstroならより高パフォーマンスで実現することができるようになるだろうと考えたため。

Next.jsとの比較

参考サイト
個人的な肌間としてNext.jsがおそらく比較対象になるだろうと考えている。

類似点

  • AstroファイルはJSXと似ている部分が多い
    • 従来のJSXファイルを利用可能にもなっている
  • レンダリング方法もSSRとSSGの両方完備
  • ダイナミックルーティングを利用することができる
  • コンポーネントベースの開発思考
  • 多くのReactのライブラリを利用できる

相違点

  • MPA（従来のwebサイトの通信方式）
    • コンテンツにフォーカスした思想に合理的であるため
    • サーバー言語とランタイムの部分にJSを利用することでシンプルにし開発体験を向上させている
  • コンテンツ中心を想定
    • サーバー上でファイルをレンダリングを行い、webサイトの実行速度の向上に貢献
    • webアプリケーションの開発は想定されていない
  • Astroファイルでの記述方法
    • スクリプトとコンポーネントの二つで構成されている
    • コードフェンスということを利用して分割できる

コンポーネントスクリプト(.astro)

---
import AstroComponent from '../components/AstroComponent.astro';
import ReactComponent from '../components/ReactComponent.jsx';
import sampleData from '../data/sample.json';

// <X title="Hello, World" />` のように、渡されたコンポーネントプロップにアクセスする。
const {title} = Astro.props;
// プライベートなAPIやデータベースからも、外部データを取得する。
const data = await fetch('SECRET_API_URL/users').then(r => r.json());
---
<!-- Your template here! -->

コンポーネントテンプレート(.astro)

<!-- HTMLコメント対応! -->
{JS コメント構文も有効です。*/}

<Banner />
<h1>Hello, world!</h1>

<!-- コンポーネントスクリプトのpropsやその他の変数を使用します。-->
<p>{title}</p>

<!-- hydrateに`client:`ディレクティブを持つ他のUIフレームワークのコンポーネントを含める: -->。
<ReactComponent client:visible />

<!-- JSXと同様に、HTMLとJavaScriptの式を混ぜる: -->。
<ul>
  {myFavorites.map((data) => <li>{data.name}</li>)}
</ul>

<!-- テンプレートディレクティブを使って、複数の文字列やオブジェクトからクラス名を構築する! -->
<p class:list={["add", "dynamic", {classNames: true}]} />

ここの部分に関しては実際に参考サイトを参考してもらう方がいいかもしれない。

環境設定

// バージョンが古いと最新版のastroを利用することができないため
// n - nodeのバージョン管理
// 参考サイト： https://github.com/tj/n
$ sudo n latest 
----
// 最新のnodeのバージョンになっているいるかどうかを確認
$ node -v
----
$ npm install -g astro
----
$ npm create astro@latest
----
... ~対話の開始 ... recommendを利用することを推奨
----
$ npm run dev
----
> astro-dev@0.0.1 dev
> astro dev
  🚀  astro  v2.1.3 started in 78ms
  
  ┃ Local    http://localhost:3000/
  ┃ Network  use --host to expose

と一連のコマンドを入力して欲しい。
もしここで説明が足りないや何か設定ができないなどあればご連絡ください🙇‍♂️

このようなページが表示されれば成功となる！
個人的にはとても簡単にプロジェクトが作成することができる上に、最近流行りの対話型シェルでのプロジェクト作成ができるためとても簡単に作成することができる。
TSサポートをしてくれているのも嬉しいポイント。

感想

かなり高速での説明となってしまい至らない部分がほとんどだと思うがコメント形で是非指摘してほしい。
またまだまだAstro入門したてなので少しずつ記述方法や概要などをしっかりと掴んでいきたい。
今までの馴染みある記法や技術を利用することができるのは強いのでしっかりと理解を深めていきたい
次はハンズオンをやります！！

匿名でコメント