การใช้งาน Set และ Get Function และ OOP Concept ในภาษา Next.js แบบง่ายๆ

เมื่อพูดถึงการเขียนโปรแกรมในปี 2023 คงไม่มีใครที่จะไม่รู้จัก Next.js ซึ่งเป็น framework ที่นิยมใช้งานในการพัฒนาเว็บแอปพลิเคชันที่ง่ายและมีประสิทธิภาพ ในบทความนี้เราจะมาสำรวจเกี่ยวกับการใช้งาน **set** และ **get function** พร้อมกับ **OOP concept** ใน Next.js แบบง่าย ๆ พร้อมตัวอย่าง CODE ที่เข้าใจง่าย

OOP และการใช้งาน Set/Get Function

OOP หรือ **Object-Oriented Programming** เป็นแนวคิดในการเขียนโปรแกรมที่มองว่าสิ่งของหรือข้อมูลต่าง ๆ สามารถเป็น "วัตถุ" (Object) ที่มีคุณสมบัติ (Attributes) และฟังก์ชัน (Methods) ของตัวเองได้ ซึ่งการนำ OOP มาประยุกต์ใช้ใน Next.js นั้น เราสามารถใช้ **set** และ **get function** เพื่อจัดการกับข้อมูลภายในวัตถุได้

เรามีความสามารถในการสร้างคลาสและสร้างชุด getter และ setter เพื่อจัดการกับข้อมูลเป็นประโยชน์อย่างมาก โดยชุด getter จะช่วยในการเข้าถึงค่าของ attribute ส่วนชุด setter จะช่วยในการเปลี่ยนแปลงค่าของ attribute

การสร้างคลาสใน Next.js

มาดูตัวอย่างการใช้งานฟังก์ชัน set และ get ในคลาสกัน:

 // user.js
class User {
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }

    // Getter สำหรับ name
    get name() {
        return this._name;
    }

    // Setter สำหรับ name
    set name(newName) {
        this._name = newName;
    }

    // Getter สำหรับ age
    get age() {
        return this._age;
    }

    // Setter สำหรับ age
    set age(newAge) {
        if (newAge > 0) {
            this._age = newAge;
        } else {
            console.error("Age must be a positive number");
        }
    }
}

// การทดสอบการใช้งาน
const user = new User("John Doe", 30);
console.log(user.name); // John Doe
console.log(user.age); // 30

user.name = "Jane Doe";
user.age = 25;
console.log(user.name); // Jane Doe
console.log(user.age); // 25

user.age = -5; // Error: Age must be a positive number

ในตัวอย่างนี้ เราได้สร้างคลาส `User` ที่มี attribute ชื่อว่า `_name` และ `_age` พร้อมทั้ง getter และ setter ของแต่ละ attribute เมื่อเราสร้าง instance ของ `User` ขึ้นมา เราสามารถเข้าถึงและเปลี่ยนแปลงค่าของ `_name` และ `_age` ได้

การใช้ NEX.js และ OOP

เมื่อเวลาผ่านไป Next.js ได้กลายเป็นเครื่องมือที่มีความนิยมในการสร้างเว็บแอพพลิเคชันที่มีฟังก์ชันต่าง ๆ ที่หลากหลาย การใช้ OOP จะช่วยให้การจัดการกับโค้ดมีความสะดวกขึ้น และสามารถทำการรีไซเคิลโค้ดได้

การใช้ OOP ร่วมกับ API ของ Next.js

ในการพัฒนาเว็บแอพพลิเคชัน คุณอาจต้องการใช้คลาสเพื่อดึงข้อมูลจาก API และแสดงให้ผู้ใช้ดู ตัวอย่างต่อไปนี้จะแสดงการใช้ `getServerSideProps` ของ Next.js เพื่อดึงข้อมูลจาก API ประกอบกับการใช้งานคลาส `User` ที่เราสร้างขึ้นข้างต้น

 // pages/user.js
import React from 'react';
import { User } from '../path/to/user';

export default function UserPage({ userData }) {
    const user = new User(userData.name, userData.age);

    return (
        <div>
            <h1>User Information</h1>
            <p>Name: {user.name}</p>
            <p>Age: {user.age}</p>
        </div>
    );
}

export async function getServerSideProps() {
    // สมมติว่ามี API ที่ส่งข้อมูลผู้ใช้
    const res = await fetch('https://api.example.com/user');
    const userData = await res.json();

    return { props: { userData } };
}

ในตัวอย่างนี้ เราได้สร้างเพจที่ชื่อว่า `UserPage` ซึ่งจะรับข้อมูลจาก API และแสดงข้อมูลผู้ใช้โดยใช้คลาส `User` ที่เราได้สร้างไว้ โดยการเรียกใช้ `getServerSideProps` เพื่อดึงข้อมูลก่อนที่เขาจะส่งข้อมูลไปยังเพจ

ตัวอย่าง Use Case ในโลกจริง

ลองนึกภาพว่าในระบบการจัดการฐานข้อมูลนักเรียนในโรงเรียน เราอาจต้องการเก็บข้อมูลนักเรียนเช่น ชื่อ อายุ บทบาทในชั้นเรียน หรือฟังก์ชันการทำงานต่าง ๆ ซึ่งคลาส `User` ที่เราสร้างขึ้นสามารถเป็นพื้นฐานในการพัฒนาแอปพลิเคชันจัดการฐานข้อมูลนี้ได้

ง่ายเมื่อใช้ OOP

การใช้ OOP ช่วยให้โค้ดดูสะอาดสะอ้านและจัดการง่าย เพราะคุณสมบัติเหล่านี้สามารถจัดกลุ่มเข้าด้วยกันได้ เพื่อให้การจัดการข้อมูลและความสัมพันธ์ระหว่างข้อมูลมีความกระชับ

นอกจากนี้ ในวงการธุรกิจ หรือตลาดอีคอมเมิร์ซจะต้องมีการจัดการกับข้อมูลผู้ใช้ รหัสสินค้า สินค้า และคำสั่งซื้อ ด้วยคุณสมบัติของ OOP และการสร้างคลาสที่มีฟังก์ชัน set/get ทำให้การจัดการข้อมูลเหล่านี้เป็นเรื่องง่ายดาย

สรุป

การใช้ OOP ร่วมกับฟังก์ชัน set/get ใน Next.js จะช่วยให้การจัดการโค้ดเป็นเรื่องที่ยืดหยุ่นและเข้าใจง่าย สร้างประโยชน์ในการสร้างเว็บแอพพลิเคชันอย่างมีประสิทธิภาพ และช่วยให้คุณสร้างโค้ดที่สามารถนำกลับมาใช้งานได้ในอนาคต

หากคุณสนใจเรียนรู้เพิ่มเติมเกี่ยวกับการเขียนโปรแกรม OOP (Object-Oriented Programming) และฟีเจอร์ใหม่ ๆ ใน Next.js เราขอแนะนำให้คุณเข้าศึกษาโปรแกรมที่ EPT (Expert-Programming-Tutor) ที่นี่เรามีหลักสูตรหลากหลายที่สามารถตอบโจทย์ทุกความต้องการของคุณในการเรียนรู้โปรแกรมมิ่งอย่างมีประสิทธิภาพ !

มาร่วมสร้างผลงานเยี่ยมๆ และพัฒนาเว็บแอปพลิเคชันที่ตรงใจคุณกันเถอะ ที่ EPT เราพร้อมสนับสนุนคุณไปพร้อม ๆ กับการเรียนรู้!

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง