JavaScript

2020.08.22

[HTML5] WebWorkerで並列処理を行う – 共有ワーカー編

前回はWebWorkerの中でも最もシンプルに並列処理を扱うことができる「専用ワーカー (Dedicated Worker)」について取り上げました。今回はiframeや他のウィンドウ(タブ)などから起動中のWorkerを利用することのできる「共有ワーカー(Shared Worker)」について取り上げます。

ページが違えど処理は共通と言った場合に利用すれば、クライアントのリソースの消費を抑えることが可能です。
続きを読む

2020.08.18

[HTML5] WebWorkerで並列処理を行う – 専用ワーカー編

JavaScriptは非同期処理だから、複数同時に処理してるんでしょ？……と思っていた時期がありましたｗ JavaScriptの非同期処理とは時間のかかる処理の待ち時間で他のことをやってしまおうという物で、雑に言うなら実行する順番をコントロールする仕組みのことです。つまり並列処理とは異なる物。

本来の意味での並列処理を実装するための機能はWebWorkerで実装することができます。シンプルな仕様にまとめられているため簡単にJavaScriptでも並列処理を実現できます。WebWorkerにはいくつか種類があるのですが、今回は「専用ワーカー(Dedicated Workers)」について取り上げます。
続きを読む

2020.08.17

[JavaScript] Bowser 2.xでOSやブラウザを判定する

Webブラウザの状況が目まぐるしく変わっている昨今、常にすべてのブラウザへ対応出来るとは限りませんよね。というか現実的に出来ませんｗそこで対応しているブラウザかどうかをチェックするわけですが、この手の判定は陳腐化してしまう恐れがあるため、事情が無い限りはメンテナンスされているライブラリを使うべきです。

つい最近もiPadが「iOS」から「iPadOS」に変更になったと同時にSafariのUAが劇的に変化して痛い目をみましたｗ

今回はこの手の判定用のライブラリとしてはメジャーな「Bowser」の使い方をメモしておきます。ちなみにBowserって「スーパーマリオ」の「クッパ」のことなんですね。Bowserでググると意図せずクッパとの戦いになって困ってましたｗ

lancedikson/bowser

https://github.com/lancedikson/bowser

a browser detector. Contribute to lancedikson/bowser development by creating an account on GitHub.

GitHub

※このページの内容はいずれも執筆時点の物です。ドキュメントに無い情報はv2.10.0のソースコードを参考にしています。
続きを読む

2020.08.16

[HTML5] IndexedDBに画像ファイルを保存する – Dexie.js

IndexedDBは様々なデータ型に対応しておりblobも例外ではありません。つまり画像ファイルなどバイナリ形式の保存が可能というわけです。IndexedDBへ格納しておけば例えオフライン状態であっても好きなときに取り出して利用することができます。

単純にサーバ上にあるファイルをキャッシュしておくだけの用途であれば最近はWebWorkerとCache APIを組み合わせた方が一般的ではありますが、これはデータに対してURLが存在することが前提です。例えばCanvasなどに描画した内容を保存しておきたいといった場合には今回の方法が重宝するかもしれません。
続きを読む

2020.08.09

[HTML5] WebStorageにデータの保存や読み込みを行う

ブラウザの内部にデータを保存する方法として、これまではCookieが使われてきましたがこれは主にサーバとのやり取りで利用する物。そこでJavaScriptから手軽に扱えるデータの保存領域としてHTML5ではWebStorageが登場しました。

今回はこのWebStorageの基本的な利用方法についてまとめます。
続きを読む

2020.07.26

はじめてのSocket.io #3 チャット編「ユーザー間でのなりすましを防ぐ」

Socket.ioでチャット開発するシリーズも3回目。
前回はSocket.ioから送信されてきた発言内容が自分の物かを判定するプログラムを書きましたが、この仕様だと簡単に他人へのなりすましが出来てしまいます。今回はこれを防ぐ簡易的な方法を紹介しつつ、チャットルームへの入退室などいくつかの機能追加を行います。

2020.07.17

[Quora] Babelは絶対に使わないといけないの？

Quora回答シリーズです。

質問

フロントエンドの開発でBabelというツールは必須の位置づけなのでしょうか？Babelが不要な環境があれば教えて頂けませんか？
https://qr.ae/pNsn74

むしろ今後どんどん使われなくなっていくのではないでしょうか。

Babel · The compiler for next generation JavaScript

https://babeljs.io

The compiler for next generation JavaScript

babeljs.io

2020.07.11

AdBlockを有効にしているブラウザへの対策あれこれ

白状すると私も日常的に広告ブロックツールを使ってますｗ
PC版のChromeではAdBlockPlusの機能拡張を入れ、iOSのSafariでは最近AdGuardを利用しています。正直快適でもう手放せませんｗ

ただこれがサイト運営者の収益を削っているのも事実。せめてサーバ代くらいは捻出したいという方も多いと思いますので今回は広告ブロックの簡易的な検出方法と、その対応策についてまとめたいと思います。
続きを読む

2020.07.05

[Node.js] expressで作るHTTPサーバ – 入門編その3「非同期処理とファイル」

※この記事は専門学校の講義用に作成されたものです

Node.js+expressでHTTPサーバを作成する第3段。今回は最終的にファイル処理について取り上げるのですが、その前に知っておかないとグローバル変数以上のハマりどころである「非同期処理」についても説明します。Node.jsはApacheなどのWebサーバと比べると仕組みが大きく異ります。この違いをまずは抑えましょう。
続きを読む

2020.07.05

[Node.js] expressで作るHTTPサーバ – 入門編その2「グローバル変数の生存戦略編」

※この記事は専門学校の講義用に作成されたものです

Node.js+expressでHTTPサーバを作成する第2段。今回は「罠」にも「武器」にもなるポイントについてお話します。

PHPでサーバサイドを実装する際には、Webサーバとしての機能はApacheが受け持つパターンが多いわけですが、この場合PHPはリクエストがある度に起動と終了を繰り返します。つまり起動時に前回の処理結果などを気にする必要は基本的にありません。ところがexpressでサーバを作っている場合には1つのプログラムが起動しっぱなしであることを意識する必要があるのです。
続きを読む

2020.06.28

[Node.js] expressで作るHTTPサーバ – 入門編その1

※この記事は専門学校の講義用に作成されたものです

Node.jsでHTTPサーバを作成します。

以前からNode.jsはサーバを作るための言語であるという誤解している方が結構いらっしゃるのですが、標準モジュールだけでも非常に気軽にHTTPサーバをポンッと作成して立ち上げることが出来てしまうことも起因しているのだと思います。外部のモジュールを取ってくれば様々なサーバ・ソフトウェアが転がっていることでも更に拍車をかけたのでしょう。

今回は標準のモジュールに加えてExpressと呼ばれるモジュールと組み合わせることで、さらに簡単にWebサーバを構築する手順について解説します。
続きを読む

2020.06.14

[初心者] 最近のJavaScriptの文法をおさらいする

※この記事は専門学校の講義用に書いたものです

JavaScriptはもともとWebブラウザの上で動作するちょっとした処理を行うために登場しました。その後JavaScritの重要性が高まるにつれ、最近の言語に搭載されている機能が無いことに開発者の不満が募ります。そこで満を持して登場したのが新しいJavaScriptの仕様であるES6(ES2015)です。

今回はこのES6(ES2015)から登場した機能の一部をご紹介します。