【入門編】 noUnusedLocalsとnoUnusedParametersの静的解析 – TypeScript実践ガイド

こんにちは!TypeScriptの世界へようこそ。
コードを書いていると、「あれ?この変数、さっき作ったけど結局使ってないな…まあ、動いてるからいっか!」なんてこと、ありますよね。

でも、その「まあ、いっか」が積み重なると、コードはまるで「片付けを忘れた部屋」のように散らかり放題になってしまいます。今回は、そんな散らかりを未然に防ぐ、「TypeScriptの最強の整理整頓術」についてお話しします。

—

「使わない荷物」がコードを腐らせる理由

想像してみてください。あなたは今、料理をしようとキッチンに立っています。
レシピには「玉ねぎ」と「人参」しか書いていないのに、カウンターの上には「使わないはずの謎のスパイス」や「もう賞味期限が切れた調味料」が山積みになっていたらどうでしょう?

どれが本当に必要な材料か分かりにくくなり、誤って使わないはずのものを鍋に入れてしまうかもしれませんよね。

プログラムもこれと同じです。「使っていない変数」や「渡しているのに使わない引数」は、コードというキッチンを汚す「ゴミ」そのものなんです。 これが溜まると、後でコードを読み返した時に「これ、なんのためにあるの?」と混乱してしまい、バグの温床になります。

魔法の設定:tsconfig.jsonの「noUnused…」たち

TypeScriptには、そんな「ゴミ」をコンパイラ(コードをチェックしてくれる門番)が見つけた瞬間に、「おい、これ使ってないぞ!」と叱ってくれる便利な機能があります。

`tsconfig.json` という設定ファイルに、以下の2行を書き込むだけです。

{
“compilerOptions”: {
// 未使用の変数をエラーにする設定
“noUnusedLocals”: true,
// 未使用の引数をエラーにする設定
“noUnusedParameters”: true
}
}

たったこれだけ。これを入れるだけで、あなたのプロジェクトの清潔感は劇的に向上します。

具体的にどんなことが起きるの?

例えば、こんなコードを書いたとします。

// 挨拶をする関数を作ったけど…
function greet(name: string, age: number) {
// ‘age’(年齢)は引数で受け取ったのに、中身で一度も使っていない!
const message = “こんにちは、” + name + “さん!”;

// ‘unusedVariable’ は宣言したけど、どこにも使われていない!
const unusedVariable = “私はゴミです”;

return message;
}

このコード、実行してもエラーにはなりませんが、人間から見れば「`age`と`unusedVariable`、結局何だったの?」という状態ですよね。

この設定をONにすると、TypeScriptはエディタ上で赤波線を出してこう教えてくれます。
「使っていない変数があるよ!引数も使われてないよ!」

これにより、あなたはコードをコミット(保存)する前に、「あ、消し忘れてた!」と気づくことができるんです。

初学者がつまずきやすいポイントと「大丈夫ですよ」

ここで一つ、皆さんがよく不安になるポイントをお伝えします。

「途中で一時的に使わない変数を置きたい時、エラーになると不便じゃない?」

分かります。プロトタイプを作っている時など、とりあえず変数を置いておきたい時もありますよね。そんな時は、変数の頭に `_`(アンダースコア)をつけてみてください。

// 名前を「_」で始めると、「意図的に使っていません」というサインになります
function greet(_name: string, age: number) {
return “年齢は” + age + “歳ですね”;
}

こうすることで、「あ、これは使わないものなんだな」とTypeScriptが理解してくれて、エラーを出さなくなります。これなら、柔軟に開発を進められますよね。

まとめ:きれいな部屋には、いいコードが宿る

TypeScriptを始めたばかりの頃は、設定一つひとつが難しく感じるかもしれません。でも、この `noUnusedLocals` と `noUnusedParameters` は、あなたの「コードを書く時の迷い」を減らしてくれる一番の味方です。

最初から完璧を目指さなくて大丈夫。まずはこの設定を入れてみて、「あ、怒られちゃった。じゃあ消そうかな」と一つずつ片付けていく。その積み重ねが、いつの間にか世界レベルのきれいなコードを書く力に繋がっています。

「整理整頓」は、プログラミングの世界でも一番の近道です。ぜひ、今日からあなたの `tsconfig.json` にこの設定を加えてみてくださいね!応援しています!

コメント

タイトルとURLをコピーしました