実際の現場で今回の記事に記載の方法で実装することはあり得ないと思いますが、Node.js の基礎を知るための参考として記事にしてみました。 この記事は、Node.js で 実装する場合 どのように実装および実行することで Webアプリケーション が開発できるのか、が理解できるようになるのが目的です。

この記事では以下のような前提で Node.js を用いた Webアプリケーション 開発 を行っていきたいと思います。 前提を満たしていない場合は参考程度にこの記事を読んでいただければと思います。 前提を満たしていれば、実際に試してみることをオススメします。

前提

• Windows 環境
• Node.js インストール 済み (まだの場合は こちら を参照してください)

では、早速 Node.js で Webアプリケーション 開発を行っていきたいと思います。

目次

• 概要
• プロジェクト作成
• 実装
• 実行（テスト）

概要

Node.js とは、Chrome V8 エンジン 上に実装された ランタイム です。 …と、言われてもよくわからないですが、Javaで言う Apache + Tomcat、C# で言う IIS なイメージの認識です（間違ってたらゴメンなさい）。

Node.js を使った Webアプリケーション 開発 の 大まかな流れは以下のような感じです。 Hello World を表示するだけなら簡単にできてしまいます。

1. プロジェクトルートディレクトリ を 作成
2. エントリポイントとなる JavaScriptファイル を 作成
3. node コマンド で 実行

以下ではそれぞれについてもう少し詳しく見ていきます。

プロジェクト作成

Visual Studio や Eclipse で言うような「プロジェクト」は存在しませんが、これから開発する Webアプリケーション の ルートディレクトリ を作成します。 今回は 「WebApplication1」 と言う名前のルートディレクトリにしています。 あわせて記載している 「app.js」 はこの後の実装で作成する JavaScript ファイル になります。 今回の サンプルプログラム で作るファイルはこれだけになります。

プロジェクト構成

WebApplication1/
  app.js

実装

前述のプロジェクト作成で作成したディレクトリ直下に以下の JavaScript ファイル を作成します。

app.js

var http = require('http');

http.createServer(function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Hello World');
}).listen(3000);

console.log('Server running at http://localhost:3000');

実行（テスト）

コマンドプロンプトを起動して以下の手順を行います。

1. プロジェクトルートディレクトリ へ 移動

   cd D:\workspace\WebAplication1
   

   

2. node <JavaScriptファイル> を実行

   今回実行する JavaScript ファイル は 「app.js」 になるので、以下のようなコマンドを実行します。

   node app.js
   

   

3. ブラウザで http://localhost:3000/ へアクセス

   

以上で Node.js を使った Webアプリケーション開発 の 基本 になります。

参考記事

• LIG INC. - いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜
• Node.js v6.2.0 Documentation

（ この記事は bower/spec の json.md をベースに作成しています。 bower.json を作成する際、その 書き方 の 参考 になればと思います。 ）

bower.json は 作成しようとしているパッケージが他のパッケージとどのような依存関係にあるかを設定するものです。 これは Node.js の package.json、 Ruby の Gemfile と似ています。

bower.json は bower init コマンドを利用することで ウィザード に従って作成することができます。

