第15話：正規表現

目次

• マンガ
• マンガ台詞
• 説明
• 『正規表現』による『置換』
• 『正規表現』の『検索文字列』
• 『正規表現』の『フラグ』
• 『無名関数』を使った『置換』
• 『正規表現』オブジェクト
• 『正規表現』による検索
• サンプルの入手

マンガ

マンガ台詞

【1Page】
遊：先生の話は 最近難しすぎるわ
    少しは私の頭に合わせて 簡単にしてよ！
先生：…その台詞 言っていて 悲しくないか？
遊：ちょっとだけ
麗：それで 先生
    今日の内容は 何ですか？
先生：あー すまん
    これは お前たちには 難しすぎるな
    説明はやめるよ
麗：では 遊を除け者にして 話を進めてください
遊：何～！
    それは許さん！

【2Page】
守：それで 今日の内容は 何ですか？
先生：『正規表現』だ
3人：正規表現！？
遊：何それ？
先生：文字列の検索や 置換を行うための 特殊なルールだ
遊：はー（姿勢を変える）
    この期に及んで 新しいルール？
    ルール ルール ルール！
    私たち学生は 校則でがんじがらめよ！

【3Page】
遊：で それを使うと 世の中 手抜きで 渡っていけるの？
先生：渡っていける
    他人の読書感想文を 書き換えて 自分のものに したりできる
遊：先生 ぜひ 教えてください
先生：それじゃあ 『置換』の説明をしよう
    こういった感想文があったとする
        // 感想文を変数『s』に格納
        var s = "『吾輩は猫である』の感想"
            + " 内木守<br>"
            + "　『吾輩は猫である』を読みました。"
            + "主人公に感情移入して…";
    この感想文を置換して 遊くんの感想文にするぞ
        // 変数『s』内の『内木守』を『安見遊』に
        // 『replace』で置換する
        // その結果を、変数『s』に再び入れる
        s = s.replace(/内木守/g, "安見遊");
        document.write(s);

【4Page】
    『『吾輩は猫である』の感想 安見遊
　『吾輩は猫である』を読みました。主人公に感情移入して… 』と表示
遊：おおっ 素晴らしい！
    守の感想文が 私の感想文になった！
守：（げんなり）
麗：この『replace』の 1つめの引数が 検索する文字で
    2つめの引数が 置き換える文字 なんですね？
        s = s.replace(/内木守/g, "安見遊");
                        ↑           ↑
                検索する文字　置き換える文字
先生：そうだ
麗：でも 1つめの引数が 見たことのない 形式なんですが
        /内木守/g
先生：この部分が 『正規表現』の 特殊なルールになる
        『正規表現』の書き方
        範囲の先頭を表す文字
        ↓
        /検索内容/フラグ
                ↑
        範囲の末尾を表す文字

【5Page】
先生：まずは『フラグ』だ 初心者は2つだけ 覚えておけばよい
        『正規表現』の『フラグ』
        書き方 /検索内容/フラグ
        例       /内木守/g
        フラグ ある場合            ない場合
        g       全て置換            1つだけ置換
        i       大文字、小文字を    区別する
                区別しない
先生：次に検索内容だが ここが『正規表現』の肝になる
    検索文字列に 特殊な記号を使えるのが
    『正規表現』の特徴なんだ
    詳しくは後で表を配るから 特によく使う記号だけ 説明するぞ
    まずは 『.』（ドット）だ
    これはどんな 文字でもよい 1文字を表す
    たとえば 『abcd axcy a1c2』を 『a.c』で検索すれば
    『a』と『c』の間に 1文字入っている 部分が一致する
麗：『a』『何でもいい1文字』『c』 というわけですね
先生：そうだ

【6Page】
先生：次は『[～]』だ
    これは 『[～]』内の どれかの文字と見なす という記号だ
    『a[bx]c』と 検索すれば…
守：『a』と『c』の間に 『b』か『x』が入っている 部分が一致します
先生：正解だ
先生：この『[～]』は 『[a-z]』のように 範囲指定もできる
    また『[^bx]』とすれば 『b』と『x』以外の文字という意味になる
    『a[^bx]c』と 検索すれば…
守：『a』『c』の間に 『b』『x』以外の文字 がある部分…
    つまり『a1c』のみが 一致します
        abcd axcy a1c2
先生：よくできたな　これが『正規表現』 の基本になる
麗：基本ということは 応用もあるんですか？

【7Page】
先生：実は『正規表現』には たくさんの記号がある
    その使い方だけで 本が出ているぐらい 複雑なんだ
    全てを教えるのは 大変なので
    なるべく情報を 絞って教える
    この表を見てくれ
    『A』は好きな文字に 置き換えて構わない
        『正規表現』の記号の一部
        書き方 意味
        A+      1個以上のA（可能な限り長く）
        A*      0個以上のA（可能な限り長く）
        A+?     1個以上のA（可能な限り短く）
        A*?     0個以上のA（可能な限り短く）
        A{3}    3個のA
        A{3,}   3個以上のA
        A{3,5}  3～5個のA
        A|B     AまたはB
麗：なんだか非常に システマティック ですね
先生：ああ パズルみたい だろう

【8Page】
先生：あと『正規表現』の 『置換』には もう1つ特徴がある
    それは 検索結果の 再利用だ
    この文章の 名前を入れ替えて みるぞ
        var s = "安見遊は内木守より強い";
        s = s.replace(/(.+)は(.+)より/g, "はより");
        document.write(s);
    『内木守は安見遊より強い』と表示
遊：げえっ 私が守より 弱くなってしまった！
先生：すごいだろう このように
    『(～)』で囲んだ文字列は 後で取り出せるんだ
    『』は最初の『(～)』 『』は2番目の『(～)』 を意味する
    『(～)』内の『.+』は 『.（任意の文字）』となり
    『+（1個以上）』で 何にでも一致する
        "安見遊は内木守より強い"
        一致　　一致
        /(.+)は(.+)より/
        取り出して利用
        "はより"
        2番目　1番目
        結果：内木守は安見遊より強い

【9Page】
先生：正規表現は 様々なテクニックが ネットで公開されている
遊：分かったわ
    分からない時は どんどん検索して 手抜きすればいいのね！
先生：まあ そういうことだ
遊：よーし 今日も頑張って 手抜きをするぞ！

説明

この章では、『正規表現』について学びます。『正規表現』は、文字列の検索や置換を行うための、特殊なルールです。この『正規表現』はJavaScriptだけでなく、多くのプログラミング言語や、検索ソフトでも利用されています。

『正規表現』はJavaScriptだけでなく、多くの場面で応用の利く知識です。『正規表現』をマスターすると、コンピュータをより高度に活用できるようになります。

それでは以下、『正規表現』について、詳しく解説していきます。

『正規表現』による『置換』

『正規表現』による『置換』を行う際は、検索する文字列と、置換する文字列を、以下のように書きます。

【正規表現による置換】

文字列オブジェクト.replace(/【検索する文字列】/【フラグ】,【 置換する文字列】)

上記は、文字列オブジェクトの、『replace』メソッドを利用して、文字列の置換を行う際の書式です（文字列もオブジェクトの一種で、プロパティやメソッドを持っています）。

『replace』メソッドでは、最初の引数に『検索文字列』と『フラグ』を、2番目の引数に『置換文字列』を書きます。この『検索文字列』と『フラグ』の部分（『/【検索する文字列】/【フラグ】』）が『正規表現』です。

【正規表現の部分】

/【検索する文字列】/【フラグ】

この『検索文字列』『フラグ』『置換文字列』には、実際には、以下のような内容を記入します。

上記の表の『例』の部分を、プログラムとして書いてみましょう。

