0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Inclusive_Solutions_LLC

Google ColabでWebフロントエンド・Astroを使ってみる ①環境構築編

0
Posted at

Google Colabというと、Pythonや機械学習の実行環境というイメージが強いかもしれません。

しかし、Colabの実体は、一時的に使えるLinux環境でもあります。

そのため、Node.jsをインストールすれば、AstroのようなWebフロントエンドのフレームワークも動かせます。

この記事では、Google Colab上でAstroを起動し、Notebookの中からWebページを表示するところまでを試します。

この記事でやること

この記事では、次の流れを扱います。

  • Google ColabにNode.jsをインストールする
  • Astroプロジェクトを作成する
  • .astro ファイルを書き換える
  • Astroのbuildを実行する
  • Astroの開発サーバーを起動する
  • Colab上にAstroの画面を表示する

本格的なフロントエンド開発というよりは、HTML / CSS / JavaScript / AstroをNotebook形式で試すための学習環境を作ることが目的です。

そのため、この記事では次の内容は扱いません。

  • Astroのコンポーネント分割
  • Layoutファイル
  • Markdown連携
  • 本番デプロイ
  • React / Vue / Svelteとの連携

まずは、Colab上でAstroが動くところまでを確認します。

なぜGoogle ColabでAstroを動かすのか

Webフロントエンドを学ぶ場合、通常はローカルPCにNode.jsをインストールし、VS Codeなどのエディタを開き、ターミナルで開発サーバーを起動するのが王道です。

ただ、初学者にとっては、

  • Node.js
  • npm
  • HTML
  • CSS
  • JavaScript
  • フレームワーク
  • ターミナル操作
  • ファイル構成

が一気に出てくるため、「画面に文字を表示したいだけなのに、覚えることが多い」と感じる場合があります。
また、

  • 環境を汚さず、すこしだけ触ってみたい
  • どんな使い方をするのかだけ知りたい
  • 触りながら文法・構文・記述ルールのみ確認したい

といったニーズに対して、開発環境を完璧に作ることは負担も大きすぎます。

一方、Google Colabを使うと、Notebookのセルに手順を残しながら、1つずつ実行できます。しかも、Webフロントエンドフレームワーク・Astroは、HTML / CSS / JavaScriptといった、Webの必須技術の初歩がバランス良く登場します。これらの関係を触りながら学ぶ題材としても、Astroは非常に優れていると思います。

Google Colabを使うと、コードを書いた過程がそのまま残せるので、HTML / CSS / JavaScriptのように、少しずつ書き換えながら学ぶ内容と相性もよいです。

学習を進めるために

対象読者

  • html,css,javascriptを触ったことがある人
  • Google Colabを使える人
  • astroを触ったことがある、もしくは、これから使ってみたいと思っている人

すぐ使えるチートシートはこちら Google Colab版

すぐに実行して、試せるコードレシピはこちら。

1. Node.jsをインストールする

Astroを動かすにはNode.jsが必要です。

まず、Colab上にNode.jsをインストールします。

!curl -fsSL https://deb.nodesource.com/setup_22.x -o nodesource_setup.sh
!sudo -E bash nodesource_setup.sh
!sudo apt-get install -y nodejs

!node -v
!npm -v

最後に、

!node -v
!npm -v

で、Node.jsとnpmのバージョンを確認しています。

実行結果として、たとえば次のように表示されればOKです。

v22.23.1
10.9.8

Colabは実行環境が毎回新しくなるため、ランタイムを作り直した場合は、Node.jsのインストールも再実行する必要があります。

2. Astroプロジェクトを作成する

次に、Astroプロジェクトを作成します。

%cd /content
!npm --yes create astro@latest astro-colab --  --template minimal --install --no-git

ここでは、astro-colab という名前のプロジェクトを作成しています。

オプションの意味は次の通りです。

--yes

これがないと、Need to install the following packages… Ok to proceed? (y)といった確認メッセージが出て止まり、インストールが自動で進まなくなります。

--template minimal

最小構成のテンプレートを使います。

--install

依存関係のインストールまで同時に行います。

--no-git

Gitリポジトリの初期化は行いません。

今回はColab上で試すだけなので、Git管理は省略しています。

実行すると、/content/astro-colab にAstroプロジェクトが作成されます。

3. Astroプロジェクトのディレクトリへ移動する

作成したプロジェクトのディレクトリに移動します。

%cd /content/astro-colab

以後の操作は、このディレクトリ内で行います。

4. index.astro を書き換える

Astroのページファイルを書き換えてみます。

%%writefile src/pages/index.astro
---
const title = "Astro on Google Colab";
---

