先生と生徒の会話形式で理解しよう

生徒

インターネットの通信で、買い物のカートに商品を入れたまま別のページに移動しても中身が消えないのはどうしてですか。

先生

それは、ウェブアプリがセッションやクッキーという仕組みを使って、利用者の情報を覚えているからですよ。

生徒

シーシャープのプログラムを使うと、そういう仕組みを簡単に作ることができるのでしょうか。

先生

はい、エーエスピーネットという枠組みを使うことで、初心者でも安全に情報を保存できます。それでは、基本的な使い方を見ていきましょう！

1. 状態管理とは何かを学ぼう

インターネットでホームページを見るための仕組みをウェブと呼びます。このウェブの世界では、基本的に一画面を表示するごとに通信が完全に切れてしまうという特徴があります。これを難しい言葉でステートレスと呼びます。ステートとは状態のことで、レスは無いという意味です。つまり、さっきまで何をしていたかをプログラムが自動的には覚えてくれない仕組みになっています。

もしこのままだと、ネット通販のサイトで買い物をするときに困ったことが起きます。商品を買い物かごに入れた次の瞬間に、画面を移動すると、もう買い物かごが空っぽになってしまうのです。これでは買い物ができません。そこで、画面を移動しても利用者の情報を一時的に保存して、状態を維持するための仕組みが必要になります。この仕組みのことを状態管理と呼びます。シーシャープの開発環境であるエーエスピーネットでは、この状態管理を行うために、クッキーとセッションという二つの主要な道具が用意されています。

2. クッキーの仕組みと基本を理解しよう

まずはクッキーについて詳しく見ていきましょう。クッキーとは、ウェブサイトを訪問した利用者のパソコンやスマートフォンの中に、直接小さな文字データを保存する仕組みのことです。身近な例えで言うと、お店でもらえる会員証やスタンプカードのようなものです。お店側が会員証を発行して利用者に渡しておけば、次に来店したときにその会員証を見せてもらうだけで、誰が来たのかを識別できます。

クッキーの最大の特徴は、データが利用者の手元のパソコンに保存されるという点です。そのため、一度パソコンの電源を切っても、指定された有効期限が来るまではデータが消えずに残り続けます。例えば、ログイン画面で「次回からログインIDの入力を省略する」という項目にチェックを入れたときに、このクッキーの仕組みがよく使われています。ただし、利用者のパソコンに直接データが残るため、パスワードなどの大切な個人情報をそのまま保存すると、中身を盗み見られてしまう危険性があります。そのため、見られても困らない識別番号などを保存するのが一般的な使い方です。

3. セッションの仕組みと安全性を知ろう

次に、もう一つの重要な仕組みであるセッションについて解説します。セッションとは、利用者のデータをパソコン側ではなく、ウェブアプリが動いているサーバーと呼ばれる大きな管理用のコンピューター側に保存する仕組みのことです。身近な例えで言うと、駅のバゲージクレームや、温泉施設の脱衣所にある鍵付きのロッカーのようなものです。荷物はすべて安全なロッカーの中に保管しておき、利用者にはそのロッカーを開けるための番号札だけを渡します。

この番号札に相当するものをセッションアイディーと呼びます。このセッションアイディーだけを利用者のパソコンのクッキーに保存しておき、画面が変わるたびにサーバーへ提示します。サーバー側は、受け取った番号札と一致するロッカーを探して、中に入っているデータを取り出します。大切な実体データはすべて安全なサーバー側にあるため、利用者が勝手に書き換えることはできません。そのため、買い物かごの中身や、ログインしている個人の氏名など、安全に管理したい重要な情報はすべてセッションを使って保存することになります。ただし、利用者がブラウザを完全に閉じたり、一定時間操作をしなかったりすると、ロッカーは自動的に消去されてデータは消えるようになっています。

4. クッキーを書き換えるプログラムを作ろう

それでは、実際にシーシャープのプログラムでクッキーに文字データを書き込む方法を見ていきましょう。今回は、利用者の好みのテーマ色を保存するシンプルなプログラムを記述します。エーエスピーネットでは、レスポンスのクッキーという命令を使うことで、利用者のパソコンにデータを送信して保存させることができます。


// クッキーに保存するデータを準備します
string preferenceColor = "Blue";

// 利用者のパソコンに保存するためのクッキーのオブジェクトを作成します
HttpCookie userCookie = new HttpCookie("UserPreference");

// クッキーの中に値を設定します
userCookie.Value = preferenceColor;

// クッキーの有効期限を今から1日後に設定します
userCookie.Expires = DateTime.Now.AddDays(1);

// 画面の応答にクッキーを追加して利用者のパソコンに送ります
Response.Cookies.Add(userCookie);

このプログラムを実行すると、利用者のパソコンの中に「UserPreference」という名前の付いたカードが作成され、そこに「Blue」という文字が書き込まれます。有効期限を1日後に設定しているため、この日が変わるまではパソコンがこの情報をしっかりと覚えておいてくれます。

5. クッキーからデータを読み出すプログラムを作ろう

次に、先ほどパソコンに保存したクッキーのデータを、別の画面で読み出して表示するプログラムを作ってみましょう。データを読み出すときは、リクエストのクッキーという命令を使用します。利用者のパソコンから送られてきたカードの束の中から、指定した名前のカードを探し出すイメージです。


// パソコンから送られてきたクッキーを名前を指定して取得します
HttpCookie retrievedCookie = Request.Cookies["UserPreference"];

// クッキーが空っぽでなければ処理を行います
if (retrievedCookie != null)
{
    // クッキーに書き込まれていた文字を取り出します
    string userColor = retrievedCookie.Value;
    
    // 取り出した結果を画面に表示します
    LabelResult.Text = "あなたの好みの色は " + userColor + " です。";
}
else
{
    // クッキーが存在しなかった場合の処理です
    LabelResult.Text = "クッキーの情報が見つかりませんでした。";
}

クッキーを読み出すときは、必ず最初にデータが空っぽではないかを確認する条件分岐を入れるのが大切な基本です。初めてサイトを訪れた人のパソコンには、まだクッキーが作られていないため、中身が空っぽの状態になっており、そのまま読み落とそうとするとプログラムが途中でエラーを起こして停止してしまうからです。このプログラムの実行結果は次のようになります。


あなたの好みの色は Blue です。

6. セッションにデータを保存するプログラムを作ろう

今度は、より安全なデータの保存方法であるセッションを使ってみましょう。セッションにデータを保存する方法は非常に簡単です。エーエスピーネットに用意されているセッションという仕組みに対して、辞書のように名前と値を指定して代入するだけで、サーバーの安全なロッカーにデータが保管されます。


// 利用者のログイン名を準備します
string userName = "山田太郎";

// セッションのロッカーに「LoginUser」という名前で保存します
Session["LoginUser"] = userName;

// 画面にメッセージを表示します
LabelMessage.Text = "セッションにユーザー名を保存しました。";

このプログラムが動くと、サーバー側にこの利用者専用のロッカーが一つ確保され、そこに「LoginUser」というラベルが貼られて「山田太郎」という文字が大切に保管されます。同時に、利用者のパソコンにはそのロッカーを開けるための鍵となる番号札だけが自動的に送信されます。複雑な鍵の発行手順などはすべてシステムが裏側で自動的に行ってくれるため、開発者はこの短い記述だけで安全な状態管理を実現することができます。

7. セッションからデータを取り出すプログラムを作ろう

最後に、サーバーのロッカーに保管したセッションのデータを取り出して画面に表示するプログラムを作ってみましょう。データを取り出すときも、保存したときと同じ名前を指定して取得します。ただし、セッションからデータを取り出すときは、データの型を変換する操作が必要になります。


// セッションのロッカーから指定した名前のデータを取り出します
if (Session["LoginUser"] != null)
{
    // 取り出したデータは文字の型に変換して変数に代入します
    string currentDisplayUser = Session["LoginUser"].ToString();
    
    // 画面に歓迎のメッセージを表示します
    LabelWelcome.Text = "ようこそ、" + currentDisplayUser + " さん！";
}
else
{
    // セッションの期限が切れてデータが消えていた場合の処理です
    LabelWelcome.Text = "ログインしていません。";
}

セッションのロッカーには、文字だけでなく数値や画像など、あらゆる種類のデータを何でも入れることができます。そのため、取り出すときにはそれが文字であることをしっかりとプログラムに教えてあげるために、トウストリングという命令を使って文字の型に変換する必要があります。また、クッキーのときと同様に、時間が経ってロッカーが消えてしまっている場合を想定して、空っぽではないかを事前に確認する条件分岐を必ず記述します。このプログラムの実行結果は次のようになります。


ようこそ、山田太郎 さん！

8. クッキーとセッションの使い分けの基準

ここまで、二つの異なる状態管理の仕組みを解説してきました。実際にウェブアプリを開発するときには、これらをどのように使い分ければ良いのでしょうか。その基準は、保存したい情報の重要性と、保存しておきたい期間の二つの要素で判断します。

パスワードやクレジットカードの情報、個人情報などは、絶対にクッキーに直接保存してはいけません。これらは必ずセッションを使い、サーバー側で厳重に管理します。一方で、サイトの背景デザインの設定や、次回から入力を省略したいメールアドレスの表示用など、最悪の場合に他人に読まれても大きな問題にならない情報であり、かつ何日も長期間にわたって記憶させておきたい場合にはクッキーが最適です。このように、それぞれの道具が持つメリットとデメリットを正しく理解し、作成する機能に合わせて適切に組み合わせることが、安全で使いやすいウェブアプリ開発の第一歩となります。