JavaScriptは、他のプログラミング言語と比較してもかなり自由度が高く、人によって書き方が異なることが多いのも特徴でしょう。

このような背景から、JavaScriptにはさまざまな書き方が存在しています。なかでも、知らないと損するレベルの効率的な書き方から、誰が見ても分かりやすいプログラミング手法もかなり存在します。

このような知識は書籍からではなかなか学習しにくいというのが大きな特徴です。

そこで、この記事では初心者でも今日からJavaScriptのプログラムテクニックを学習するための方法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

一人でも多くの方がJavaScriptの不安を解消できれば幸いです。

基本テクニック

この章では、基本的な構文を使った効率の良い書き方について見ていきましょう。主に、数値を使った計算処理と配列に関する内容を学んでいきます。

数値演算の効率化

JavaScriptで数値を扱う時に、覚えておくと便利な書き方があります。

なかでも特に便利な【指数】と【ビット演算】についてご紹介しておきます！

まず指数ですが、これは数学で勉強した内容と同じで0の数を記述します。例えば、1000という数値があれば0は3つなので【1e3】と表現するわけです。これをJavaScriptでプログラムすると以下のようになります。

const num1 = 100000;
const num2 = 1e5;
  
console.log(num1);
console.log(num2);

実行結果

100000

100000

変数num2が指数を利用した数値になります。実行結果を見ると指数を使っていない変数と同じ数値になっていることが確認できますね。

指数は少数値を表現したり、そのまま計算処理に利用することも可能です。

const num = 1e-3;
  
console.log(num);
console.log(num * 5);

実行結果

0.001

0.005

変数numは【1e-3】と記述しているので、これは小数点以下3桁を意味しているわけです。

次に【ビット演算】を見てみましょう。

これは主に小数点以下を切り捨てるようなケースで便利に利用することができます。例えば、一般的な小数点切り捨てはMath.floor()を利用することが多いでしょう。

const num = 1.2345;

console.log(Math.floor(num));

実行結果

1

ビット演算は【| , >> , ~~】などを利用して簡単に小数点の切り捨てが可能になります。

const num = 1.2345;

console.log(num|0);
console.log(num>>0);
console.log(~~num);

実行結果

1
1
1

【~~】は変数の前に付与することでビットシフトを実行できるのですが、これを2回行うことで数値に変化はありませんが32ビット型に変換されるので自動的に小数点は排除されるという仕様をうまく利用した方法と言えます。

【|, >>】も同様に32ビット型に変換されるのですが、こちらは0を指定することで数値に変化が起きないようにしています。

配列メソッドの活用

JavaScriptで配列を扱う時にforEachはもっともよく使われるメソッドではないでしょうか。

forEachのメソッドを利用すれば、たいていの配列処理は行えるのですが多用は禁物です。ポイントは用途に合わせて最適な配列メソッドを利用するという点にあります。

例えば、次の例は配列の中身をすべてコンソールログへ出力するというものです。

const list = [5,45,255,500];
  
list.forEach(data => {
    console.log(data);
})

実行結果

5
45
255
500

これだけの処理であればforEachを利用しても問題はないでしょう。

次に、配列の要素から条件に合ったものだけを抽出するようなケースではfilterメソッドを利用します。

const list = [5,45,255,500];
  
const result = list.filter(data => {
  if(data>300) return true;
})
  
console.log(result);

実行結果

[500]

この例では、配列に格納されている数値が300以上のものだけを抽出しています。

もちろんforEachでも同じような処理は可能ですが、コードを見たときにはっきりと条件抽出している処理だと分かるのはfilterメソッドを利用しているメリットでもあります。

それでは、次のサンプル例ではどうでしょうか？

const list = [5,45,255,500];
  
const result = list.map(data => {
  return data * 2;
})
  
console.log(result);

実行結果

[10, 90, 510, 1000]

この例では、配列要素をそれぞれ2倍にした新しい配列を生成しています。mapを使うことで何か新しい配列を生成していることが明確になるわけです。

このようにすべてforEachで処理を行うよりも、用途にあったメソッドを使い分ける方があとからソースコードを読むときに理解しやすくなります。

DOM操作

この章では、JavaScriptでDOM操作を行う時に知っておくと良いポイントについて見ていきましょう。主に、ID属性値の取得法とwindowオブジェクトについて学んでいきます。

ID属性値の取得方法について

JavaScriptでHTML要素を取得する時の簡略的な書き方について見ていきましょう。

例えば、次のようなHTML要素があるとします。

サンプルテキスト

普通ならgetElementById()メソッドを使って、HTML要素に付与されているID属性値から取得します。

const h1 = document.getElementById('text');
  
h1.textContent = 'こんにちは';