<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>{title}</title>
    <style>
      body {
        background: #ffffff;
        color: #000000;
      }
    </style>
  </head>
  <body>
    <h1>{title}</h1>
    <p>Google Colab上でAstroのdevサーバーが動いています。</p>
  </body>
</html>

ここでは、src/pages/index.astro を直接上書きしています。

Astroでは、.astro ファイルの先頭に --- で囲まれた領域を書けます。

---
const title = "Astro on Google Colab";
---

この部分ではJavaScriptを書けます。

そして、HTML側では次のように {title} と書くことで、JavaScriptで定義した値を埋め込めます。

<h1>{title}</h1>

つまり、AstroではHTMLを書きながら、必要なところにJavaScriptの値を差し込めます。

また、今回はColabの表示上わかりやすいように、背景色と文字色も明示しています。

body {
  background: #ffffff;
  color: #000000;
}

Colabのテーマやiframeの表示状態によっては、文字色が見づらくなる場合があるためです。

5. buildして確認する

いきなり開発サーバーを起動する前に、Astroのbuildが通るか確認してみます。

%cd /content/astro-colab
!npm run build

成功すると、dist ディレクトリに静的ファイルが生成されます。

この時点でエラーが出なければ、少なくともAstroのコードとしては問題なく解釈されています。

開発中は毎回buildする必要はありませんが、最初に一度実行しておくと、設定や文法のミスに気づきやすくなります。

6. Colabからアクセスできるように設定する

Colab上でAstroの開発サーバーを表示するために、astro.config.mjs を書き換えます。

%%writefile astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  server: {
    allowedHosts: [
      '.codatalab-user-runtimes.internal'
    ]
  }
});

Colabでは、通常のローカルPCとは異なるホスト名経由で開発サーバーにアクセスします。

そのため、Astro側で許可するホストを設定しています。

この設定を入れないと、環境によってはColabのiframeからAstroの開発サーバーを表示できないことがあります。

7. Astroの開発サーバーを起動する

次に、Astroの開発サーバーを起動します。

%cd /content/astro-colab
!nohup npm run dev -- --host 0.0.0.0 --port 4321 > astro-dev.log 2>&1 &

通常、開発サーバーを起動すると、そのセルは実行中のままになります。

そこで、ここでは nohup と & を使って、バックグラウンドで起動しています。

> astro-dev.log 2>&1

としているので、ログは astro-dev.log に出力されます。

ログを確認したい場合は、次のようにします。

!tail -n 30 astro-dev.log

8. Colab上にAstroの画面を表示する

最後に、Colabのポート転送機能を使って、Astroの画面をNotebook上に表示します。

from google.colab import output

output.serve_kernel_port_as_iframe(4321)

これで、Colabのセル出力として、Astroの画面がiframeで表示されます。

画面に、

Astro on Google Colab
Google Colab上でAstroのdevサーバーが動いています。

のように表示されれば成功です。
image.png

ここまででできたこと

ここまでで、Google Colab上にAstroの実行環境を作り、Notebookの中にWebページを表示できました。

流れをまとめると、次のようになります。

Node.jsをインストール
↓
Astroプロジェクトを作成
↓
index.astroを書き換える
↓
npm run buildで確認
↓
Astroのdevサーバーを起動
↓
Colabのiframeで表示

この環境ができると、Colabのセルを使って .astro ファイルを書き換えながら、HTML / CSS / JavaScript / Astroの基本を少しずつ試せます。

ColabでAstroを動かしてできること

ColabでAstroを動かすこと自体は、実務開発の王道ではありません。

本格的にWebサイトを作るなら、ローカル環境やGitHub、エディタの整備が必須になります。

ただし、学習用途ではColabにもメリットがあります。

Notebook形式なので、手順とコードを一緒に残せます。

また、セル単位で実行できるため、

  • まずHTMLだけを書く
  • 次にCSSを足す
  • JavaScriptの変数を埋め込む
  • 配列を使ってリスト表示する
  • 条件分岐で表示を変える

といった練習を、段階的に進めやすくなります。

特にAstroは、1つの .astro ファイルの中で、HTML、CSS、JavaScriptをまとめて扱えます。

そのため、Webフロントエンドの基礎を横断的に学ぶ題材に適していると思います。

おわりに

この記事では、Google Colab上でAstroを起動し、Notebook内にWebページを表示するところまで試しました。

ColabはPythonや機械学習だけでなく、Node.jsを入れればWebフロントエンドの学習環境としても使えます。

次は、この環境を使って、Astroの基本文法を1つずつ練習していきます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?