JavaScript

cookieとかlocalstorageって何だっけ？どういうとき消えちゃう？

最近仕事で、よくフロントエンド側の実装に問題があり、それがユーザの不便につながらトラブルに遭遇しました。

問題が顕在化しなければ見過ごされていましたが、どうやらリロードすると永続化していないVuexのストアが消えることに気づいていなかったようです。で、関係者に話したところ、ストアってなに？っていうかlocalstorageとか使えばいいの？っていうかそれもよくわかんないんだけど、みたいな感じでした。

ということで、自分の理解も兼ねて整理することにしました。

フロントエンド側でデータを保持する方法

次のような方法があります（他にもあるかもしれません）

LocalStorage
SessionStorage
indexedDB（WebSQL）
Session Cookie
Persistent Cookie
JavaScript変数
Vuex・Redux等
Service Worker
Server Side Session

まとめ

結論次のとおりです。

技術要素	書き込み先	データの寿命	有効期限のバリエーション
JavaScript変数	クライアント: メモリ	タブを閉じたとき	–
LocalStorage	クライアント: ディスク	ユーザが削除するまで	その他 (基本的に期限なし、ただし手動で削除は可能)
SessionStorage	クライアント: ディスク	タブを閉じたとき	–
indexedDB	クライアント: ディスク	ユーザが削除するまで	その他 (基本的に期限なし、ただし手動で削除は可能)
WebSQL (※非推奨)	クライアント: ディスク	ユーザが削除するまで	その他 (基本的に期限なし、ただし手動で削除は可能)
Session Cookie	クライアント: ディスク	ブラウザを閉じたとき	セッションの有効期限
Persistent Cookie	クライアント: ディスク	有効期限が訪れたとき	指定の日時、または時間が経過したとき
Vuex・Redux等	クライアント: メモリ	タブを閉じたとき	–
Service Worker	クライアント: ディスク/メモリ	独自のライフサイクル	その他 (Service Workerの更新ポリシーや、キャッシュの期限に依存)
Server Side Session	サーバ: メモリ/ディスク	有効期限が訪れたとき	セッションの有効期限, あるいは指定の日時

なりたち

私はナラティブにすると覚えやすいと思ったので、一部想像も入るので注意ですが、エポックメイキングだと思ったことを独断と偏見で次のように語ってみます。

JavaScript変数

初めはきっと、全部、JavaScript変数を用いて必要なデータを保持していました。それはそうですよねたぶん。

Cookieの登場

JavaScript変数はメモリ領域に保存されるゆえに、ページ遷移やリロードによって消えてしまいます。これだと、例えば会員制のサイトにログインした場合に、ページ遷移の度に認証が必要になってしまいます。そこで、セッションという概念が登場します。

Session Cookieを利用して、一度認証したらタブを閉じるまで再認証することなくページ遷移する体験を提供できるようになります。そのうえで、Persistant Cookieを選択することで、タブを閉じてもユーザのお気に入りレシピなど、よく利用する情報を保存・参照し、手間を削減することができるようになります。

Sessionの登場

さて、Cookieによってパーソナルなデータが便利に扱えるようになりましたが、カバーしきれない不便なケースが出てきます。例えば、ECサイトにおける購買です。Aさんがカートに入れた商品をBさんがカートに入れて先に購入完了してしまった場合、Aさんは購入できないというがっかり体験が発生しうるのです。これを解決する方法として、セッションが登場します。セッションによってサーバサイドへユーザの情報を管理することで、Bさんがそもそもカートに入れられないようにして、Aさんのがっかり体験を防止することができます。その他にも、認証の有効期限をサーバサイドで管理することで、一貫性のある状態管理ができるようになります。そのように、一連のリクエスト/応答の流れを識別するための仕組みがSessionです。

LocalStorageとかの登場

