今回と次回は、「Hello World」という多くのプログラム言語を学ぶ際に用いられる、ユーザー操作に応じて挨拶を返すという簡単な仕様を元に、これを改編していくことで、コーディング作業における実践的なノウハウ、考慮点を身に付けていきます。
1. Hello Worldを作ってみよう！
2. 時間に応じて、挨拶を変えてみよう
3. 挨拶をしゃべってもらおう（WebSpeechAPIを利用してみよう）
4. 作成済みのUI部品を適用してみよう（再利用のための部品化を検討してみよう）
以上の順番で、お話を進めます。1と2が今回、3と4が次回です。なお、掲載しているプログラムのソースコードは以下からダウンロードできます。
http://www.htmlhifive.com/ja/media/itpro/201509/download/itpro-sample-helloworld.zip
また、以下のURLから実際のデモにアクセスできます。
http://www.htmlhifive.com/conts/web/view/media/itpro-201509
1. Hello Worldを作ってみよう！
Webアプリは、HTML、CSS、JavaScriptファイルで構成されます。HTMLはWebサーバーにホストしURLを付与することで、Webブラウザーで表示できます。まずは、以下の記述を.htmlファイルとして保存し、Webブラウザーからアクセスしてみてください（図1）。
なお、Webサーバーの準備など、開発を始めるための環境の準備は、以下の記事を参考にしてください。
参考記事：手軽にHTML5/JavaScript開発を始めるための環境構築法
文頭の、<!docType html>で、HTML5ベースで記述されていることを宣言しています。ページ内のボタンのonclick属性の中で、ボタンをクリックしたときに実行する関数を指定します。
onclickの中ではdocument.getElementById()を使って取得したオブジェクトのtextContentやstyleプロパティを変更することで、DOM要素の見た目を変更しています。上記のサンプルへアクセスし、ボタンを押すと“おはようございます！”と表示されたかと思います（図2）。
