back

TypeScriptを準備しよう (3/5)

■サンプルページを作成しよう

では、実際にTypeScriptを使ってみることにしましょう。今回は、簡単なWebページとして、以下のようなファイルの構成を考えてみます。

・index.html
・style.css
「app」フォルダ
    ・main.ts（これが、TypeScriptのファイル）
    ・main.js（コンパイルして作られるファイル）

index.html、style.cssと「app」フォルダを作り、フォルダ内に「main.ts」というファイルを設置するわけです。そして完成したら、main.tsをコンパイルすると、main.jsが作成され、これが実際に使用されるスクリプトになるわけです。

では、index.htmlから作成しましょう。今回は、下のリスト欄のようなものを用意してみました。見ればわかるように、何も表示らしいものはありません。<body>では、ただ<script>タグを用意しているだけです。src="./app/main.js"というように、main.jsを読み込むようにしてあります。

style.cssは、表示するページのスタイルを適当に用意しておきましょう。ここでは、以下のようなものを書いておきました。
body {
    color:#999;
    padding:5px 10px;
}
p {
    font-size:18pt;
}

とりあえず、HTML & CSSはこんな感じでいいでしょう。後は、「app」フォルダ内にスクリプトファイルを作成すれば完成です。



(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
    <link rel="stylesheet" href="style.css"></link>
</head>
<body>
    <script src="./app/main.js"></script>
</body>
</html>



　 　

記事のリストに戻る



PC Site G+ mail
copyright 2009. SYODA-tuyano.