ここまでで、ページを跨いでも必要な値を管理する方法が充実してきましたが、2009年代にもなるとPCの普及率は50%を余裕で超え、スマホが爆発的に普及し始める兆しが現れます。それと連動するように、Webでできること・求められることが拡大します。その中で、WebSQLやLocalStorageやindexedDBといったものが登場し、これまでCookieで行っていたような情報の管理方法がより拡張されました。

LocalStorage・SessionStorageによって、cookieよりも長い期間、より大きなサイズ（4KBを超えるサイズ）を扱えるようになり、例えばブラウザゲームのような大きなデータを頻繁に参照するようなユースケースに対応できるようになりました。

indexedDBの登場

また、WebSQLにより、構造化されたデータを扱うことができるようになったことで、JavaScriptによって一貫性のあるデータの取り扱いが容易になり、大規模なWebアプリ開発などがしやすくなりました。ただし、WebSQLはSQLiteをベースとした仕様であることもあり、Webにおける一般化に当たって様々な議論がなされた結果、最終的にindexedDBに取って代わられ非推奨となりました。

Service Workerの登場

その後、2015年になるとスマホ普及率は50%を突破し、スマホの携帯はメジャーなものとなりました。そうなってくると、あらゆる場所でWebコンテンツを参照したいニーズが生じてきます。例えば、電車での移動中にトンネルを通って瞬断されたとしても、コンテンツを使い続けられるようにしたいということになるのです。さらに、スマホとWebサーバはシームレスに連動し、サーバ側からの通知やオフラインでの動作やバックグラウンドでの動作といった機能のニーズも事業者が持ちます。この問題を解決するために、Service Workerが登場します。あ、ちなみにService Workerは2015年より少しから登場しています。

Service Workerはクライアント側からの要求と、サーバ側の応答の中間に位置し、ネットワークの状況に応じて適切な情報伝達を仲介します。これにより、あらゆるシーンでWebが利用できる、もしくはできないなりに最大限の機能をすることができるようになりました。

Vuex・Reduxの登場

ここまでで、ユーザがいつどんな場所からアクセスしても、混乱なく便利にWebサイトやWebアプリを利用することができる技術要素がそろってきました。ただ、どこまでいってもブラウザ上で動作するアプリという面では、ページ遷移などによるUXの悪さを逃れることはJavaScriptなしには難しいです。

そうなってくると、ほぼJavaScriptによってコンテンツの切り替え等を行うことを徹底することによって、ネイティブアプリ並みに軽快な動作ができるようなアプリを作成することが増えてきます。その用途に最適化されたアーキテクチャの一つにSPA等がありますが、SPA等による大規模なサービスの開発で利用されるのがVuex・Reduxなどの状態管理方法です。これらにより、大規模でも破綻しにくいようなコーディングができるようになり、ネイティブと比べて遜色ないようなパフォーマンスを発揮するアプリをブラウザ上から利用できるようになりました。

hirobel

8月 8, 2023

JavaScript, 勉強会

シンプルなWebアプリを作ってみる(with JavaScript)

はじめに

JavaScriptを利用してAPIから値を取得し、画面へ反映する方法を共有するため、シンプルなWEBアプリを作ってみる会を行うこととした。

サーバを作る(with Node.js + express)

nodeの準備

$ npm init

nodeライブラリのインストール

$ npm install express body-parser cors

サーバのコード(app.js)を実装

const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 4000; // ポート番号を4000に

app.use(express.json());
app.use(cors());

let items = [];

// Create
app.post('/items', (req, res) => {
  const { name, price, description } = req.body;
  const newItem = {
    id: Date.now(),
    name,
    price,
    description,
  };
  items.push(newItem);
  res.status(201).json(newItem);
});

// Read
app.get('/items', (req, res) => {
  res.json(items);
});

// Launch server
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

サーバの起動

$ node app.js

起動した結果、いかが表示されたので、期待通り実装できたことが確認できた

$ node app.js 
Server is running on port 4000

データを入れてみる

