【イベントレポート】知識ゼロからのスタート！JavaScript超入門プログラミングハンズオンセミナー

株式会社リクルートスタッフィングが運営するITSTAFFINGでは、弊社に派遣登録いただいている皆さまのスキル向上を支援するイベントを、定期的に開催しています。

10月6日に開催したのは、JavaScript超入門プログラミングハンズオンセミナー。7月に開催し、好評を博したイベント「確かな力が身につくJavaScript『超』入門」の講師・狩野祐東さんが実際にコードを書きながら、JavaScriptについてレクチャーしていただきました。

■今回のイベントでは……

・JavaScriptの「DOM操作」と「非同期通信」を理解する
・アラートダイアログを表示する簡単なソースコードを書いてみる
・APIを利用した非同期通信のソースコードを書いてみる

講師の狩野さんが実際にソースコードを記述し、JavaScriptの動作や順序が見られたので、参加者の皆さんは、技術書では得られない知識や体験を得ることができました。

▲【講師】狩野祐東さん
アメリカ・サンフランシスコでUIデザイン理論を学ぶ。帰国後、会社勤務を経てフリーランス。2016年に株式会社Studio947を設立。Webサイトやアプリケーションのインターフェースデザイン、インタラクティブコンテンツの開発を数多く手がける。各種セミナーや研修講師としても活動中。主な著書に『確かな力が身につくJavaScript「超」入門』『いちばんよくわかるHTML5&CSS3デザインきちんと入門』『スラスラわかるHTML&CSSのきほん』（SBクリエイティブ）『HTML5&CSS3デザインレシピ集』（技術評論社）など。

JavaScriptはHTMLを書き換えられるプログラミング言語

今回は限定30名様のイベント。女性が多く、ほとんどの方はJavaScriptを扱うのが初めてでした。全員が自分のパソコンを持参して進めていきます。

最初に、指定のURLからjsファイルをダウンロード。その後、atom.ioからテキストエディタをダウンロードしました。ダウンロードがうまくいかなければ、メモ帳などの標準テキストエディタで実習が進んでいきました。

まず、JavaScriptが「できること」を解説。前回のイベント「確かな力が身につくJavaScript『超』入門」同様の内容を簡単に説明されました。

「JavaScriptができることは、3つに分けられます。まずは一般的なデータ処理。例えば、ログインしている名前に応じて『○○さんこんにちは』と表示を分ける『文字列操作』や、足し算や掛け算と言った計算などです。JavaScript“ならでは”の操作に、『DOM操作』と『XHR/Ajax』があります」

JavaScript“ならでは”のできることは以下の通り。

・DOM操作
HTMLで書かれているWebサイトが一度表示された後でも、その中身を書き換えて表示を変えること

・XHR/Ajax
非同期通信のこと。Webサーバからデータを取得するのは通常ブラウザだが、JavaScriptが肩代わりして、データのリクエストを取得すること。例えば、ページのボタンをクリックすると、サーバからデータを取得し、その結果に応じてページを書き換えるなど

ダイアログを表示する簡単なプログラムを書いてみよう

概要の説明が終わると、早速プログラミングハンズオンをスタート。初めにダウンロードをしたフォルダから、指定のテキストファイルを開きます。ブラウザで開くと、画面は真っ白。エディタを開いてソースコードを記載していきます。

「ソースコードを書くパターンは2種類あります。HTMLファイルに直接書いていく方法と、別途作成したプログラムファイルに書いていく方法です」

今回は、HTMLファイルに直接記述します。すでにその他の必要要素は記述されているので、指定された場所に入力していきます。

まずは、

</script>

と記述。出来上がったのが次のソースコード（一部）です。

HTMLファイルを保存してブラウザを開いてみると、ダイアログウィンドウが表示されました。

開いたウィンドウで、そのままDOMエクスプローラーを表示させます。Windowsの場合は「F12」キー、Macの場合は「Cmd+Option+I」キーで表示が可能です。画面下に出てくる領域で「Console」または「コンソール」を表示すると、表示しているページに関する情報が表示されます。

下記のようにソースコードを記載すると、コンソールに文字や計算結果を表示させることができます。

console.log('今日は雨が降っています');
console.log(2+3);

ブラウザでDOMエクスプローラーを表示する

次は非同期通信にチャンレンジ。ダウンロードして解凍したフォルダ内の別のファイルを利用します。別のHTMLファイルをブラウザで開くと「ピザでもたのむ？」というテキストに並んで「聞いてみる」というボタンが表示されています。このボタンを押しても、最初は何も動きません。

あらかじめ用意されていたHTMLファイルは以下の通りです。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>STEP 2 非同期通信に挑戦</title>
<link href="../../template/_common/css/style.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

</head>
<body>
<header>
<div class="header-contents">
<h1>STEP 2 非同期通信に挑戦</h1>
</div>
</header>
<div class="main-wrapper">
<section>
　　　　　<button id="btn">聞いてみる</button>
　　　　　<span class="advice">ピザでもたのむ？</span>
　　　　　<div class="img_block">
　　　　　　　　　　　<img src="" id="gif_img">
　　　　　　　　　　　<p id="message"></p>
　　　　　</div>
</section>
</div>
<footer>JavaScript Samples</footer>
<script src="scripts/jquery-3.2.1.min.js"></script>
<script src="scripts/script.js"></script>
</body>
</html>

今回は、HTMLファイルに直接記載するのではなく、script.jsというファイルにコードを入力していきます。

目的は「聞いてみる」ボタンを押したときに、「Yes」または「No」の答えを表示させるようにすること。かつ、YesまたはNoの答えに合ったコミカルな動画を表示させます。動画を表示させるのは、無料公開されているAPIを利用します。

実際には、順を追って説明されながら記述していきました。最終的には、次のようなソースがscript.jpに記述されました。

$('#btn').on('click',function(){
　var dataURL = 'https://yesno.wtf/api';
　$('#gif_img').attr('src','');
　$('#message').text('');
　$.ajax({
　　 url: dataURL
　})
　.done(function(data) {
　　 $('#gif_img').attr('src', data['image']);
　　 $('#message').text(data['answer']);
　})
　.fail(function() {
　　 window.alert('読み込みエラー');
　})
});

1行目では、HTMLファイルに記述されたボタンが埋め込まれている部分を取得します。JQueryというライブラリの$()メソッドを使い、CSSセレクタを取得する際と同様に記述して、その要素を取得します。

もとのHTMLファイルを見ると、id属性が「gif_img」の<img>タグと、id属性が「message」の<p>タグが設定されています。<img>タグは、取得したdataのURLをsrc属性に設定し、<p>タグにはYesまたはNoのテキストを設定しています。その他も、ソースを書きながらひとつずつ説明し、最終的には上記のソースコードをscript.jpに記述することで、目的のページが出来上がりました。