Tech Sketch Bucket of Technical Chips by TIS Inc.

JavaScriptを使った簡易ツール作成のススメ

Pocket

はじめに

技術的に「濃い」記事が多いTech-sketchですが、逆にあっさり系の記事が不足しているため、気軽に読める記事を書いてみようと思います。
JavaScriptを使ってブラウザ上で動く簡易ツールを作ってみませんか?

簡易ツールを作りたい!

同じツールを実現する場合でも、幾つかの方法があります。

1. C#などでクライアントアプリを作成

メリット:

  • 自由度が高く、ファイルの読み書きやネットワーク通信も可能
  • ツールの見た目をOS標準に合わせるなど、リッチに出来る
  • 高速動作

デメリット:

  • 各ユーザ毎にダウンロード、インストール(or 解凍)してもらわないといけない
    • ClickOnceで対応可能だがあまり知られていない・・・
  • ネットワーク通信などを実装しようとするとそれなりに手間がかかる
  • 開発環境が無い場合、インストールの手間が発生する

2. Webサーバ上で動作するアプリを作成

メリット:

  • ブラウザ上で動作するため、インストール、アップデートが不要
  • 他Webサービスとの連携が比較的容易
  • 開発環境が無くても何とかなる

デメリット:

  • サーバの構築・運用が大変
  • UIがブラウザ上で実現できるものに限られる
  • 複雑なUIの場合は実装コストが高い

ちょっとまって

いやいや、作りたいものは簡易ツール。環境構築に時間をかけるなんてのは作りたいものに対してコストが大きすぎます。
ファイルの読み書きや、リッチなGUIが不要であればクライアントアプリにする必要はありませんし、サーバ側にデータの保存を行う必要がなければサーバ側にDBを用意する必要もありません。
スタンドアローンで動作する簡易ツールであれば、HTML + JavaScriptで実現してみませんか?

サンプル

サンプルアプリとして4月~6月の給与から改定後の健康保険料、厚生年金保険料を求めるツールを作ってみました。
4月~6月の給与を入力すると、標準報酬月額を自動的に求め、10月以降の保険料を表示します。

保険料計算機
easyTool.pngのサムネイル画像

これぐらいの見た目、機能であれば、単一のHTMLファイルで実現できますし、Dropboxのpublicフォルダに入れるだけで外からアクセスできるようになるため、一般公開も容易です。
使う人から見ても特定のURLにアクセスするだけで使えるため、簡単なツールであれば十分役に立つと思います。

テンプレート

こういったツールを作る場合、テンプレートになるファイルを用意しておくと便利です。
今回使ったテンプレートでは以下の機能を含めてあります。

  • 文字コード指定(UTF-8)
  • jQueryの使用
  • スマートフォンデバイスで見た際に見やすいように
  • 基本的なHTMLとscript/styleの記入領域

あなたもテンプレートを元に「ちょっと便利なツール」を作ってみませんか?

エンジニア採用中!私たちと一緒に働いてみませんか?