[日記] ブラウザを電卓にする方法

2014/04/18

こんにちは。きんくまです。

今回は日記というより小ネタです。

プログラミングをしていたり、お金の計算をしたりと、計算機というか電卓が欲しくなることがよくあります。
以前はiPhoneアプリとか、本物の電卓でやっていました。

で、あるときふとJavaScript使う案件の開発中にこれの方が便利じゃん!ということに気がつきましたので、ご紹介です。
ていうか、Web制作している人は普通にやっているかもしれないですね。

ブラウザを電卓にする

難しいことは特になくて、開発者ツールを立ち上げるだけです。

Chromeだと
URLバー右横のメニューから > Tools(ツール)> Developer Tools(開発者ツール)
上のメニューだと > View > Devloper > Developer Tools

Firefoxだと
メニューから > ツール > Web開発 > 開発ツールを表示

Safariだと
Develop > Show Web Inspector

IEでも開発者ツールという名前であったような気がします。
それぞれショートカットが割り当てられていると思うので、慣れると1発で立ち上がります。
(MacのChromeだと Command + Option + i(アルファベットのアイ) )

というふうにするとブラウザの下側にこんな感じにコンソールが出ます。

画面はChromeです。

browser_console

計算式を入力してエンターキーを押せば結果がすぐに出ます。
=は要りません。途中に半角スペースが入ってもOK。

1+2+3+4 (ここまで書いたあとエンターキーを押す)
10(結果が表示される)

四則演算は全て大丈夫です。
+ 足し算
– 引き算
* かけ算
/ 割り算

3 * 1234
3702

また()をつけて優先順位もつけられます

3 + (4 * 5)
23

もちろん小数も大丈夫です。

ていうか、ここのコンソール部分はJavaScriptを実行してその結果を表示しているので、関数電卓のようにサインやコサイン、対数やべき乗なども計算できます。
でも、日常生活では使わないと思うので、ここではおいておきます。

※サイン90度の例

Math.sin(Math.PI / 2)
1

ついでにいうとJSなので、alertと書くとアラートが出ます。

alert("アラートたちあげたよ!");

ブラウザ電卓の5つのメリット

1. ふだんPCで作業する人は、たいていブラウザを立ち上げているので、すぐに作業ができてよい
2. 複雑な計算も式で入力できる
3. 履歴が表示される(これは意外と便利です)
4. 計算式がコピペできる
5. キーボードで入力できるので、慣れている人は高速に入力できる

といったところでしょうか。
意外と便利なのでお試しくださいませ。

LINEで送る
Pocket

自作iPhoneアプリ 好評発売中!
フォルメモ - シンプルなフォルダつきメモ帳
ジッピー電卓 - 消費税や割引もサクサク計算!

ページトップへ戻る