ＪａｖａＳｃｒｉｐｔ講座
（メールマガジン編）

３/２５日発行　ヨッシーの”ホームページを作ろう！（JavaScript編）”★Vol.29★

今回はクッキーの操作についてやっていきたいと思います。
クッキーの操作は主に、
・データーの書き込み
・データーの読み込み
の２つです。
書き込みは簡単だと思いますが、読み込みが少し難しいかもしれません。

じゃあ、まずクッキーへデーターを書き込んでみよう。
クッキーへの書き込みは比較的簡単だよ。
クッキー内の情報はどのようなかたちになっていたかな？

このような形で書き込めばよかったんだよね。
じゃあ、自分の名前をクッキーに保存してみよう。
ヨッシーという名前をクッキーに保存してみるね。

    document.cookie = "myname=ヨッシー; expires=Fri,31-Dec-2030 23:59:59;"

これでクッキーにヨッシーを保存したことになるんだよ。
（ちなみに、識別するための名前をmynameにして、期限をFri,31-Dec-2030 23:59:59に設定した。）
そんなに難しくないよね。
期限は自分で好きなように設定できる。
（※よくわからない人はFri,31-Dec-2030 23:59:59にしておこう。2030年まで保存される）

どちらかというとこのクッキーからの読み込みのほうが少し難しいんだ。
仕組みとしては、まずクッキーからデーターを読み込んでくる。
次に、そのデーター(上のような形で保存されている)を分解してうまく欲しい情報だけを取り出す。
この２つの操作でクッキーからの読み込みを実現してみるね。
まずクッキーからデーターを読み込んでみよう。
これは、

のようにするんだったね。
これで、クッキー内の情報が変数に入れられるんだ。
この後、さっきも言ったように
その中から自分の必要な情報を取り出してくるという操作が必要になるんだ。
とりあえず、クッキー内のデーターさえ変数に入れればあとは、この変数をいろいろと処理して必要な情報を取り出せるんだよ。

じゃあ、まず実際にクッキーの内容を読み込んでみよう。

例）
今回の例ではクッキー内の
・・・・abcde;name=yossy;mail=eaab・・・・・
という情報から、nameにある、yossyという文字列を抜き出してみよう。

◆article = document.cookie + ";";
ここでは、articleという変数にクッキー内にある情報 + ";"という形で代入しているんだ。
(なぜ";"をつけるかについてだけれど、これはこういうものだと思っておいて欲しい。
実際は、区切りに";"が使われているので、後にこの";"を使っていろいろと作業をする。
だからデーターの最後を";"にしておくほうが都合がよい。)

◆data_n = article.indexOf("name",0);
次にここでは、実際に取得したいデーターを取り出すための作業に入っているんだ。
ここでやっていることは何かわかるかな？
    変数=文字列.indexOf(検索文字,検索開始位置)
これで文字列の検索ができたよね。(以前一度触れた)
つまり、今探したい文字列(name)のある場所をこれで探しているんだ。
            article.indexOf("name",0);
                ↓
articleからnameを0（一番前）から検索する

例）
article = ・・・・abcde;name=yossy;mail=eaab・・・・・
という情報があるときに、
data_n = article.indexOf(name,0);　　←nameの位置を調べる
とすると、nameの位置がわかる。

もし、検索しても文字列が見つからない場合は-1が返される。

◆data2 = article.substring(data_n,article.length);
上でnameなどの検索したい文字の開始位置がわかったので、
ここでは、その開始位置以降の文字列を全てdata2という変数に代入しているんだ。
        変数=文字列.substring(開始位置,範囲)
                    ↓
ある文字列から、開始位置以降の文字列を範囲分取得する
開始位置は当然さっきのdata_n（目的の文字のある場所）だね。
さらにそれ以降の全ての文字列を取得したいんだけど、実際にどのくらいの長さになるかわからないね。
でも、少なくてもarticle.lengthよりかは短いよね。
(article.lengthはarticleの全ての文字列の長さ。
ある開始位置以降のarticleの文字列の長さは、当然article.lengthよりも短くなるね。
※変数.lengthは変数の文字列の長さを調べる)
ここまでで、もともとの
    article = ・・・・abcde;name=yossy;mail=eaab・・・・・
というところから、
    data2 = name=yossy;mail=eaab・・・・・
という探したいname以降の文字列だけを取り出すことができた。

◆start = data2.indexOf("=",0)+1;
ここでは、nameの中身のyossyの初めの場所を取得している。
この命令の意味は、
data2という変数にある文字の初め(0)から"="という文字を探して、その番号に１を足す。
つまり、name=yossy;mail・・・のなかから一番初めの"="を探してその１つ後ろ、つまり、yossyのyの位置を示しているね。
これで、取り出したいyossyの一番初めの番号がわかったんだ。

◆start = data2.indexOf(";",0);
ここでは、一番初めから数えて何番目に";"があるかを調べている。
これで、yossyの最後の番号がわかったね。
この地点で
    name=|yossy|;mail=eaab・・・・・
という二つの"|"の番号を取得できたことになるんだ。

◆yourname = data2.substring(start,end);
よって最後にこれらの番号を使って。
start（yossyの先頭）からend(yossyの最後)までの文字列を抜き出した。
つまり、yossyを抜き出したことになるんだ。

ここで、まとめておくと。

のようになっているよ。
実際これを理解するのはちょっと難しいかもしれない。
次回は実際にサンプルを使って説明するからそこでもういちど考えてみてね。