へなちょこがAstroに手を出してみた【出してみただけ編】
弊社サイトの構成に大幅変更が入る事になったので、界隈で何かと話題のAstroに手を出してみた。
こちらの記事の続きのようなもので、
記事内で言及している「自社商品紹介サイト」から大量のパーツを切り出し順番を変え、めちゃくちゃな構成になりそうではある。
あるけれど、弊社サイトの作業時間を与えて貰えた、この機会にこの子を大幅に見やすく扱いやすく成長させてみようと思う。
Astro何がすごいのか
先人たちが既に仰っているように、プロジェクト内でVue、Reactを併用出来て、HTMLやMDで書く事も出来る。
SassもjQueryも使えるしPugも使えそうでなんか、色々好きに出来る！
そしてサイト自体軽くなるらしい。
サイトスピードの計測ツールでスコアが100になった例も見た。
公式リファレンスサイトでは
Astroは……
コンテンツ重視: Astroは、コンテンツが豊富なWebサイトのために設計されています。
サーバーファースト: HTMLをサーバーでレンダリングすることで、Webサイトの動作が速くなります。
デフォルトで高速: Astroで遅いウェブサイトを構築することは不可能です。
簡単に使える: 専門家でなくても、Astroで何かを構築できます。
充実した機能と柔軟性: 100以上のAstroインテグレーションから選択できます。
と紹介されている。
トレンディなアプリケーション開発に特化したフレームワークではなく、Web制作に特化したフレームワークを信念に設計開発してくれているようで。
私のように本格的な開発は出来ない、色々ちょっとかじった程度のスペックの人には凄く有り難いと思う。
Vueで構成するにはオーバースペックだと思ってたWebサイト制作も、既存コンポーネントを持ってきて使いたい場所で好きに呼び出せるのは本当に便利だと体感した。
一般的なブログサイトを作りたいならチュートリアルを一通りやれば、なんとなく理解出来る。
チュートリアルページ
メモを取ったり調べたりしながら、5時間くらいで終わらせたと思う。
凄く丁寧に書かれている。
分からなくなった時もチュートリアルに戻れば大体理解出来るし、検索窓から調べたい事を調べても大体は丁寧に説明してくれている。
それでも情報が少なくて手詰まり感を感じる時もあるけれど、現時点で完璧を求めず出来る範囲で作っていって、出来ないところはjQueryで何とかしたり、HTML+CSSベタベタで書いちゃっても良い感じにビルドしてくれる。
なんか、すごい。
たのしい。
出来ない事で時間を溶かして結果うまく動かない事が続くと嫌になっちゃうけど、「貴方がやりやすいようにやってごらん。余力があればこんなやり方もあるよ。」と言って貰えてるようで、成功体験も積めて良いことづくし。
Astroさん、やさしい。
ありがとう。
私たちの味方たにぐちまことさん
ちなみに文字だけ読んでいて、なんとなく腹に落ちなかった事を調べて見つけたのが、たにぐちまことさん。
チュートリアルを動画で説明してくれていて、助かります。
いつも私たちの側にいて下さってありがとうございます。
Astro公式ページは英語なので敷居が高いと思ってる人や、テキストより動画の方が理解しやすい人は是非こちらを視聴してチャレンジしてみて欲しい。
Astro、たぶん夢中になる
Gulp使い始めた時も思ったけど、それ以上の体験。
キャッチアップしんどいとか思ってないで、話題になるには理由があるんだからもっと早く手を出していたら良かった。
jQueryとは別れたはずなんだけど、やっぱり忘れられなくて会っちゃうんだよね…な人。プラスVueともちょっと付き合った事ある人ぜったいおすすめ！
React先輩と遊んだことがあるとより良いかもね！
さあ、叩いてみよう
# create a new project with npm
npm create astro@latestこわくないよ。
【おまけ】へなちょこでも理解できちゃう役立ちそうな書籍
jQuery最高の教科書
私は宗教上の理由でjQuery使えない人ではないので、2023年現在変わらずお世話になっている。新しい書籍は買ってないけど、発売から約10年経ってなおタイトルに負けない最高の教科書である事は間違いない。
ていうかまだバージョン更新してくれてるオワコンとか言わないでjQuery…
これからはじめる人のJavaScript/Vue.jsの教科書
間違いなし。Udemyも合わせて買えば尚良し。
(Udemyセール期間でなくても、Twitterで良く最安値クーポンを出してくれているので正規料金で買わずとも受講できます。ちなみにUdemy自体しょっちゅうセールやってます。正規料金で売る気なんかなゲフンゲフン)
Webデザインの現場で使えるVue.jsの教科書
良く使うコンポーネントをまとめてくれているので、Vue基本の本をやってから読めばピックアップして使えるし、理解が深まってだいぶお世話になった。
りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】
JavaScriptの基本をやって、React何からしたら良いのか分からない人はこの書籍から入るとGoodなんじゃないか。デキる先輩との会話でゆっくり進めていけるので嫌にならず読めて、②基礎、③応用と一冊ずつ丁寧に執筆して下さっている。
なんちゃってすべて完全に理解したレベルの知りたがりなだけの私の紹介なので、サンプルとか見て自分に合った書籍で遊びましょう。
この記事が気に入ったらサポートをしてみませんか？