Introduction: The "Illusion" of AI Coding
You've probably heard phrases like, "It's an era where AI writes code even if you can't program," and many of you may have started using tools like Genspark, ChatGPT, and GitHub Copilot.
Indeed, AI generates surprisingly high-quality code. However, the illusion that "AI-written code is perfect" is the most common trap for beginners.
Even in my own Genspark development experience, the code generated by AI contained numerous bugs. This article explains the realities of AI coding and the foundational knowledge needed to avoid pitfalls.
Limitations of AI-Generated Code: Why It's Not Perfect
Limitation 1: AI Doesn't Fully Understand "Context"
AI does not fully grasp your project's overall structure, existing codebase, or technical constraints. It can only understand within the scope you explain, leading to issues such as:
- Naming conventions differing from existing code
- Designs that don't fit the project's architecture
- Code assuming libraries that are not in use
Limitation 2: AI Doesn't Have the "Latest Information"
Many AI models are trained on data from before 2023. Therefore:
- Unaware of the specifications for the latest library versions
- Uses deprecated APIs
- Does not reflect the latest best practices
Example: Use of Deprecated API
When I asked Genspark to develop a React application, it generated code using componentWillMount, which is already deprecated. It should have used the useEffect hook.
Limitation 3: AI Cannot Fully Consider "Security"
AI generates functionally working code, but it is often insufficient from a security perspective:
- SQL injection vulnerabilities
- Lack of XSS (Cross-Site Scripting) countermeasures
- Improper implementation of authentication and authorization
- Hardcoding sensitive information
Limitation 4: AI Does Not Optimize "Performance"
It can easily embed bugs that critically impact performance, such as the N+1 problem. AI tends to prioritize "working code" and treat "efficient code" as secondary.
The Human Role: AI is a "Partner," Not a "Replacement"
What Humans Should Do 1: Requirements Definition
AI cannot decide "what to build" on its own. Humans must define clear requirements.
Good Instructions vs. Bad Instructions
❌ Bad Instruction:
"Create a login feature"
✅ Good Instruction:
"Create a login feature using JWT authentication. Authenticate with email address and password, return a token upon successful authentication. Hash passwords with bcrypt. Include error handling."
What Humans Should Do 2: Code Review
AI-generated code always requires review. Review points:
- Functionality Check: Test if it actually runs
- Error Handling: Considers edge cases
- Security: No vulnerabilities
- Readability: Understandable by others
- Testability: Structure is easy to test
What Humans Should Do 3: Debugging
AI can embed bugs, and often it doesn't even realize the bugs it embedded itself. Humans need the ability to read error messages, identify the cause, and fix them.
What Humans Should Do 4: Architecture Design
Overall system design, database design, API design, etc., should be human-led. While AI is good at implementing individual features, it struggles with overall architectural thinking.
Basic Bug Patterns Beginners Should Know
Pattern 1: Undefined Variables / Scope Errors
// AI-generated code (with bug)
function calculateTotal(items) {
items.forEach(item => {
let subtotal = item.price * item.quantity;
});
return subtotal; // Error: subtotal is only defined within the loop
}
Pattern 2: Asynchronous Processing Errors
// AI-generated code (with bug)
function fetchData() {
fetch('/api/data').then(response => response.json());
return data; // Error: data is not available yet (asynchronous operation not complete)
}
Pattern 3: Lack of null/undefined Checks
// AI-generated code (with bug)
function getUserName(user) {
return user.profile.name; // Error: Crashes if user or profile is null/undefined
}
Pattern 4: Infinite Loop
// AI-generated code (with bug)
let i = 0;
while (i < 10) {
console.log(i);
// Forgot i++! Infinite loop
}
Pattern 5: Misuse of Libraries
Sometimes, it uses non-existent methods or gets the order of arguments wrong.
Mindset for Programmers in the Age of AI
1. Use with the Premise that "AI Makes Mistakes"
Develop the habit of questioning AI's answers. It's important to always ask, "Will this really work?"
2. "Understand," Don't Just "Copy-Paste"
Instead of simply copy-pasting AI-generated code, make an effort to understand it line by line. You won't be able to deal with bugs later if you don't understand the code.
3. Embrace a "Learn from Mistakes" Attitude
When you find a bug embedded by AI, it is a learning opportunity. By considering "why this bug occurred" and "how it could be prevented," your programming skills will improve.
4. Hone Your "Search Skills"
Develop the habit of verifying whether the information provided by AI is correct by checking reliable resources like Stack Overflow and MDN Web Docs.
5. Don't Underestimate "Fundamentals"
Even with AI, fundamental programming knowledge (variables, loops, conditionals, functions, etc.) is absolutely essential. Without a strong foundation, you won't even be able to evaluate AI's output.
Fundamentals of Code Verification: Run and Confirm
Step 1: First, Run the Code
Always actually run the AI-generated code to verify it. Just looking at it in an editor is not enough.
Step 2: Read Error Messages
If an error occurs, develop the habit of carefully reading the message. Many error messages will tell you the location and cause of the problem.
Step 3: Test Edge Cases
In addition to normal cases, also test the following cases:
- Empty input (empty strings, empty arrays, etc.)
- null or undefined
- Very large values, very small values
- Unexpected data types
Step 4: Use a Debugger
Use browser developer tools or an IDE debugger to trace code execution step-by-step. console.log() is also simple and effective.
Importance of Foundational Learning: What to Learn Before Relying on AI
Minimum Fundamentals to Learn
- Variables and Data Types: Basics of numbers, strings, arrays, and objects
- Control Structures: How to use if statements, loops (for, while)
- Functions: Concepts of function definition, arguments, return values
- Error Handling: How to use try-catch
- Asynchronous Processing: Basics of Promise, async/await
Recommended Learning Resources
- MDN Web Docs - JavaScript Guide (Free, Japanese)
- freeCodeCamp (Free, English)
- Progate (Partially Free, Japanese)
- Udemy (Paid, Japanese courses available)
Practical Learning Methods
Building small projects without AI is the most effective approach. For example:
- ToDo List App
- Simple Calculator
- Weather Information Display App
Afterward, rebuilding the same thing with AI will allow you to truly experience AI's strengths and weaknesses.
Conclusion: The Future of Programming in Collaboration with AI
AI coding makes programming "easier," but it doesn't make it "unnecessary." Rather, the human role has become more sophisticated.
- AI is not perfect: It can embed bugs
- Human role is crucial: Requirements definition, review, debugging, design
- Foundational knowledge is essential: Indispensable for evaluating AI's output
- Skeptical attitude: Don't take AI's answers at face value; verify them
- Learning opportunities: Learn from AI's mistakes to improve skills
Refer to my Genspark development experience and specific steps for code review as references, and establish a development style that effectively collaborates with AI.
Reference Links: