メモ

JavaScript #3：ライブラリを使ってみる

公開：2026.05.06(水) 08:02

JavaScript ライブラリを使ってみる

前回作成した簡易電卓(JavaScript #2：簡単な電卓を作る)では、JavaScriptの eval関数というのを使っていたが、これを mach.jsというパッケージの math.evaluate に変更してみる。

1. 変更によるメリット

・安全：alert() などの不正なスクリプトを実行しようとしても、math.jsでは実行されない。
・高機能: 単なる四則演算だけでなく、sin(45 deg) や sqrt(16) といった関数も文字列として渡せば計算できる。
・誤差への強さ: JavaScript 標準の計算よりも数値の扱いが正確になる。

2. math.jsライブラリインストール

WSL(Ubuntu)でプロジェクトの作業ディレクトリ上で以下コマンドを実行しインストールする。

docker compose exec app npm install mathjs

実行結果：

xxx@xxx:~/docker/node.js$ docker compose exec app npm install mathjs

added 10 packages, and audited 96 packages in 2s

28 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

これで node_modules フォルダの中に math.js の本体が入り、package.json に「このプロジェクトは mathjs を使います」という記録が残る。

3. ライブラリ読み込み

index.html の <script> タグの周辺を以下を追加する。

4. ライブラリの使用

"display.value = eval(display.value);" をライブラリの関数に変更

const result = math.evaluate(display.value);
display.value = result;

JavaScript #2：簡単な電卓を作る

公開：2026.05.05(火) 09:13

JavaScriptで簡単な電卓を作る

1. 環境

DockerでNode.js環境を作っておく

→「JavaScript #1：node環境の構築」

2. HTMLの作成

body内に結果を表示するtext(id=display)と、計算ボタンを16個作成する。

<div id="calculator">
    <input type="text" id="display" readonly>
    <div class="buttons">
        <button>7</button><button>8</button><button>9</button><button>/</button>
        <button>4</button><button>5</button><button>6</button><button>*</button>
        <button>1</button><button>2</button><button>3</button><button>-</button>
        <button>0</button><button>C</button><button>=</button><button>+</button>
    </div>
</div>

3. デザイン

index.htmlの <head> タグ内に <style> タグを追加しCSSコードを記述する。

1. body

body {
    display: flex;
    justify-content: center; /* 横方向の中央 */
    align-items: center;    /* 縦方向の中央 */
    height: 100vh;         /* 画面いっぱいの高さ */
    background-color: #f0f0f0;
    margin: 0;
}

2. #calculator (電卓全体)

#calculator {
    background-color: #333;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

3. #display (結果表示欄)

#display {
    width: 100%;
    height: 50px;
    font-size: 24px;
    text-align: right;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box; /* パディングを含めたサイズ計算 */
    border: none;
    border-radius: 5px;
}

4. .buttons (ボタン全体)

.buttons {
    display: grid;
    /* 4つの列を同じ幅(1fr)で作る */
    grid-template-columns: repeat(4, 1fr); 
    /* ボタン同士の隙間 */
    gap: 10px;
}

5. button (ボタン)

button {
    padding: 20px;
    font-size: 18px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #eee;
    transition: background-color 0.2s; /* ホバー時のアニメーション */
}
/* マウスが乗った時 */
button:hover {
    background-color: #ddd;
}
/* 計算ボタンなどの色 (左から4つめのボタンの色) */
button:nth-child(4n) {
    background-color: #ff9500;
    color: white;
}

4. JavaScriptコード

index.htmlの </body> の直前に <script> タグを追加しJavaScriptコードを記述する。

<script>
    const display = document.getElementById('display');
    const buttons = document.querySelectorAll('button');

    buttons.forEach(button => {
        button.addEventListener('click', () => {
            const value = button.textContent;

            if (value === 'C') {
                display.value = ''; // クリア
            } else if (value === '=') {
                try {
                    display.value = eval(display.value);
                } catch {
                    display.value = 'Error';
                }
            } else {
                display.value += value; // 数字や記号を連結
            }
        });
    });
</script>

5. 完成

Linuxコマンド：who

公開：2026.05.04(月) 07:20

who コマンド

ログイン中のユーザー名を調べる

who (オプション)

-i - ユーザーが最後に端末操作を行なってからの経過時間(アイドルタイム)

w コマンド

現在ログイン中のユーザーを調べる

参考：https://atmarkit.itmedia.co.jp/flinux/rensai/linuxtips/053whologinuser.html

Linux コマンド