もう放置して長い当ブログ...なので、Adsenseの自動広告ってのを試してみようかと思ってONにしたら、すごいことになった！
これは中々に酷いですね。
とまぁそれはさておき、すごい久しぶりに個人の趣味っぽい感じのサイト作りました。
なんで恐竜！？って感じしますね。
正直、恐竜には全然興味なかった側の人間です。
作った経緯
Web制作は、タスクランナー全盛期から変わり、WordPressもちょっとずつ利用者が減っているとかどうとか。
そんな中、Jamstackなアプローチが徐々に増えてきてるかと思います。
で、Jamstackなアプローチでサイトを制作するのには、静的サイトジェネレーターが必須となってくるのですが、その静的サイトジェネレーターの中で、今一番勢いが有ると思われるのが「Astro」です。
ただ、このAstroは、ReactとかVueとかをけっこう触ってる人には取っつきやすい反面、Javascriptが苦手な方にはハードルが高いような印象でした。
ボクも気にはなっていましたが、Javascriptは得意ではないので躊躇っていた部分もありました。
でもホントここ最近のトレンドを見てると勢いがすごいんですよね。
これはさすがにそろそろちゃんと触っておかねばいかんなと思っていたんです。
そんな折、5歳になったばかりの息子が恐竜にハマっているのを見て「Astroの勉強も兼ねて恐竜図鑑みたいなサイトでも作ろう！」と思って作ったんです。
Astroを使ってみて
Astroをしっかり触ってみて、Gulpを使ったコーディングとは開発者体験がだいぶ違うなぁと思いました。
叩いたりするコマンドは似たりよったりでは有りますけど、開発中に更新した際のプレビューの速さとかにはビックリします。
Gulpでやってる場合、ページ数が増えて規模が大きくなると保存してからブラウザがリロードされるまでの時間が徐々に増えていきますが、Astroだと変わらず即反映されるので快適です。
また、Javascriptが得意じゃないと難しいかな？と思っていましたが、公式には丁寧なチュートリアルが有ったり、初心者向けにAstroを解説してる動画とかも有るので、HTML＋CSSは得意だけどJSはちょっと苦手...って人でも十分に使える静的サイトジェネレーターだと感じました。
CSSの書き方
一応、CSSを中心に扱うブログと言うテーマがありますので、すごい簡単だけどAstroを使った場合のCSSの書き方でも。
AstroはComponent単位でCSSが書けるんですよね。なので、HTMLが書いてある .astroファイル内にCSSも書く感じで、最初は違和感がすごかったけど、慣れてくると別途CSSファイルを探す必要が無いので「あー、これは楽だなぁ」って思ったりしました。
ちなみに、Sassも標準で対応しているので、コマンド一つ叩くだけでSassも使えるようになります。
例えば、ボタンをComponentにして使ってる場合、下記のような感じで、一つのファイル内にHTMLとスタイルを書きます。
---
const { label, title, href, className = '' } = Astro.props;
---
<p class={`btn${className ? ` ${className}` : ''}`}>
<a href={`${href}`} title={title} target={`${href.startsWith("http") ? "_blank" : "_self"}`} >
<span>
{label}
</span>
</a>
</p>
<style lang="scss">
@use "src/styles/global/_index" as *;
.btn {
a {
}
&.-back {
a {
}
}
}
</style>
で、ここではbtnってclassを付けていますが、別に付けなくても、Astro側で自動的にスコープしてこのComponent以外にはスタイルが当たらないようにしてくれます。
なので、class名に悩まず書いていけるのは楽ですし、スタイルも同じファイルに書いてあることで影響範囲を気にしないで良いのは助かります。
もちろん、今まで通りCSSなりSCSSファイルを用意して書いていく事も出来ますし、スコープさせないこととかも出来ます。
この辺りは、好みや慣れとかでやりやすい方を選んだほうが良さそうです。
そんな感じでわりと懐も深いのがAstroなので、JSわかんない！って人でも試してみると良さそうです。
では、また数年後に！