Flutterは知っているけれどDartは知らない。

## 前書き
こちらは[AteamFinergyのアドベントカレンダー](https://qiita.com/advent-calendar/2019/ateam-finergy)8日目の記事になります
3日目にはdev.toなどでWebサイト高速化に使用されている、InstantClickについて紹介しているので気になる方は[こちら](https://qiita.com/yothio/items/aec77c73e0ea3d31165f)からご覧ください

今回は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つあります

1. 先述の通り、複数のプラットフォームで動くこと
2. UI用に最適化された言語である
  - Flutterだととてもわかりやすいのですが、「処理速度がっ!!」「構文が綺麗に!!」ということより、Widgetを入れ子にして直感的に自分の再現したいUIを作成できます
3. 生産的な開発ができるところ。
  - こちらはネイティブアプリ開発との比較になるのですが、変更の度にビルドを実行してアプリの変更を確かめる孤独なんですけども` react native `などと同じく変更を加えたタイミングで適用されるようになっていますね

下記:【 2. UI用に最適化された言語である】のFlutterサンプルコード
Tabを作りたい旨を記述して、`AppBar`のなかに`TabBar`を配置し、`TabBarView`に表示したいものを記述するだけ

 ```Dart
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'),
      ],
    ),
  ),
)
  ```

<img width="300" alt="1-3 familiar syntax@2x-80.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199819/95e5962e-ab18-e07a-faca-490003bc4260.gif">



また` Java JavaScript `の影響を受けたこともあり、基本的な記述については似通っている箇所が多く
Dart自体難しくなく、コストがそこまで必要がないというところが魅力かと思います

こちらはDartの公式に載っている画像になるのですが、他の似ている言語・競争にある言語と遜色がない記述で同じ事を実行できます
<img width="815" alt="1-3 familiar syntax@2x-80.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199819/8d00d49b-2bcf-d066-faec-d49c29ad5c11.jpeg">


## 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と似た記述ができます
また、`..`で繋げることでそのオブジェクトのプロパティを設定できます

```Dart
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);
}
```

![todo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199819/40f264a2-7990-35c5-fea1-3c13aee8bb6f.gif)


また、最近だとフロントをJavaScriptで仮想DOMを使用している事が多いかと思います
その際はAngularDartというフレームワークを使用するのが良いかもしれません
こちらのフレームワークについては他の方が詳しく説明してくださっているのでそちらをご覧ください
([AngularDartを始めよう](https://qiita.com/hayassh/items/f288e29af88e174dd677))

## 終わりに
これでDartについていくつか知る事ができましたので
Dart自体が難しい言語ではないので、DartからはじめてみてゆくゆくはFlutterを触ってくださると嬉しく思います
(Flutter側で[web開発者向けのページ](https://flutter.dev/docs/get-started/flutter-for/web-devs)があったりもするのですけれどね、、、)

##引用元
https://dart.dev
https://flutter.dev