AstroのProjectを作ってみた話

はじめに

ゆとり世代の中野です。

さっそくチャレンジについて書いていきます。

チャレンジする背景

AstroでProjectを作ってみる

チャレンジ内容

pnpmを使ってAstro(React+TailwindCSS+TypeScript)のProjectを作成する

やったこと

Project(TypeScript)を新規作成する

pnpm create astro@latest

astro   v1.7.2 Launch sequence initiated.

✔ Where would you like to create your new project? … 任意のProject名
✔ How would you like to setup your new project? › a few best practices (recommended)
          ■■▶ Copying project files...(node:65147) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
✔ Template copied!
✔ Would you like to install pnpm dependencies? (recommended) … yes
✔ Packages installed!
✔ Would you like to initialize a new git repository? (optional) … yes
✔ Git repository created!
✔ How would you like to setup TypeScript? › Strict
✔ TypeScript settings applied!

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./任意のProject名
         Run pnpm dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut!
╰─────╯

Reactを追加する

pnpx astro add react

TailwindCSSを追加する

pnpx astro add tailwindcss

開発環境を起動する

上記で作った任意のProject名に移動する

cd ./任意のProject名

起動する

pnpm run dev

Editorの設定

vscodeのプラグインを追加した

Astro - Visual Studio Marketplace

Extension for Visual Studio Code - Language support for Astro

marketplace.visualstudio.com

結論

上記の設定行い雑なReactを1つ作りAstroにインポートしてみたら使えた

さいごに

必要な設定をAstroコマンドを叩くと全部よしなにやってくれて最高！

自動CLIでAstroをインストール

Astroをインストールする準備はできましたか？自動または手動セットアップガイドにしたがって開始してください。テキストエディタ - VS Codeと公式Astro拡張機能を推奨します。ターミナル - Astroは、コマンドラインインターフェイス（CLI）からアクセスします。 create-astro は、新しいAstroプロジェクトをゼロから始めるもっとも速い方法です。オンラインプレビューブラウザでAstroを試してみませんか？ Astro.new では、スターターテンプレートを利用し、ブラウザから離れることなく、新しいAstroプロジェクトを立ち上げられます。ターミナルで以下のコマンドを実行すると、便利なインストールウィザード、 create-Astro が起動します。 create-astro ウィザードは、新しいAstroプロジェクトのセットアップの全ステップを案内します。このウィザードはどのディレクトリでも実行でき、始める前にプロジェクト用の新しい空のディレクトリを作成する必要はありません。新しいプロジェクト用の空のディレクトリがまだなければ、ウィザードが自動的に作成します。すべてがうまくいけば、「Ready for liftoff!」というメッセージの後に、いくつかの推奨する「Next steps」が表示されるはずです。新しいプロジェクトディレクトリに cd で移動し、Astroの使用を開始します。もし create-astroウィザードで npm install のステップをスキップした場合は、続行する前に依存関係をインストールしてください。 Astroには、プロジェクト開発に必要なものをすべて備えた開発サーバーが内蔵されています。 Astro dev コマンドを実行すると、ローカルの開発サーバーが起動し、新しいウェブサイトが実際に動作しているところをいち早く見られます。すべてのスターターテンプレートには、あなたに代わって astro dev を実行するスクリプトがあらかじめ設定されています。お好みのパッケージマネージャーでこのコマンドを実行し、Astro開発サーバを起動します。うまくいけば、Astroは http://localhost:3000 でプロジェクトの開発サーバーを起動します！ Astroは src/ ディレクトリのファイル変更を自動検出するので、開発中に変更を加えてもサーバーを再起動する必要はありません。ブラウザでプロジェクトを開けない場合は、 dev コマンドを実行したターミナルに戻って、エラーが発生したか、またはプロジェクトが上記のリンク先とは異なるURLで提供されていないか確認してください。成功です！これでAstroを使った開発を始める準備ができました！🥳 ここでは、次に調べることをおすすめするいくつかのトピックを紹介します。どのような順番で読んでもかまいません。また、このドキュメントを少し離れて、新しいAstroプロジェクトのコードベースで遊びながら、問題にぶつかったり、質問があったりしたときに、ドキュメントに戻ってくることもできます。 📚 フレームワークを追加：インテグレーションガイド (EN)で、 npx astro add を使用してReact、Svelte、Tailwindなどをサポートし、Astroを拡張する方法を学びます。 📚 サイトをデプロイ：デプロイガイドで、Astroプロジェクトをビルドしてウェブにデプロイする方法を学びましょう。 📚 コードベースを理解：Astroのディレクトリ構造については、ディレクトリ構造ガイドで詳しく説明します。