{
  "name": "blue-leaf",
  "description": "Physics-like animations for pretty particles",
  "main": [
    "js/motion.js",
    "sass/motion.scss"
  ],
  "dependencies": {
    "get-size": "~1.2.2",
    "eventEmitter": "~4.2.11"
  },
  "devDependencies": {
    "qunit": "~1.16.0"
  },
  "moduleType": [
    "amd",
    "globals",
    "node"
  ],
  "keywords": [
    "motion",
    "physics",
    "particles"
  ],
  "authors": [
    "Betty Beta <bbeta@example.com>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "homepage": "http://betty.github.io/blue-leaf/index.html",
  "repository": {
   "type": "git",
    "url": "git://github.com/betty/blue-leaf.git"
  },
  "resolutions": {
    "angular": "1.3.0-beta.16"
  },
  "private": true
}

package
  js/
    motion.js
    run.js
    walk.js
  sass/
    motion.scss
    run.scss
    walk.scss
  img/
    motion.png
    walk.png
    run.png
  fonts/
    icons.woff2
    icons.woff
  dist/
    movement.js
    movement.min.js
    movement.css
    movement.min.css

"main": [
  "js/motion.js",
  "sass/motion.scss",
]

"authors": [
  "John Doe",
  "John Doe <john@doe.com>",
  "John Doe <john@doe.com> (http://johndoe.com)"
]

"authors": [
  { "name": "John Doe" },
  { "name": "John Doe", "email": "john@doe.com" },
  { "name": "John Doe", "email": "john@doe.com", "homepage": "http://johndoe.com" }
]

デフォルト設定のままだと "bower_components" 配下にインストールされますが、インストール先のフォルダ名を変更したいケースがあるかと思います。 これに対して、Bower には ".bowerrc" という設定ファイルを準備することで パッケージインストール先 を変更できる仕組みがあります。 ここでは ".bowerrc" を利用して インストール先 を変更する方法を見ていきます。

目次

• .bowerrc 概要
• .bowerrc を 追加 反映 する タイミング
  • 新規プロジェクト作成時に .bowerrc を追加する場合
  • 既存プロジェクトに .bowerrc を追加する場合

.bowerrc 概要

プロジェクトのルートディレクトリ直下に以下に載せるサンプルのような .bowerrc ファイル を作成します。 Bower 自体 に 作成するためのコマンドが存在しないので、普通にテキストエディタで作成して保存します。 ファイルは SHIF-JIS でも動きましたが、他の JavaScript ファイル にあわせて UTF-8 が望ましいと思います。

.bowerrc 自体 は配置さえされてしまえば即時反映されるため、配置以降の Bower コマンド 実行に反映されます。

配置先のサンプル

PROJECT_ROOT/
│   .bowerrc
│   bower.json
│   index.html
│
├─ library/
│    
├─ images/
│    
├─ javascripts/
│    
└─ stylesheets/

.bowerrc サンプル

{
  "directory": "library"
}

.bowerrc ファイル の設定項目は他にもありますがここでは取り上げていません。 詳しくは bower/spec を参照してください。

.bowerrc を 追加 反映 する タイミング

.bowerrcを作成、配置した後はその設定を反映させる手順になります。 設定反映には2つの状況「新規プロジェクト作成時に .bowerrc を追加する場合」と「既存プロジェクトに .bowerrc を追加する場合」があるかと思うので、 それぞれの場合について以下で見ていきます。

新規プロジェクト作成時に .bowerrc を追加する場合

新規プロジェクト作成時に最初から .bowerrc を考慮して進められると一番キレイだと思います。 ざっくりと作業手順は以下のようになるかと思います。

bower.json を作成するタイミングは .bowerrc を作成するタイミングや パッケージインストールするタイミング と前後しても問題ないと思いますが、 bower install を実行する前には作成しておかないと意味がありません。

1. プロジェクトルートディレクトリを作成
2. bower.json を作成
3. .bowerrc を作成
4. bower install で必要なパッケージインストール

既存プロジェクトに .bowerrc を追加する場合

Bower で すでに パッケージ を インストール済み の場合、デフォルト保存先である "bower_components" 配下のファイルを 新しく指定したフォルダ 配下に移動します。 ファイルを移動した後は bower list を実行して Bower で認識できているかどうか確認します。 既存の場合はファイル配置場所が変わっているので HTMLファイル や CSSファイル の参照先を変更する必要もあります。

1. .bowerrc を作成
2. "bower_components" から 新しいディレクトリ配下 へ ファイル移動
3. bower list で 動作確認
4. HTMLファイルの scriptタグ、linkタグ を修正

最近の Webフロントエンド 開発 では Bower を使っている人が増えているのでしょうか。 そんな Bower に 自分が作った パッケージ を公開する手順 について まとめてみました。

目次

• 概要
• bower.json の作成
• GitHub プロジェクト に コミット & タグ 作成
• Bower リポジトリ に 公開

概要

チートシート的にコマンドだけ並べると以下のような流れで Bowerリポジトリ に公開します。 ここでは概要なので細かいコマンドの説明や注意点は以降に見ていきます。

1. bower.json の作成

   bower init
   

2. GitHubへコミット

   git commit
   

3. GitHubにタグ作成

   git tag <バージョン>
   git push origin --tags
   

4. Bowerリポジトリに公開

   bower register <パッケージ名> <GitHubプロジェクトURL>
   

bower.json の作成

Bower に パッケージ公開 するにあたり、公開するパッケージがどのようなものであるかを定義しておく必要があります。 ちょうどこれを行うのが "bower.json" です。 "bower.json" では パッケージ名、著者、ホームページ、他パッケージとの依存関係 等 の 情報 を 保存 できます。

1. 公開したいパッケージを作成しているディレクトリへ移動

   > cd /d "D:\workspace\sample_prj"
   

2. bower init コマンド を実行

   > bower init
   

3. ウィザードの質問に答えていくと bower.json が作成される

   初期化時の質問については 別記事 に記載しているのでご参照ください。

GitHub プロジェクト に コミット & タグ 作成

GitHub に コミット

コミット は コマンドからでも UIからでも 行えます。

• コマンドからコミット

  コマンドからのコミットは単純に git commit で実行できます。

  git commit
  

• UIからコミット

  [Commit to master]ボタンを押下すればコミットできます。

  

タグ作成

タグ作成は残念ながら GUI で行えません。 Shell から行う必要があります。 PowerShell または コマンドプロンプト を起動して、プロジェクトが存在するパスへ移動し、以下のコマンドを実行します。 GitHub for Windows を利用している場合、プロジェクト名を右クリックすると「Open in Git Shell」という選択肢があるので、 これを実行するとプロジェクトフォルダを最初のディレクトリとして PowerShell が起動します。

実行するコマンド

git tag <バージョン>
git push origin --tags

コマンドサンプル

git tag v1.0.0
git push origin --tags

バージョンの付け方は「セマンティックバージョニング」に従う必要があります。 「セマンティックバージョニング」の詳しい説明は 本家サイト を参照いただければと思います。 概要だけ説明すると、以下の3点に従ってバージョン付けを行います。 ちなみにバージョン番号の前に "v" を付けるかどうかについて、Bower においては任意だそうです。

セマンティックバージョニング

• APIの変更に互換性のない場合はメジャーバージョンを、
• 後方互換性があり機能性を追加した場合はマイナーバージョンを、
• 後方互換性を伴うバグ修正をした場合はパッチバージョンを上げます。

セマンティックバージョニング の 詳細は 「セマンティック バージョニング」 に記載があるのでご確認ください。

Bower リポジトリ に 公開

前述のタグ作成まで終わったら、いよいよ Bower の リポジトリ へ公開です。 引き続き、以下のコマンドを実行することで公開できます。

実行するコマンド

bower register <パッケージ名> <GitHubプロジェクトURL>

コマンドサンプル

bower register jquery.depend git://github.com/garafu/jquery.depend.git

GitHubプロジェクトへのURLは GitHub の以下の場所から取得できるURLにおいてスキーマを https → git へ変更したものになります。

以上で Bower リポジトリ へ パッケージ の公開ができたと思います。 車輪の再発明は避けたいので…世界中の人たちと便利なものを作っていけるといいですね ^^

Bower の 基本的な使い方 および よく使うコマンド についてまとめてみました。 初心者向け Bower 入門 といったところでしょうか。

目次

• 概要
• package 操作
  • パッケージ の 追加
  • パッケージ の 削除
  • パッケージ の 更新
  • 利用可能な パッケージ の 検索
  • インストール済み パッケージ の 一覧表示
• bower.json 利用
  • 初期化（bower.json の作成）
  • bower.json へ package の 追加
  • bower.json から package の 削除
• おまけ
  • bower.json 初期化時の質問

概要

Bower を 利用した Webフロントエンド開発 を 行う場合、大まかには以下のような流れで始めていきます。 以下の流れを読むことでざっくり Bower を利用する イメージ は出来るかと思います。

1. ワークディレクトリ の 作成

   以下のサンプルコマンドでは "sample" という名前の ワークディレクトリを作成し、そのフォルダへ移動しています。 以下の例ではすべてコマンドで実行していますが、エクスプローラーでフォルダを作成して該当フォルダへ移動しても良いです。

   > cd /d "D:\workspace"
   > mkdir sample
   > cd sample
   

2. 初期化（bower.json の 作成）

   ウィザードに従って質問に答えていくことで bower.json を作成します。 ここで作成する bower.json は、この後 パッケージ を インストール した際 に パッケージ情報 を書き込む先になります。 ウィザードで質問される詳しい内容は以下の "bower.json 初期化時の質問 を参照ください。

   > bower init
   

3. パッケージのインストール

   ここではサンプルとして jQuery の 1.x をインストールしてみます。 パッケージインストールは bower install <パッケージ名>#<バージョン> で指定できます。 --save のオプションを指定することで bower.json にインストールしたパッケージ情報を保存できます。

   > bower install jquery#1 --save
   

4. パッケージの利用

   ワークディレクトリ "sample" の直下に "index.html" を作成する場合、以下のサンプルコードのような実装を行うとインストールしたパッケージが利用できます。 単純に scriptタグ で JavaScript を呼び出すだけです。

   /sample/index.html

   <!DOCTYPE html>
   <html lang="ja">
   <head>
       <meta charset="utf-8" />
       <title>sample html title</title>
       <script src="./bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
   </head>
   <body>
       sample html body
   </body>
   </html>
   

以上で一通りの利用はできるかと思います。 細かなコマンドの使い方はこの後に記載していきます。

package 操作

以下ではパッケージ操作に関するコマンドの利用方法を少し詳しく見ていきます。

パッケージ の 追加

• bower.json に従ってパッケージをインストールする

  引数に何も指定しない場合、ワークディレクトリに存在する bower.json に記載されているパッケージを集めてきます。

  > bower install
  

• "jquery" パッケージ を インストール する

  パッケージ名を指定すると該当のパッケージで最新のバージョンをインストールします。

  > bower install jquery
  

• "jquery" で 指定バージョン の パッケージ を インストール する

  特定のバージョンをインストールしたい場合は # に続けて バージョン番号 を記載します。

  > bower install jquery#1
  

• パッケージ公開されていない GitHub 上の パッケージ を インストール する

  Bower に公開されていないパッケージでも GitHub のプロジェクト名を指定することでインストールが可能です。

  > bower install garafu/jquery.depend
  

• GitHub 上の パッケージ を バージョン 指定して インストール する

  GitHub の プロジェクト名 に続いて バージョン指定することができます。

  > bower install garafu/jquery.depend#1.1.0
  

パッケージ の 削除

• インストール した パッケージ を 削除する

  bower uninstall <パッケージ名> でアンインストールできます。 インストールとアンインストールを連続で行うとなぜかうまく動作しません。 いったんコマンドプロンプトを閉じて再度アンインストールを実行するとうまくいくことが多いです。

  > bower uninstall jquery
  

パッケージ の 更新

• 指定したパッケージを最新バージョンにアップデートする

  単純に update コマンド で 最新版があればアップデートを行います。 ただし、最初にインストールした際に指定したバージョン条件に依存するため、パッチバージョンまで指定していた場合はアップデートされません。 ちなみに インストール時に指定したバージョン条件は 該当パッケージ配下にある bower.json の _target の値を確認するとわかります。 （逆に言えばこの値を変更すればバージョン条件を変更できます。）

  > bower update jquery
  

利用可能な パッケージ の 検索

• パッケージ を 検索する

  searchコマンドで登録されているパッケージに対してパッケージ名の部分一致検索を行って結果を一覧表示できます。

  > bower search jquery
  

インストール済み パッケージ の 一覧表示

• インストール済みパッケージ一覧を表示する

  list コマンド でインストール済みパッケージの一覧を確認できます。 同時に最新バージョンがでていないかの確認が行われるため、最新版がでているかどうかも確認できます。

  > bower list
  

bower.json 利用

初期化（bower.json の作成）

• bower.json を初期化します。

  init コマンド を利用してウィザードに従って bower.json を初期化します。 ウィザードで問われる細かな質問は以下の "bower.json 初期化時の質問" をご参照ください。

  > bower init
  

bower.json へ パッケージ の 追加

• bower.json へ インストール した パッケージ の 依存関係情報 を 保存する

  パッケージインストール時に --save オプションを利用することで bower.json へ保存できます。 開発時でしか利用しないパッケージであれば --save-dev オプション を利用します。

  > bower install jquery --save
  

  > bower install jquery --save-dev
  

bower.json から パッケージ の 削除

• bower.json から インストール した パッケージ の 依存関係情報 を 削除する

  パッケージアンインストール時に --save オプションを利用することで bower.json へ反映できます。 開発時でしか利用しないパッケージであれば インストール時 と同様に --save-dev オプションで反映できます。

  > bower uninstall jquery --save
  

  > bower uninstall jquery --save-dev
  

おまけ

bower.json 初期化時の質問

bower.json の 初期化時 (init コマンド実行時) にウィザードで質問される内容について以下にまとめます。 何も指定しない時のデフォルト値は () 内の値または () 内 で 大文字 になっている値です。

参考記事

• from scratch - Bower入門(基礎編)
• Qiita - Bowerまとめ（概要・導入・コマンド一覧）

Windows で Bower が利用できるようにする 手順 を載せます。 Bower を使う際、 npm および git がインストールされていることが前提となるので、 以下の手順を始める前にあらかじめインストールをしておく必要があります。

目次

• Bower とは
• Bower 利用時 の 要件
• インストール
• 動作確認

Bower とは

Webフロントエンド開発向けのパッケージマネージャーです。

Webサイト構築で利用するライブラリやフレームワークは日々開発が行われてバージョンアップを繰り返しています。 これらを管理してくれるツールが Bower です。 具体的には HTML, CSS, JavaScript, フォント, 画像 と言ったコンポーネントを管理できます。 ファイル結合や圧縮はできないようです。

ちなみに… "Bower" という名前ですが "bowerbird (ニワシドリ。庭師鳥)" からきているそうです。 ニワシドリ は その名の通り 庭師 のように いろいろなもを集めてきて 素晴らしい巣 を作ります。 Bower は まさにそうしたものを目指した ツール です。

Bower 利用時 の 要件

Bower を インストール および 利用するためには 以下のアプリケーションが導入されている必要があります。 Bower の インストール を始める前に以下のアプリケーションをインストールしておきましょう。

前提

• Node.js / npm の インストール
• Git for Windows の インストール

インストール

前提として npm および git がインストールされている必要があります。 npm が インストールされていなければ こちら から、 git が インストールされていなければ こちら から インストール を行ってください。

1. npm install -g bower を実行

   

2. インストールが始まるのでしばらく待つ…

   

3. インストール完了

   

動作確認

動作確認としてコマンドプロンプト上で bower -version を実行します。 正しくインストールできていれば、インストールされた Bower の バージョン が表示されます。

Windows マシン で Node.js および npm を利用できるようにする手順をまとめました。 ちなみに… Node.js は 「サーバーで動くJavaScript」で ミドルウェア にあたるもので、npm は 「パッケージ管理ツール」です。

目次

• インストーラー の ダウンロード
• インストール
• 動作確認

インストーラー の ダウンロード

まずは Node.js のサイトへ移動してインストーラーを取得します。

• Node.js の ダウンロードページ へ 移動

  https://nodejs.org/en/download/

  

• ダウンロード する バージョン を選択

  どうしても使いたい機能がある等でなければ、"LTS" で良いと思います。

  LTS

  Long-term Support。新規機能追加はなく、バグフィックスやセキュリティアップデートを行う長期サポート版。

  Current

  最新版。新規機能等が使える。

  

• 使っているOSと同じビット版を選択

  

インストール

上述手順でダウンロードしたインストーラを実行してインストールを始めます。

• ウェルカムページで [Next] を選択

  

• ライセンス条項を確認して 同意チェックボックス をチェックし、[Next] を選択

  

• インストール先を指定して [Next] を選択

  

• インストールするものを選択して [Next] を選択

  基本的にはすべて選択された状態でインストール。

  

• インストール準備画面で [Next] を選択

  

• インストールされるのをしばらく待つ…

  

• インストールが完了したので [Finish] を選択

  

動作確認

上述のインストールが終わると node 、 npm および 環境変数 の設定まで終わっている状態になっています。 以下では コマンドプロンプト を実行して node および npm の動作確認を行います。

• node コマンド が使えることを node --version を実行して確認

  

• npm コマンド が使えることを npm --version を実行して確認

  

よくある Webページ上に ファイル を ドラッグ & ドロップ して アップロード する アプリ を作ってみます。 この記事では サーバー側 と クライアント側 をまとめて掲載しています。 サーバー側は ASP.NET WebAPI、クライアント側は HTML + JavaScript で実装します。 アップロード は POST で フォームデータ として アップロード します。

目次

• サーバー処理
• クライアント処理
  • HTML
  • CSS
  • JavaScript

サンプルコード

• GitHub - garafu / samplecode_FileUpload
• ダウンロード zip

サーバー処理

WebAPI 用 の コントローラ を作成します。 受け取る ファイルデータ は フォームデータ として受け取ります。 同じファイル名をアップロードするとエラーになる点にご注意ください。。

FileController.cs

    using System.Collections.Generic;
    using System.IO;
    using System.Net;
    using System.Net.Http;
    using System.Threading.Tasks;
    using System.Web.Http;

    public class FileController : ApiController
    {
        // POST api/<controller>
        public async Task Post(bool overwrite = false)
        {
            var tempPath = Path.GetTempPath();
            var provider = new MultipartFormDataStreamProvider(tempPath);

            await this.Request.Content.ReadAsMultipartAsync(provider);

            foreach (var file in provider.FileData)
            {
                // アップロードファイル名の取得
                var fileName = file.Headers.ContentDisposition.FileName;
                fileName = fileName.StartsWith("\"") || fileName.StartsWith("'") ? fileName.Substring(1, fileName.Length - 1) : fileName;
                fileName = fileName.EndsWith("\"") || fileName.EndsWith("'") ? fileName.Substring(0, fileName.Length - 1) : fileName;
                fileName = Path.GetFileName(fileName);

                // ファイルの移動
                File.Move(file.LocalFileName, Path.Combine("D:\\", fileName));
            }

            return this.Request.CreateResponse(HttpStatusCode.OK);
        }
    }

クライアント処理

記述する部分としては HTML、CSS、JavaScript があるので、それぞれ順に説明していきます。

HTML

まずは html について。 ファイルアップロード に関して html で気にするとすれば ドラッグ&ドロップ をどの領域で受け付けるか、と言ったところでしょうか。 今回は ブラウザページ全体 (body) で受け付けるようにしたいと思います。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Index - My ASP.NET Application</title>
  <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
  <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="/Scripts/library/modernizr-2.6.2.js"></script>
</head>
<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Application name</a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
        </ul>
      </div>
    </div>
  </div>

  <div class="container body-content">
    <h2>Index</h2>
    <div id="msg"></div>
    <hr />
    <footer>
      <p>© 2015 - My ASP.NET Application</p>
    </footer>
  </div>

  <script src="/Scripts/library/jquery-1.10.2.min.js"></script>
  <script src="/Scripts/library/bootstrap.min.js"></script>
  <script type="text/javascript" src="/Scripts/Home/index.js"></script>
</body>
</html>

CSS

ドラッグ & ドロップ の 領域 を 画面全体 としたい場合、 html と body に対して width: 100%; height: 100%; を指定します。 この指定をしておかないと、画面全体ではなく指定された領域のみでしかファイルアップロードが受け付けられません。 （意図的に場所指定したいのであれば問題ないですが…）

Site.css

html, body {
    width: 100%;
    height: 100%;
}

JavaScript

Webページ に ファイル が ドラッグ&ドロップ で落とされたとき、ファイルを受け取ってサーバーへ投げつける処理を記載します。 ポイントはいくつかあるのですが…まずはサンプルコードを掲載して、サンプルコードのあとに解説を載せます。

index.js

/**
* 指定されたファイルをアップロードします。
* @param    {FileList}  files   アップロードするファイルリスト
*/
var upload = function (files) {
    var i, formData;

    // アップロード用のデータを生成
    formData = new FormData();
    for (i = files.length; i--;) {
        formData.append('files', files[i]);
    }

    // ファイルアップロードの実行
    $.ajax({
        url: '/api/file?overwrite=true',
        method: 'POST',
        processData: false,
        contentType: false,
        data: formData
    }).done(function (data, textStatus, jqXHR) {
        $('#msg').append(JSON.stringify(data));
    }).fail(function (jqXHR, textStatus, errorThrown) {
        $('#msg').append(textStatus);
    });
};

/**
* 指定されたファイルを画面に表示する。
* @param    {FileList}  files   読み取るファイルリスト
*/
var read = function (files) {
    var fragment, i, item;
    
    fragment = document.createDocumentFragment();

    for (i = files.length; i--;) {
        item = document.createElement('div');
        item.appendChild(document.createTextNode(files[i].name));
        fragment.appendChild(item);
    }

    $('#msg').append(fragment);
};

/**
* dragover イベント が発生したとき呼び出されます。
* @param    {Event}     event   イベントオブジェクト
*/
var body_ondragover = function (event) {
    event.preventDefault();
    $('#msg').text('ondragover');
};

/**
* drop イベント が発生したとき呼び出されます。
* @param    {Event}     event   イベントオブジェクト
*/
var body_ondrop = function (event) {
    var i, files, fragment, item;

    $('#msg').text('ondrop');

    files = event.originalEvent.dataTransfer.files || [];

    read(files);
    upload(files);
};

/**
* ドキュメント生成が完了したとき呼び出されます。
*/
var document_onready = function (event) {
    $(window.document.body).on(
        'dragover', body_ondragover
    ).on(
        'drop', body_ondrop
    );
};

$(document).ready(document_onready);

ドラッグ & ドロップ イベント

ドラッグ&ドロップ 関連のイベントは以下の通りです。 このうち ファイルアップロード に関連するのは ondragover と ondrop 。

• ondragstart
• ondrag
• ondragend
• ondragenter
• ondragover
• ondragleave
• ondrop

ファイルアップロードに関する ondragover と ondrop には以下のような処理を記述します。

ondragover

preventDefault で デフォルト機能を無効化

ondrop

実際の ドロップ処理 を実装

ドロップされたファイル情報の取得

ファイルドロップ された際、File オブジェクト を利用して ドロップ された ファイル情報 を取得します。 jQuery で File オブジェクト へ アクセス するためには、以下のように オリジナル の イベントオブジェクト からたどるようにします。

event.originalEvent.dataTransfer.files[i]

File オブジェクト には以下のようなプロパティ、メソッドがあるようです。

File オブジェクト

• プロパティ
  • lastModifiedDate
  • name
  • isClosed
  • size
  • type
• メソッド
  • close()
  • slice([start[, end[, contentType]]])

Ajax で ファイルアップロード

ファイルアップロードには File オブジェクト から取得される情報を FormData オブジェクト に詰め込んだものを 送信 します。 また、 jQuery を用いて送信する場合、 processData: false と contentType: false を指定します。 これらの指定をしておかないと、 jQuery が勝手にエスケープ処理をしてしまい、サーバー側で正しくデータを受け取れません。

参考記事

• w3schools.com - ondrop Event
• MDN - FileReader
• しばやん雑記 - ASP.NET Web API でアップロードされたファイルを扱う方法を知らなかったので調べた
• しばやん雑記 - HTML5 の Drag and Drop API と File API を使ってファイルアップロードを実装する
• CODE PROJECT - Web API Thoughts 1 of 3 - Data Streaming

JavaScript で 日本語入力 ON のときの 確定イベント(日本語変換が終わって入力済みを意味する Enterキー 入力) を取得する jQuery プラグイン を作ってみました。 日本語入力中はイベントを発火せず、フォームとして入力が終わって確定する Enterキー入力 で イベント を発火する jQuery プラグイン です。

参考までにですが…日本語入力 ON と OFF のときの Enterキー の挙動については以下のようになります。 keypress があるかないかが 日本語入力中かどうか を判定するポイントになります。

IME変換中の Enterキー

keydown → keyup

IME変換しない Enterキー

keydown → keypress → keyup

目次

• デモ
• プラグイン
• 利用方法

デモ

入力欄に記載された文字列を出力欄に出力するという単純なデモです。 「確定」ボタンを押下することでも出力できますが、ここではテキストボックス内で Enterキー 入力をすることでも「確定」ボタン押下と同じ挙動になることをデモします。

入力

出力

プラグイン

テキスト入力の確定時にイベントが発火する jQuery プラグイン サンプルコード jquery.complete.js を以下に掲載します。 日本語入力中の [Enter] ではイベントが発生せず、入力が確定した時の [Enter] でイベントが発生します。

jquery.complete.js

(function (window, document, $, undefined) {
    /**
    * テキスト入力が確定したとき指定されたイベントハンドラを呼び出します。
    * @param    handler     {function}  イベントハンドラ。イベントハンドラは jQuery.Event を引数にとる。
    * @return   {jQuery}    jQueryオブジェクト
    */
    $.fn.complete = function (handler) {
        var ENTER_KEY = 13;
        var keypressed = false;

        /**
        * keypressイベント発生時に呼び出されます。
        * @param    event   {jQuery.Event}  イベントオブジェクト
        */
        var onkeypress = function (event) {
            if (event.keyCode !== ENTER_KEY) {
                return;
            }
            keypressed = true;
        };

        /**
        * keyupイベント発生時に呼び出されます。
        * @param    event   {jQuery.Event}  イベントオブジェクト
        */
        var onkeyup = function (event) {
            if (event.keyCode === ENTER_KEY && keypressed) {
                // 入力確定のイベントを発生させます。
                handler.call(this, event);
            }
            keypressed = false;
        };

        // 各要素に対してイベントを付与します。
        return this.each(function (index) {
            $(this).on('keypress', onkeypress).on('keyup', onkeyup);
        });
    };
})(window, document, jQuery);

利用方法

上述 jquery.complete.js を利用するサンプルコードを以下に掲載します。

利用例

$('input[type=text]').complete(function (event) {
    var txt = $(this).val();
    $('#comp').html(txt);
});

関連記事

• JavaScript における 日本語入力 確定 (Enter) イベント

JavaScript で 日本語入力 ON のときと OFF のときとで 確定入力 (Enterキー入力) を判別する方法についてまとめます。

検索ボックスなどのテキスト入力ボックスにおいて確定ボタンの組み合わせた UI を設計するとき、入力を簡易にするために Enterキー で確定を意味させたいと思うことがあります。 …が、日本語入力の Enter と 確定を意味する Enter をどのように判別すると良いか材料がないので、 ここではいくつかのブラウザでイベントがどのように発生しているかを調査しました。

実際に使えるようにした jQuery プラグイン は こちら に記載しています。

目次

• 各ブラウザの挙動
• 確定入力の判別方法

各ブラウザの挙動

日本語入力ON および OFF それぞれの状態で [a] → [Enter] と入力したときの動作の違いを以下にまとめます。 以下の表では、「数値」は「キーコード」を、「-」は「イベントの発生がないこと」を示しています。

日本語入力 ON

日本語入力 OFF

確定入力の判別方法

上の表を見ると分かりますが、日本語入力 ON のときは keypress イベント が発生せず、日本語入力 OFF のときは keypress イベント が発生します。 入力を確定したときの [Enter] かどうかは、keypress イベント が発生したかどうかを見ることで判別できます。

IME変換時

keydown → keyup

IME変換しない時

keydown → keypress → keyup

関連記事

• 日本語入力 確定 時に イベント を発生させる jQuery プラグイン

JavaScript で オブジェクト を クエリ文字列 に変換（シリアライズ）する サンプルコード を作成しました。 以前書いた "JavaScript で クエリストリング を 取得 & 分解 & 整形 する 方法" に対応する コード になります。

目次

• 生成 する サンプルコード
• サンプルコード の 使い方
• 対応している オブジェクト

関連記事

• JavaScript で クエリストリング を 取得 & 分解 & 整形 する 方法

生成 する サンプルコード

サンプルコード

/**
* 受け取ったオブジェクトをクエリ文字列にシリアライズします。
*
* サンプル オブジェクト
*   var query = {
*     action: 'view',
*     id: '123',
*     debug: undefined,
*     arraylist: [
*       'val1',
*       'val2'
*     ],
*     hashlist: {
*       foo: 'foo',
*       bar: 'bar'
*     }
*   }
* サンプル シリアライズ結果
*   ?action=view&id=123&debug&arraylist[]=val1&arraylist[]=val2&hashlist[foo]=foo&hashlist[bar]=bar
*/
var serialize = function (data) {
    var key, value, type, i, max;
    var encode = window.encodeURIComponent;
    var query = '?';

    for (key in data) {
        value = data[key];
        type = typeof(value) === 'object' && value instanceof Array ? 'array' : typeof(value);
        switch (type) {
            case 'undefined':
                // キーのみ
                query += key;
                break;
            case 'array':
                // 配列
                for (i = 0, max = value.length; i < max; i++) {
                    query += key + '[]';
                    query += '=';
                    query += encode(value[i]);
                    query += '&';
                }
                query = query.substr(0, query.length - 1);
                break;
            case 'object':
                // ハッシュ
                for (i in value) {
                    query += key + '[' + i + ']';
                    query += '=';
                    query += encode(value[i]);
                    query += '&';
                }
                query = query.substr(0, query.length - 1);
                break;
            default:
                query += key;
                query += '=';
                query += encode(value);
                break;
        }
        query += '&';
    }
    query = query.substr(0, query.length - 1);
    return query;
};

サンプルコード の 使い方

上記サンプルコードは基本的にコピペで利用できます。

1. 上記 サンプルコード を コピペ して適当な名前で保存します。 ここでは "serialize.js" として保存したものとします。
2. 保存した "serialize.js" を利用するより前に読み込みます。 serialize メソッド が グローバル な領域に生成されているので、 この メソッド を利用します。

   <!DOCTYPE html>
   <html>
     <head>
       <title>QueryString サンプルコード</title>
        
       <!-- コピペしたサンプルコードを実処理より前に読み込みます。1度だけで OK。 -->
       <script type="text/javascript" src="./serialize.js"></script>
        
       <!-- 具体的な利用方法は… query オブジェクト へのアクセスで OK。 -->
       <script type="text/javascript">
         // クエリ文字列に変換したいオブジェクト
         var obj = {
           'action': 'view',
           'id': '123',
           'debug': undefined,
           'arraylist': [
             'val1',
             'val2'
           ],
           'hashlist': {
             'foo': 'foo',
             'bar': 'bar'
           }
         };
         
         if (console) {
           // オブジェクトをクエリ文字列に変換します。
           var query = serialize(obj);
           
           console.log(query);
           // 以下のようなログが出力されます。
           // LOG> ?action=view&id=123&debug&arraylist[]=val1&arraylist[]=val2&hashlist[foo]=foo&hashlist[bar]=bar
         }
       </script>
     </head>
     <body>
     </body>
   </html>
   

対応している オブジェクト

今回、作成した サンプルコード では以下のような クエリストリング に対応しています。 いわゆる、上記 サンプルコード の仕様に相当します。 以前作成した クエリストリング→オブジェクト と対をなすものなので、基本的に仕様は同じです。

対応する クエリストリング の 種類

• 単純なキーバリュー

  例：?key=value

• キーのみ

  例：?key

• 配列

  例：?key[]=value0&key[]=value1

• ハッシュ

  例：?key[hoge]=hogevalue&key[foo]=foovalue

例えば、以下のような動作を行います。 受け取った オブジェクト を元に クエリストリング に展開される 文字列 を以下に示します。

受け取った オブジェクト

var query = {
  action: 'view',
  id: '123',
  debug: undefined,
  arraylist: [
    'val1',
    'val2'
  ],
  hashlist: {
    foo: 'foo',
    bar: 'bar'
  }
}

オブジェクト を元に生成する クエリストリング

?action=view&id=123&debug&arraylist[]=val1&arraylist[]=val2&hashlist[foo]=foo&hashlist[bar]=bar

Windows 10 Insider Preview が公開されました。 Windows 10 Insider Preview では、かねてからウワサだった Microsoft Edge (Project Spartan) が利用できます。 Internet Explorer は刷新され、 Microsoft Edge という名前に変わるようです。 さて、新しいブラウザが出たので、そのブラウザを判定するために User-Agent を確認したいので、調べてみました。

以下の User Agent 文字列 は実際に Windows 10 Insider Preview x64 を仮想マシンとして動かし、ブラウザを動作させて確認した文字列になります。

"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0"

従来の Internet Explorer との違いは以下のような感じになっているようです。

• 以下の項目が更新
  • Windows NT が Windows 10 なので 10.0 に更新
• 以下の項目が削除
  • .NET 関連
  • TabletPC
  • Touch
  • Infopath
  • Trident
• 以下の項目が追加
  • Chrome
  • Sarafi

これらを反映した jQuery プラグイン (jquery.depend) について書いた記事は こちら をご確認ください！ そんなの面倒だからさっさと ダウンロード させろ、という人は github: garafu/jquery.depend - release へどうぞ。

関連記事

• Internet Explorer 8.0 ～ 11.0 までのまとめ
• Internet Explorer 8.0 ～ 10.0 までのまとめ
• jQuery で ブラウザ、バージョン、プラットフォーム を判別する プラグイン

参考記事

• Microsoft Windows - Windows 10 Insider Preview ISO のダウンロード
• MSDN - User-agent string changes

以前、クライアントサイドからリソースを利用するためにどうしたら良いか程度は、少し調べはしていたのですが、 今回は、サーバーサイドも含めて W3C の "Cross-Origin Resource Sharing" に記載されている内容を改めて読み直し & まとめておこうと思いました。 …が、結局、ほとんど仕様の日本語化になってしまいました。。 面倒で端折っている部分もありますが、ほぼ訳されています。

※ここに記載される内容は 2014年1月16日 の Cross-Origin Resource Sharing (Recommendation) 仕様になります。

目次

• 用語
  • 単純なメソッド
  • 単純なヘッダー
  • 単純なレスポンスヘッダー
• リクエスト / レスポンス ヘッダー
  • Access-Control-Allow-Origin レスポンスヘッダー
  • Access-Control-Allow-Credentials レスポンスヘッダー
  • Access-Control-Expose-Headers レスポンスヘッダー
  • Access-Control-Max-Age レスポンスヘッダー
  • Access-Control-Allow-Methods レスポンスヘッダー
  • Access-Control-Allow-Headers レスポンスヘッダー
  • Origin リクエストヘッダー
  • Access-Control-Request-Method リクエストヘッダー
  • Access-Control-Request-Headers リクエストヘッダー
• リソースサーバー 処理
  • シンプル リクエスト
  • プリフライト リクエスト
• クライアント 処理
  • シンプル リクエスト
  • プリフライト リクエスト
  • リソース共有が可能かどうかの判定
  • プリフライト 結果 キャッシュ

JavaScript で 指定した数値を 0埋め (0パディング) したい時のサンプルコードを掲載します。 書き方、やり方はいろいろありますが…桁数固定はしたくなかったので、オーソドックスに実装してみました。

/**
* 指定した数値を、指定した長さに、0パディング した文字列を返します。
*
* @public
* @param    {number}    number      0パディングしたい数値。
* @param    {number}    length      最終的に出力する長さ。
* @return   {string}    与えられた数値を0パディングした文字列。
*/
paddingNumber = function (number, length) {
    var source = String(number);
    var count = length - source.length;

    if (count <= 0) {
        return source;
    }

    while (count--) {
        source = '0' + source;
    }

    return source;
};

多分、二分探索ちっくなのや、桁数固定であれば substr とか… いろいろコードの工夫の仕方はありそうな気がします。

参考記事

• ShanaBrian - 数値のゼロ埋め（桁を揃える）
• You Look Too Cool - JavaScriptでゼロ埋めする方法
• You Look Too Cool - JavaScriptでゼロ埋め
• JavaScriptプログラミング解説 - ゼロパディング (zero padding)
• ToDoDODO - JavaScriptで数値のゼロパディング（一定の桁数にゼロ埋めする）

JavaScript で 空白 を トリム（trim、削除） する方法は、何種類か考えられると思いますが… 結局、どの書き方が良いのかわかりませんでした。 そこで、この記事では、"処理速度" という観点で、その方法がよさそうか調査してみました。

まぁ、結論から言うと「ブラウザ毎に違った」という結果でした。。 メインとなるユーザー層が良く使うブラウザで最も速いコードを選ぶ必要があるかもしれません。

JavaScript で 空白 を トリム する コード (測定対象)

var trim1 = function (source) {
    return source.replace(/^\s+|\s+$/g, "");
};

var trim2 = function (source) {
    return source.replace(/(^\s+)|(\s+$)/g, "");
};

var trim3 = function (source) {
    return source.replace(/^[\s]+|[\s]+$/g, "");
};

var trim4 = function (source) {
    return source.replace(/^\s+/, '').replace/\s+$/, '');
};

