npmで公開されているパッケージをローカルに落とさず使用する

npmで公開されているパッケージは、UNPKGで公開されています。
UNPKGで公開されているパッケージをscriptタグ等で指定することで、ローカルにライブラリを落とすことなくライブラリを使用することができるようになります。
インターネット接続していることが前提となりますが、Webアプリケーションでは便利なサービスです。
(このようなサービスをCDNサービスと呼びます)

以前に試したVue.jsも、インストールすることなく以下のような形で使用することができます。
(今回は触れませんが、バージョン指定も可能です)


いかがでしたでしょうか。

ライブラリを使用することで短期間で高品質のWebアプリケーションを作ることができますが、資産管理の煩雑さが一つの問題となります。
CDNサービスの利用はその問題への解決法となり得ます。

私も、煩雑な資産管理に苦しめられてきた経験(プログラムが動かなかったり、管理表が必要になったり)があるので、CDNサービスを始めて知った時には感動しました。

Jestを試してみた

Jestとは、JavaScriptのテスト用のフレームワークです。
ここでは、Node.jsがインストールされていることを前提に、Jestを試してみます。
公式ドキュメントであるGetting Startedを参考に、説明が割愛されている箇所を補いながら説明していきます。

【前提】

・WindowsOSで作業を行います。
・Node.jsを事前にインストールし、”Node.js Command Prompt”でコマンド発行します。
・今回の確認では、C:\tmp\ で作業を行います(以下「作業フォルダ」)。

【インストール】

・cdコマンドで作業フォルダに移動します。

・npmコマンド(ライブラリのインストール用のコマンド)を発行しJestを取得します。

・コマンドを発行すると、以下のように出力されます。

・作業フォルダ直下に、以下のようなフォルダが作成されれば成功です。

※なお、yarnコマンドでも取得できます。

【実行準備】

・作業フォルダに、”package.json”を作成します。内容は以下の通りです。

※これで、npmコマンドの引数に”test”を指定すると、コマンド”jest”が発行されるようになります。

【テスト対象のスクリプト作成】

・作業フォルダに、”sum.js”を作成します。内容は以下の通りです。

【テストコード作成】

・作業フォルダに、”sum.test.js”を作成します。内容は以下の通りです。

【実行】

・npmコマンドによりテストを実行します。

・以下のように、作業フォルダ直下のテストコードが実行されれば成功です。


いかがでしたでしょうか。

JavaにJunitがあるように、JavaScriptにもJestという自動テストツールがあります。
後の改修を楽にするためにも、可能なら自動テストツールを導入した方が良いでしょう。

JSONフォーマットとは

JSONとは、データ構造を記述するフォーマットの一種です。
CSV等とは異なり、階層構造を記述することができます。
階層構造を表現できるフォーマットとしてはXMLも挙げられますが、JSONフォーマットはXMLよりも簡易的に記述できる、JavaScriptとの親和性が高い、といった特徴があります。
電文でのデータ通信で多く使われる印象があります。

以下では、JSONについて、フォーマットの簡単な説明と、JSONの生成・読込を行う簡単なサンプルコードを取り上げます。


【JSONのフォーマットの簡単な説明】

■データの開始と終了

開始は”{“、終了は”}”で示されます。

■データの構造

以下のように、変数名と値を”:”で区切って表記します。
変数名はダブルクォーテーションで囲います。
(値については後述します)

変数名と値のペアが複数ある場合は、ペアを”,”で区切って表記します。

人に読ませることを意識する場合、以下のように改行を入れてわかりやすくすることが多いです。

■値の種類

JSONでは以下の値を使用することができます。

・数値
数値を記述することで、数値としてみなされます。

・文字列
ダブルクォーテーションで囲うことで、文字列としてみなされます。

・true/false
trueと記述することで、真としてみなされます。
falseと記述することで、偽としてみなされます。

・null
nullと記述することで、nullとしてみなされます。

・オブジェクト
“{“と”}”で囲うことで、オブジェクトとしてみなされます。
これにより、階層構造の記述が可能になります。

・配列
“[“と”]”で囲うことで、配列としてみなされます。

■文字コード

文字コードはUTF-8(BOM無し)を使用します。

■その他詳細

RFC8259)がJSONの正式な仕様となりますので、こちらをご参照ください。


【JSONの生成・読込を行うサンプルコード】

ここでは、JavaScript(Node.js)でのサンプルコードを提示します。
以下のように、JSONの生成・読込を行うための機能が用意されており、それを利用することで容易に生成・読込が可能になります。

■生成のサンプル

・コード(stringify.js)

・実行結果

■読込のサンプル

・コード(parse.js)

・実行結果


いかがでしたでしょうか。

JSONは、JavaScriptを使う場合はもちろんのこと、他システムとのやりとりでも使うことが少なくないので、使う言語によらず学んでおいて損はないと思います。

JavaScript:inputの入力可能文字を制限する

HTMLのinputタグ(テキストボックス)では、onInput属性により文字が入力される度にJavaScriptの処理を実行し、入力された文字を取得したり編集したりすることができます。
これを利用して、inputの入力可能文字を任意に制限することができます。

以下は、半角数値のみ入力可能とし、それ以外の文字が入力された場合にはテキストボックスに入力された文字を全て削除するサンプルです。

【サンプルコード】

・test.html

【実行確認】

WindowsOS上でChromeバージョン86.0.4240.111で試しています。

0-9(半角数値)はこのように入力できます。

テキストボックスに入力した文字はこのように取得することができます。
(今回はボタン押下で取得し、そのまま表示)

しかし、許可されていない文字を入力しようとすると、テキストボックスの文字が削除され、入力できません。


いかがでしたでしょうか。

入力チェックというと実装が面倒な印象がありますが、このように入力の時点で不正な文字の入力を防止すれば、入力チェックの実装が楽になります。
ちょっとしたページを作る時に便利な方法だと思います。

JavaScript:ブラウザからローカルのテキストファイルの入出力

JavaScriptをブラウザから使用する場合、セキュリティによりローカルへのテキストファイルへのアクセスは制限されています。
その制約の中で、下記の方法を使用すれば、ローカルのテキストファイルへの入出力が可能になります。

・入力

テキストファイルをJavaSctipt形式に変換し、変数として読み込む。

・出力

HTMLのaタグを使用してダウンロードさせる。
aタグの仕様上、ダウンロード先のパスは自ユーザーのDownloadsフォルダになる。
(ただし、aタグのdownload属性はIEでは使用不可)

 

以下、サンプルコードです。

【サンプルコード】

・test.html

・test2.js(テキストファイルを以下のようなjsファイルに変換するのが前提)

【実行結果】

・test.htmlを開く

・ファイル出力ボタン押下

以下のようなファイルが出力される。

・ファイル入力ボタン押下


いかがでしたでしょうか。

ブラウザからローカルのテキストファイルへのアクセスが制限されているのは、インターネットを使う分にはありがたいことなのですが、ローカルでスタンドアローンな画面を使っている場合には逆に困ってしまいます。
そのような場合に、今回紹介したようなテクニックが使えるかもしれません。