GAS中級講座 第1回受講メモ：var・スコープ・関数の理解が深まった話

GAS中級講座 第1回「スコープと関数」を受講して

〜varをきっかけに、変数の“居場所”を理解する〜

ノンプロ研の中級プログラミング講座【GASコース】第1回を、今回はホストとして参加しながら受講しました。

第1回のテーマは「スコープと関数」。

正直に言うと、初級のときはコードが動けばそれで精一杯でした。
でも中級に入ると、「なぜその変数が使えるのか」「なぜ別の場所では使えないのか」「なぜ同じ名前なのに結果が違うのか」といった、コードの裏側にあるルールを理解することが大事になってきます。

今回の講義で特に印象に残ったのは、varを通じてスコープの理解が深まったことです。

スコープとは、変数を使える範囲のこと

まず、スコープとは何か。

一言でいうと、変数や関数を使える範囲のことです。

GASやJavaScriptでは、変数をどこで宣言するかによって、その変数を使える範囲が変わります。

今回の講義では、主に次の3つのスコープを学びました。

• グローバルスコープ

• ローカルスコープ

• ブロックスコープ

初心者のうちは、「変数は一度作ったらどこからでも使える」と思いがちです。
でも実際には、変数にはそれぞれ“居場所”があります。

この“居場所”を意識できるようになると、コードの見え方がかなり変わります。

グローバル領域に書いたコードは、思った以上に影響が大きい

講義の前半では、グローバル領域とローカル領域の違いを確認しました。

グローバル領域とは、どの関数にも入っていない場所です。

たとえば、次のようなコードです。

var msg = 'Hello!';

function myFunction() {
  console.log(`ローカルで${msg}`);
}

console.log(`グローバルで${msg}`);

この場合、msg は関数の外で宣言されているので、グローバル変数です。
そのため、関数の中からも参照できます。

ここで大事だったのは、GASでは、関数を実行するときにグローバル領域のコードも実行されるという点です。

つまり、ある関数だけを実行しているつもりでも、プロジェクト内の他のファイルにあるグローバル領域のコードまで動くことがあります。

これは初心者にとって、かなり見落としやすいポイントだと思いました。

「自分はこの関数だけ実行したつもりなのに、なぜか別のログも出る」
「関係ないと思っていたコードが影響している」

こういう現象の原因が、グローバル領域にあることがあるわけです。

varはブロックスコープを持たない

今回、自分の中で理解が深まったのが var です。

今は const や let を使うのが基本ですが、古いコードやサンプルでは var を見ることがあります。
なんとなく「古い書き方」くらいには思っていましたが、今回の講義で違いがかなり整理されました。

ポイントは、varはブロックスコープを持たないということです。

たとえば、次のようなコードがあります。

function myFunction() {
  {
    var msgVar = 'Hello var!';
  }

  console.log(msgVar);
}

msgVar は {} の中で宣言されています。
でも var で宣言しているため、ブロックの外でも使えます。

一方で、const や let の場合は違います。

function myFunction() {
  {
    const msg = 'Hello!';
  }

  console.log(msg);
}

この場合、msg はブロックの中だけで使える変数です。
ブロックの外で console.log(msg) とするとエラーになります。

ここでようやく、var と let / const の違いが腹落ちしました。

var は関数の中では使える。
でも {} の中だけに閉じ込めることはできない。

つまり、var はローカルスコープは持つけれど、ブロックスコープは持たないということです。

varを使わない理由が少し分かった

これまで「今はvarではなく、constやletを使いましょう」と言われることはありました。

ただ、初心者のうちは理由があまり分かっていませんでした。

今回の講義を受けて、理由が少し見えてきました。

var は使える範囲が広くなりやすいです。
そのため、意図しない場所から変数を参照できてしまったり、同じ名前の変数とぶつかったりする可能性があります。

一方で、const や let はブロックスコープを持っています。

必要な範囲だけで変数を使えるようにできるため、コードの影響範囲を小さくできます。

これは、実務でコードを書くときにかなり大事だと感じました。

コードが短いうちは、多少スコープが広くても問題に気づきにくいです。
でも、ファイルが増えたり、関数が増えたり、他の人と一緒に開発したりすると、変数の影響範囲が広いことはバグの原因になります。

だからこそ、基本は次の考え方でよさそうです。

const：再代入しない値に使う
let：あとで値を変える必要がある場合に使う
var：基本的には自分では使わない

特に初心者のうちは、まず const を使う。
必要なときだけ let を使う。
var は古いコードを読むときに理解できればよい。

このくらいの整理で十分だと思いました。

グローバル変数は便利だけど、むやみに使わない

講義では、グローバル変数についても扱いました。

たとえば、関数の外で次のように書くと、msg はグローバル変数になります。

let msg = 'Hello!';

function myFunction() {
  msg += '!!';
  console.log(msg);
}

このコードでは、関数の中でグローバル変数 msg を書き換えています。

それでも実務では少し怖いです。なぜなら、グローバル変数はプロジェクト内のどこからでも変更できるため、どの処理が値を書き換えたのか追いかけにくくなるからです。

なぜなら、前回実行した結果が残っているように見えたり、どこで値が変わったのか追いにくくなったりするからです。

グローバル変数は、プロジェクト全体から使えるため便利です。
でも便利な反面、影響範囲が広いです。

今回の講義を通じて、グローバル領域にはむやみにコードを書かないほうがよい、という理由がよく分かりました。

関数化すると、コードの意味が読みやすくなる