curl -X POST -H "Content-Type: application/json" -d '{"name": "Apple", "price": 100, "description": "apple"}' http://localhost:4000/items
curl -X POST -H "Content-Type: application/json" -d '{"name": "Banana", "price": 150, "description": "banana"}' http://localhost:4000/items
curl -X POST -H "Content-Type: application/json" -d '{"name": "Cherry", "price": 200, "description": "cherry"}' http://localhost:4000/items

データを見てみる

ブラウザでhttp://localhost:4000/itemsにアクセスしてみると、上記で登録した内容が表示される

WEBサイトを作る

下準備（nodeとwebサーバ起動用のモジュールをインストール）

$ cd front
$ npm init
$ npm install http-server

フロントエンドのコード(index.html)作成

「商品」と「個数」を入力したら、合計金額を表示する

商品の金額などの情報は、サーバから取得する

入力系
- プルダウン
  - 商品選択用
  - 個数選択用
- 実行ボタン
出力系
- div(結果入力用)
処理
- 初期化（前準備）
  - Itemクラスの作成
  - Items変数の作成
- fetchを使ってサーバから値を取得する★
  - fetchによるAPI呼び出し
- 商品選択用プルダウンの中身を作る
- 個数選択用プルダウンの中身を作る
- 実行ボタンの動作を作る
  - 「商品選択用」と「個数選択用」プルダウンから入力値を取得
  - 取得内容から商品の価格 x 個数を計算
  - 計算結果を画面へ表示

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 商品選択用プルダウン -->
  <select id="name"></select>

  <!-- 個数選択用プルダウン -->
  <select id="count"></select>

  <!-- 実行ボタン -->
  <input id="calculate" type="button" value="実行">

  <!-- 結果入れ -->
  <div id="result">(ここに結果が入ります)</div>

<script>
  // 初期化（前準備）
  class Item {
    constructor(name,price,description){
      this.name = name;
      this.price = price;
      this.description = description;
    }
  }
  let Items = [];

  // fetchを使ってサーバから値を取得する★
  fetch('http://localhost:4000/items')
    .then(response => response.json())
    .then(data => {
      // サーバから取得した値をItemsに入れる

      data.forEach(item => {
        Items.push(new Item(item.name, item.price, item.description));

        // 商品選択用プルダウンの中身を作る
        const option = document.createElement('option');
        option.textContent = item.name;
        option.value = item.name;
        document.getElementById('name').appendChild(option);
      })
    })


  // 個数選択用プルダウンの中身を作る
  for (let i = 1; i <= 100; i += 10) {
      const option = document.createElement('option');
      option.textContent = i;
      option.value = i;
      document.getElementById('count').appendChild(option);
  }

  // 実行ボタンの動作を作る
  document.getElementById('calculate').addEventListener('click', () => {
      const selectedItemName = document.getElementById('name').value;
      const selectedItem = Items.find(item => item.name === selectedItemName);
      const count = parseInt(document.getElementById('count').value, 10);
      const result = selectedItem.price * count;
      document.getElementById('result').textContent = `Total price: ${result}`;
  });

</script>

</body>
</html>

hirobel

4月 25, 2023

JavaScript, 勉強会

WordPressの勉強1/3
ゴール設定
- ゴール設定
  1. スタティック（静的）なWebサイトを構築できる
    HTMLの基本
    ページ遷移方法
    ホスティング方法
    CSS
    JavaScript
  2. スタティックなサイトをWordPress化できる
    環境作成
    wp-env
    テーマ作成
    最小限のテーマ
    index.php
    style.css
    テンプレート
    固定ページテンプレート
    投稿ページテンプレート
    ：
  3. ブロックエディタを利用して簡単にユーザが投稿を編集できるようにする
    ユーザ向け
    ダッシュボードからどうブロックエディタで編集するか
    開発者向け
    ブロックエディタのテンプレート構築方法
スタティック（静的）なWebサイトを構築する方法

HTMLの作成

最もミニマムなHTMLのコードは次の通り
```
<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Document</title>
</head>
<body>
  Test.  
</body>
</html>
```
↑のコードを動かすと次の通り