この例では、ID属性値textを利用してHTML要素を取得し、テキストを任意の文字列に更新しています。

しかし、ID属性値というのは1つのHTMLファイルに1つだけの固有名称であるのと、グローバルな扱いになるため以下のように直接指定することも可能です。

text.textContent = 'こんにちは';

この例では、ID属性値textをそのまま指定してtextContent()メソッドを実行していますが、特にエラーもなく動作します

ただし、ブラウザによっては（古いIEなど）挙動が異なる場合もあるので、本番運用などには向いていない点は注意してください。

Windowオブジェクトの活用

JavaScriptでは、ブラウザの標準で提供されているwindowオブジェクトに直接アクセスできるという利点があります。

このwindowオブジェクトにはさまざまなプロパティやメソッドが提供されており、一般的によく使われるものを以下に掲載しておきます。

【プロパティ】

プロパティ	内容
console	デバッグなどに便利なConsoleオブジェクトへのアクセス
history	ブラウザ履歴情報へのアクセス
innerHeight	ブラウザウィンドウの高さを取得
innerWidth	ブラウザウィンドウの幅を取得
location	表示されているWebページのURL情報を取得
localStorage	ブラウザのローカルストレージへのアクセス
navigator	ブラウザ環境の情報にアクセス

【メソッド】

メソッド名	内容
alert()	警告ダイアログを表示
back()	ブラウザの履歴を1つ前に戻る
close()	現在のブラウザウィンドウを閉じる
getSelection()	選択された要素のオブジェクトを返す
open()	新しいブラウザウィンドウを開く
requestAnimationFrame()	ブラウザの環境に応じたアニメーション描画を実行
scroll()	任意の要素にスクロールする
scrollBy()	任意の距離だけスクロールする

例えば、現在のブラウザウィンドウの幅と高さを取得したい場合は次のように記述します。

const w = window.innerWidth;
const h = window.innerHeight;

また、任意のテキスト部分をマウスでドラッグした箇所を取得するには次のように記述します。

btn.addEventListener('click', () => {

    console.log(window.getSelection().toString());

});

getSelection()メソッドを利用することで、ユーザーが選択範囲した文字列を取得することができるわけです。

このような便利なプロパティやメソッドが標準で提供されているので、windowオブジェクトをぜひ活用することをオススメします。

変数・関数の活用

この章では、変数や関数を利用してコードを分かりやすくする手法について見ていきましょう。主に、複数メソッドや計算式などを分かりやすくすることを学んでいきます。

複数のメソッドを変数に置き換える

IF文などで条件式を記述するときに、つい複数のメソッドを利用して判断させようというケースが少なくありません。

例えば、次のようなケースを見てください。

const arr1 = [2,5,3,7];
const arr2 = [2,6,4,3];
  
if(arr1.indexOf(3) !== -1 && arr2.indexOf(3) !== -1) {
  console.log(true);
} else {
  console.log(false);
}

この例では、複数の配列要素の中に目的の値が存在するかどうかを判断しています。

indexOf()を利用してtrue / falseを判定しているわけですが、判定する配列がさらに増えると条件式はさらに長くなってしまって理解しづらくなります。

このような場合は、事前に変数へ条件を格納してしまうのがベストでしょう。

次のサンプル例を見てください。

const exists = arr1.indexOf(3) !== -1 && arr2.indexOf(3) !== -1;

if(exists) {
  console.log(true);
} else {
  console.log(false);
}

この例では、変数existsに配列要素の存在チェックを格納しています。そして、この変数をIF文の条件式に利用することでソースコードが全体的に理解しやすくなるわけです。

もちろんこの時に作成する変数名は分かりやすい名称が好ましいでしょう。
（exists = 存在チェック）

計算式を関数に置き換える

次に計算式をプログラムの中に挿入する時のポイントについて学んでいきましょう。

例えば、次のような計算式を変数xに格納する場合を見てください。

const arr = [223,51,332,70];

const x = ( arr[0] * 10 ) / 100;

この計算式をパッと見て、何をしているのかを分かる人は少ないはずです。

このような場合は、少しコードが増えますが関数に収めることで理解しやすいコードに変化します。

const arr = [223,51,332,70];
  
const x = elementWidth(arr[0]);
  

function elementWidth(value) {
  return ( value * 5) / 100;
}

先ほどの計算式を関数elementWidth()にそのまま収めていますね。これにより、関数名を読むだけで何らかのHTML要素の幅を求めているのかな？…というのが理解できるでしょう。

内容は同じなのですが、ちょっとした工夫を施すだけでソースコードは誰が見ても分かりやすいものになるというわけです。

まとめ

今回は、JavaScriptプログラムを効率よく分かりやすいものにするための基本的なテクニックを学習しました。

最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！