JavaScript

JavaScriptは、最も普及しているプログラミング言語です。

webブラウザに搭載されているため、iOSでも、Androidでも、Windows でも動きます。

この本では初めてプログラミングをされる方を対象とし、基本的なJavaScriptの書き方を解説します。

JavaScriptは初心者が最初に覚えるのにお勧めなプログラミング言語です。何かをダウンロードしたりインストールしたりすることなく、ブラウザだけで簡単にプログラムを作ることができるからです。また、国際標準化されたECMA Scriptに準拠しているため、仕様が安定しています。

この本で挫折した方は、Scratchなどの言語から始めることもご検討ください。

目次[編集]

進捗状況の凡例

数行の文章か目次があります。

:本文が少しあります。

:本文が半分ほどあります。

: 間もなく完成します。

: 一応完成しています。

はじめに (2017-01-26)
変数 (2017-01-26)
1. ※ 参考: 演算子 (2017-01-26)
2. ビット演算 (2016-02-19)
文字列 (2016-02-19)
数値 (2016-02-19)
配列 (2016-02-19)
制御構造 (2016-02-19)
関数 (2016-02-19)
イベント処理
オブジェクト (2016-02-19)
クッキー
※ ファイル入出力の機能は無い（詳しくは後述）
正規表現 (2016-02-19)
例外処理 (2016-02-19)
DOM (2016-02-19)
JSON (2016-02-19)
XML (2016-02-19)
XMLHttpRequest (2016-02-19)
リファレンス

JavaScript/画像表示

無い機能[編集]

ファイル入出力は無い[編集]

上記の目次に、ファイルへの書き込みなどの、「ファイル入出力」に関する単元が上記の目次に無いのに気づいただろうか？

実はセキュリティなどの理由から、一般的なwebブラウザ上では、JavaScriptによるファイル操作のプログラムが原則的に動作しないようになっている。

サーバーなど、webブラウザ以外の環境でしか、JavaScriptによるファイル操作のプログラムは動作しない。また、一般にサーバー側でプログラムを書く場合には、PHP や Perl などといった、JavaScript以外のプログラミング言語が用いられる。

このため、本wikiの本科目では　JavaScript によるファイル操作のプログラムは扱われない。

ただし、HTML5からFile API というAPIが追加され、このFile API を通して、限定的にだが、ファイルの読み込み程度の操作なら可能になっている。

これとは別に、Windows限定だが、JavaScript風のスクリプト言語であるJScript（ジェイスクリプト）というのが、実はコマンドプロンプト（DOSプロンプト）から起動できるようになっているので、これを使うと、webブラウザを経由しないので、ファイル入出力などのファイル操作も可能である。しかし、JScriptでは、web部ブラウザ用の標準の命令が使えないし、GUI的な機能もほぼ無い（簡単なテキスト処理や、初歩の数値計算などがJScriptなどで可能）。

JavaScript/JScript (Windows限定)

これとは別に、Google Chrome 限定だが、Native File System API というファイル操作をできるAPIが用意されており、Google Chrome 上でプログラムを動かしている場合にだけ、ファイルの読み書きなどの操作が出来るGoogle Chrome 限定のAPIがあり、Chrome 上で動く JavaScript などと連動できる。

クラスはES5以前は無かった[編集]

2015年からのES6(ECMAScript)で、JavaScriptにクラスの機能が追加された。（Java や C# という言語には、クラスという機能がある。そのクラスと類似の機能が JavaScriptにも追加された。）

それ以前のもともとの古い JavaScript にはクラスの機能は無い。

たとい読者がクラスを知らなくても、一般的なwebページを作るぶんにはクラス機能は利用しないのが通常なので、一般的なJavaScriptの用途では、特に問題は無い。

派生言語[編集]

TypeScript[編集]

TypeScript（タイプスクリプト）という、JavaScriptの各種の構文に型を追加した派生言語にある。

TypeScriptの用途としては、型システムがあるためにコンパイラが実行前の段階でもバグを自動的に発見しやすいという長所があるので、大規模開発のwebアプリで TypeScript が用いられる場合もある。

だが、一般にウェブブラウザの言語としては TypeScript は採用されていない。

そのため、もし TypeScript の命令をブラウザで表示など実行したい場合、別途、TypeScriptコンパイラによるJavaScriptへの変換（これも「コンパイル」という）が必要であるが、しかしこれだけでは、まだHTMLタグが無いので表示しない。

つまり、TypeScript には HTML関連タグの生成・管理の機能は一般に無い。

なぜなら TypeScriptのコンパイラ（TYpeScript→JavaScript）の機能は、けっしてHTMLの組み込み用に自動変換したりする機能ではなく、素の JavaScript の文法どおりに変換する機能である。

