Astroってなんなの？？

文字だけ読んでも

いまいちピンとこないので

練習用にインストールして

遊びながらAstroの雰囲気を味わうことにしました。

https://astro.build/

この記事ではいつもより丁寧に解説します。

• 公式ドキュメントのどこを根拠に作業をしたのか
• ターミナルに表示されるメッセージの解釈
• easy-notion-blogで扱っていたNext.jsとの違い

Docsタブをクリック

Getting Startedというタイトルのページが表示される。

下へスクロールし、Start your first projectというタイトルまで行く。

easy-notion-blogでyarnを使ってきたので私はyarnを選び、

yarn create astro

でプロジェクトを立ち上げることにしました。

VSCodeを立ち上げ、ターミナルからyarn create astroを実行

👇

「ディレクトリ名どうする？」と質問されるので….

ディレクトリ名をAstro-learnと命名することにしました。

「ってか、どう使うつもりなわけ？」と質問されたので…

練習用(a few best practices)と回答＼(^o^)／

今度は「yarn をインストールするでいい？」と聞かれたので

Yes( Y )と回答＼(^o^)／

「gitつなげる？」と聞かれたので….

備えあれば憂いなしということでYes( Y )と回答＼(^o^)／

「TypeScriptにする？」と聞かれたら….

迷わずTypeScriptなので、

Strictと回答＼(^o^)／

できた＼(^o^)／＼(^o^)／＼(^o^)／

作ったプロジェクトを開くために

ターミナルにIs と入力し、

今いるディレクトリ内にどんなディレクトリがあるかを確認してみます。

文字だけだとイメージ沸かないので、

実際にディレクトリを開いて同じ名前が並んでいるか確認してみます。

同じ。

さっそくできたてほやほやのAstro-learnを探してみると….

あった👀

ターミナルでは今herohoroディレクトリにいるので

cd Astro-learnでAstro-lernディレクトリへ移動します。

現在地がAstro-learnになりました＼(^o^)／

実際のディレクトリではこんな状態です👇

VSCodeに戻ってさっそくAstro-learnを開いてみましょう＼(^o^)／

👇

表示されました。

右下にAstro拡張機能のおすすめメッセージが表示されるのでインストールしておきます。

👇

練習用とはいえ、

「あのときどの部分をどう変えたっけ？」

といった部分を記録しておくためにGitHubと同期しておきます。

※ 記録する必要の無い方は飛ばしてください

表示されているファイルを【変更】から【ステージ】へ移動します。

👇 【ステージ】に全てのファイルが移動しました＼(^o^)／

コミットメッセージは適当に「first」と一言記入し、コミットボタンを押してみます。

「Publish Branch」と表示されるのでそのままクリック

👇

👇

公開モードでGitHubのリポジトリーを作りたいのでpublicを選びました。

※ 非公開にするかはお好みです

完了すると画面右下に【GitHub上で開く】ボタンが出現するのでクリック

無事Astro-learnリポジトリーを用意できました＼(^o^)／

VSCodeに戻って

開発画面でAstroを見てみます。

ターミナルにyarn dev と入力したらLocalリンクをクリック

👇

VSCodeに戻って

コードの内容を見てみると….

Astroのstylesはどこに書かれているのかを探ると….

pageディレクトリ内にあるindexファイルの後半にstyleが記述されている！！！！

Layoutファイルは何をレイアウトしているのか見てみると….

Next.jsで_document.tsxだった部分に似ている。

Astroは普通のhtmlで書かれてるッ😲

componentsディレクトリ内にあるCardファイルは

Next.jsのコンポーネントと同じ感じかな〜

似てる！！

Next.jsと似てる！！！

だから、

「Astro勉強するぞーーー」

ってスイッチ入れなくても

ふわふわ〜〜〜っといじれそうな雰囲気でした。

改造するにはハードル低そう。

拡張子が.astro になってしまったことで

ドキドキしちゃうけど

見掛け倒しだってことが分かったので

一安心です！！！

※ 数日後、今後の見通しを追記する予定