処理速度 測定方法

テストデータは、アルファベットをランダムに並べ替え、0～26の文字数をランダムに先頭から選択し、前後に0～5文字の空白を付加して生成させる文字列を1000種類、準備、利用しました。 測定は、前述1000種類の文字列のトリム処理を、1000回実行する時間を測定しました。

測定環境は、手元にあったブラウザが Chrome と IE だけだったので、その2種類で計測しています。。

var testdata = ["pcwlqogmkyatbs ","  nkahkyifdsurcmweg    ","    ragkbtpjuqoimhysewfc   ","fkuiohblvrqmdtcpwzgnaksyj ","  qmpkgfcunevwlbtjkai    ","  gukcpsrtqhmf    ","   dneqylcfpzsr ","   lenktysc ","uwazqfokldhtkjpe   "," slmtecfdjkoazhpwvrnkgb ","  il","ikhofzluwnqaky  "," ajiweubkpk   "," z   ","   mcibrfogpklaezj    ","  nfmdhalbcjkuvzwoqespygt   ","wvqgylzjcmkrudnahtkosie ","    kzcjptu   ","  rdekzgbmohfajkycu ","  cfogymuvikhpbajzdknslqwte  ","    ktnjwmasqlkuhv   ","    gjqlrbhvdmfcapkuot","    bwomrqutdpglsvj  "," asiqwczyjtfogrpbnlhuekm  ","    djmopk    ","    hvcateslyjw   ","   sjkan   ","   ikwpfstubjraomdlg    "," i","   hqngdusbyltmfvziaeckk   ","gfisblywujrhkvqat   ","   qabwmekvcyfghp ","optsrnmgfhaykq  ","   olhvnifuywk  ","    nrtkbzywi   ","smqkdvi    ","   ulpbzjefdkyaqsgnc   ","  zsvwdlnkjuoc    ","   mesaginuhftkpcvjbdzo    ","   ","    urti  "," zhy ","    fyp ","    swdgnkzupjqerymt","    kdeq  ","rvnhimkedwlgzfskoatq   ","  zbwelvunriqjyhka  ","  ykhfersbctiwunmjqko ","dvpgwz","  wmilp  ","vaotehbzuqjikylmsprcn ","    hjqndgwlouzc  ","dkrkw    ","   jcpyrkihbdk    ","rvwzioacflmq","    bh    ","   vdnzac  "," ntewkzsqblpjyfiur ","   wqdbpna   ","   fzkmdtcnegobqhyas ","  gbdytjwpkq  ","  ejnhq  ","   ehkazigbtnsfmcvjylukop  "," khnvu    ","   kmiyd ","    bknwjahfgkirsey   ","   lrkyi ","    opjdkknfqzyiacstl","tgasyqwmufrcnebopjidlkkzv  ","  svwyuakomkfjdnhgli","   dngjpzyvkwqb    "," pfizomrwjsluknbevgt","vgjznodkcihesrwkmatu ","   wyteihupbjlrodsaz ","   gmfjnqacdlkhwpoitu","    sbwdpnlgqrao   ","    itrpw ","   fjz ","   lvrfiobhnpmgkzaktdeqwj "," plu    ","   lbiutqhm ","nsekhrvckjmabfiydqgzpt"," ojulgsiahmterqzvynbkkw"," dlrsitc ","   ke    "," cnjgkythiaw ","   iculvbnr  ","khpgckvlodwfnteabmrqji   ","   plcmjqwfdnztuibo    ","uh    ","azpty   ","  gsk"," qu   ","  gkkclepovrihqyfdnumzwsabj  ","  jpz   ","eqohipcurvzkyjsbwktga","   svdwjebycklpraqfgukoht   ","    wnbvkuico ","   msltpowki  ","    lqyjkasktrezf   ","  fclauhogeikynd","   b   ","fzstyaqhwulemid  ","zjsdbmftkwlk","    galvtpwezkmhsucdnrofki   ","  nphecawkkvzfl","  ywhzvfjuplcrdgonqmkbtask    ","    kobhdterkvacnsijuyglq   ","  ","    ","  bavfewgmjqhcknkopisyd","    jmurofwpasktvlzcnbehg   "," ehqjndtzvmpg    ","    wqcg ","   qkgzsurhjktencvd","    iewhg  ","  bmyijkcslgnphrq","    tfksnympchkuldzwar "," rykhvkdmbtoeszufiqa ","    woncjdkfamhkrusvpi   ","  ejbuzmnoyckftpagdwr   "," mlipvcjwhatgrdb ","  tnewvgfkauojclsiyzrm   "," aiohnscwkqprzj    ","    wmva ","    v","   emvzhrulkjdfkgsobwtaqi  ","l  ","  ajhitfm  ","   ilrf "," jpmshkkevfq ","  ih   ","   mwrlisnchapeg  ","  qkobzkangcmiwpetjdhvly   "," vedcngkskhyqrjazwm  ","  bgevloipj    ","  zwhd    ","   yawkpzcvfudklb   ","    hekmfjuqskvnwi"," fionhywukpdjqkczgaeltvrm "," uescfbawgrkvnidytmpho    ","  uelhqstvojpgdmk    ","    obkufvymwgiensjlzaprh ","   jkbtpqvzflwredsokghn   ","fpydneil","  gofycmrw "," netacsfqlubovkr    ","    kzavm ","grbejhuq ","   uiveyjnt    ","  cozwnekv    ","  cmspoklkuahqbgzwjfn   ","    seikczthvnamfdwlgboq   ","   rpvmiqugdlzyakbosnj  ","      "," zkvsaplfdmounrwycgjq ","   da    ","  eqav ","   lfnp   "," jktnge","    i ","jqyukvinblhwfdzoepgakcts   ","    skleydavpfonbquzktrgw    "," qsktlonvk","  ikuhdvkq  ","   hrmkl   ","  juh   ","  rlhjobkq","   mbkihotnseqcwlrupaz  ","  qwabngkpsvjlcftemhzkoy  ","   ojnq    ","kkj "," qaofdelryhckztmbjkugs   ","  wckualfspoqytbjigh ","pwljkvebdagrqzmfytcs ","   dvityakfkbslprcgmwjquhz","  zhwgkv   ","avtqugoydirclnbjspk   ","ihkpbqlnzwmkadfycvoestujr","    ksahfdlyutcqjzowgpiebmnv","  panzoigjhsvwdefmuyklt  ","hkvpjbsyudifl ","  y   ","   yvpuqdekzcnkjogmahisltrwf  "," ybkjirkhodguqsvep  ","avidkfbugnw ","  johgmkbtdina ","    l  ","   cvswkop","   ajchfyzoiknsptvk ","kfdheqgluvsbyzmtjapcwkr  "," fjgpquctzkhbnmorsa    ","    ypgekzvahfmocj    ","wkacikpgemlyvoqfbhzjr","gwtbi    ","obspdti  ","  fywzkkjusnbmridvtploqcg   ","   qakj   ","  pkhokjsbmrdyaitflu","    vomlafeujqsdpcibkyg ","    fjpql   ","    yvfwargceukntjlomksdbhp    ","zadrmvkchtwlspekbyj    "," qbyersdnia   ","  umenzjlcgbtvkrisaqydwfho    ","      ","   riboykplfqhuvdkwjnezcgas","   koblgfusyczhdnkqejtpvmriw","  iscgdvuqrjkat    ","   a ","    puwcrslmkafdhqzkoe   ","  srz    ","lthzfgvi  ","    ihndrvufbajz   ","  vgkfhurqjk","btwclfkqogui  ","   hmnitqzcdjylwpkrgobveska "," zvlgyufsknwjh ","    dgmc   ","ikvn "," ktyihcejalnwdpvkm   ","stlcbwjpmdv  ","  gwilteafbnmkhsropkqyjuzvd    "," efcrwlasdomkvgtkh","  kmlueiyr    ","  eq  ","   wnkvlrteybmjgfhkapiuzoc   "," zikhujwvkrqtsaopdfbyl    ","    nwkiglbzacfhome    "," snktdapyr","zlgjksaowyftdukncmbep ","   vrhjcfwnlzyqdbka    ","  ikwqhmplfotcnbygadzrv  ","    ph  "," uiakczvty    ","    soqhptvujibamcfkkynwrzel","mpqcdwz","zlhvitrkaokcbjeyf  ","    ou","    trqzfbcsgvopludwmkiekj ","  lncibmrozdgpuwtfykqj   ","ghzblojwvdrqemckayts   ","    ri    ","   hfqjaknury   ","      "," rtpqcheofk  ","    byzjpitohlmrkn    ","    ","    gkshwtvckomnpiujeqrd    ","   oakjwilehdk    ","eumljriv ","   bruahngzweoykjsfcm","   jpewqthrsglfuvkozdkm ","yimnpogvjwhqztkrfebcldu   ","    kzeoqudarbpmj","   ufbpaviqkkswljey   ","    kwarlpobchnedzfqjum   ","qszlhekywnajcifdvtk  "," rfejdzuqwhlpoi   ","gmdpozukvafetbchlwsqyrjni   ","   pydgbtkoclnsqjzamer  ","tvugnwzb "," dlfreqpiwkz ","  knsclvzeuyw","  flediabk   ","   cwnsliyjqkurtzgodv  ","    kmnafdoyzlqpbhk  ","  tjkosd  ","    sylqebunkrgw","mwczhjfqot","vpbescomkdtrhakynjgfiqz","    rokihn   ","   arysklhc ","klunjmqovfwgr    ","ruokiknjhapdszybwvmlfce   ","  qvkaenlo ","f ","   o   ","    sj    ","   leavibfqwymsn","jbiazlvmnchtfkeko   ","  f  ","     ","  mefk","qvleifhcymkagopkjnwubs    ","rbmqkondltsvgjhczuwi","  v  ","ifqb","    qnjkbpgehzo   ","    gzwfdcpmt  ","   icz","   rlckobyu    ","    gezlrtwfqyabksjdhonckpui   ","  ymujckpafbrstdlhievgk   ","  ydfbvcshqnrgakm  "," bsfzvhgckdjruitlqo   ","    maqrjzkgpcoftuvlhdsekwi  ","uygizdpovtj","  mfsvjryboiahckzqdunk    ","  damnzgck","    ghv ","kuitqbcgkweylfardom   ","ruzqgfsvilyc    ","   duqajwolkckyesvfm ","vghr  ","  vtughojpecnm   ","uvtojmnire","    hainy   "," matkusjlowczkdphrifnq    ","    pfqlkakuyswcmvi"," lnducvsygoprhk","uytakvjnroz ","uaijeyqt    ","gitw   ","  kqhrvmefijnladkcbwsgotzu ","    ifaz","ncyqfrkuvlmpjwaozikdtebs    ","blwamokrcqtziednvfjpkhug   ","erwkbdik  ","  mhgpbslfjdrkn","tepjsrmkcayzfnwogkv    ","  oaekwmisjrkbhfvc","   rjlcmbnqyksgwpvdoahfzet  ","     ","kvsmbzfenoigwlru    "," bglvfy   ","   yn "," tfjildzspecukmobvwnqgyakh  ","vkbcazpsfginho  ","rhuq    ","  kea   ","mtgyaoewhfdkjrnq   ","ukn    "," k    ","   kyhicudqlbjanpkgsotrzmwfv","   klfwmghojuci "," ftelpjrok  ","  rkawnpuj"," kgetkfjb   ","    myljcagozsdtnfuh    ","    a   ","    faletcnvmr","    emjqpuwvngatfdyblsh ","  ulofrykhikgc  ","  zmngwhpkcitladfeqysrb "," yqbucisozathgvpdekrk   ","  yeodwztfqk ","   huoigqjsmfrvbkpk    ","btkshwyfpjvulqnodzmgiea  "," enqylbokjikzsrtgucdvh","","   nebqawikouftmvgjzypldks ","   hatfozjrvspiuqkm"," hcgayotplwdrjfzvebkumkins   "," aplqkwmoucsfke  "," dhimla    ","  hamfnkpozleivuysk","  jkptmqokzbesucwfvdirnyha ","  kzqrj ","    zg  ","  alvputrqkmwbgfdcnkeyhjzs  ","   gjwuzvahqldepmsrkbnfokyc","  emqdknygfwr    ","    ehf","   bkuzfktiwvc    "," w  ","   eucjsqgfpywtzonkvmklaid  ","  niohsdzeujkalqkympt  ","knikzd ","  ms"," vhsrtqkpk    ","  zbsedoktilyngjura","    bfowzkchdrqveulgamiyjsptk ","    oepjnywbmqckg","  akeqhoulv   ","tjkqlcevhokfprgymudwzbian"," zltdswpmega"," uirdpgcqhnm ","  akrh   ","  ichsbnrmyzavwt   ","    talbndphcrkveq   ","   kjfoyilpdmrhb ","   jtezwpkybvdmgursql   "," vqukpytz  ","  ayrkegljwfhoknvpqdibtzcsm "," hkditbcukgnewqlazr    ","okduhakcgyrnpizjeblqt ","  mvjpfko ","  zpsfrjmakngohyw    ","   rbwkhzviecgqkjmoyflus    "," dwjfmrnezyhocvuslbka"," ogk    ","  sfegd   ","   bcntlydwkqefkvupjgoia ","  unjzwcdklkrahsqigepyobt   ","   hlacripbokfnyjevqkszwug    ","   kyqczmrslikvgjntpfwba  ","   faktrgmdqocwesvnpjiu "," tvyqcalfnib  ","engohzsiacflq ","   kmeqrbifjcuotld    ","  krtybmcpalfeokuvwnzhiq  "," lcyzrkkejmb    ","mlabgtrhko    "," "," kolyqkhrte   ","   fatosczermk  ","   tanfie    ","cmisp   ","   kiydsewqzjh    ","  ndzmvfrg    ","   jfrug   ","    hltozimuk ","    tfyakzsgou  ","  qnpr ","  kvlduhqey ","lcsjpknekyfiohvrgb ","kkaqdlmwynzfocrpiebstujh    ","  gkodfyiuzr   ","    khogklirv","    uojw   "," mqkndizrcphgyveuakl","    eorkpiydzqa"," vbpmwjknkoaglyisuecrtf ","lwkipfthvmnadr   "," nogaklvkrqwyiuztf    "," gqjdrwhzkblopnc","  tpnczskragbewmvf  ","    mrgqyjfzsuhic    ","  kktsicqgelnrdozmbwpyfhuaj  ","   yobpev  "," edkymcgspzfkwqajhuon  ","  lbgnwckathrqmfyzekuospi ","   hcu    ","       ","   hujcgimysaflkzrqtbdvwk ","kuf","    jvoyw "," grkavonlybmctze    ","    gczwnbvpfmeqkdrhjskail   ","   cphmtnyfkbqkjervla    "," yjelhkvtbqkzcnismfawpgrod  ","mfd ","  stcfd    ","   ey   "," nbjrksdhzqpmwctlkovgyefia    "," os   ","   wosctaebfqmuilyjv   ","    fgkhtbinywokc    ","    ekihmdua ","  bkpw ","lvse ","    dfe "," zcof    ","  rtdlkikswgonqevh ","   hjopunwsiftzyk","   tg    ","jfakmqlbvurzntswhygcpkiod ","  bvrhqgaeocwjzsfkdynikltu  ","  rj ","    epvmtjfcuhl   ","jbdqhefzlturkcgpyvsiakon ","    wmskgpftbvylzeiaoqjdnkcur","  liwtrea   "," zsvknqpghalwky    ","  zfequymdawibjcgnotvlkrshk","   vkyqrwuopkaiegbmt ","  ehzws  ","   ep    "," zvbfkqtgcj  ","  yjigmokbwtzcfsr ","bjuasltvdkkqwonef    ","  smuchyqdwnvi   ","  syikmjolvfhcenqbwgdra  ","  zmtusknqjayd   ","   jnvotqluwk"," iodqhfgnytkbvwzpculek   ","      "," pjwcl    ","  qolnmjkwuhfpvte ","jhtfbezsqdwaupgvkly  "," fspzdoqrye ","ruvhzdlgq","   bokmlvqkndsyihfzrtapge    ","zvmek ","dtc    ","hjvisyd    "," ","        ","zihyjbemkdpvufo"," ","     ","    ehltnikfboad  "," drgalmicjynzesvwoptquhfbk    ","  kfvetdniqcojlbusmparh  ","vmfqizjdo  ","   brqupvdekkfacwj ","    quwy  "," kpvakbimuyqwjtf   ","   svrjgtobzymqnf   ","   vetcjgkaydzlhk","ubphaqwi","  wodbygtvklnmfchsipa    ","   db   ","  qfjkkacnuriyetbldz   ","   nzueairpvdhbclmtkqfgkos","  kqocjinkrdpv  ","    o","   jswzkptncaqomy","  jhtdsizegpvlnmufkycqor    ","    kufbrzosdj ","kzhqevnt","   lrdfukjhegmvznyw "," okjrswf  ","    imltvqyoa","nezdmcvf   ","whtgcpznflsuoibmkyejd ","   ","vkicgruedmqs  "," ehldpwtvizjkmoauqbkfn"," av    ","   wvl   ","  pfrucemk   ","   umyjbzrkatlogcnwidkvq "," cmrybujlkkapz","  jpswl ","    bwpv  "," eqkhzprub   ","    hsekdpcazrboyimjnlgw","   tduynklhepcisfo","zukbkie","esynotkdbjvwfrg","  uclz","lam   ","  ewoqzlmkgjnp    ","   raqhpkvmtusnicegwzfy   ","dfgqkpzwrebcvy    ","  ","gdfmlibntjzopqaery   ","    huonm    ","    iagolqtwp  ","  jhlqktdzrpw","    izmkjbwhlykcr    ","    ckzmbtuhyvlrpiaoj","tmkcakpjv"," fdcqnwibprljzgykvakuhso   ","  fvoytupdrsknmilwza    ","   ikevtonrfaucmkdsqwyj","    "," iurcjkklvzmywdpoabnfetqgs","btywsrkdpfqhcemnkv ","   zlobjrshmnugwfyviptcqd    ","ptbzrdnofawjgeskkcyh  ","    ltgrikwnfyaupvjqcdsh","   wey  ","   cnjbzokqegmyvklsd ","  ","rlgvuiaeb","    yezibuqfo   ","     ","    rdhzglbnwuoksetqiyfajcpvm    ","    frc   ","   oziefcgwaybjdku  ","   gyocrbqshil   ","    pqytr   ","   mpwisveafnkyuoqclb  ","   qczmfdkiyneavtglwbhkjsour  ","   svmkjuribctypazqkdeoglnhf","   tezhskrcdiavfmkwyonbug  "," nudkwymolazpgikecbvqt","  hrknmwdezk  ","  svtkemgjhfdr"," lfpar  ","  toywakdsu    ","topbhnvfesrijym    ","  pdweqmkubilvjk","    kpncwgsuktoijbhdfy  ","  wqhjoailpvtebfrmznkygdcku"," dojlkmiczhr ","  eaiuf ","    ","zuwkmpvaegqhdynrbktji    ","  tkfwljardshuimgcqzp  ","   hgwbmidautljfn"," cstihdarbeyz "," cegbpwyrkokusmqlndiztv","    ejiwvhgn","   uvqieptlcbhjagkyfmdw    ","   oh   "," jgcoiqzbavfkuslknprwdty   ","  gekdwhoirv"," keunpqmbivsoyjzk","    rcqjtzfd    ","  okurkmdjlihbwz ","vjkcsktwgar ","  jhtrik    ","csafrkomlpdtuhveqynbg ","  hydqjzkbucntfargksvipel  "," bcmpowndiavrkfylqeusjh"," abmz    ","   pyzkeodcfbrutvn","   jgvolkpnzhekyqarbmuidsfw  ","cblpazyqkfgkrnmuwesthvoij    ","kdatgzoemuilnsqyv  ","   ouwtimclp "," qgvs","    piqeaof "," wqsmikflaovzepbkhunygdt   ","    ","hlkdkwremszayitvqf ","    dqstbrnygm    ","   dunwkjymtkq","    kjuyhisdtk  ","  b    ","  pisndocaqmz    ","    lfrgyaeoknpdbu"," nwgblmhyfuscievzkoqrkjpta","  plhmgozajc"," suirwegtjkhyoknl ","omftjqhrylps   ","   hzvbiefqatgku  ","   sjivrkadutpmewcnbfzkgl    ","  ypz ","    ","  gfudnkijkcp  ","    jnyzwstmhiqackr    ","       ","wvusqmyrbnfdaclzpgjhkkit    ","etibdfackujglqk   ","    bkwutkelmfiapyvzjsq  ","  kiahwcndqorbu","niqzcjtlgrwep    ","  feoutzsdbgjarkcyhi  ","ysozcltgvmihfukrpqenj    ","  swehzymparuin   ","  "," iankuesvpqlhtdzmbkwgroc","   gudqky   ","  nfwviyezctoglmusq","    kslfprtivhjumwnzeqbcdao ","    qzov ","    ktzkebhnglijcpqwyvf   ","    erkbshgtl   ","  ybtoajfw    ","  r    ","  ioygmtv","   pcwrtlvodezqfjnksakigy   "," huzrk  ","    ajzkgybidulf    ","  nkjqolgskebcfpyrai  ","  tiacml ","  qkoywclfnre","    whiaysg   ","  svpz   ","   jvrhwgycklzmtdoibps","  livoswjcndgekhzrtkb","   jtzapgsdwkcmkqre   ","   kugojtlhryqbiazn","  cilpamndrkqz  ","    brdfsymuwip   ","    afkbcjqmluv","    ","   prjofwsazbktgiykvhle    ","    yohzrgvdimjkflecstk  ","  fkigwolkqhjv "," cpgbvlyikesw  "," hkuk    ","kmcdkusthzgjly "," uezlkyhpo ","  aqbzumfygljdtpwsrnkhkev ","    emaj    ","    kiudayfvhecplbnw ","  zaegdcyvtpjhkmqnulfo ","    hrwimdpgv","   crhgaeilsypnfqtwdjbvozk ","   "," fkhtom "," eitokmfwpdkugnr","   uvicewrnhbagz   ","   palt "," dkkmlochtaiebgvjqnwsyzu  ","   jcyatswnudlhekgz ","  dinkzmcgkqvpwb   "," qlyimeowbjvshngkfzrct ","dyuzewntlifsrqkvkmb","      ","  s","jhtakdwlqfcnigvsmrzyebpu   ","mus  ","wdsiekrv  ","   dvkywbhiftnrm   ","  ypiet    "," m    "," shtdkivzanq  ","    qywgpbovjkt  "," kbcdalkotfyuh   ","kfewktjguazyqlrmoh ","    onyiecprzqgaft","   hieqscdbt","    gkvctiwezfnjklar   ","   ozlrdbcfgyhtna ","   arfcgmjytioekbzwlspkdqvhu    "," yofmptjwrevlgsakcbkziuqh ","   bdqmoeklahjfctwnpuvr  ","vsypknfcmuwjehgtbqkrilaoz  ","  mhurzywtnv ","    gkjfmatnbcl  ","   hizgbqkkyrlmenucdv  ","    gvstulpwijbr ","   "," famkgrcineolbdwpjqvu    ","   tkuiyzqrbnspfawvkmjgceoh  ","   cvnrqjyazwbiftukgklmhped   ","  ebfw ","    grokevtjbasclhwnfpkzymi    ","    kmnlvodftapbz    ","  aqnhzvwjyortgslbkfipmde    ","    lkbkdfzwcjiayhqvstoner    ","   nt","   idg   ","   pojqcwetaizyn ","  nvslfe  ","    mzkrehlfnd "," gvotecahuirqzmpkbnydks   ","  tdmlnigehs    "," pkjiswnomgfyvbak","    vgnrsoupajmdy   ","   oyeilapnkvwjcgqdhr    ","  hirckjylg    ","tvczkiredakwg","        ","  ephzrnbyitkdm "," vctknokbjp   "," zd ","    nksytgdpuowcqmrble "," hfugveajidlynts"," vkzlkjsumdeg    ","    nkzpmfjyiqecabdgwtlhvr","   wybgukqmnozlpt","    ujstkvzrihygwn    ","  ugknmpe ","   umzjrowldpcktbfg   "," zfkcpsbjyokq   ","   qakyrhptbvw  ","  wurcgjnkloemvdkzfhyqp    ","    gfaishyzewlnc  "," tnsklirz    ","   qawpmkfdgsilzecnbrotkuv  ","   hcbnepdkuvokmaqryfji   ","  hqtejfobapnvdkl   ","  gutslncjpzwor ","    cahtvkrbkfjlsyzmiwupg  "," piuhkzjgfcsmkeqtawvl    ","    tdfuwn   ","gzkfivjeulpqa","   yajhlqpwcn  ","    lmqbgwcdekpvas","  mqibksvapklfod    "," kqzjvafcodlpsmnihrut    ","    lkzemhrwsdfopcjyq    ","  jczyvnkthospad   ","ekhoiksu  ","   metsdof    ","    r ","  nsokudiyfmpeha  ","    kdyehza  "," wifk ","   qzgclbvykepdrkwojitufh   ","   fomsrkpagzitlujnyvchbkw","nwurpgtzsymlaedf"," tezipufqrohwgmadsjlcb    "," ejivfgpmsulrych  ","    qajpzgonuckesvtlybhi","    bhitnsuqmelgvjafyp   ","    n   ","      ","    vukkiwfobdjgnyq ","    jvkbzlsir"," kun ","  brmasdqykjifeukohvz    ","  wgrvpoulbmdetfqycank  ","  ilhjgntyawecr    ","   juqzm    ","   arcisy    ","   bhtdqrsifpouleyknc ","rhikcbygsw    ","    dpcntseiq  ","  oynltfkecphbugiqjwksrzad"," iszwnkmgopkatqur ","   tnkvwzjodasbei","   hja   ","    lmvtdcbpsh   ","  anbw  ","    geqobrickztjwdpvlfsam    ","   upwto   "," sqodrvb  ","  rimvbdpukkjeqfazo   ","      "," sbaglwfthezkqpuckynirojvm    ","    gpkutejzfbiyrkhwvsola "," bkfzdaktml   ","    jpqedguzvofmastkwkcnibylh   ","  kyunzdwirhojmpgstabevl  ","  wikljuzvtograkc   ","  sqkpuoldjitbnrkhvmwgzaye    ","   yrqzbgpuiaf "," epchazrqnswfimk  ","   ntkrzlpog  ","ehlytawqpvcdjigk  ","       ","    odi","doakvghpljwifrnstmeqbukc "," gfremhnvywdsqokbc  ","  bnzkrmcfqkuhj ","   lhms  ","a","  arzem   "," cohakmfrjszpyqln ","   qznwpurjskky  ","  kohjungq  "," reliskg"," fwlgsyomkqebzuchdvn"," ztnqcuekwyfmapgkhij ","dyuhkip","ocf ","      ","rjcbkm   ","  vmtgdpharow"," pngybkr    "," iordwez   ","glmnweyzptakcidhsobkvqjrf   "," lzcehp    ","   lkadnzocvumt "," nwgylpdiorhekqbuk","   bwqadokchunfl ","tgkrqzhjbs    ","oifwbhmtkrsgc","    mnewckkhaz","  cjphqsdwanoe ","waldjifusy  ","tmqukyokrvdwljah ","    asdvrtkulcm  ","noafyvkqwushtgzemk    ","sakredvlbfmtgk ","ilywkmnogtpjvuhzrdke   "," pnlaz  ","japftbhyivcwrdnzskmoqgul  ","  apckdyufbqtim ","   crwykpdzqineahb","bmjtgqficvul   ","    dcsqzrnhvalgbokftyjwiukep    ","   otikpd  ","      ","  dsbzthfrlingakveqcmwoup    "," kiljbzhfomskwprcd    ","eywrhojlacvskqm   ","ilfqvztjokhrbucnmskew    ","  grectzsmvnkludqbfyj   ","aputzrvidmwfkqybeckh","   s   ","   rwjdkokhf  ","   jbdaqskozkpecw   ","  metwkycgvoujrlhkbqa","    tywfn  ","   kakt    ","  kbhj    ","jmywohfpdtbecngks","lqn  ","sqjlhgzvcd","dyvhgunzoeq   ","  pcsijeguhortazyn ","gufqwhe    ","  avft  ","  kknj","    stpqmwykcofguvjzdkbn   ","   uwnvskmpqhz  "," mahirkyde   ","rfkuht    ","   dypgwlmrvtkisuczfb  ","    vetohmwfj  ","tozyqagrhdkmknwp    "," gtykqpmjknrlwbvzfehsuadc","   tnqzuye "," lqfv  ","    ysek   "," emdfp    ","  rhpkiuj   ","daocbevlguynfqtipjhkmzsk  ","    aiodmspjtcqgvrhulkkez ","    iuzklfrokesdw","   jwnlyvrtcqigmkzufbapkdesh  ","  pj    "," kqfmaveucrh "," uvt  ","    mqhp    ","  omtdpkejiyvhasfcnqk    ","     ","    zwbnldrkyip","ukkdnbhro   ","m  ","    evsidqakpmgyozkr ","   fuovrlkwqshpdcbjmeyatki    ","   hflwemagoyku","inlkrqmouhfdcyvejkgzbtp    "," s  ","   hmdfsjarvnc ","  sqczorakmlidygkevfuw","    okhzrngsfdvepkuqc   ","c   "," klyesrpakjnhqgdimuztwvof  "," jfngidlqsktovc    ","  zbtjenkl","mstzbejokkfrpailunwghqyv    ","   sarwknzdj","    ypwboj","   hovkd   "," ekutrplnzswamdbho","  lwajro","  gzu  ","    o    ","zqksevdn    ","   ocmrkfjezapsythl  ","   urmk"," dgk ","  ktqwfkjobzchepdsna","  caqrwdbsjguoknfpkm   ","    iug    "," cka","  igynouzwlet   ","  ewz   ","    vjwst   "," ie   ","dtnfevzwkumj ","    jaeokzlwtbvqrngmfk","   pardtsoeq","  pl ","    opmngdtulqcjvibfykh    ","   nkqd"," rafkiplmhyjd","  gcl","  r ","    t  ","    tbldqysjrcefhzouwgmk ","omcz ","   ezfhrkbtnpjucmvdi    ","   uejpmilbqgksnzdchwtfakv    ","  krzocpdfiqsevjybuag   ","    zovgejkknqfrimyd   ","   jpzodqewmlfkk","rnvlzcfmkueitahpgk "," zgfkihrdkbtwem  ","  kewzcp"," kkidltqcp  "," kmjewtiuqdor","   wcayskivfopzjr   "," kjo  ","sdtm    ","  buognvzpyiweqltjac    ","   tpoakufyqkimvsedgwhj   ","    besunhgotrzmpfilcyd   ","   hmgikzqypflbnwdva    ","rtqlchvbzdy  ","   bjwmosfvet   "," fmhvdjzytqipsrnok   ","   rzicpdkyqskbw","    iyskmnbegpjcwfukdr    ","    z "," jezbqnlpr    ","hesovcfrukwbjniaqtdlykg   ","nkg    "," gjtpekmovu    ","ilwafngvbuy    ","    rckkopuqnfheimjvlt ","z ","  ytovk    ","   sdclrfkzhtjbnipvwemqygkua ","    lfdarhostwvupikjcnbzmyeq","    rqygutkpaioekblmwvfzs  ","   qknoiryztbfguvpldjkwesahm  ","yrloabumncdskwgi"," cia   ","  n   ","    ug    ","zd","bketajpmodcvyhsrigzuflnq   ","   lmistbwfypnkvrazkcoqjghu   ","   csgbdtnzhuwyelrkqpivjafm  ","jnhkrleboavgwyqimfstp","  rkjfsg  ","ilvkmbesqapdt   "," akgpb  "," bvwslujfzncrtahkyqdeigkmo   "," rqdokpfvealbtkguyjsc    "," gaen ","  gdmlikfykuzcbqhtej  ","    sgbekzrqtouwvmpyidkjh  ","cwehbmpjvfrk  ","   jqm   ","    retukmlkqdyancgfh "," gavylzbwnkdsqmko"];

