【ポートフォリオ②】ポートフォリオ制作しながらAstroを勉強する、その勉強方法
作りながら、同時にAstroの勉強をする、というのは楽しい反面、結構時間がかかりました。参考にしたサイトや、動画などご紹介したいと思います。
Astroの勉強方法
① Udemyのコース受講
開発ウェブ開発JavaScript ちゃんと学ぶ Astro
Astroで学ぶ、ヘッドレスCMS＋Jamstackフレームワークでの実装手法
たにぐち まこと（ともすた）さん
② 公式Astro
③ YouTube
Astro Web Framework Crash Course（チャンネル：freeCodeCamp.org 英語）
【初心者OK】Astroで自作ブログを作ってみよう【MicroCMSを使用】（チャンネル：プログラミングチュートリアル）
Astro Crash Course in 20 Minutes!（チャンネル：Coding in Public 英語）
と、この３段階でAstroを学習。この後、ポートフォリオ作り開始しました。
① Udemyについて
ちょうど直前のUdemyのセールで、出たばかりのたにぐちまことさんのAstro講座を購入していたので、手始めにそこからAstroの勉強をスタート。
ともすたのたにぐちさんの講座はかなりおすすめです。UdemyやYouTubeで他の講座もたくさん受講していて、なんといっても丁寧な説明と、ほどよいスピード感。安定感ばつぐんの講座です。一番最初にAstroを勉強するなら、こちらの講座がおすすめです。少し時間が短い講座なので、さくっと学べました。
ちょうど、先日の「#朝までマークアップ」セミナーでもたにぐちさんがAstroをご紹介されてたみたいですね（アーカイブ購入済みでこれから観ます）観ました！
Next.jsを勉強したところだったので、Astroコースは構造も似ているので割とすんなり進みました。
ここで、 インストールの際、TypeScriptを選んでしまって、講座のコードをそのまま模写したら、エラーが出てハマってしまい一時停止しました。そこからTypeScriptのページをあさって読み込む時間を取られ、ここが一番苦労しました。
② 公式チュートリアルについて
公式サイトのドキュメントにある、チュートリアルで、markdownを使ったブログサイトを作ってみました。
こちらもちょっとした時間を使って数日で終了しました。英語を日本語に翻訳したものなので、少しとっつきにくいなというのが最初の印象でしたが、Udemyの講座を終えた後だったので、より深くAstroの機能について学べました。
③ YouTubeについて
この先は、Astroと一緒に使おうと思っている、「Versel」や「microCMS」「Tailwind CSS」との連携の確認をするためにこちらの3つの動画をピックアップ。
一部英語のチャンネルですが、比較的ゆっくりきれいな英語で話してくれるので、ソースを見ながらだとわかりやすいかと思います。
まだAstroについて取り上げているYouTubeチャンネルが少ないので、これから増えていってほしいところです。
と上記のようなロードマップで、Astroの学習をし、この後手探りでAstroポートフォリオ作りを開始しました。
作ってみたら余計思ったのですが、まだまだAstroに関しての情報が少ないです！
特に、tailwindと組み合わせた時、verselを使う時、microCMSと連携したとき。Astroとの組み合わせがない時は、Next.jsの記事も探してみたりもしました。
こんな感じで、ひとつのことを調べるのにかなり時間がかかる。
あちこち探し回って、GitHubのソースを探って、ツギハギで書く。そうすると、案の定エラーが出てまた調べる。ソースを自分の環境に合わせて書き直す。そんなこんなで、時間がかなり溶けました。
今回は最低限機能に限定して制作したので、この後、ちょっとずつアップデートしていけたらなと思っています。