🫠

Atsroという最新JavaScriptフレームワークを使ってみて感動した話...

2023/12/13に公開

Atsroという最新JavaScriptフレームワークを使ってみて感動した話...

どうも皆さんこんにちは、Dingoです。 最近Astroというフレームワークを使ってポートフォリオを作成してみたのでその体験談をせっかくなのでアドベントカレンダーに載せることにしました。
僕のポートフォリオのリンクを下に載せておくので、「Astroとやらでこんなものが作れるんだなー」ぐらいに見ていただければ幸いです。時間があれば英語ですがぜひご覧ください。

https://snowdingo.github.io/portfolio/

Astroをとりあえず使用してみたい方はこちらから↓

https://astro.build/

そもそもAstroとは???

astro-logo-dark.png

Astroは主に静的サイトを作成するのが得意なJavascriptフレームワークです。表示速度やビルド時間をとても短くしながらレスポンシブで魅力的なサイトを作ることが出来ます。
細かい詳細やメリット等は下に貼ってあるリンクから確認してみてください。

https://docs.astro.build/ja/concepts/why-astro/

ごちゃごちゃして気難しいテック用語を使わずにAstroの魅力を3つ挙げると....

  • 表示速度が速い。 ブログやレストランのページとかを作るだけならReactなどの有名どころを使用するより簡単に手取り早く作成できます
  • マークダウン記述に対応 これが何気に1番驚いたのですが、Astroを正しく使用すればマークダウンでウェブサイトのページが作れます。Astroはマークダウンを勝手にHTMLに変換してくれるので、ブログなどのウェブサイトを作るときも整理しやすいです。
  • 使いやすい Astroは僕のような他のフレームワークから移行してきた人でも簡単に使えます。コンポーネントやPublicとSrcといったフォルダ管理方法などの他のフレームワークとの共通な点が多いので移行しても今までの努力は無駄にはならないです。

:::note warn
以上は簡単な例ですが、僕も経験が浅く機能を全部知り尽くしているわけではないのでAstroを長年使用している方から見ると違うかもしれませんがそこはご理解をお願いします。
:::

実際に自分のポートフォリオをAstroで作成してみた感想

ポートフォリオを作成してみた結果、Astroファンになりました。
「軽くてわかりやすい」
この二つのポイントは僕が求めていた方向性と大体あっていたので良かったです。
この方向性について説明すると、僕はReactを勉強していた時があったのですがReactは動的なウェブサービスなどを作ろうと志していなかった僕にとってReact.jsは「重いし毎回新しいプロジェクト作った時の流れ作業感が凄いなー」ぐらいでした。
しかしAstroでは3種類のテンプレートから選べて、さらに流れ作業のようなファイルの削除もせずに済み、フォルダーも簡潔で感動しました。
正直ウェブサービス等の動的ウェブサイトを作成する予定がないのなら有名どころのフレームワーク(Vue、React、Angular)を使用する前にAstroを使ってみてください。

最後に

この記事を読んでなんとなく「Astroって凄いんだな~」と頭の中で思っていただけたのなら幸いです。
今後もAstroを使用して色々なものを作っていく予定なので記事も増やしていきます。
時間があればぜひAstroを試してみてください。
最後までお読みいただきありがとうございました。

Discussion