タグと要素
- <body>タグ内に書いたものが画面に表示される
- <div>は開始タグである
- </div>を終了タグである
- <div>Text</div>テキストを開始タグと終了タグで囲んだものをHTML要素という
ブロック要素とインライン要素
- HTML要素にはブロック要素とインライン要素がある
- <div><p><h1>はブロック要素である
- <span><a>はインライン要素である
- ブロック要素とインライン要素を並べて書くとレイアウトに次のような差が生じる
ページ遷移

このような2つのページがあるとする

index.html, index2.htmlにaタグを次のように用意すると、ページ遷移できる
<!DOCTYPE html> <html lang="ja"> <head> <title>Document</title> </head> <body> <h1>Page1</h1> <div>block</div> <div>block3</div> <div>block4</div> <span>block5</span> <a href="index2.html">go to index2.html</a> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <title>Document</title> </head> <body> <h1>Page2</h1> <div>block</div> <div>block3</div> <div>block4</div> <span>block5</span> <a href="index.html">go to index.html</a> </body> </html>
動作イメージは次の通り

ホスティング
- <div><span><a>があれば、とりあえずサイト作れる
- 作ったサイトをインターネット上へ配置などしないと、アクセスできない
- 配置するには、サーバを借りるか、自分のマシンをインターネットに公開する必要になる
- 自分のマシンをインターネットに公開するのは危険なので、サーバを借りるのがよい
- 最も安価にサーバを借りるのであれば、レンタルサーバがオススメ
  - 従量課金制と月額課金制のサービスがある
- 例：さくらのレンタルサーバ | 高速・安定WordPressなら！無料2週間お試し https://rs.sakura.ad.jp/
CSS
- <style>タグを利用して表示スタイルを変更できる
- スタイル変更のためには、何を、どうするという2つを指定する必要がある。
- 何を→セレクタ
- どうする→プロパティ
```
<style>
  h1 {
    color: red;
  }
</style>
```
セレクタ
- 要素の指定方法
- 要素名で指定する場合：h1{}, div {}, span {}
- 要素のidで指定する場合：#title, #section1, #text1
- 要素のclassで指定する場合：.title, .section, .text
- その他：div > div > .text
失敗例

styleを当てたいところ以外にも当たってしまう

成功例

div > div > .textにすることで当てたい部分だけstyleを当てる

プロパティ
- いろいろある
- MDNをみるといい
- CSS リファレンス – CSS: カスケーディングスタイルシート | MDN https://developer.mozilla.org/ja/docs/Web/CSS/Reference
JavaScript
- JavaScriptはブラウザ上で動作できるプログラミング言語
- DOM操作によってWEBサイトの内容を動的に変更したり、クリックなどのイベントを発生させるのに使うことができる
- <script>タグを利用してJavaScriptのコードを実行できる
例えばこんな感じ

実行すると、「div > div > .text’」のセレクタに対応する要素が’hoge’になる

サンプルコードは以下（動作は全部同じ）
<script> let val = 'hoge'; alert(val); let elm = document.querySelector('div > div > .text'); elm.innerHTML = val; </script>
<script> function main() { let val = 'hoge'; alert(val); let elm = document.querySelector('div > div > .text'); elm.innerHTML = val; } main(); </script>
<script> const main = () => { let val = 'hoge'; alert(val); let elm = document.querySelector('div > div > .text'); elm.innerHTML = val; } main(); </script>
動作イメージは次の通り
hirobel

11月 1, 2022

JavaScript
[WIP]JavaScriptで操作を自動化する
はじめに

JavaScriptについて、初心者の方向けに基本的な機能の実装方法を試してみたのでご紹介します。

要素
- 変数
- DOMオブジェクト
- 配列
- 繰り返し
- 条件分岐
やってみたこと

普段繰り返し行っているブラウザの操作を自動化
hirobel

6月 15, 2021

JavaScript, Programming