処理速度 測定結果

まとめ と 考察

冒頭にも書きましたが、結局、ブラウザによって結果は異なりました。 ただ…使うなら trim3 か trim4 が良さそうな気がします。 本当は Firefox、Safari あたりも調査したいところですが… また、時間ができたらということにしておきます ( ^ ^ ;

参考記事

• ににしふぁくとりー - 入力された文字列に含まれる空白文字を削除する
• Enjoy Blog - Javascript で trim するには
• MIURAN Buisiness System - JavaScriptでtrimする

配列を ランダム に シャッフル する アルゴリズム は Fisher-Yates法 というものが有名なようなので、それを JavaScript 向けに実装してみました。 元々の配列（Array）を拡張する方法、jQuery を拡張する方法もあわせて掲載しています。

Fisher-Yates法

Fisher-Yates シャッフル は Knuth シャッフル としても知られているものだそうです。 最初の考案は 1938年 にもさかのぼる古いもののようです。

基本コード

まずは純粋に基本となるコードを掲載します。 これを元にした、配列(Array) の拡張、jQuery の拡張は後に記載します。

/**
* 指定された配列を Fisher–Yates法 で シャッフルします。
* （注意：引数に渡した配列自体をシャッフルします。）
* @param    number[]    arr     シャッフルしたい配列
* @return   number[]    シャッフルされた配列
*/
var shuffle = function (arr) {
    var i, j, tmp, length;

    for (length = arr.length, i = length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        tmp = arr[i];
        arr[i] = arr[j];
        arr[j] = tmp;
    }

    return arr;
};

配列(Array)の機能拡張として shuffle メソッド を追加する方法

配列自体を拡張したい場合、上記のメソッドを Array のプロトタイプへ設定すれば可能となります。 いわゆる prototype拡張 といったところです。 配列を引数として取らない代わりに、this を利用しているところがポイントです。

Array.prototype.shuffle = function () {
    var i, j, tmp, length;

    for (length = this.length, i = length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        tmp = this[i];
        this[i] = this[j];
        this[j] = tmp;
    }

    return this;
};

jQuery の プラグイン として shuffle メソッド を追加する方法

jQuery に shuffle メソッド を拡張する場合、プラグインとして機能追加します。 具体的には以下のようなコードになります。

jquery.shuffle.js

(function (window, document, $, undefined) {
    $.fn.shuffle = function () {
        var i, j, tmp, length;

        for (length = this.length, i = length - 1; i > 0; i--) {
            j = Math.floor(Math.random() * (i + 1));
            tmp = this[i];
            this[i] = this[j];
            this[j] = tmp;
        }

        return this;
    };
})(window, document, jQuery);

ちなみに、上記の jQuery.shuffle を利用して、リスト（li）をシャッフルするコード(HTML と JavaScript)は以下のようになります。

<ul id='list'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

$('#list li').shuffle().appendTo('#list');

参考記事

• PandaNoir - Fisher–Yatesアルゴリズムがすごかったです。
• @IT - ランダム・シャッフルがランダムじゃない！