※ 本書のJavaScriptの入門レベルの解説では、説明の都合上、HTMLタグと組み合わせての形式で、ブラウザですぐに実行表示できるような形式でほとんどの JavaScript のコードを掲載しているが、実はもともとの国際規格上では、HTMLタグの規格と JavaScriptの規格とは別規格である。（おそらく実務上は、お互いに連絡しあっているだろうが、しかし、あくまで別規格。）

なので、べつにTypeScriptが特別にHTMLを除外しているワケではなく、あくまで、もともとJavaScriptというのは文法上はHTMLとは独立したものである。

派生フレームワーク[編集]

JavaScript用のライブラリで、便利な関数などをまとめたライブラリを提供している企業・コミュニティがいくつかある。

そのような企業・コミュニティなど提供のJavaScript用のライブラリが、俗にJavaScript用の「フレームワーク」と言われる。

こういう派生フレームワークは、JavaScriptの公式コミュニティの開発ではないので、JavaScript公式によるサポートは無い。（代わりに、それぞれのフレームワークの開発コミュニティなどがサポートしている。つまり、フレームワークの開発コミュニティは、JavaScriptの開発コミュニティとは、別団体である。）

HTML4時代の2005～2010年の古くはjQuery（ジェイクエリ）というフレームワークが有名であったが、（また Ajax （アジャックス）というツールが jQuery によく対応していた）

しかしHTML5時代になり、jQueryはHTML4を前提とした構成のため、競争相手としてTML5対応を謳った新たなフレームワークも登場してきており、下記の3つのフレームワークが有名である。

代わりに

Angular （アンギュラー） ※ 詳しくは w:Angular

React （リアクト） ※ 詳しくは w:React

vue.js (ビュー・ジェイエス) ※ 詳しくは w:vue.js

※　掲載順はアルファベット順

という新興のJavaScriptフレームワークが、2010年以降のHTML5時代から台頭してきている。

しかし2020年の現状では依然としてjQueryが業界で大普及しているのが実情である。jQuery自身も更新により、HTML5対応のブラウザやサーバーでも問題なく動作する。

なおAngularのプログラム言語は、正確には (JavaScript ではなく) TypeScript である。w:TypeScript

またなお、Node.js はフレームワークではなく、（ Node.js は）実行環境です。

また jQueryの問題点はHTML5以前を引きずっているかどうかだけでなく $(document).ready(function(){のような構造の分かりづらい、jQuery命令群の命名規則もある（たとえば、例の$なんとかの命令の場合、丸カッコの左「(」が3個なのに、丸カッコの右「)」は2個である。

こういったコードを書いたあと、jQueryの命令文を書き、最後に}); で終了するので、結果的に丸カッコの左右の個数が一致するという仕組みである。(JavaScript以外の派生フレームワークでも、たとえばPHPの有名な派生フレームワークのひとつ Laravel でも同様に }); で終了するコードがよく出て来るので、プログラマーはこういう記法にも、なれるしかない。)

なおjQueryの「$」記号は実は単なる関数名「$」である。JavaScriptでは関数名に「$」記号を使うことは禁止されていない。JavaScriptのテンプレートリテラルでも同じ$記号を使うが、しかしjQueryの$記号はテンプレートリテラルとは無関係である）。

このほか、jQueryにはオブジェクトとメソッドのあとに、さらにメソッドがつくという、メソッドチェーンという記法も良く使われる。（なおjQueryを導入していない一般のJavaScriptでもメソッドチェーン自体は存在している。）

こういう記法の意味の把握の難しさはjQueryだけでなく、jQuery以外の Angular / React / vue.js といった他のフレームワークでも、それぞれ難しい部分の場所の違いはあれど、なぜか記法の各所で紛らわしい部分があったりして、なかなかヤヤコシイのが実情である。

派生フレームワークはプログラミング言語ではなく、あくまでJavaScriptのライブラリでしかないのだが、しかし上述のどの派生フレームワークも、なぜか設計思想としてプログラミング言語的な記法を目指している方針のようである。そのため、どのフレームワークでも、JavaScript側の文法と、フレームワーク側の記法との接触する箇所で、文法（？）というか記法が、まぎらわしくなっている。

HTML5対応を謳っていてもいなくても、JavaScript用の上述の4つのどの有名フレームワークも、記法のまぎらわしさが、何も解決していない。

Vue.jsの使い方[編集]

※ 記事が充実したらサブページに移動してください。

まず、CDNにリンクしなくても使える。

公式サイトのこのページから、vue.js をダウンロードできる。

使用するサーバーは、webサーバでありさえすれば、なんでもよく、Apacheで構わない。node.jsでなくてもいい。

ただし、商用などの厳しい用途で使うには、Apacheの場合はJavaScript実行環境がアクセスしてきたwebブラウザによって異なるので、もしかしたらnode.jsのほうがJavaScript実行環境をサーバ側にインストールされたnode.jsに統一できるので良いかもしれない。

本wikiでは、説明の単純化のため、Apache上にHTMLをアップロードすると仮定して説明する。