docs.astro.build

エディタのセットアップ

エディタをカスタマイズし、新機能を追加して開発者体験を向上させましょう。 VS CodeはMicrosoft社が開発した、web開発者に人気のあるコードエディタです。VS Codeのエンジンは GitHub Codespacesや Gitpod といった人気のあるブラウザ内コードエディタもサポートしています。 Astroはどのようなコードエディタでも動作しますが、VS CodeはAstroで開発する際におすすめのエディタです。私たちはいくつかの重要な機能の追加と、開発者体験を向上させる公式の Astro VS Code拡張機能をメンテナンスしています。早速、 Astro VS Code拡張機能をインストールしてみましょう。 📚 Astroプロジェクトでどのように TypeScriptをセットアップ (EN) するのか見る。素晴らしいコミュニティが他の人気エディタ用の拡張機能をメンテナンスしています。 JetBrainsは、今後 Webstorm IDEでAstroをサポートすることを発表しました。ロードマップによると、Astroは2023年3月末の2023.1リリースでサポートされる予定です。 JetBrainsの次期IDEである Fleet は言語サーバーもサポートしているため、現在利用可能なツールはそこで問題なく動作するはずです。ローカルエディタに加え、Astroはブラウザで動作するオンラインエディタでもきちんと動作します。 StackBlitzとCodeSandbox - ブラウザ上で動作するオンラインエディタで、.astroファイル用のシンタックスハイライトをサポートしています。設定やインストールは不要です。 GitHub.dev - Web ExtentionsとしてAstro VS Code拡張機能をインストールでき、拡張機能の一部をフルに利用できるようになります。現在のところ、シンタックスハイライトのみをサポートしています。 Gitpod - Open VSXから公式のAstro VS Code拡張機能をインストールできるクラウド上のフル開発環境です。 ESLintはJavaScriptとJSX向けの人気のリンターです。Astro向けのサポートとしては、コミュニティがメンテナンスしているプラグインをインストールできます。あなたのプロジェクトにESLintをインストールし設定するための詳細については、同プロジェクトのユーザーガイドを参照してください。 PrettierはJavaScript、HTML、CSSなどのための人気のフォーマッターです。.astro ファイルをフォーマットするためには、公式のAstro Prettierプラグインを使用してください。まず、Prettierとプラグインをインストールしましょう: これにより、Prettierは実行時にプラグインを自動的に認識し、.astro ファイルを処理します。 Prettierプラグインの対応オプション、VS Code内でのPrettierの設定方法などについては、 PrettierプラグインのREADME を参照してください。 pnpm との併用 Prettier内のアップストリームの問題により、 pnpm を使用した場合にはプラグインが自動的に認識されません。プラグインを認識させるためには、Prettierの実行時に以下のパラメータを付与する必要があります。 VS Code内でPrettierを使用する場合は、さらに追加の設定が必要です。詳しくはプラグインのREADMEを参照してください。

docs.astro.build

yutanakano

WEBエンジニア

大阪生まれのゆとり世代です

趣味はバイクでツーリングに行くこと

愛車は Ninja ZX-25R SE KRT EDITION

Expoでプロダクトを作っています