😶‍🌫️

Dart とJavaScriptで、基礎的な書き方比べてみた

に公開

はじめに
現在、個人開発でIOSアプリFlutterで作成しています。
仕事では、よくJavaScriptを利用するので、DartとJavaScriptを比べてみました!
前提たいしたこと書いて無いです!

JavaScriptエンジニアのためのDart・Flutter入門:基礎編

今回は、JavaScriptの知識をベースにFlutterの基礎を学んでいきましょう。FlutterはGoogleが開発したクロスプラットフォームのUIフレームワークで、Dartというプログラミング言語を使用します。

1. 言語の基本:Dart vs JavaScript

まずは、DartとJavaScriptの基本的な違いを見てみましょう。

HelloWorld

dart

// Dart
void main() {
  print('Hello, World!');
}

javascript

// JavaScript
console.log('Hello, World!');

ポイント

  • Dartではmain()関数がエントリーポイントになります。
  • 出力にはprint()を使用します(JavaScriptのconsole.log()に相当)。

変数宣言

dart

// Dart
var name = 'John';// 型推論
String title = 'Developer';// 明示的な型指定
final age = 30;// 再代入不可
const PI = 3.14;// コンパイル時定数

javascript

// JavaScript
let name = 'John';
const age = 30;

ポイント

  • Dartは静的型付け言語です。型推論もサポートしています。
  • finalはJavaScriptのconstに近いですが、微妙に異なります。
  • Dartのconstはコンパイル時定数を表します。

2. 関数の定義

関数の定義方法を比較してみましょう。


// Dart
int add(int a, int b) {
  return a + b;
}

// アロー関数
int multiply(int a, int b) => a * b;

javascript

// JavaScript
function add(a, b) {
  return a + b;
}

// アロー関数
const multiply = (a, b) => a * b;

ポイント

  • Dartでは関数の引数と戻り値の型を指定できます。
  • アロー関数の構文は非常に似ています。

3. クラスの定義

オブジェクト指向プログラミングの基本、クラスの定義を見てみましょう。

dart

// Dart
class Person {
  String name;
  int age;

  Person(this.name, this.age);

  void sayHello() {
    print('Hello, I am $name');
  }
}

javascript

// JavaScript
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, I am ${this.name}`);
  }
}

ポイント

  • Dartのコンストラクタは簡潔に書けます。
  • Dartでは、クラス内のフィールドを明示的に宣言します。

4. 非同期処理

最後に、非同期処理の方法を比較してみましょう。

dart

// Dart
Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2));
  return 'Data from server';
}

void main() async {
  var data = await fetchData();
  print(data);
}

javascript

// JavaScript
async function fetchData() {
  await new Promise(resolve => setTimeout(resolve, 2000));
  return 'Data from server';
}

async function main() {
  let data = await fetchData();
  console.log(data);
}
main();

ポイント

  • DartはFutureを使用し、JavaScriptはPromiseを使用します。
  • 基本的なasync/awaitの使用方法は非常に似ています。

まとめ

JavaScriptとDartには多くの共通点がありますが、いくつかの重要な違いもあります:

  1. Dartは静的型付け言語で、型安全性が高くなっています。
  2. Dartにはmain()関数が必要です。
  3. クラスの定義方法に若干の違いがあります。
  4. 非同期処理は似ていますが、Promiseの代わりにFutureを使用します。
Bizlink Developers Blog

Discussion