はじめに
本記事ではFlutter開発におけるDartPadの説明・使い方を説明します。
DartPadとは
DartPadは、Webブラウザ上でDartプログラムを記述し、即座に実行できるオンラインツールです。DartやFlutterの開発環境をローカルにインストールする必要がなく、誰でも簡単にDartコードの動作を確認したり、学習を進めたりできます。
DartPadの主な機能
- リアルタイムでのコード実行: DartPadは、入力したDartコードを即座に実行し、結果を確認できるインタラクティブな環境を提供します。コードの実行結果は、ブラウザ上でリアルタイムに確認できます。
- Flutterのサポート: DartPadはFlutterのコードもサポートしており、UIを含むFlutterアプリケーションをその場で試すことが可能です。特に、Flutterの学習やプロトタイピングに便利です。
- 豊富なコードサンプル: DartPadには、さまざまなDartやFlutterのコードサンプルが用意されており、すぐに試すことができます。これにより、学習のスピードを上げることができるでしょう。
- コードの共有機能: DartPadで作成したコードは、URLを生成して簡単に共有することが可能です。これにより、チームメンバーや他の開発者とコードを効率的に共有し、フィードバックを得ることができます。
DartPadのメリット
- セットアップ不要: DartPadはWebベースのツールであるため、開発環境の構築に時間をかけることなく、すぐにコーディングを開始できます。
- 学習に最適: DartやFlutterの基本を学ぶためのリソースが豊富に揃っており、効率的な学習が可能です。
- プロトタイピングの迅速化: アプリのアイデアを素早く形にして、その場で動作確認ができるため、プロトタイピングにも最適です。
DartPadの使い方
- DartPadにアクセス: ブラウザでDartPadにアクセスします。
- コードの実行: 「Run」ボタンをクリックして、コードを実行します。結果は右側のパネルに表示されます。
- コードを記述: エディタにDartまたはFlutterのコードを入力します。
- コードの共有:
「Share」ボタンを使って、共有用のURLを生成し、他の開発者と共有できます。※2024/08現在はgistを用いた共有となります。
DartPad実践
以上までの使い方を実際にやってみようと思います。
DartPadではFlutter/Dartバージョンを指定出来ますが、今回は「Dart SDK 3.5.0 and Flutter SDK 3.24.0」を利用しています。
- ブラウザでDartPadにアクセスします。
- デフォルトで以下が記載されていることを確認します。
void main() {
for (int i = 0; i < 10; i++) {
print('hello ${i + 1}');
}
}- コードを以下に変えてみます。
void main() {
print('hello techgrowth.net！');
}- 「Run」ボタンをクリックして、コードを実行します。「hello techgrowth.net！」と表示されることが確認できました
- gist共有手順を参考に、gistページを作成します。このとき、ファイル名をmain.dartにすることに気をつけてください
- gistページを作成すると、IDが発行されます。今回は「9b6884dc2a69121edb8806ddf52bd035」が発行されました。
- これを「https//dartpad.dev/?id=」の後ろにつけると共有が可能になります。
- https://dartpad.dev/?id=9b6884dc2a69121edb8806ddf52bd035 を確認して問題なく表示できることを確認できました。
まとめ
DartPadは、DartやFlutterを学びたい初心者からプロフェッショナルまで幅広く活用できるツールです。環境構築の手間なく、すぐにDartやFlutterのプログラミングを始められるので、学習やプロトタイピングにぜひ活用してください。
Flutter開発入門の次の記事はこちらです。