後半では、関数について学びました。

関数とは、一連の処理をまとめたものです。

たとえば、税込金額を計算する処理をそのまま書くと、次のようになります。

const taxRate = 0.1;
const price = 100;
console.log(Math.floor(price * (1 + taxRate)));

これでも動きます。
でも、処理が増えてくると、何をしているコードなのか読み取りにくくなります。

そこで関数にします。

const getTaxIncluded = price => {
  const taxRate = 0.1;
  return Math.floor(price * (1 + taxRate));
};

console.log(getTaxIncluded(100));

こうすると、getTaxIncluded という関数名を見るだけで、「税込金額を取得しているんだな」と分かります。

今回の講義で印象に残ったのは、関数名がドキュメント代わりになるという考え方です。

よい関数名をつけると、コメントがなくても処理の意図が伝わりやすくなります。

引数と戻り値は、関数とのやりとり

関数では、引数と戻り値も大事です。

引数は、関数に渡す値。
戻り値は、関数から返ってくる値です。

function hello(name) {
  return 'Hello! ' + name;
}

const message = hello('Taro');
console.log(message);

この場合、'Taro' が引数です。
そして、'Hello! Taro' が戻り値です。

関数を「処理の箱」と考えると分かりやすいです。

箱に材料を入れる。
中で処理される。
結果が返ってくる。

このイメージを持つと、関数の理解がしやすくなりました。

引数の数が合わなくても、エラーにならないことがある

今回、地味に大事だと思ったのが、引数の数の話です。

JavaScriptでは、関数に渡す引数の数と、受け取る仮引数の数が合わなくても、必ずしもエラーにはなりません。

const coFunction = (x, y) => {
  console.log(`x: ${x}, y: ${y}`);
};

coFunction(1, 2, 3);
coFunction(1);

引数が多い場合、余った引数は使われません。
引数が少ない場合、足りない仮引数には undefined が入ります。

エラーにならないからこそ、気づきにくい。
ここは実務でも注意が必要だと感じました。

その対策として、デフォルト引数も学びました。

const coFunction = (x = 'hoge', y = 'fuga') => {
  console.log(`x: ${x}, y: ${y}`);
};

引数が省略されたときの初期値を決めておくことで、undefined による想定外の動きを減らせます。

値渡しと参照のコピーは、実務でかなり重要

今回の講義の中で、特に重要だと思ったのが、引数とメモリの関係です。

数値や文字列などのプリミティブ型を関数に渡す場合、値がコピーされます。

function myFunction() {
  const coFunction = y1 => {
    y1 += 1;
  };

  const x1 = 10;
  coFunction(x1);
  console.log(x1);
}

この場合、関数の中で y1 を変更しても、元の x1 は変わりません。

一方で、配列やオブジェクトを渡す場合は注意が必要です。

function myFunction() {
  const coFunction = y2 => {
    y2[0] += 1;
  };

  const x2 = [10];
  coFunction(x2);
  console.log(x2);
}

この場合、x2 の中身が変わります。

理由は、配列やオブジェクトの場合、値そのもののコピーではなく、同じデータを参照する情報が渡されるからです。

講義では、数値と配列を比較する例がありました。

function myFunction() {
  const coFunction = (y1, y2) => {
    y1 += 1;
    y2[0] += 1;  
  };
  
  const x1 = 10, x2 = [10];
  coFunction(x1, x2);
  console.log(`x1: ${x1}, x2: ${x2}`);
}

結果として、x1 は変わらない。
でも、x2 は変わる。

ここは、初心者がつまずきやすいところだと思います。

自分なりにたとえるなら、数値を渡すのは「メモのコピーを渡す」ようなものです。
相手がコピーを書き換えても、自分の元のメモは変わりません。

一方で、配列を渡すのは「共有スプレッドシートのURLを渡す」ようなものです。
相手が中身を編集すると、自分が見ても中身が変わっています。

GASでは、スプレッドシートから取得した二次元配列を扱うことが多いです。
そのため、配列を関数に渡して加工するときは、元データを書き換えてよいのかを意識する必要があります。

これは実務でかなり大事な視点だと思いました。

今回の学びを一言でまとめると

今回の講義を通じて、コードを書くときに大事なのは、ただ動かすことだけではないと感じました。

特に大事なのは、次の3つです。

1. 変数をどこで宣言するか

2. その変数はどこから使えるのか

3. 関数に値を渡したとき、元の値に影響するのか

この3つを意識できるようになると、コードの安全性や読みやすさがかなり変わると思います。

初級では「動いた！」が大事でした。
中級ではそこから一歩進んで、「なぜ動くのか」「どこまで影響するのか」を理解していく段階なのだと思います。

これから意識したいこと

今回の学びを踏まえて、今後GASを書くときは次のことを意識したいです。

まず、変数はできるだけ狭い範囲で使う。
グローバル領域には、むやみにコードを書かない。
var は基本的に使わず、まずは const、必要なときだけ let を使う。

そして、関数に配列やオブジェクトを渡すときは、元データを変更してよいのかを考える。

このあたりを意識するだけでも、後から見返したときに分かりやすいコードになりそうです。

ホストとして参加しながらの受講でしたが、自分自身にとってもかなり学びの多い回でした。

特に var をきっかけに、スコープの考え方が整理できたのは大きかったです。

次回以降のクラスやライブラリの話にもつながっていきそうなので、今回の「スコープと関数」はしっかり復習しておきたいと思います。