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.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 の方も調べてみたいと思います。
それではまた!