🐕

【Dart】Jasprでweb開発をしよう！~Hello World!~

tolto

2026/01/19に公開

Jasprというフレームワークをご存知でしょうか。これはDartで静的webページを作成するためのDartフレームワークでFlutterのように宣言的UIでwebサイトが作成でき、Flutterをやっている人からすると比較的扱いやすいです。
私もFlutterをやっているのですが、Reactにあまり慣れることができなかったですが普段から使用しているDartで宣言的UIで作成できるJasprはやりやすかったです。

公式サイト

https://jaspr.site
https://docs.jaspr.site

jasprでHello World!

以下のDartコマンドを実行してJaspr CLIをインストールしてJasprコマンドを有効にしてください。

dart pub global activate jaspr_cli

インストールが完了したら以下のコマンドでプロジェクトが作成できます。

jaspr create my_website

プロジェクト作成時にいろいろと聞かれますが基本全部yesで大丈夫だと思います。
プロジェクトが作成できたらサイトを作っていきます。
jaspr_options.dartは自動生成なので基本的に触ることはないです。
作成時のディレクトリを確認するとおそらくサンプルアプリの複数のフォルダがあると思います。以下はサンプルアプリです。

Jasprでデバッグするためのローカルサーバーの建て方は以下のコマンドです。

cd my_website
jaspr serve

早速コーディングに入っていきます。
まずはmain.dartを編集します。
サンプルのカウンターアプリ用にcssなどが設定されているので不要な部分を削除して書き換えていきます。

main.dart

import 'package:jaspr/server.dart';
import 'app.dart';
import 'jaspr_options.dart';

void main() {
  Jaspr.initializeApp(
    options: defaultJasprOptions,
  );
  runApp(
    Document(
      title: 'title',
      head: [
        link(rel: 'stylesheet', href: 'style.css'),// css
      ],
      body: App(),// lib/app.dartを指定 app.dartでRouteを設定している
    ),
  );
}

次にpages/home.dartを変えていきます。
jasprでは基本的にFlutterのStatelessWidgetの代わりにStatelessComponentを使用します。
私の使用している環境だとエディタのコード補完がStatelessComponentのComponentをWidgetに勝手に書き換えることが多々あったので設定等で無視するようにするか都度書き直してください(笑)
以下がHello Worldを表示するコードです。

home.dart

import 'package:jaspr/jaspr.dart';

class HomePage extends StatelessComponent {
  const HomePage({super.key});

  @override
  Component build(BuildContext context) {
    return div([
      p([text('Hello World!')]),
    ]);
  }
}

ここまでできたら一度

jaspr serve

で実行して確認してみてください。
hello worldが確認できたら成功です。
webを多少やったことのある方なら分かるかと思いますが、pで改行h1,h2,h3といった形でHTMLタグを使用して画面を構築できます。
jasprの特徴としてはtextメソッドを使用して文字列を表示する点にあると思います。改行をしない文字列を作成する時はtext(''),だけで表示できます。

css

Jasprではcssを記述する方法が主に２種類あります。
一つ目がdart内で記述していく方法です。これは最初のサンプルアプリで使用されてる方法でもあります。
もう一つがstyle.cssなどのcssファイルで作成する方法です。
最初に記述したmain.dartではstylesheetを指定してるので最初のmain関数を使用していれば特に設定は必要ありません。
cssファイルを作成します
作成するフォルダはwebの下です。jasprでは基本assetsなども含めwebの下に作成するのが基本です。
Jasprでは各HTMLタグに classes プロパティが用意されています。
今回は試しにdivタグにhello-textという名前のクラスで作成します。

home.dart

div(classes: 'hello-text', [
      p([text('Hello World!')]),
]);

複数のクラスを使用したい場合classesは文字列型でスペースを使って複数クラスを指定できます。

div(classes: 'class1 class2 ...', [
    ...
]);

以下はグラデーションを使って派手なhello worldにしてみようと思います。

.hello-text{
  font-weight: bold;
  margin: 0 auto 5%;
  background: linear-gradient(
    120deg,
    #00f0ff,
    #0066ff,
    #a100ff,
    #ff00c8,
    #ff3b3b,
    #ffb700
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: neonGradient 4s ease infinite;
}

@keyframes neonGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

このようなグラデーションになれば成功です。

まとめ

以上がJasprでpタグ,cssをつかったhello worldの紹介です。
どのような感じでwebサイトを作成するかがつかめたかと思います。
他にもRiverpodや画面遷移などと言った実践的な話があるのですがそれはまた今度書こうと思います。

ぽちぽちのつどいPublication

大阪大学非公認アプリ開発サークル「ぽちぽちのつどい」です！ Flutterをメインとしたアプリ開発や、交流イベントなど色々な活動を行っています✨

公式サイト

jasprでHello World!

css

まとめ

Discussion