編集部注：本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy（テックアカデミー）による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから
photo credit: nyuhuhuu via photopin cc
「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第6回目のテーマは「JavaScriptの基礎」です。
前回は「これからプログラミングを学び始める方へ」というテーマでお送りしました。今回はより具体的にプログラミングを学んでいただくために、JavaScriptについてご紹介していきます。本連載は、インターネット業界で、これまで技術的なバックグラウンドを持たないまま起業した方や、これから独立・起業しようと思い立った方をサポートするための、連載記事です。
本記事では、数あるプログラミング言語の中でJavaScriptがどういった背景や性格を持つ言語なのかを解説し、動作するソースコードを交えてJavaScriptに触れるきっかけを提供します。
JavaScriptとは何か？
以前の記事で、マークアップ言語のHTMLと、スタイルに関する情報を記述していくCSSについて解説しました。
- HTMLとは、HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略称で、Web上の文書を記述し、またブラウザがそれを解釈するためのマークアップ言語（構造化言語）。
- CSSとは、HTMLタグや独自で定義した要素に対して、大きさ・配置（余白）・レイアウト／色・タイポグラフィ(フォント) の指定など、スタイルに関する情報を、連続して記述していくもの。
主にこれらの要素に対して操作や制御を行うために使うのがブラウザ上で動作するJavaScriptの役割です。具体的には、ボタンをクリックした時にアラートを出す、HTML文書の情報をページを書き換える、などです。HTMLは文書構造を定義し、CSSでは定義された情報に基づいてスタイルの適用させます。そしてJavaScriptは、さらにその情報を操作することを可能にします。
ちなみに、初心者でJavaScriptとJavaを混同される方がいますが、まったくの別物ですのでご注意ください。
生い立ちから仕様の標準化まで
JavaScriptのプログラムをブラウザで動かす前に、JavaScriptの生い立ちについて知っておきましょう。
JavaScriptは、Netscape Navigator 2.0で実装されたプログラミング言語です。開発当初はLiveScriptと呼ばれていましたが、1995年にJavaScriptという名前に変更されました。 1996年にマイクロソフトのInternet Explorer 3.0に搭載、1997年にはJavaScriptのコア部分の仕様がECMAScriptとして標準化され、ウェブブラウザ間の互換性が高まりました。
JavaScriptに限りませんが、プログラミング言語にとって「どの環境でも動く」というのは大事なことです。Google Chromeユーザーには使える一方で、Internet Explorerユーザーには使えないウェブアプリケーションを書いているとしたら、それは大きな機会損失となります。
そのためECMAScriptとして仕様が標準化されていることは、JavaScriptにとっても開発者にとっても、さらにはアプリケーションを利用するエンドユーザーにとっても、とても重要なことなのです。
JavaScriptで「Hello world」
photo credit: oskay via photopin cc
では手始めに、最も簡単なJavaScriptプログラムを書いて、動かし方を覚えましょう。プログラミング言語を学ぶ際にお決まりなのが「Hello,world」という文言を出力することです。JavaScriptはブラウザで動作する言語として広く知られており、HTMLファイルのscriptタグの中に記述して簡単なスクリプトを動かすことが出来ます。
<html>
<head>
<meta charset="utf-8">
<title>javascriptでHello,world</title>
</head>
<body>
<script>
alert("Hello, world");
</script>
</body>
</html>
この記述をしたhtmlファイルをブラウザで表示すると、問題なくHello,worldというアラートが出力されるはずです。このように面倒な環境構築が必要ないという意味では、初学者に易しいプログラミング言語と言えるでしょう。
JavaScriptというスクリプト言語の良いところは、学習の最初のハードルが下がることです。オブジェクト指向でありながら関数型言語としての一面も持ち、ブラウザ上だけでなくサーバーサイドのプログラミング言語としても使われるJavaScriptは決して簡単な言語ではありませんが、使い慣れたブラウザを仲介することで学習を始めやすい言語であることは確かなのです。
イベントドリブンな言語
JavaScriptのもう一つの特徴として、イベントドリブンというキーワードが挙げられます。イベントドリブンとは、ユーザーのアクションやその他のイベントによってプログラムが作動するという意味です。
// HTMLに<div id=”my-button”></div>があるとする
var btn = document.getElementById("my-button");
btn.onclick = function(){
alert("ボタンがクリックされました！");
}
このように、ドキュメントの要素をオブジェクトとして取得して、そこに関数を割り当てることで、イベントドリブンの挙動を実現しています。
JavaScriptで作るミニアプリ
ではいよいよ、JavaScriptで簡単なアプリケーションを作りながら、JavaScriptに触れていきます。
カウントダウンタイマー
身近な例ということで、2020年の東京オリンピックまでのカウントダウンタイマーを作ってみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カウントダウンタイマー</title>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="timer">
東京オリンピックまであと<br />
<span id="days"></span>日
<span id="hours"></span>時間
<span id="minutes"></span>分
<span id="seconds"></span>秒
</div>
</body>
</html>
HTML中から外部のJavaScriptを呼び出すには、<script>タグを使って、src属性に対象のスクリプトを指定します。今回はtimerというID名を指定した場所に、オリンピックまでの残り時間を表示させます。 次に、index.htmlと同じ階層にapp.jsというファイル名でJavaScriptファイルを作り、プログラムを書いていきます。
function countDown() {
// オリンピックまでの秒数を取得
var olympicDate = new Date(2020, 6, 24, 00, 00, 00);
var diff = olympicDate - new Date();
// 取得した秒数を日、時間、分、秒で表す
var secondsPerDay = 60 * 60 * 24 * 1000;
var days = Math.floor(diff / (secondsPerDay));
var hours = Math.floor(diff % (secondsPerDay) / (60 * 60 * 1000));
var minutes = Math.floor((diff % secondsPerDay) % (60 * 60 * 1000) / (60 * 1000));
var seconds = Math.floor((diff % secondsPerDay) % (60 * 1000) / 1000);
// HTMLに反映させる
document.getElementById("days").innerText = days;
document.getElementById("hours").innerText = hours;
document.getElementById("minutes").innerText = minutes;
document.getElementById("seconds").innerText = seconds;
}
// ページの読み込み後にカウントダウンを開始
// 1000ミリ秒ごとに繰り返す
window.onload = function() {
setInterval(countDown, 1000);
}
このプログラムを書いてから先ほどのHTMLファイルを表示すると、カウントダウンが動作しているはずです。
ここでは、オリンピックまでのミリ秒を取得してそれを各単位（日・時間など）に変換、最後にHTMLに反映させています。ただ、この処理だと読み込み時に1度だけ実行されてカウントダウンにならないので、処理を関数にまとめておいて1000ミリ秒（1秒）ごとに繰り返し実行しています。
JavaScriptの各種ライブラリ・フレームワーク
簡単なJavaScriptプログラムを書いてみたところで、目的に応じてJavaScriptをより便利に扱えるようにした有名なライブラリやフレームワークをいくつか紹介します。
jQuery
jQueryとは、簡単に言うとJavaScriptをより直感的に扱うためのライブラリです。代表的なのが$関数で、たとえば先に書いたコードを例に出すと、以下のように書き換えることができます。
jQueryを使わないコード
document.getElementById("days").innerText = days;
jQueryを使ったコード
$("#days").text(days);
jQueryを使わないコードに比べて短くなり、可読性も向上しました。
CoffeeScript
CoffeeScriptとは、JavaScriptを書きやすくするためのもので、スタートアップのWebアプリケーションなどで積極的に採用されています。
photo credit: garrettc via photopin cc
CoffeeScriptを使わないコード
function hello(name){
alert("Hello," + name);
}
hello("taro");
CoffeeScriptを使ったコード
hello = (name) ->
alert "Hello," + name
return
hello "taro"
セミコロンや丸かっこを書かなくて済むので、スリムな見た目のコードが書けるようになります。
AngularJS
AngularJSとは、クライアントサイドのMVCフレームワークです。HTML5以前のJavaScriptはウェブアプリケーションにおいて、見た目を操作したりちょっとしたアニメーションを付けたり、という補助的な役割を担っていたケースが多かったため、クライアントサイド（ブラウザ側）のフレームワークはそれほど必要とされていませんでした。
しかし近年、クライアントの役割がより重要になり、大規模なJavaScriptを書く必要が出てきたため、このAngularJSのようなフレームワークが人気となっています。
Node.js
Node.jsとはサーバーサイドのJavaScript環境です。ウェブアプリケーションのサーバーサイドというとPHPやRuby、Javaなどが一般的ですが、これらに加わるサーバーサイドプログラミングの選択肢として注目を浴びています。
JavaScriptの学び方
photo credit: Pragmagraphr via photopin cc
本記事で、JavaScriptの基本的なところは知って頂けたと思います。さて、ではこれからさっそくJavaScriptを学習するとして、何をすればいいのでしょうか。HTMLの設計思想と、2014年に最適な学び方で紹介した内容と被るところもありますが、ここでは3つだけご紹介します。
1. 動画学習サイトで学ぶ
HTMLの記事でもおすすめしましたが、動画で学ぶのは何も知らない状態から勉強するのに、とても適しています。まずは人がコードを書いている所を眺めるだけでも、勉強になります。
2. 動いているサンプルをいじってみる
ある程度つかめてきたら、実際に動いているサンプルコードをいじってみることをおすすめします。jsdo.itのようなサイトで簡単なJavaScriptプログラムを検索して見つけてみて、手元でいじってみてはいかがでしょうか。
3. 簡単なツールを作ってみる
最初のうちは、JavaScriptでどういったツールを作れるのかわからないと思います。しかし、動画で学習したり実際に動いているサンプルをいじってみると、ある程度難易度がつかめると思います。
たとえば占いアプリのように、簡単なプログラムでも見せ方次第で面白いツールになり得ます。HTMLとCSSとJavaScriptさえ知っていれば、そういうものを今すぐ世界に公開することができるのです。
以上、JavaScriptについて見てきました。次回の第7回は「PHP」をテーマにお送りします。
e27
ゲストライター
Norio Nakayama
Takeshi Hirano
Satoshi Nakano
Yukari Mitsuhashi
Masaru IKEDA
同社のアプリは UI を追求したものが多いため、その独特の使用感を言葉で説明するのはいつも難しいのだが、一言で言えば、誰かとのメッセージのやりとりを中断することなく、シームレスに写真が共有できることが最大の特徴だ。
Junya Mori
