JavaScriptで幅とアスペクト比（幅：高さ）から高さを計算する方法

本記事では、画面の幅とアスペクト比（幅：高さ）を入力として受け取り、それに基づいて画面の高さを算出するJavaScript関数の実装方法を解説します。

問題

次の要件を満たすJavaScript関数を作成する必要があります。

• 第1引数として画面の幅を受け取る
• 第2引数としてアスペクト比（w:h の形式の文字列）を受け取る
• これら2つの入力値をもとに、画面の高さを計算して返す

コード例

以下がその実装コードです。

const ratio = '18:11';
const width = 2417;
const findHeight = (ratio = '', width = 1) => {
    const [w, h] = ratio
    .split(':')
    .map(Number);
    const height = (width * h) / w;
    return Math.round(height);
};
console.log(findHeight(ratio, width));

出力

上記のコードを実行すると、コンソールには次の出力が表示されます。

1477

コードの解説

ここでは、関数がどのように動作しているのかを順を追って確認しましょう。

1. split(':')による文字列の分割
   アスペクト比の文字列 '18:11' をコロンで分割し、['18', '11'] という配列に変換します。
2. map(Number)による数値への変換
   配列内の各文字列を数値型に変換した後、分割代入を使って w = 18、h = 11 をそれぞれ取得します。
3. 高さの計算
   アスペクト比の定義より、高さは次の式で求められます。
   height = width × h ÷ w
   今回の例では、2417 × 11 ÷ 18 ≒ 1477.05 という計算結果になります。
4. Math.round()による四捨五入
   計算結果には小数点以下の値が含まれるため、Math.round() を使って最も近い整数に丸めています。

応用ポイント

この関数は汎用性が高く、'16:9' や '4:3' といった一般的なアスペクト比にもそのまま対応できます。動画プレーヤーのレスポンシブ対応や、画像の表示領域を計算する際など、レイアウト調整の場面で役立ちます。

なお、小数点以下を切り上げたい場合は Math.ceil()、切り下げたい場合は Math.floor() に置き換えることで、用途に応じた丸め処理を選択できます。