COMPANY SERVICE STAFF BLOG NEWS CONTACT

STAFF BLOG

スタッフブログ

TECHNICAL

テクログ

2022.10.31

バックエンドをDartで書いてみた

テクログ

はじめに

お久しぶりです!
のりさん です

Flutterを使ってDart言語でフロントエンドを書いてきましたが
バックエンド側もDart言語でかけるようなので今回みていきたいと思います!

環境

開発PC:Windows10
Dart SDK:2.18.2
┗ FlutterまたはDartSDK単体がインストールされていればOKです

プロジェクトの作成

まずVSCode等でターミナルを開き、プロジェクトを作成したい場所で以下のコマンドを実行します

dart create dart_backend

実行すると dart_backend フォルダが作成され、プロジェクトが作成されます。

dart_backendフォルダに移動し、ターミナルで以下を実行するとコンソールアプリとして実行を確認できます。

dart run

サーバー準備

次にバックエンドを作成するには、Web・APサーバーが必要になりますね。

dartでは Shelf や Serverpodというものがあるようですが、今回は Shelf の方を使ってみたいと思います。

Shelf の追加

現時点でshelfのバージョンは 1.4.0 ですので、現時点の最新バージョンを使ってみます。

pubspec.yamlファイルに以下を追記して、ターミナルでdart pub get コマンドを実行します。

dependencies: 
  shelf: ^1.4.0

Shelf Router の追加

shelf用のルーターパッケージも今回利用するので追加しておきます。 (こちらもdart pub get コマンドを実行)

dependencies: 
  shelf_router: ^1.1.3

Webサーバーの起動

次にプロジェクト作成時の2ファイルを修正し、Webサーバーが起動するようにします。

import 'package:dart_backend/dart_backend.dart';

void main(List<String> arguments) async {
  createServer();
}
import 'dart:io';
import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart' as shelf_io;
import 'package:shelf_router/shelf_router.dart';

Future<HttpServer> createServer() async {
    var server = await shelf_io.serve(createRouter(), 'localhost', 8080);
    server.autoCompress = true;
    print('サーバー起動: http://${server.address.host}:${server.port}');
    return server;
  }

  Router createRouter() {
    final router = Router();
    router.get('/', (Request request) {
      return Response.ok(
        "<html><body><b>Dart</b>で出力したHTMLです!</body></html>",
        headers: {
          "content-type" : "text/html"
        }
      );
    });
    return router;
  }

ブラウザで確認

起動したのでブラウザで「http://localhost:8080/」を確認してみます。

おお、ちゃんと表示されましたね!

次にHTMLテキストを少し修正して、もう一度リロードしてみます。

あれ、変わらない・・・

サーバーを再起動してみます (WindowsなのでCtrl+Cで止めて再度dart run)

再起動後は変わりました!

ホットリロード

先ほどは再起動したら更新されましたが、開発中はソースを修正したら自動で再起動してほしいですよね

と思ったらありました!shelf_hotreload!さっそく入れてみます!

Shelf HotReload

以下のパッケージもpubspec.yamlに追加してdart pub getしておきます

dependencies: 
  shelf_hotreload: ^1.3.0

次に以下のファイル(lib/dart_backend.dart)を修正します。

import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart' as shelf_io;
import 'package:shelf_hotreload/shelf_hotreload.dart';
import 'package:shelf_router/shelf_router.dart';

void createServer() async {
  withHotreload(() async {
    var server = await shelf_io.serve(createRouter(), 'localhost', 8080);
    server.autoCompress = true;
    print('サーバー起動: http://${server.address.host}:${server.port}');
    return server;
  });
}

Router createRouter() {
  final router = Router();
  router.get('/', (Request request) {
    return Response.ok(
      "<html><body>ホットリロード対応です!</body></html>",
      headers: {
        "content-type" : "text/html"
      }
    );
  });
  return router;
}

修正したらサーバーを起動します

ホットリロード対応の場合、コマンドにオプションが追加されるので注意です。

dart run --enable-vm-service ./bin/dart_backend.dart

これでホットリロード対応で起動しました。

出力するHTMLの内容を修正して保存し、ブラウザを更新してみます。

更新されましたね!

バックエンド

上記まででHTMLを出力するところまでできました。

バックエンドとしてフロントから呼びされる簡単なAPIを実装してみます。

import 'dart:convert';

import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart' as shelf_io;
import 'package:shelf_hotreload/shelf_hotreload.dart';
import 'package:shelf_router/shelf_router.dart';

void createServer() async {
  withHotreload(() async {
    var server = await shelf_io.serve(createRouter(), 'localhost', 8080);
    server.autoCompress = true;
    print('サーバー起動: http://${server.address.host}:${server.port}');
    return server;
  });
}

Router createRouter() {
  final router = Router();
  router.get('/', (Request request) {
    return Response.ok(
      "<html><body>ホットリロード対応です!</body></html>",
      headers: {
        "content-type" : "text/html"
      }
    );
  });
  router.get('/api/users', (Request request) {
    var users = [
      {'id': 1, 'name': 'ユーザーA'},
      {'id': 2, 'name': 'ユーザーB'},
      {'id': 3, 'name': 'ユーザーC'},
    ];
    var json = jsonEncode(users);
    return Response.ok(
      json,
      headers: {
        "content-type" : "application/json"
      }
    );
  });
  return router;
}

http://localhost:8080/api/users にブラウザでアクセスしてみます。

問題なくJSONが表示されました!これでAPIも作れそうですね!

おわりに

最後までお読みいただきありがとうございました!

今回はShelfを使ったサーバーサイドDartで、HTML出力とAPI実装をしてみました。

次回以降で Serverpod の方も調べてみたいと思います。

それではまた!

この記事を書いた人

のりさん

入社年2014年

出身地東京都

業務内容開発

特技・趣味水泳・筋トレ・旅行

テクログに関する記事一覧

TOP