TypeScriptを準備しよう (3/5)
作成:2016-04-09 09:35
更新:2016-04-09 09:35
更新:2016-04-09 09:35
■サンプルページを作成しよう
では、実際に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は、表示するページのスタイルを適当に用意しておきましょう。ここでは、以下のようなものを書いておきました。
とりあえず、HTML & CSSはこんな感じでいいでしょう。後は、「app」フォルダ内にスクリプトファイルを作成すれば完成です。
・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>
※関連コンテンツ