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を開く

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

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

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


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

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

JavaScript:小数点以下の丸め誤差に対応する

JavaScriptでは数値リテラルがNumber型(浮動小数点型)として扱われるため、何も考えずに小数点以下の計算を行うと誤差が発生します。
この問題への対処法は他の記事でも紹介していますが、大きく分けて以下の2つが存在します。
1.数値項目の単位を変えた上で整数型で計算を行う
2.任意精度型で計算を行う

以下では、JavaScriptの場合の具体的な対処法について紹介します。


1.数値項目の単位を変えた上で整数型で計算を行う

JavaScriptには、BigInt型という整数型が用意されています。
数値リテラルの末尾に”n”をつけることで、BigInt型として扱われます。

整数型であるため、計算結果で小数が発生する場合は全て切り捨てが行われます。
この性質を利用して、切り上げや四捨五入を行うこともできます。
以下は、切り捨て・切り上げ・四捨五入を行うサンプルコードです。

【サンプルコード】

【実行結果】


2.任意精度型で計算を行う

JavaScriptでは標準で任意精度型は用意されていませんが、外部ライブラリを取り込むことで任意精度型を利用することができます。
今回は、BigNumberを紹介します。

BigNumberは、リンク先のGitHubで「Code」→「Download ZIP」を選択することでダウンロードできます。
ダウンロードされたファイルの中には、「bignumber.js」が存在するので、これを実行環境の任意の場所に配置します。

取り込み方や使用方法は、README.mdに書かれています。
使用方法については、英語ということもあり不親切に感じるかもしれませんが、Webで検索すれば日本語のわかりやすい説明も出てきます。

以下では、Node.jsで小数点計算を試すサンプルコードです。
(「bignumber.js」は実行するスクリプトと同一階層に配置する前提です)

【サンプルコード】

【実行結果】


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

JavaScriptではプリミティブ型の体系がJavaやC#とはかなり異なるので、小数点以下の丸め誤差の対処に戸惑いやすいと思います。
対処が必要になった時に、この記事がお役に立てれば幸いです!

JavaScript:オブジェクト指向らしい記述をする

JavaScriptではオブジェクト指向がサポートされています。
JavaやC#に触れている方であればお馴染みだと思いますが、オブジェクト指向を用いることで規模が大きいプログラムを作る時の生産性が向上します。

以下では、インスタンス生成と、ポリモーフィズム(複数のサブクラスを同じように使う)を試してみます。
Node.jsを使用して実行します。
(ES2015以降の書き方となります)

【サンプルコード】

・test.js

【実行結果】


ちなみに、ES2015より前のバージョンではこの書き方はできません。
オブジェクト指向をプログラム言語で実現する上で、「クラスベース」と呼ばれる概念と「プロトタイプベース」と呼ばれる概念があるのですが、ES2015より前のバージョンでは「プロトタイプベース」と呼ばれる概念に基づく書き方をする必要があります。
JavaやC#は「クラスベース」と呼ばれる概念に基づく書き方をするので、JavaやC#の経験者にとってはとっつきにくいと思います。

なお、ES2015以降はクラスベースに基づく書き方が可能になっていますが、内部的にはプロトタイプベースに基づく処理をしています。
例えば、クラス名の型を調べると、”class”ではなく”function”になるのですが、これはプロトタイプベースの名残です。


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

規模の大きいプロジェクトでは、一般的にオブジェクト指向で設計されています。
大抵の場合は何かしらのフレームワークが採用されており、classの存在を意識することはないかもしれません。
しかし、基本的にはそのフレームワークもオブジェクト指向で設計されているので、JavaScriptでもオブジェクト指向をサポートしていることは知っておいて損はないと思います。

Vue.jsインストール手順とHelloWorld(Windows、2020年12月)

Vue.jsとは、JavaScriptのGUIのフレームワークです。
MVVM(Model-View-ViewModel)を採用しており、画面(View)と内部状態(Model)を分離して画面の制約にとらわれないようにすることで、画面で入力された内容をリアルタイムに内部状態に反映させたり、内部状態の変化をリアルタイムに画面に出力したりすることができます。
この特徴により、画面をリッチにすることができます

今回は、WindowsOSのPCにインストールし、実行確認をする手順を掲載します。
実行確認の「Hello World」に関しては色々書き方がありますが、今回はMVVMの良さを実感できる書き方で「Hello World」を試します。

■前提

・OS

Windows8.1

・実施日

2020年12月30日

・Vue.jsのバージョン

2.6.12

■インストール手順

1.Vue.jsの公式サイトにアクセスする。

https://jp.vuejs.org/index.html

2.「はじめる」を左クリックする。

3.「インストール」を左クリックする。

4.「開発バージョン」を右クリックし「名前を付けてリンク先を保存」をクリック。

※FireFoxの場合。リンク先はjsファイルなので、ブラウザの機能でファイルとして保存する。

5.任意のフォルダにvue.jsを保存。

※今回は”C:\tmp”に保存。

■実行確認(Hello World)手順

1.”vue.js”を保存したフォルダに、”hello.html”という名前のファイルを作成する。

2.「hello.html」に下記を入力して保存。

3.「hello.html」をブラウザから開く。

※今回はChromeで開きます。

初期状態では以下のように何も表示されませんが

チェックボックスをチェックすると「Hello World!」と表示されます。
ボタンをクリックしてイベントを飛ばしたり、リロードしたりすることなく、画面で変更された内部状態をリアルタイムに画面上に反映することができています。


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

今回はHelloWorldのみでしたが、これだけでもVue.jsの便利さを実感できたのではないかと思います。
Vue.jsは日本語の公式ドキュメントも充実しているため、その意味でもお勧めのフレームワークです。