キノ(@zB75pWavnhDTIxr)です。

今回はAstroというJSフレームワークについて紹介したいと思います。

Astroは、最近になってできたフレームワークでReactやVueに感覚的に近いと思います。

お、久々にプログラミングの記事？

気になっちゃってね……。

Astroのメリット

僕がAstroを気になっている１番の理由は、

『Astroは、スピード重視したウェブサイトを作ることに特化したJSフレームワーク』だからです。

スピード重視？

まあ、いろいろ特色があるんですけど、ここではスピード重視で行かせてください。

スピード重視が何で良いか？

それはSEOに良い影響があるからです。

皆さんも経験があるはずです。

スマホ（あるいはパソコン）で見たいと思ったページが重たいと見たくなくなる……。

以前、僕が見た記事にはユーザーが『遅い』と感じたページの滞在時間は1~2秒ほどだそうです。

ページ表示2秒でユーザーはイライラし始め、3分の1が「もういいや」となる

短いですね。

滞在時間はSEOに反映される重要な項目なので、

僕らエンジニアはウェブサイトのパフォーマンスを上げたい時、なんとかして軽くしたいんです。

内部修正して、要らないコードを削除したり（リファクタリングといいます）、もしもページに画像が使われているのなら、その画像を軽くするとか。

AstroはNext.jsよりも速いということで（スゴイ）、なんでそんなに速いのかカラクリを説明しているページがありました。

『コンポーネントのフロントマターの内部にJavaScriptコードを含められますが、それらはすべて、ユーザーのブラウザに送られる最終的なページからは取り除かれます。その結果、デフォルトではJavaScriptが含められることはなく、より高速なサイトが実現します。』

Astro公式　コンポーネント

Astroテーマを使用してポートフォリオサイトを作ってみた

要するに、astroは公開時に自動的に元々あったJavaScriptを排除します。

その代わりに、その場で必要なHTMLとCSSを生成して、それを公開します。

そんなのことして、機能は大丈夫なの？

大丈夫です！百聞は一見にしかず！

どうです！この動くルフィを！！

Astroのポートフォリオサイト

Astroでポートフォリオサイトを作ってみました。

ルフィにJavascriptをかけてやったところ、開発時と公開時どちらも同じ挙動をしています。

まあ、正直ルフィにJavascriptかけただけでは、ReactやVue、Next.jsと同じですけどね。

Astroテーマをダウンロードしてみよう

Astro公式にいって『Resources』の『Themes』をクリック

適当なfreeテーマを選んでください。（僕はAstroshipを選びました）

vsコードかまたはWindowsならコマンドプロンプト、imacならターミナルを開いて、

管理しやすいように、cd desktopに移動して

慣れない黒い画面に惑わされずに、
git clone (githubで取ってきたURL)を打てばひな形が完成です！

終わりに

まとめ

今日はAstroの魅力について語っていきました。

まだ後発だから、ReactやVueよりリファレンスとか資料が少ないですね

Astroはまだまだ魅力がありますので、Astro公式

勉強頑張っていきたいです！

お疲れ様でした！

では、また

ここまで見てくれてありがとうございました。

こちらもおすすめ↓

【体験談】ブログ初心者がBlog Hacksをレビュー【最初の目標は月20万！？】

2019年3月12日

【体験談】エンジニア初心者がSkill Hacks（スキルハックス）をレビュー【自走可能】

2019年5月5日

The post Astroテーマで高速パフォーマンスとモダンな開発体験しよう！ first appeared on kinoblog　初心者エンジニアブロガーの成長記録！.