Dartをセットアップしよう (6/6)
作成:2018-03-03 09:26
更新:2018-03-03 09:26
更新:2018-03-03 09:26
■Webページ用のスクリプトを用意する
では、残るDartスクリプトを作成しましょう。下のリスト欄に簡単なサンプルを掲載しておきます。
これも、先ほどのサンプルと同様に「hello.dart」というファイル名で保存しておくことにします。先のサンプルをそのまま書き換えて使っても構いません。これは、先ほど作成したHTMLファイルと同じ場所に保存しておいて下さい。
作成したら、これをトランスコンパイルします。これはコマンドプロンプトまたはターミナルから以下のように実行をします。
これで、hello.dartをJavaScriptのスクリプトに変換し、「hello.js」というファイル名で保存します。実際に利用するのは、このhello.jsのほうになります。
ファイルができたら、先のhello.htmlをWebブラウザで開いてみましょう。Helloというタイトルの下に「Hello Dart!」というテキストが表示されます。これが、スクリプトで表示されたテキストになります。
――とりあえず、これでスクリプトを書いて動かすまでの基本操作ができるようになりました。次回から、実際にスクリプトを実行しながらDart言語について説明していくことにしましょう。
これも、先ほどのサンプルと同様に「hello.dart」というファイル名で保存しておくことにします。先のサンプルをそのまま書き換えて使っても構いません。これは、先ほど作成したHTMLファイルと同じ場所に保存しておいて下さい。
作成したら、これをトランスコンパイルします。これはコマンドプロンプトまたはターミナルから以下のように実行をします。
dart2js -o hello.js hello.dart
これで、hello.dartをJavaScriptのスクリプトに変換し、「hello.js」というファイル名で保存します。実際に利用するのは、このhello.jsのほうになります。
ファイルができたら、先のhello.htmlをWebブラウザで開いてみましょう。Helloというタイトルの下に「Hello Dart!」というテキストが表示されます。これが、スクリプトで表示されたテキストになります。
――とりあえず、これでスクリプトを書いて動かすまでの基本操作ができるようになりました。次回から、実際にスクリプトを実行しながらDart言語について説明していくことにしましょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
import 'dart:html'; void main() { var msg = querySelector('#msg'); msg.text = 'Hello Dart!'; }
※関連コンテンツ