vue.js本体を公式サイトからwebブラウザで「ファイル」＞「保存」する方法でタウンロードしてきて、ダウンロードしてきた「vue.js」をApacheのドキュメントルート(/var/www/html/ あたり) に入れておけば、あとはHTMLファイル中でsrcタグでリンクするだけで、vue.jsのテンプレートを使えるようになる。

ドキュメントルートなど公開フォルダにvue.jsを入れておかないと、webブラウザからApache上で公開されているHTMLファイルにアクセスしたときに、そのHTMLファイルがvue.jsを読み取れずにエラーになってしまう。

webブラウザからアクセスしたHTMlファイルを、ドキュメントルート中に保管してある vue.js にアクセスさせる場合、srcタグには http://localhost/vue.js のように、記述する。こうしないと、webブラウザで見たときに、アクセスできない。

コード例

<!DOCTYPE html>
<html>

  <head>
    <title>テスト</title>
    <script src="http://localhost/vue.js"> </script> 
  </head>

  <body>
    <div id="app">
      <p>{{ msg1 }}</p>
      <p>{{ 13 + 5 }}</p>      
    </div>

    <script> 
      let Obje1 = new Vue({
          el: "#app",
          data: { 
              msg1: "Hello world!" 
          }
      });
    </script>
    
  </body>
</html>

表示結果

Hello world!

18

コードで script タグが2箇所に分かれて記述されているのが読者には気持ち悪いかもしれないが、しかし、こういう順序で記述しないとエラー的な動作になる。

vue.js でテンプレートを表すには、ヒゲ括弧 {{ }} を使う。

vue,js界隈では、テンプレートのためにを使う書式のことを「マスタッシュ構文」というが、「マスタッシュ」とは、ちょびヒゲの事なので（ヒゲ括弧を横にすると、ちょびヒゲのように見える）、本wikiでは、簡単にヒゲ括弧とかヒゲ文とか呼ぶことにする。

new 宣言を使い、オブジェクトとして、「Vue」を作成する必要がある。他の名前だとエラーになる。

elプロパティやdataプロパティも、名前が決まっている。なお、特に断りなく「プロパティ」という用語を使ったが、vue.js界隈はelやdataを「プロパティ」に分類している。

if文などのHTML埋め込み

vue.jsでは、HTMLタグに「v-if」という vue.js 専用のプロパティのようなものを付け加える方法により、HTMLに if 文を埋め込む。けっしてヒゲ括弧{{ }} を使うのではない。（Pythonなど他の言語のフレームワークだと、ヒゲ括弧にif文を記載する方式で埋め込むのもあるので、混同しないように。）

なお、これら v-ifで表示の条件による切り替えできる機能のことを v-if ディレクティブと呼ぶ。

コード例

<!DOCTYPE html>
<html>

  <head>
    <title>テスト</title>
    <script src="http://localhost/vue.js"> </script> 
  </head>

  <body>
    <div id="app">
      <p> if文テスト </p>
      <p v-if="1 == 1"> aaaaa </p>      
    </div>

    <script> 
      let Obje1 = new Vue({
        el: "#app",
      });
    </script>
    
  </body>
</html>

表示結果

論理式 1==1 は真なので、このpタグが有効になり、

aaaaa

と表示される。

v-ifの論理式が偽の場合

<!DOCTYPE html>
<html>

  <head>
    <title>テスト</title>
    <script src="http://localhost/vue.js"> </script> 
  </head>

  <body>
    <div id="app">
      <p> if文テスト </p>
      <p v-if="1 == 3"> aaaaa </p>      
    </div>

    <script> 
      let Obje1 = new Vue({
        el: "#app",
      });
    </script>
    
  </body>
</html>

論理式 1==3 は偽なので、このpタグは無効になり「aaaaa」は非表示になる。

v-ifに変数を使う場合

下記のようにv-ifディレクティブに変数を使う場合、dataプロパティ中のJSON形式で指定しないといけない。

JavaScript中の命令で代入しても、認識しない。

<!DOCTYPE html>
<html>

  <head>
    <title>テスト</title>
    <script src="http://localhost/vue.js"> </script> 
  </head>

  <body>
    <div id="app">
      <p>{{ msg1 }}</p>
      <p v-if="Flag"> aaaaa </p>      
    </div>

    <script> 
      let Obje1 = new Vue({
          el: "#app",
          data: { 
              msg1: "Hello world!" ,
              Flag: true,
          }
      });
      
      // Flag = true; // これを書いても認識されず無効
    </script>
    
  </body>
</html>

変数の値を変えたい場合は、変数の値をmethodsプロパティを使う方法がある。

未分類[編集]

クッキー[編集]

PHPのクッキー作成の関数である setcookie() で作ったクッキーは、

JavaScript の document.cookie; では読み込めない。

参考文献[編集]

外部リンク[編集]

JavaScript - MDN

ウィキペディアにJavaScriptの記事があります。