株式会社リクルートスタッフィングが運営するITSTAFFINGでは、弊社に派遣登録いただいている皆さまのスキル向上を支援するイベントを、定期的に開催しています。
7月21日に開催した「確かな力が身につくJavaScript『超』入門」は、同名の書籍の著者である狩野祐東さんがご登壇。200名以上の応募があり、大盛況となりました。
■今回のイベントでは……
・フロントエンドエンジニアとサーバーサイドエンジニアの違いを理解する
・見た目を書き換える機能、「DOM操作」と「非同期通信」との違いを説明
・JavaScriptを用いた「タイマー」や「ハンバーガーメニュー」などのライブコーディング
詰め込みすぎず、簡単すぎず、適度なバランスとスピードで進む今回のイベントは、新たな知識のインプットや気づきの多い内容でした。ぜひ本レポートをご覧ください。
▲【講 師】狩野祐東さん
アメリカ・サンフランシスコでUIデザイン理論を学ぶ。帰国後会社勤務を経てフリーランス。2016年に株式会社Studio947を設立。Webサイトやアプリケーションのインターフェースデザイン、インタラクティブコンテンツの開発を数多く手がける。各種セミナーや研修講師としても活動中。主な著書に『確かな力が身につくJavaScript「超」入門』『いちばんよくわかるHTML5&CSS3デザインきちんと入門』『スラスラわかるHTML&CSSのきほん』（SBクリエイティブ）、『HTML5&CSS3 デザインレシピ集』（技術評論社）など。
フロントエンドエンジニアとサーバーサイドエンジニア
まず、狩野さんが参加者の普段のお仕事について質問し、挙手をして頂きました。今回はHTMLやCSS、コーディングに携わる仕事をメインにしている方が半分程度。サーバーサイドの技術者はゼロ。JavaScriptを学びたいWebデザイナーが10名程度いらっしゃったようです。
Webサイトを作るエンジニアは、サーバーサイドとフロントエンドに分かれます。まずはその違いを知っておきましょう。
「サーバーサイドエンジニアは、Webサーバーとバックエンドのソフトウェアをつなぐ“ミドルウェア”を開発する仕事を担います。ミドルウェアとは、WordPressやCMSを想像するとわかりやすいでしょう。ブラウザからのリクエストを受け、Webサーバーにリクエストが届きます。Webサーバーはデータベースにある必要なコンテンツと、HTMLテンプレートなどを取り出し、その2つを合成してブラウザに返します。これがサーバーサイドエンジニアの開発領域で、PHPやRuby、Javaなどのプログラミング言語を利用します。それ以外にSQLや、セキュリティ、パフォーマンスの知識も必要とされます」（狩野さん）
一方で、フロントエンドエンジニアはWebページの見た目全般を扱います。
「Webページを作る仕事なので、HTMLやCSSの知識は必須です。その上で、JavaScriptでページを書き換えたり操作したりすることがフロントエンドエンジニアの仕事。見た目を扱うことになるので、『使いやすい』『楽しい操作性』などのUI/UXも考慮する必要があります。プログラミングだけでなくデザインができればベストですが、少なくともデザイナーの言うことがわかり、協力して仕事ができる能力が求められます」（狩野さん）
「デザインがわかる」能力は必須というよりも、持っていると重宝されるようです。自らを差別化するためにも意識しておきたいポイントです。
JavaScriptができることと、できないこと
具体的な内容に入る前に、「JavaScriptができること/できないこと」を押さえておきましょう。
<できること>
・開いているページの表示を書き換える
・非同期通信をする
・その他いろいろ（Cookieの操作など）
<できないこと>
・Webサーバーにデータを保存する
・パソコンそのものを操作する
基本的に、今表示されているページの見た目を変えるのがJavaScriptの役目です。そのうち、HTMLの操作は「DOM操作」、非同期通信は「XHR」や「Ajax」と呼ばれます。
また、Webサーバーへのデータ保存や、パソコンのファイル操作はできません。
JavaScriptは、DOM操作に代表される見た目のコントロールが主体
見た目を書き換えるDOM操作には、次のような種類があります。
・コンテンツを書き換える
HTMLにおいて、開始タグと終了タグに挟まれているものを「コンテンツ」と呼びます。JavaScriptは、そのコンテンツを書き換えることができます。例えば、アプリのダウンロードをしてインストールするまでの間に、「<p>ダウンロード中…</p>」という表示から「<p>インストール中…</p>」へと書き換えるのです。このような画面の書き換えは、Webページで見たことのある人も多いでしょう。
・要素を挿入する
JavaScriptは要素を挿入できます。例えば、HTMLの要素<ul>内に<li>がいくつかあるケース。もとの<li>を削除したり、<li>を追加したりできます。
・タグの属性を書き換える
タグの属性を書き換えることもできます。例えば、<a>タグにはhref属性があり、URLなどを記載しますが、それを別の文字列に変更できるのです。
・イベントを設定する
ボタンをクリックしたり、マウスオーバーしたりすることで起こるできごとを「イベント」と呼びます。例えば、マウスオーバーしたときに別の画像を表示する、といった処理はイベントになります。
非同期通信とCookieに保存することでできること
そのほか、非同期通信のAjaxについても解説がありました。
「通常のHTTPリクエストは、例えばボタンが押されたことによってブラウザからURLのリクエストが出され、Webサーバーは該当するデータをWebブラウザにHTMLやCSSで返します。Webブラウザはそれを元に、表示されているページを完全に書き換えて終了します。ところが、非同期通信のAjaxは、ブラウザではなくJavaScriptがWebサーバーにリクエストを出し、WebサーバーはJSONやXMLという特殊なデータを返します。JavaScriptはDOM操作を駆使して、ソースをJavaScriptで合成し、ページの一部に挿入します。SNSのタイムラインなどによく見られるテクニックなので、ページの下で『さらに表示』などをクリックすると次々に古い投稿が出てくる機能を見たことがあるのではないでしょうか」（狩野さん）
また、Cookieについても実際の画面でわかりやすく活用事例を示しました。例えば情報パネルを開いたり畳んだりできる機能をJavaScriptで実装した際、パネルの状態をCookieで保存しておき、次に訪れた際に反映するという手法もあります。つまり、パネルを開いたままの人は、次に訪れたときにも開かれたまま、畳んだ人は次も畳んだまま、という実装ができるのです。
リアルタイムでソースコードを書くデモを実施
90分のイベントの後半30分ほどを利用して、実際にソースコードを書いて動かす3つのライブコーディングが行われました。外側のHTMLやCSSは用意されているものの、JavaScriptの実装はその場で1から行います。
ひとつ目は、タイマーを使ったアニメーション。画面に「Bacon Lettuce Tomato」という文字を、タイプライターのように1文字ずつ表示していくものです。タイマーを使うには、「setInterval」という関数を使い100msec（0.1秒）ごとにテキストを変数に代入して表示していきます。
デモによって、JavaScriptをどこに記述すればいいのかが実際にわかります。<div>タグにidを挿入し、document.getElementByIdというメソッドでdivタグの要素を取得しました。そこで取得した要素のコンテンツを、textContentを使って100msecごとに書き換えていきます。
ふたつ目は、スマートフォン用のページなどでよく見るハンバーガーメニューを作ります。始めにHTMLでメニューが表示されている様子を作っておき、JavaScriptのライブラリであるjQueryを利用してアニメーションを設定します。jQueryには便利な機能がたくさんありますが、その都度ネットで検索すれば使い方が見つかるケースが多いそうです。「jQuery」の文字列に「やりたいこと」をそのまま検索するのがおすすめ。例えば「jQuery 画像 切り替え」などと検索しましょう。
最後のデモは、CSS3のレイアウトモジュール「Flexbox」を利用。JavaScriptではないものの、最近注目されている機能です。 Flexboxはいままでのfloatに代わる新しいレイアウト機能で、とくにボックスを横に並べるときに威力を発揮します。レスポンシブデザインとも相性がよく、今後もさらに活用される可能性が高いでしょう。
ただし、Flexboxも万能ではありません。ボックスを横3列、縦3行などに並べる場合、最後に1個や2個の画像が余ると、その画像のみを横幅いっぱいに大きく表示してしまう課題が発生します。
そこで、JavaScriptを使って足りない分の要素を付け足し、画像のサイズを揃えて表示するようにプログラミングを組みました。
ライブコーディングで紹介したソースコードはWeb公開中。自分で勉強したい人は参考にしてみてください。（https://github.com/sukeharu/170721-jsseminar）
本の読み方とまとめ
ライブコーディングの後は、参加者にプレゼントされた書籍『確かな力が身につくJavaScript「超」入門』の読み方を解説。今回説明した内容が書籍のどの部分にあたるのかを説明しました。Flexboxは書籍で紹介されていないものの、ネット上にさまざまな記事が出ているので押さえておいた方がよいでしょう。
冒頭でも紹介したとおり、今回のイベントは予想以上のお申込みをいただいたほど、JavaScriptは注目されています。今後Webサイトが進化していく中で、Webページを制作するスキルはさらに必要とされるでしょう。技術だけでなく、UI/UXのデザイン部分を理解できるかどうかが、差別化のキーとなりそうです。