var a = "『吾輩は猫である』の感想 内木守";  // 置換前の文字列
var b = a.replace(/内木守/g, "安見遊");     // 置換
alert(b);   // 結果を表示

【結果】

『吾輩は猫である』の感想 安見遊

『内木守』という文字列を検索して、『安見遊』という文字列に置き換えるプログラムです。この『replace』メソッドの引数に書いてある、『フラグ』の『g』は、『全て置換』という意味の記号です。

そのため上記のプログラムは、検索文字列『内木守』、フラグ『g』、置換文字列『安見遊』で、「文章中にある『内木守』という文字列を、『全て』『安見遊』に置換する」という処理になります。

『/』のエスケープ

さて、検索文字列は『/～/』のようにして、2つの文字で囲います。『/～/』の間に『/』を書きたい場合は、『\/』と書きます。

var a = "https://crocro.com/";  // 置換前の文字列
var b = a.replace(/https:\//g, "file:/");    // 置換。検索文字列内の『/』は、『\/』と書く
alert(b);   // 結果を表示

【結果】

file://crocro.com/

検索結果の取り出しと再利用

『検索文字列』中の『(～)』で囲んだ場所は、後で取り出して再利用できます。

正規表現の中で使用する際は、最初の『(～)』は『』という記号で、2番目の『(～)』は『』という記号で、3番目の『(～)』は『』という記号で……というように、『\』のあとに何番目の『(～)』かの『数字』を書いて、取り出すことができます。

以下の例では、『英数字で構成された文字列 (\w+?)』が、半角スペース後に『もう一度登場したら 』、『重複』と置換しています（『\w』は英数字を表す正規表現の記号）。

var namae = "dog cat cat monkey rat rat cow";       // 置換前の文字列
namae = namae.replace(/(\w+) /g, "重複");     // 置換
alert(namae);       // 結果を表示

【結果】

dog 重複 monkey 重複 cow

また、『検索文字列』中の『(～)』で囲んだ場所は、置換用の文字列としても再利用できます。実際には、こちらの用途の方が多いと思います。

その際、最初の『(～)』は『』という記号で、2番目の『(～)』は『』という記号で、3番目の『(～)』は『』という記号で……というように、『$』のあとに何番目の『(～)』かの『数字』を書いて、取り出すことができます。

以下、実際に検索結果を取り出して再利用する例です。

var bunsyou = "安見遊は内木守より強い";        // 置換前の文字列
bunsyou = bunsyou.replace(/(.+)は(.+)より/g, "はより");     // 置換
alert(bunsyou);     // 結果を表示

【結果】

内木守は安見遊より強い

この場合、最初の『(.+)』に一致する文字列は『安見遊』、2番目の『(.+)』に一致する文字列は『内木守』となります。この検索で『(～)』部分に一致した2つの文字列は『』（最初の括弧内の文字列）、『』（2番目の括弧内の文字列）として取り出して、『置換文字列』内で再利用できます。

上記プログラムでは、『はより』というように、『(.+)』に一致した部分の順番（『』『』）を、『』『』と入れ替えることで、名前を入れ替えた文字列を作成しています。

『正規表現』の『検索文字列』

『正規表現』の『検索文字列』には、様々な記号や書式が使えます。検索に使える記号や書式は非常に多いです。その一部を以下に示します。

正規表現でよく使う記号や書式:

以下、マンガ中で出てきた検索内容を、実際にプログラムとして書いて解説します。

実例1 『.』（ドット）を使った置換

まずは最初の例です。『.』（ドット）を使った検索です。

var a = "abcd axcy a1c2";   // 置換前の文字列
var b = a.replace(/a.c/g, "●");    // 置換
document.write(b);  // 結果を表示

【結果】

●d ●y ●2 

この例では、『a.c』を検索文字列として設定しています。『.』（ドット）は、どんな文字でもよい、任意の1文字を表す記号です。そのため『a.c』は、『a』『何でもよい1文字』『c』という文字を表すことになります。つまり『a』と『c』の間に、1文字だけ何かが入っている部分は、全て一致することになります。

上記の例では『abcd axcy a1c2』のうち、『abc』『axc』『a1c』という部分が一致します。

実例2 『[～]』を使った置換

次は『[～]』を使った検索です。これは『[bx]』などのように、角括弧の中にいくつかの文字を入れて使用します。『[bx]』と書いた場合は『bかxの文字1つ分』という意味になります。

それでは『a[bx]c』という検索文字列を設定して、置換を行ってみます。

var a = "abcd axcy a1c2";   // 置換前の文字列
var b = a.replace(/a[bx]c/g, "●"); // 置換
document.write(b);  // 結果を表示

【結果】

●d ●y a1c2 

『a』『bかxの1文字』『c』という条件に一致する『abc』と『axc』が置換されて『●』に置き換わります。

実例3 『[～]』を使った置換2

この『[～]』を使った検索では、『[abcde]』と1文字ずつ書く以外にも、文字列の範囲を指定することができます。『[a-z]』とすれば、小文字の『a』から『z』までの文字全てとなります。また、『[a-dxyz]』のように、『a』から『d』の範囲と『x』『y』『z』、といった指定を行うことも可能です。

また、後述の『正規表現でよく使う記号』を混ぜて『[a-z\t\n]』のように書くこともできます。この場合は、『a』から『z』の範囲の文字全てと『タブ文字』と『改行』の、いずれかに該当する1文字となります。

以下、範囲を指定した検索文字列の指定の例です。

var a = "abcd axcy a1c2";   // 置換前の文字列
var b = a.replace(/a[a-f]c/g, "●");    // 置換
document.write(b);  // 結果を表示

【結果】

●d axcy a1c2 

『a』『aからfの範囲の1文字』『c』という条件に一致する、『abc』が置換されて『●』に置き換わります。

実例4 『[^～]』を使った置換

『[～]』を使った検索では、『条件に一致する任意の1文字』を指定していました。しかし時には『条件に一致しない任意の1文字』を検索対象にしたい場合もあるでしょう。そういった場合に利用するのが『[^～]』という書き方です。

『[^～]』は、角括弧内の文字列に一致しない任意の1文字を指定する書き方です。『[^bx]』とすれば、『b』『x』以外の何か1文字という意味になります。

以下、『[^～]』を利用した置換の例です。

var a = "abcd axcy a1c2";   // 置換前の文字列
var b = a.replace(/a[^bx]c/g, "●");    // 置換
document.write(b);  // 結果を表示

【結果】

abcd axcy ●2 

『a』『bでもxでもない1文字』『c』という条件に一致する、『a1c』が置換されて『●』に置き換わります。

『正規表現』の記号のエスケープ

『正規表現』の記号を、記号ではなく文字列として扱いたい場合は、文字の直前に『\』を付けます。

var a = "本[book]";      // 置換前の文字列
var b = a.replace(/\[book\]/g, ""); // 置換
document.write(b);      // 結果を表示

【結果】

本

『\[』『\]』というように、『[』『]』の文字列を、『\』記号でエスケープしています。

上記のプログラムの場合、『[book]』という文字列がそのまま検索対象になります。そして検索文字列が、置換文字列『""』（空の文字列）で、置き換わります。そして、置換の結果残った文字列『本』が、変数『b』に入ります。

また、『\』自身を指定する場合は『\\』と書きます。

var a = "directory\\file.txt";     // 置換前の文字列
    // 文字列中の『\』は、実際には『\』に変換されて使用される

var b = a.replace(/^.+\\/g, "");  // 置換
document.write(b);      // 結果を表示

【結果】

file.txt

この『\』を『\\』と書く方法は、『正規表現』以外の文字列でも使用します。最初の行で『directory\\file.txt』と書いてある部分は、実際には『directory\file.txt』として、プログラム内では扱われます。

上記の検索文字列『^.+\\』の『.+』の部分は、「1文字以上の任意の文字列」となります。そのため、先頭（先頭を表す記号『^』）から『\』まで全てが、検索対象となります。

上記のプログラムは、先頭から『\』までの範囲の文字列を検索文字列として、置換文字列『""』（空の文字列）で置き換えるという処理です。結果として、『\』までの部分が全て削除された文字列『file.txt』が、変数『b』に入ります。

正規表現の、その他の記号

正規表現でよく使う記号

正規表現で知っていると役立つ書式（グループ化）

グループ化の例

以下、グループ化の例です。

var a = "abcdef abcxyz";    // 置換前の文字列
var b = a.replace(/abc(?=xyz)/g, "---");  // 置換
document.write(b + "<br>");       //結果を表示

【結果】

abcdef ---xyz

上記のプログラムの検索文字列『abc(?=xyz)』は、『abc』に『xyz』が続く場合に一致。ただし、『xyz』は検索結果に含めないという意味になります。

以下、もう一例です。

var a = "abcdef abcxyz";    // 置換前の文字列
var c = a.replace(/abc(?!xyz)/g, "---");  // 置換
document.write(c + "<br>");       // 結果を表示

【結果】

---def abcxyz

上記のプログラムの検索文字列『abc(?!xyz)』は、『abc』に『xyz』が続かない場合に一致。ただし、『xyz』は検索結果に含めないという意味になります。

それぞれ、『?』のあとが『=』なら『一致』、『!』なら不一致と覚えておくとよいです。

『正規表現』の『フラグ』

JavaScriptの『正規表現』では、『フラグ』として以下の文字を利用できます。

『フラグ』は『ig』のように、複数指定しても構いません。1つでも構いませんし、何も指定しなくても構いません。

以下、実際に『フラグ』を指定した例を示します。

var a = "abcdef ABCDEF abcdef ABCDEF";  // 置換前の文字列
var b = a.replace(/abc/gi, "---");      // 置換
document.write(b + "<br>");             // 結果を表示

var c = a.replace(/abc/g, "---");   // 置換
document.write(c + "<br>");         // 結果を表示

var d = a.replace(/abc/, "---");    // 置換
document.write(d + "<br>");         // 結果を表示

【結果】

---def ---DEF ---def ---DEF
---def ABCDEF ---def ABCDEF
---def ABCDEF abcdef ABCDEF

最初の例では、『g』『i』と2つの『フラグ』を指定しています。そのため、一致した全ての文字列を対象にして、大文字小文字の区別を付けずに、置換を行っています。

2番目の例では、『g』1つだけ『フラグ』を指定しています。そのため、一致した全ての文字列を対象にして、大文字小文字の区別を付けて、置換を行っています。

3番目の例では、『フラグ』を指定していません。そのため、一致した最初の文字列を対象にして、大文字小文字の区別を付けて、置換を行っています。

• 正規表現 - JavaScript | MDN
• とほほのJavaScriptリファレンス - 正規表現（RegExp）
• 「正規表現と任意の1文字」～マンガでプログラミング用語解
• 「正規表現と繰り返し」～マンガでプログラミング用語解
• 「正規表現と最長最短一致」～マンガでプログラミング用語解
• 「正規表現と文字セット」～マンガでプログラミング用語解
• 「正規表現とg, iフラグ」～マンガでプログラミング用語解
• 「正規表現と先頭と末尾」～マンガでプログラミング用語解
• 「正規表現とORとグループ」～マンガでプログラミング用語解
• 「正規表現と後方参照」～マンガでプログラミング用語解

『無名関数』を使った『置換』

『replace』メソッドの『置換文字列』部分には、文字列だけでなく、関数を指定することができます。これは、配列のソート処理の引数に、関数を指定したことに似ています。

【正規表現の書き方2】

文字列オブジェクト.replace(/【検索する文字列】/【フラグ】,【 置換処理を行う関数オブジェクト】)

上記の書き方で、『replace』メソッドの引数に、関数オブジェクトを指定した実例を示します。

var a = "掛け算12 掛け算34 掛け算56";    // 置換前の文字列
var b = a.replace(/掛け算(\d)(\d)/g, function (str, s1, s2) {
    var calc = s1 * s2;
    return "結果" + calc;
});        // 置換
document.write(b);      // 結果を表示

【結果】

結果2 結果12 結果30

上記のプログラムの説明を行います。

『replace』メソッドの引数に指定した関数オブジェクトの、最初の引数『str』は、検索に一致した全体を表します。

2つ目の引数『s1』は、最初に『(～)』に一致した部分になります。また、3つ目の引数『s2』は、2番目に『(～)』に一致した部分になります。以降、引数を増やせば、『(～)』に対応した引数を1つずつ増やせます。これらの2番目以降の引数は、置換文字列で指定した『』『』などと同じ内容になります。

上記のプログラムでは、『(\d)』『(\d)』とすることで、『s1』に1文字目の数字を、『s2』に2文字目の数字を格納しています。最初の一致部分『掛け算12』では、『s1』が『1』、『s2』が『2』になっています。そして、関数内で計算を行い、戻り値として『結果2』という文字列を作成しています。

置換処理を行う関数オブジェクトでは、戻り値の内容が、置換される文字列になります。そのため、『掛け算12』は、戻り値である『結果2』に置換されます。

続けて、『掛け算34』では、戻り値が『結果12』、『掛け算56』では、戻り値が『結果30』になります。最終的に、『掛け算12 掛け算34 掛け算56』という元の文字列は、『結果2 結果12 結果30』という文字列に置換されます。

『正規表現』オブジェクト

『正規表現』は、『/～/フラグ』と書いてきました。しかし、これは正規表現オブジェクトを簡略化した、特殊な書き方です。

実際は『RegExp』という正規表現オブジェクトが内部的には使われており、このオブジェクトが、置換や検索の引数として利用されます。

この『RegExp』は、『new』を使い、オブジェクトとして作成して、変数に格納できます。何度も使う検索式は、変数に入れて再利用するとよいです。

var re = new RegExp("abcd", "ig");  // 正規表現オブジェクトを作成
var a = "abcd aBCd aXYd";           // 置換前の文字列
var b = a.replace(re, "----");      // 置換
document.write(b);    // 結果を表示

【結果】

---- ---- aXYd

この正規表現オブジェクトは、『/～/フラグ』という書き方で作成することもできます。

var re = /abcd/g;     // 正規表現オブジェクトを作成
var a = "abcd aBCd aXYd";       // 置換前の文字列
var b = a.replace(re, "----");  // 置換
document.write(b);    // 結果を表示

【結果】

---- aBCd aXYd

『正規表現』による検索

『正規表現』を利用すれば、複雑な検索を行えます。『正規表現』の検索方法として代表的なものを、以下に示します。

『match』- フラグに『g』がない場合

『match』メソッドの戻り値には、検索結果にまつわる多くの情報が含まれています。その内容は、正規表現に『g』フラグがあるかどうかで変わります。

以下、まずはフラグに『g』がない場合（一致は1つ）の例を示します。

var a = "mn abcd aBCd aXYd mn";
var res = a.match(/a(.)(.)d/i);
if (res !== null) {
    document.write("入力文字列 : " + res.input + "<br>");
    document.write("一致位置 : "   + res.index + "<br>");
    document.write("結果格納数 : " + res.length + "<br>");

    // 0は一致した文字列全体、1以降は丸括弧の中身
    for (var i = 0; i < res.length; i ++) {
        document.write("結果" + i + " : " + res[i] + "<br>");
    }
}

【結果】

入力文字列 : mn abcd aBCd aXYd mn
一致位置 : 3
結果格納数 : 3
結果0 : abcd
結果1 : b
結果2 : c

検索結果を、『if (res !== null)』のように『if』文で囲っていることも注目してください。検索した結果、一致する部分がない場合には、『res』は『null』になります。そのため、検索が一致する場合のみ、情報を取り出しています。

一致した場合、『match』の戻り値は配列です。通常の配列に『input』『index』というプロパティが追加されています。

『match』- フラグに『g』がある場合

次はフラグに『g』がある場合（一致は複数）の例を示します。

var a = "mn abcd aBCd aXYd mn";
var res = a.match(/a(.)(.)d/ig);
if (res !== null) {
    document.write("結果格納数 : " + res.length + "<br>");

    // 一致した文字列全体が順に入っている
    for (var i = 0; i < res.length; i ++) {
        document.write("結果" + i + " : " + res[i] + "<br>");
    }
}

【結果】

結果格納数 : 3
結果0 : abcd
結果1 : aBCd
結果2 : aXYd

一致した場合、『match』の戻り値は配列です。

『search』

『search』の例も示します。『search』の戻り値は、一致した位置（0から始まる）になります。

var a = "mn abcd aBCd aXYd mn";
var pos = a.search(/a(.)(.)d/i);
document.write("一致位置 : " + pos);

【結果】

一致位置 : 3

サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード （右クリックから保存してください）

『sample1.html』（感想文の置換）を表示

『sample2.html』（検索結果の再利用）を表示

『sample3.html』（説明中の置換処理まとめ）を表示

『sample4.html』（『無名関数』を利用した置換）を表示

『sample5.html』（正規表現オブジェクト）を表示

『sample6.html』（正規表現による文字列検索）を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

メニュー

• 第1部 JavaScriptプログラミングの基本
  • 第1話：プロ部登場
  • 第2話：プログラムって何？
  • 第3話：書いてみよう
  • コラム：いろいろな進数
  • 第4話：数値変数と計算
  • コラム：数値について
  • 第5話：文字列変数と様々な出力
  • 第6話：真と偽 条件分岐と演算子
  • 第7話：ループ処理
  • 第8話：配列
  • 第9話：オブジェクト
  • 第10話：関数
  • 第11話：変数のスコープ
  • 第12話：型、オブジェクト、クラス
  • コラム：例外処理
  • コラム：ES2015(ES6)

• 第2部 脱初心者プログラミング
  • 第13話：日付オブジェクト
  • 第14話：配列のソートと無名関数
  • コラム：配列の様々なメソッド
  • 第15話：正規表現
  • コラム：正規表現の実例

• 第3部 Webページのプログラミング
  • 第16話：WebページのJavaScript
  • 第17話：Webページの書き換え
  • 第18話：イベントによる処理
  • 第19話：タイマーによる処理
  • 第20話：スタイルシート
  • 第21話：クッキーの利用
  • コラム：js-cookieの利用

• 第4部 ライブラリ
  • 第22話：jQueryの利用
  • コラム：jQueryによるフォーム操作
  • 第23話：jQueryを利用した通信処理
  • コラム：jQuery API文書 日本語目次

• 第5部 応用編
  • 第24話：ブックマークレット
  • 第25話：Node.jsを利用したローカルアプリケーション
  • コラム：ElectronとNW.js
  • 第26話：WSHを利用したローカルアプリケーション
  • 第27話：HTAを利用したウインドウ付きアプリケーション

• 第28話：終わりに
• あとがき

JavaScript

レトロゲーム風RPGの
全コードを掲載して
解説した本。


タワーディフェンスの
全コードを掲載して
解説した本。


『テトリス』や『ぷよぷよ』に
類似した落ち物パズルの
全コードを掲載して
解説した本。


ライブラリを使わず、
全コードを書いて、
リバーシゲームを作る
までを徹底解説。

その他、特殊な技術書
多数あります

Click!