あらすじ
JavaScript（以下は"JS"で呼ぶ）は主にフロントエンド(お客様のブラウザー)に使われていて、Web技術の礎とも言えるほど重要な技術である。
しかし、JSの特性などで、「使いにくい」、「分かり辛い」など苦情も時々聞いてきた。それに加えて、jQueryをはじめたJSライブラリーがよく使われて、生のJSを理解せずWeb開発を行い、後ほどブラウザーが変な動きを見せたことも珍しくない。
さらに、日本ではW3C Schoolのような実例が充実して、文法も美しい教育サイトが（筆者が知る限り）存在しない。故にJS未経験者への教育は非常に苦労であった。
余談ですが、W3C Schoolの中国語サイトは二件ある。一件目は中国語版の本家らしいが、使われている関数・ライブラリが古い。二件目はパクリらしいが、更新が早く、英語版の本家ほどはないが、かなり新しい情報が入っている。それも彼ノ国の「特殊な事情」であろう(笑)。
ここで、私たちは初心に帰って、生のJSからもう一度JSを理解しましょう。
なお、この記事に関するソースコードはこちらでダウンロードできます。
シリーズ一覧
| No. | 記事 | キーワード |
|---|---|---|
| Lesson 01 | JavaScript is Simple (本記事) | JavaScriptとは |
| Lesson 02 | Meet Functions and Variables | 関数と変数 |
| Lesson 03 | 未定 | |
| Extra 01 | jQuery or Not, That is the Question | jQueryの使用と比較 |
Chapter 01: ~ JavaScriptとは ~
JavaScriptはNetscape社のBrendan Eich氏により開発されたスクリプト言語である。1996年3月リリースしたブラウザー：Netscape Navigator 2.0で初めて実装された。
当初はLiveScriptと呼ばれていたが、その後Sun Microsystems社(現・Oracle社)と業務提携のため、同社開発したプログラミング言語JavaにちなんでJavaScriptと改名した。
しかしJavaScriptの仕様はJavaと全く違い（三菱電機と三菱鉛筆の関係みたい）、このネーミングは後ほど沢山誤解を招いていて、Brendan Eich氏もかなり後悔していた模様。
JavaScriptの中核的な仕様がECMAScriptとして標準化され、多くのウェブブラウザで利用できるようになった。故に、正式な文書では、しばしばECMAScriptでJavaScriptのことを指していた。
覚える必要があるのは、以下の３点だけ：
- JavaScriptとJavaは別物‼︎
- JavaScriptとJavaは別物‼︎
- JavaScriptとJavaは別物‼︎
Chapter 02: ~ 1行の"Hello World!" ~
JavaScriptの文法と使い方は非常に柔軟で自由である（その分、危険になる時もあるが）。ここで私たちはたった一行のコードで"Hello World!"を表示する。
<a href="#" onclick="alert('Hello World!');">Click Me!</a>
エディターで上記の一行を記入して、"javascript_demo.html"として保存すれば完成です。
IEやChromeなどブラウザーで開いて、リンクをクリックしてみれば、"Hello World!"が表示される。
多分気付いた方はいらっしゃると思うが。JavaScriptの公式拡張子は".js"のはずなのに...
その理由は、生のJavaScriptはHtmlタグと連携せずに動けないことである。上記の書き方のようにJavaScriptをそのままHtmlのタグ内に嵌め込む書き方の他に、同じHtmlファイル内の別箇所で記載する書き方、".js"ファイルで記載し、Htmlにインポートする書き方３種類が主流である。
また、Htmlのタグの使い方については、スペースの関係上で割愛致す。本シリーズは新人教育向けの記事であるため、難しいタグは使っていない。おまじないとして扱っても構わないと思う。
次の章で、残った２つのJavaScriptの記法を全部試そう。
Chapter 03: ~ JavaScriptの記法 ~
同じHtmlの別箇所で記載
第２章が紹介した直接Htmlタグに埋め込む記法は、関数が長くなる場合は読みづらくなることがある。長い関数を扱いたい時は<script>タグを利用した方が無難。
作成して動かしてみよう
まず、以下のソースコードを記入しscript_tag.htmlとして保存してください。
<script type="text/javascript">
function alert_3_times() {
alert('Hello World!');
alert('Javascript is Awesome!');
alert('See You Later ;)');
}
</script>
<button onclick="alert_3_times();">Alert 3 Times</button>
そしてブラウザーで開いて、ボタンをクリックすれば、Alretが三回出現するはず。
解説
ここでは、関数(function)という機能が利用された。この機能の詳細は次のLessonで詳しく説明するので、ここは「おまじない」と思ってください。
この関数の本体は長いため、タグの中に嵌め込むと大変なことになるので、<script>タグを使って別の箇所で記入し、関数名だけタグの中に入れていた。
別ファイルで記載する
HtmlファイルはあくまでもWeb Pageのフォーマットを記載するものなので、手続きなどをまとめて別のところに記載すれば、より管理しやすくなる。
作成して動かしてみよう
- まず
scriptsというフォルダーを作る。 - エディターを開いて、ソースコードを記入し、
scriptsフォルダー配下でscript.jsとして保存する。
function greet() {
var your_name = prompt('Plz Input Your Name','Neptunia'); // LoL! You See my hobby ;)
var confirm_msg = "Dear " + your_name + ", " + "Is JavaScript Awesome?";
var confirm_window = confirm(confirm_msg);
if (confirm_window === true) {
alert('Thank You ' + your_name + ' (^ - ^)');
}else {
alert("I'm So Said (; _ ;)");
}
}
- 新しいファイルを新規作成し、ソースコードを記入し、
js_file_demo.htmlと名付けて保存。
<script src="scripts/script.js"></script>
<button onclick="greet();">Hi! Click Me!</button>
- ブラウザーで開いてクリックすると、動く。
### 解説
ここのHtmlファイルの中に、`