JavaScript入門
JavaScriptの成り立ち
1995年、JavaScriptは、Netscape Navigator 2.0というブラウザに実装される形で登場しました。当初、JavaScriptはあまり複雑な処理を行うことを想定して作られたプログラミング言語ではなく、あくまでWebシステムの開発に「おまけ」として使う程度でした。同じころ、Microsoft社によってJscriptというJavaScriptに似たプログラミング言語が開発され、Internet Explorer 3.0というブラウザに実装されました。このJScriptとJavaScriptは非互換のため、Webシステムの開発者はブラウザの種類ごとに異なるコードを記述しなければなりませんでした。そこで、1997年、情報通信システムの国際的な標準化団体であるECMA Internationalによって、JavaScriptの中心的な技術がECMAScript（エクマスクリプト）として標準化されることになりました。以降、ECMAScriptの仕様はたびたび更新され、それに伴ってJavaScriptも進化を続けます。
JavaScriptとECMAScript
ECMAScriptとは、プログラミング言語の仕様のことを指します。一方、JavaScriptは、ECMAScriptの仕様をもとに実装されたプログラミング言語です。ECMAScriptは、ECMA Internationalという情報通信システムの分野における国際的な標準化団体のTC39という委員会で仕様が決められています。
ECMAScriptとバージョン
当初、JavaScriptを用いて複雑な機能を実装することは想定されておらず、時代の変化に応じて様々な機能がJavaScriptに追加されてきました。2011年にリリースされた第5.1版では、仕様書の修正のみが行われ、新しい機能の追加は行われませんでした。第6版以降は1年ごとにアップデートされており、ECMAScriptのバージョンはこの発行年をとってES2015、ES2016などのように表記されています。また、第5版から第6版がリリースされるまでにおよそ6年もの歳月がかかっています。そのため、第5版から第6版へのアップデートでは、多くの様々な機能が追加されています。なお、現在の主要なブラウザはES6（ES2015）に対応しているため、ES6の記法は問題なく使用することができます。
| 発行年 | バージョン | 通称 |
|---|---|---|
| 2009 | 5版 | ES5 |
| 2011 | 5.1版 | ES5 |
| 2015 | 6版 | ES2015（ES6） |
| 2016 | 7版 | ES2016（ES7） |
| 2017 | 8版 | ES2017（ES8） |
| 2018 | 9版 | ES2018（ES9） |
| 2019 | 10版 | ES2019（ES10） |
| 2020 | 11版 | ES2020（ES11） |
| 2021 | 12版 | ES2021（ES12） |
| 2022 | 13版 | ES2022（ES13） |
ES6以降のECMAScriptの仕様は、GitHub上で管理されており、最新のものが常に公開された状態で仕様が決定されていきます。この仕様決定のプロセスは「Living Standard」と呼ばれています。ECMAScriptの仕様決定フェーズはStage0からStage4まであり、Stage2以降のものがEs2021やEs2022などに年次の仕様書の草案としてまとめられます。そのため、ECMAScriptの仕様は年に1回更新されるものではなく、あくまでその年にStage2まで決まった仕様をまとめたものがES202、ES2021といった形で公開されます。使用してよいか判断するには、Stage3まで進んでいるか確認する必要があります。
| 段階 | 通称 | 概要 |
|---|---|---|
| Stage0 | Strawman | アイデアレベル |
| Stage1 | Proposal | 機能提案・検討 |
| Stage2 | Draft | 暫定的に仕様決定 |
| Stage3 | Candidate | テスト・実装 |
| Stage4 | Finished | 仕様決定 |
MDN
JavaScriptの言語仕様やビルトインオブジェクト、HTMLやCSSも含めたWeb技術全般の資料を集約したサイトMDNという場所があります。
https://developer.mozilla.org/ja/docs/Web
JavaScriptと実行環境
JavaScriptが動作する環境は、「ブラウザ環境」と「Node.js環境」があります。
ブラウザ環境
JavaScriptが利用されている最も一般的な環境がブラウザ環境です。ブラウザでは、取得したコンテンツを画面い表示する処理（レンダリング）やユーザー入力処理（UI）など様々な処理を行っています。そして、それらの機能の中で、JavaScriptコードを解析して実行する処理の事をJavaScriptエンジンと言います。
JavaScriptコードは、JavaScriptエンジンの上で実行されることになります。JavaScriptエンジンには、様々な種類があります。たとえば、Firefoxブラウザでは、SpiderMonkey、Chromeブラウザでは、V8とうJavaScriptエンジンが搭載されています。V8はGoogle社が開発するJavaScriptエンジンですが、オープンソースのため、同社が開発するChromeブラウザ以外に、Microsoft社が開発するEdgeブラウザでも使用されています。また、Node.JsというJavaScriptの実行環境でも、V8がJavaScriptエンジンとして採用されています。なお、SafariとJavaScriptCoreはApple社が開発し、FirefoxとSpiderMonkeyはMozilla財団という団体が開発しています。
ブラウザ環境とWebAPI
ブラウザ環境では、ECMAScriptの仕様で決められている機能に加えてWebAPIが使用できます。WebAPIとは、JavaScriptコードからブラウザを操作するために、ブラウザがアプリケーションの開発者に提供してる機能のことです。WebAPIを使うことで、ブラウザ独自の機能を利用できます。WebAPIに含まれるDOM APIを使えば、JavaScriptコードからブラウザの画面の表示や変更を行えます。また、GeolocationAPIを使えば位置情報などを取得できます。
Node.js環境
JavaScriptは、長い間、ブラウザ環境で使用するプログラミング言語でしたが、近年、Node.Jsというソフトウェアでも使用できるようになりました。Node.jsとは、ブラウザなぢでJavaScriptコードを実行できるようにした環境です。以前はブラウザ上でしか使用されなかったJavaScriptが、Node.jsの登場でスマホアプリやデスクトップアプリの開発など様々な用途で使われるようになっています。Node.js上で実行するJavaScriptコードは、ECMAScriptに加えてCommonJSというモジュールを管理する仕組みが使用できます。
このように実行環境にって使用できる機能が変わるため、ブラウザ上では問題なく動くコードも、Node.js上では動かないということもあります。どちらの環境でも動作するコードをUniversalJavaScriptと呼びます。
Node.jsの他にもReact.jsやVue.jsなど語尾に「.js」とつく用語が多数ありますが、Node.jsはJavaScriptの実行環境です。React.jsやVue.jsはJavaScriptフレームワークであるため、Web開発でよく使う機能が集まったコードです。
開発環境の構築
JavaScriptの開発環境は、以下の２つを使用します。
- Visual Studio Code
- Chromeブラウザ
JavaScriptの実行
HTML内に記述するパターンで、1行のJavaScriptコードを実行します。ブラウザ上でファイルを実行します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>JavaScript サンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<script>
window.alert("hello world")
</script>
</body>
</html>実行結果
JavaScriptの実行で気を付けること
ブラウザでWebサイトを開いときに最初に表示される画面（ファーストビュー）は、なるべく早く表示する必要がります。ブラウザが画面を表示するまでに、「HTMLパーサー」と呼ばれる機能によってHTMLからDOMツリーを作成する工程があります。この解析中にScriptタグを見つけると、HTMLパーサーはHTMLの解析を一時中断して、Scriptタグ内に記述されているJavaScriptを実行します。そして、JavaScriptコードの実行が完了すると、引き続きHTML解析を行います。このような場合、ファーストビューの表示が遅くなる問題が発生します。この問題を解決する１つの方法として、Scriptタグに対して「defer属性」を付与する方法があります。
<script src="./script.js" defer></script>なお、defer属性はHTML内のJavaScriptコードには機能しません。
コメントの書き方
JavaScriptのコメントは、2種類が用意されています。1つめは1行コメントである「//」。もう一つが複数行のコメントとする「/*~*/」です。「/**/」で囲まれた部分はすべてコメントとしてみなされ、処理されません。
<script>
var a; //1行コメント
var b; /*1行コメント */
/*
複数行のコメント
*/
</script>エスケープシーケンス一覧
| エスケープシーケンス | 意味 |
|---|---|
| \b | バックスペース |
| \t | 水平タブ |
| \v | 垂直タブ |
| \n | 改行 |
| \r | 復帰 |
| \f | 改ページ |
| \” | ダブルクォート |
| \’ | シングルクォート |
| \` | バッククォート |
| \\ | バックスラッシュ |
| \0 | NULL文字 |
| \xXX | 2桁の16進数が表すLatin-1文字 |
| \uXXXX | 4桁の16進数が表すUnicode文字 |
| \u{XXXXXX} | 16進数のコードポイントが表すUnicode文字 |
console.log( "1行目\n2行目" );
>1行目
2行目予約語一覧
| break | case | catch | class | const | continue | debugger |
| default | delete | do | else | export | extends | finaly |
| for | function | if | import | in | instanceof | new |
| return | super | switch | this | throw | try | typeof |
| var | void | while | with | enum |
Strictモードで追加される予約語一覧
通常は、「Strictモードで追加される予約語一覧」のキーワードも使用できますが、JavaScript 実行時に厳しくエラーチェックするStrictモードでは使用できません。現在のJavaScript は、Strictモードを前提に実行するべきなので変数名として使用しないほうがよいでしょう。
| implements | let | private | public | yield |
| interface | package | protected | static |
一般的な識別子の命名規則
識別子の命名には、一般的にキャメルケース、スネークケース、またはパスカルケースといった手法が使われます。
スネークケース
スネークケースでは、単語と単語をアンダースコア（_）で結合し、すべて小文字で表現します。小文字とアンダースコアで構成された識別子が、蛇が地上を這っているように見えるため、スネークケースと呼びます。
let full_name = "山田太郎";
let place_live = "宮城県";キャメルケース
キャメルケースでは、単語と単語を結合して、1つ目の単語は小文字で始め、2つ目以降の単語の先頭は大文字にします。結合された部分がラクダのこぶに見えるため、キャメルケースと呼びます。
let fullName = "山田太郎";
let placeLive = "宮城県";近年のトレンドでは、変数名や関数名はキャメルケースを使用します。
パスカルケース
パスカルケースは、キャメルケースと似ていますが、一番最初の単語も大文字で始めます。一般的にパスカルケースは、コンストラクタ関数やクラスで使用されるため、それら以外には使わないようにしています。これは、開発者間の暗黙的なルールの1つです。
//クラスの場合
class MyClass{}
//コンストラクタ関数
function MyFunction(){}
//一般的な変数にはパスカルケースを使用しない
let FullName = "山田太郎";DOMの階層図
