あなたの JavaScript コードはダメですか?

Web サイトを機能させる言語である JavaScript は、1995 年に Brendan Aich によってわずか 10 日間で作成されました。多くの人がその奇妙な機能を批判したにもかかわらず、すぐに人気になりました。時間が経つにつれて、JavaScript は現代の Web 開発にとって不可欠な強力で柔軟な言語に成長しました。しかし、多くのプログラマーは依然として遅く、リスクがあり、設計が不十分な JavaScript コードを作成しています。

プログラマーが JavaScript コードを作成するときに犯しやすいよくある間違いをいくつか見てみましょう。また、コードをより安全で理解しやすくするために、これらの間違いを修正する方法も示します。

1. グローバル変数と汚染された名前空間

JavaScript は非常に柔軟性があるため、問題が発生する場合があります。プログラマーは、コード内のどこでも使用できる変数を誤って作成する可能性があり、特に大規模なプロジェクトでは、予期しないエラーが発生する可能性があります。

var user = "Admin"; // Declared in the global scope
function setUser() {
    user = "Guest"; // Accidentally overwrites the global variable
}
setUser();
console.log(user); // "Guest" - Unintended behavior

IIFE (即時呼び出し関数式) を使用すると、コードの特定の部分内に変数が隠蔽され、コードの他の部分に干渉するのを防ぎます。これにより、コードがより安全になり、管理が容易になります。

(() => {
    let user = "Admin"; // Scoped to this block
    function setUser() {
        user = "Guest";
    }
    setUser();
    console.log(user); // "Guest" - Intended behavior
})();

2. 安全でないデータの取り扱い

JavaScript コードが適切に記述されていないと、機密情報が漏洩したり、ユーザー入力を適切に消去できなかったりする可能性があり、クロスサイト スクリプティング (XSS) 攻撃などのセキュリティ上の問題が発生する可能性があります。

const userInput = "<script>alert('Hacked!')</script>";
document.getElementById("output").innerHTML = userInput; // Wrong!

textContent を使用するか、入力を適切にサニタイズすることで、悪意のあるスクリプトが実行されるのを防ぎます。

const userInput = "<script>alert('Hacked!')</script>";
const sanitizedInput = userInput.replace(/</g, "<").replace(/>/g, ">");
document.getElementById("output").textContent = sanitizedInput;

3. eval() への過度の依存

eval() 関数は文字列からコードを実行できるため危険です。これはハッカーが悪意のあるコードを忍び込むために使用する可能性があります。

const userCode = "alert('Hacked!')";
eval(userCode); // Wrong!

eval() の使用を完全に避け、代わりに厳密な制御を備えた Function などのより安全な代替手段を使用してください。

const userCode = "alert('Hacked!')";
// Avoid eval(); implement safer alternatives
try {
    const safeFunction = new Function(userCode); // Limited scope execution
    safeFunction();
} catch (e) {
    console.error("Execution failed:", e);
}

4. 弱いエラー処理

エラーを無視したり誤って処理すると、アプリがクラッシュしたり、個人情報が漏洩したりする可能性があります。

const fetchData = async () => {
    const response = await fetch("https://api.example.com/data");
    return response.json(); // Assuming API always returns valid JSON
};

常に応答を検証し、構造化されたエラー処理を実装します。

const fetchData = async () => {
    try {
        const response = await fetch("https://api.example.com/data");
        if (!response.ok) throw new Error("Network response was not ok");
        return await response.json();
    } catch (error) {
        console.error("Fetch failed:", error.message);
        return null; // Graceful degradation
    }
};

5. ハードコードされたシークレット

ここで、多くの初心者開発者が間違いを犯します。 API キーやパスワードなどの機密情報を JavaScript ファイルに直接保存することは、コードを見れば誰でも簡単にアクセスできるため、悪い考えです。

const API_KEY = "12345-SECRET";
fetch(`https://api.example.com/data?key=${API_KEY}`);

環境変数 (.env または .env.local) または安全なストレージ ソリューションを利用して、コードベースに機密情報が入らないようにします。

var user = "Admin"; // Declared in the global scope
function setUser() {
    user = "Guest"; // Accidentally overwrites the global variable
}
setUser();
console.log(user); // "Guest" - Unintended behavior

優れた JavaScript コードを書くということは、コードを機能させるだけではありません。また、安全、迅速、理解しやすく変更しやすいものであることを確認することも重要です。よくある間違いを修正し、適切な実践に従うことで、乱雑な JavaScript をきれいでプロフェッショナルなコードに変えることができます。

次回 JavaScript を作成するときは、「私のコードはダメですか?」と自問してください。答えが「はい」の場合は、改善する時期です!

以上があなたの JavaScript コードはダメですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。