今回と次回は、「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開発を始めるための環境構築法

図1●コード例:Hello World
[画像のクリックで拡大表示]

 文頭の、<!docType html>で、HTML5ベースで記述されていることを宣言しています。ページ内のボタンのonclick属性の中で、ボタンをクリックしたときに実行する関数を指定します。

 onclickの中ではdocument.getElementById()を使って取得したオブジェクトのtextContentやstyleプロパティを変更することで、DOM要素の見た目を変更しています。上記のサンプルへアクセスし、ボタンを押すと“おはようございます!”と表示されたかと思います(図2)。

図2●Hello Worldを作ってみよう!の実行例
[画像のクリックで拡大表示]

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら