【新人教育 JavaScript】Lesson 01 〜 JavaScript is Simple 〜

あらすじ

　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!"を表示する。

javascript_demo.html

<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_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として保存する。

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と名付けて保存。

js_file_demo.html

<script src="scripts/script.js"></script>
<button onclick="greet();">Hi! Click Me!</button>

• ブラウザーで開いてクリックすると、動く。

解説

　ここのHtmlファイルの中に、<script>タグはあったが、ソースコードは書いていない。src="scripts/script.js"という属性を利用してscriptsフォルダー配下のscript.jsを参照していた。
　もちろんインターネット上に存在する".js"ファイルも参照できます。例えば下記のコードはGoogleのサーバーでjQueryライブラリを参照することの意味。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

　また、JavaScriptの記述を".js"にまとめる場合、できればスクリプト専用のフォルダーを一個作って、その中に配置すると管理しやすい。
　なお、先ほど作成した<script>タグは相対パスを使っていた。フロントエンド(ブラウザー上)で動くもの、Htmlにしろ、JavaScriptにしろ、相対パスの原点はHtmlファイルである。仮に".js"ファイル内で何かを参照しようとしても、".js"ファイル出発の相対パスは使っちゃダメ。

要点復習

1. JavaScriptとJavaは全くの別物。
2. JavaScriptは単体で動かない、必ずHtmlと連携すること。
3. JavaScriptはタグの中、htmlの中、そして".js"ファイルの中から呼び出せる。

お疲れ様でした。
それでは。

目次へ戻る