2022.10.31
STAFF BLOG
スタッフブログ
TECHNICAL
テクログ
はじめに
お久しぶりです！
のりさん です
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.0Shelf Router の追加
shelf用のルーターパッケージも今回利用するので追加しておきます。 （こちらもdart pub get コマンドを実行）
dependencies:
shelf_router: ^1.1.3Webサーバーの起動
次にプロジェクト作成時の２ファイルを修正し、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 の方も調べてみたいと思います。
それではまた！
