前書き
こちらはAteamFinergyのアドベントカレンダー8日目の記事になります
3日目にはdev.toなどでWebサイト高速化に使用されている、InstantClickについて紹介しているので気になる方はこちらからご覧ください
今回はDart言語について少し記事を書いていこうと思います
目的としては、「Flutter」を聞いた事があるけれど手を出していない人に対して、開発言語「Dart」の特徴を知ってから実際にFlutterでアプリを作る事に興味を持ってもらう事です
Dartについて
みなさんはDart言語をご存知でしょうか？私の中では
- Dartは知らないけれど、Flutterなら知っている
- DartってFlutterじゃないの？
などと思われている方が多いのではないかと勝手に思っています
DartとFlutterの関係については
Rubyでwebアプリ作るときのRuby on RailsやSinatra
Javaでwebアプリ作るときのSpringなど
これらと同じで、Dartでモバイルアプリを作るときのフレームワークがFlutterになります
つまりDartとしてはFlutterとしてモバイルアプリを作る以外にもできる事があるのです
Dartの魅力
Dartの公式ページを見てみましょう
https://dart.dev/platforms
Whether you’re creating a mobile app, web app, command-line script, or server-side app, there’s a Dart solution for that.
Dartではモバイルアプリ以外にwebアプリ、コマンドラインスクリプト、サーバーサイドとさまざまな箇所で使用する事ができるようです
上記を含めて、公式が謳っている魅力としては3つあります
- 先述の通り、複数のプラットフォームで動くこと
- UI用に最適化された言語である
- Flutterだととてもわかりやすいのですが、「処理速度がっ!!」「構文が綺麗に!!」ということより、Widgetを入れ子にして直感的に自分の再現したいUIを作成できます
- 生産的な開発ができるところ。
- こちらはネイティブアプリ開発との比較になるのですが、変更の度にビルドを実行してアプリの変更を確かめる孤独なんですけども
react nativeなどと同じく変更を加えたタイミングで適用されるようになっていますね
下記:【 2. UI用に最適化された言語である】のFlutterサンプルコード
Tabを作りたい旨を記述して、AppBarのなかにTabBarを配置し、TabBarViewに表示したいものを記述するだけ
DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(text: '1ページ'),
Tab(text: '2ページ'),
Tab(text: '3ページ'),
],
),
title: Text(TITLE),
),
body: TabBarView(
children: [
Tab(text: '1ページのbody'),
Tab(text: '2ページのbody'),
Tab(text: '3ページのbody'),
],
),
),
)
またJava JavaScriptの影響を受けたこともあり、基本的な記述については似通っている箇所が多く
Dart自体難しくなく、コストがそこまで必要がないというところが魅力かと思います
こちらはDartの公式に載っている画像になるのですが、他の似ている言語・競争にある言語と遜色がない記述で同じ事を実行できます
webからはじめる
次にDartを学び始める時は個人的にwebから入ると手間要らずに言語仕様や使用した感じが理解しやすいように思えます
多くのウェブサイトではJavaScriptを使っているとフロント側のコードを作成したり、実際ユーザーのアクションのトリガーをjQueryでハンドリングしてると思います
Dartでも同じ事ができます
Dartで書いたコードはdart2jsコンパイラを用いる事でJavaScriptにコンパイルする事ができるため、Dartで書いたコードをそのままプロジェクトに適用する事も可能となっています
また、開発中はwebdevツールを用いて開発するので実行の確認がJavaScriptで開発している時と遜色なく行う事ができます
https://dart.dev/platforms#dart-web-javascript
そして実際のチュートリアルの導入を進めると「あれ？このDOM操作はjQueryでみたぞ？」みたいな既視感が出てくると思います
https://dart.dev/tutorials/web/get-started
自分が実際にサンプルとして作成したコードが以下になります
Selectorを指定する事やイベントを監視する際はJavaScriptと似た記述ができます
また、..で繋げることでそのオブジェクトのプロパティを設定できます
import 'dart:html';
InputElement toDoInput;
UListElement toDoOutput;
void main() {
toDoInput = querySelector('#toDoInput');
toDoOutput = querySelector('#toDoOutput');
toDoInput.onChange.listen(addItem);
}
void addItem(Event event) {
var newItem = LIElement()
..text = toDoInput.value;
var deleteButton = ButtonElement()
..text = 'delete'
..onClick.listen((e) => {newItem.remove()});
newItem.children.add(deleteButton);
toDoOutput.children.add(newItem);
}
また、最近だとフロントをJavaScriptで仮想DOMを使用している事が多いかと思います
その際はAngularDartというフレームワークを使用するのが良いかもしれません
こちらのフレームワークについては他の方が詳しく説明してくださっているのでそちらをご覧ください
(AngularDartを始めよう)
終わりに
これでDartについていくつか知る事ができましたので
Dart自体が難しい言語ではないので、DartからはじめてみてゆくゆくはFlutterを触ってくださると嬉しく思います
(Flutter側でweb開発者向けのページがあったりもするのですけれどね、、、)