JavaScript: พื้นฐานภาษา React Native และการพัฒนาแอปมือถือ

JavaScript คืออะไร?

JavaScript (JS) เป็นภาษาการเขียนโปรแกรมระดับสูงที่มีการกำหนดชนิดแบบไดนามิก การสืบทอดแบบต้นแบบ และฟังก์ชันเป็นวัตถุระดับหนึ่ง สร้างขึ้นโดย Brendan Eich ในปี 1995 ภายใน 10 วัน เป็นหนึ่งในสามภาษาหลักของเทคโนโลยีเว็บ (HTML, CSS, JS) และเป็นรากฐานของแพลตฟอร์มเซิร์ฟเวอร์ Node.js (2009) ที่ทำให้ JS ก้าวออกนอกเบราว์เซอร์

ในการพัฒนาแอปมือถือ JavaScript ถูกใช้ในสามกระบวนทัศน์: การคอมไพล์แบบดั้งเดิม (React Native กับ Hermes/JSC), คอนเทนเนอร์ WebView (Ionic, Cordova) และ JS ฝั่งเซิร์ฟเวอร์ (Node.js + Express สำหรับแบ็กเอนด์แอปมือถือ) React Native เป็นเทคโนโลยีที่โดดเด่น: ตามข้อมูลของ Statista (2025) 38% ของโปรเจกต์ข้ามแพลตฟอร์มใช้ React Native รองจาก Flutter (46%)

คุณลักษณะสำคัญของ JavaScript คือโมเดลการทำงานแบบเธรดเดียวกับ I/O ที่ไม่บล็อก อีเวนต์ลูปช่วยให้ประมวลผลการดำเนินการแบบไม่พร้อมกันนับพันรายการในเธรดเดียวโดยไม่ต้องสร้างเธรดของระบบปฏิบัติการ ทำให้ JS มีประสิทธิภาพสำหรับแอปพลิเคชันที่ใช้ I/O มาก (คำขอเครือข่าย การดำเนินการฐานข้อมูล) แต่ต้องระมัดระวังกับการคำนวณที่ใช้ CPU มาก

มาตรฐาน JavaScript: ES5, ES6, ES2025

มาตรฐาน ECMAScript (ES) กำหนดข้อกำหนดของ JavaScript ES6 (2015) นำเสนอ let/const, ฟังก์ชันลูกศร, คลาส, โมดูล, Promise ES2020 — Optional Chaining (?.), Nullish Coalescing (??) ES2023 — Array findLast, Hashbang Grammar เอนจินสมัยใหม่อย่าง Hermes (React Native) และ V8 (Node.js) รองรับ ES2022+ React Native Hermes รองรับ ES2020+ โดยมีข้อจำกัดบางประการกับ Proxy และ Symbol

ไวยากรณ์ JavaScript: ชนิด ฟังก์ชัน และต้นแบบ

ไวยากรณ์ JavaScript คล้ายภาษา C กำหนดชนิดแบบไดนามิก ชนิดของตัวแปรถูกกำหนดโดยค่าและสามารถเปลี่ยนแปลงได้ในระหว่างรันไทม์ let และ const (ES6) แทนที่ var สำหรับขอบเขตแบบบล็อก ชนิดดั้งเดิม: string, number, boolean, null, undefined, symbol, bigint อย่างอื่นทั้งหมดเป็นวัตถุ (object, array, function, date, regexp)

ฟังก์ชันเป็นวัตถุระดับหนึ่ง

JavaScript เป็นภาษาที่มีฟังก์ชันลำดับสูง ฟังก์ชันสามารถกำหนดให้กับตัวแปร ส่งผ่านเป็นอาร์กิวเมนต์ และส่งคืนจากฟังก์ชันอื่น ฟังก์ชันลูกศร (=>) ไม่มี this ของตัวเอง — สืบทอด this จากบริบทภายนอก การปิด (closure) คือฟังก์ชันที่จดจำตัวแปรจากขอบเขตที่มันถูกสร้างขึ้น

// ชนิดข้อมูลและฟังก์ชันใน JavaScript
// ชนิดดั้งเดิม
const name = 'React Native';
let version = 0.71;
var isActive = true; // var ที่ล้าสมัย

// วัตถุและอาร์เรย์
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

const items = ['Dart', 'Kotlin', 'Swift'];

// ฟังก์ชันลำดับสูง
function filterByVersion(apps, minVersion) {
  return apps.filter(app => app.version >= minVersion);
}

// การปิด (closure)
function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

// ตัวดำเนินการ spread สำหรับคัดลอกวัตถุ
const newApp = { ...app, version: 16 };

ตัวดำเนินการ spread ... สร้างสำเนาแบบตื้นของวัตถุ การทำลายโครงสร้าง (const { platform, version } = app) ดึงฟิลด์ออกมาเป็นตัวแปร ฟังก์ชันลูกศรใน filterByVersion สั้นกว่านิพจน์ function และไม่สร้าง this ของตัวเอง — สำคัญในคอมโพเนนต์ React Native ที่ this อ้างถึงคลาสของคอมโพเนนต์

การสืบทอดแบบต้นแบบ

JavaScript ใช้การสืบทอดแบบต้นแบบ ไม่ใช่แบบคลาสเหมือน Java หรือ C# คลาส (ES6) เป็นน้ำตาลเชิงไวยากรณ์บนต้นแบบ วัตถุทุกตัวมีการอ้างอิงภายใน [[Prototype]] ไปยังวัตถุอื่น เมื่อเข้าถึงคุณสมบัติที่ไม่มีในวัตถุ JS จะค้นหาในห่วงโซ่ต้นแบบ ไวยากรณ์คลาส (extends, super) ทำให้โค้ดอ่านง่ายขึ้น แต่ภายใต้ฝาครอบยังคงเป็นต้นแบบ

// คลาสใน JavaScript — น้ำตาลเชิงไวยากรณ์
class PlatformService {
  // ฟิลด์ส่วนตัว (ES2022)
  #apiKey;

  constructor(name, apiKey) {
    this.name = name;
    this.#apiKey = apiKey;
  }

  // วิธีการแบบสแตติก
  static getPlatforms() {
    return ['iOS', 'Android'];
  }

  // เกตเตอร์
  get info() {
    return `${this.name} SDK`;
  }

  // วิธีการแบบไม่พร้อมกัน
  async initialize() {
    return await this.#validateKey();
  }

  #validateKey() {
    return this.#apiKey.length > 10;
  }
}

// การสืบทอด
class AndroidService extends PlatformService {
  constructor(apiKey) {
    super('Android', apiKey);
  }
}

ฟิลด์ส่วนตัว #apiKey (ES2022) ให้การห่อหุ้มอย่างแท้จริง ซึ่งไม่สามารถทำได้ด้วยแบบแผน _ วิธีการแบบสแตติก getPlatforms เป็นของคลาส ไม่ใช่ของอินสแตนซ์ เกตเตอร์ info ถูกคำนวณเมื่อเข้าถึง async/await ทำให้โค้ดแบบไม่พร้อมกันเป็นเชิงเส้น React Native Hermes รองรับฟิลด์ส่วนตัวตั้งแต่เวอร์ชัน 0.71

ความไม่พร้อมกันใน JavaScript: Event Loop และ Promise

ความไม่พร้อมกันใน JavaScript ขึ้นอยู่กับอีเวนต์ลูป — ลูปไม่สิ้นสุดที่ตรวจสอบสแต็กเรียกและคิวงาน สแต็กเรียกจัดการโค้ดแบบซิงโครนัส microtask queue จัดการ Promise.then/catch/finally macrotask queue จัดการ setTimeout, setInterval, I/O อีเวนต์ลูปนำงานจาก microtask ก่อน จากนั้นจาก macrotask การบล็อกสแต็กเรียก (ลูปไม่สิ้นสุด) หยุด UI ทั้งหมด

Promise เป็นวัตถุที่แทนค่าในอนาคต โพรมีสสามารถเป็น pending (รอดำเนินการ), fulfilled (สำเร็จ), rejected (ถูกปฏิเสธ) สายโซ่ .then().catch().finally() จัดการผลลัพธ์แบบไม่พร้อมกัน async/await (ES8) เป็นน้ำตาลเชิงไวยากรณ์: ฟังก์ชัน async ส่งคืน Promise, await หยุดการทำงานชั่วคราวจนกว่าโพรมีสจะถูกแก้ไขโดยไม่บล็อกเธรด

// การโหลดข้อมูลแบบไม่พร้อมกันใน React Native
import React, { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;

    async function fetchUser() {
      try {
        const response = await fetch(
          `https://api.example.com/users/${userId}`
        );

        if (!response.ok) {
          throw new Error('Network error');
        }

        const data = await response.json();

        if (!cancelled) {
          setUser(data);
          setLoading(false);
        }
      } catch (error) {
        if (!cancelled) {
          console.error('การเรียกข้อมูลล้มเหลว:', error);
          setLoading(false);
        }
      }
    }

    fetchUser();

    return () => { cancelled = true; };
  }, [userId]);

  if (loading) return <ActivityIndicator />;

  return (
    <View>
      <Text>{user?.name ?? 'Unknown'}</Text>
    </View>
  );
}

ฮุก useEffect กับฟังก์ชัน async fetchUser ดำเนินการขอ HTTP เมื่อคอมโพเนนต์ถูกเมาท์ แฟล็ก cancelled ป้องกัน setState หลังจากการยกเลิกการเมาท์ — ปัญหาทั่วไปใน React Native Optional Chaining user?.name และ Nullish Coalescing ?? จัดการ undefined โดยไม่มีข้อผิดพลาด ActivityIndicator แสดงระหว่างการโหลด — รูปแบบไม่พร้อมกันที่นักพัฒนา JS ทุกคนคุ้นเคย

React Native: JavaScript บนแพลตฟอร์มมือถือ

React Native เป็นเฟรมเวิร์กจาก Meta (Facebook) สำหรับสร้างแอปพลิเคชันมือถือดั้งเดิมด้วย JavaScript แตกต่างจากวิธีการแบบ WebView React Native เรนเดอร์คอมโพเนนต์ดั้งเดิมจริง (UIView สำหรับ iOS, ViewGroup สำหรับ Android) โค้ด JS ทำงานในเธรดแยกต่างหาก (Hermes หรือ JSC) และสื่อสารกับเธรด UI ดั้งเดิมผ่าน Bridge (สถาปัตยกรรมเก่า) หรือ JSI (สถาปัตยกรรม Fabric ใหม่)

สถาปัตยกรรม React Native

React Native ประกอบด้วยเธรด JS (โค้ดของคุณ), เธรดดั้งเดิม (UI) และ Bridge/JSI สำหรับการโต้ตอบของพวกมัน ในสถาปัตยกรรมเก่า (Bridge) ข้อความ JSON ถูกทำให้เป็นอนุกรมและส่งแบบไม่พร้อมกัน — ทำให้เกิดความล่าช้าระหว่างแอนิเมชันเร็ว สถาปัตยกรรม Fabric ใหม่ (React Native 0.68+) ใช้ JSI (JavaScript Interface) — การโต้ตอบ JS โดยตรงกับวัตถุ C++ โดยไม่ต้องทำให้เป็นอนุกรม

// คอมโพเนนต์ React Native ที่มี API ดั้งเดิม
import React, { useState, useEffect } from 'react';
import {
  View, Text, TouchableOpacity, Platform,
  PermissionsAndroid, Alert
} from 'react-native';
import Geolocation from '@react-native-community/geolocation';

function LocationTracker() {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    requestLocationPermission();
  }, []);

  async function requestLocationPermission() {
    if (Platform.OS === 'android') {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
      );
      if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
        Alert.alert('Permission denied');
        return;
      }
    }
    getCurrentPosition();
  }

  function getCurrentPosition() {
    Geolocation.getCurrentPosition(
      pos => setLocation({
        lat: pos.coords.latitude,
        lng: pos.coords.longitude
      }),
      error => Alert.alert('Error', error.message),
      { enableHighAccuracy: true, timeout: 15000 }
    );
  }

  return (
    <View>
      <Text>Lat: {location?.lat ?? 'N/A'}</Text>
      <Text>Lng: {location?.lng ?? 'N/A'}</Text>
      <TouchableOpacity onPress={getCurrentPosition}>
        <Text>Update Location</Text>
      </TouchableOpacity>
    </View>
  );
}

คอมโพเนนต์ LocationTracker สาธิตการทำงานกับ API ตำแหน่งดั้งเดิม Platform.OS แยกความแตกต่างระหว่าง Android และ iOS PermissionsAndroid.request เป็นไดอะล็อกการอนุญาต Android ดั้งเดิม Geolocation.getCurrentPosition — โมดูลจาก @react-native-community/geolocation ติดตั้งผ่าน npm React Native ให้อินเทอร์เฟซ JS สำหรับกล้อง บลูทูธ มาตรความเร่ง และเซนเซอร์อื่น ๆ

Ionic และ Cordova: คอนเทนเนอร์ WebView

Ionic เป็นเฟรมเวิร์กสำหรับแอปพลิเคชันมือถือแบบไฮบริดที่ใช้ WebView สำหรับเรนเดอร์ HTML/CSS/JS แตกต่างจาก React Native Ionic ไม่สร้างคอมโพเนนต์ดั้งเดิม — แอปพลิเคชันทำงานภายในคอนเทนเนอร์เว็บ (WebView) บน iOS (WKWebView) และ Android (Android WebView) ซึ่งให้การนำโค้ดเว็บกลับมาใช้ใหม่ 100% แต่จำกัดประสิทธิภาพของแอนิเมชันที่ซับซ้อน

Apache Cordova เป็นรากฐานของ Ionic ให้การเข้าถึง API ดั้งเดิมผ่านปลั๊กอิน JavaScript กล้อง GPS รายชื่อ ระบบไฟล์ — ทุกอย่างพร้อมใช้งานผ่าน cordova-plugin-* Ionic 7+ ใช้ Capacitor — ผู้สืบทอดของ Cordova ที่มีประสิทธิภาพดีกว่า รองรับ ESM และการเข้าถึง iOS/Android SDK โดยตรงผ่าน Swift และ Kotlin

เครื่องมือนักพัฒนา JavaScript

เครื่องมือนักพัฒนา JS สำหรับแอปพลิเคชันมือถือรวมถึง Node.js, npm/yarn, Expo, React Native CLI และ Metro bundler Node.js เป็นรันไทม์ JS นอกเบราว์เซอร์ เป็นรากฐานของระบบนิเวศ npm (Node Package Manager) เป็นตัวจัดการแพ็กเกจที่มีไลบรารีกว่า 2 ล้านรายการ npx เป็นยูทิลิตีสำหรับรันแพ็กเกจ npm โดยไม่ต้องติดตั้ง

ระบบนิเวศเครื่องมือ

Expo เป็นชั้นเหนือ React Native ที่ทำให้การพัฒนาง่ายขึ้น: ไม่ต้องใช้ Xcode/Android Studio ในการเริ่มต้น ให้ Managed Workflow พร้อมไลบรารีที่ติดตั้งไว้ล่วงหน้า Expo Application Services (EAS) — สร้างและเผยแพร่ในคลาวด์ Metro เป็นบัณเดิลของ React Native ที่รวบรวมโค้ด JS และการพึ่งพาเป็นไฟล์เดียว Hermes เป็นเอนจิน JS จาก Meta ที่ปรับให้เหมาะสมสำหรับอุปกรณ์มือถือด้วยการคอมไพล์ AOT

// package.json — การกำหนดค่าโปรเจกต์ React Native
{
  "name": "MyMobileApp",
  "version": "1.0.0",
  "scripts": {
    "start": "npx react-native start",
    "android": "npx react-native run-android",
    "ios": "npx react-native run-ios",
    "test": "jest",
    "lint": "eslint . --ext .ts,.tsx"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-native": "^0.73.0",
    "@react-navigation/native": "^6.1.0",
    "@react-native-community/geolocation": "^3.2.0"
  },
  "devDependencies": {
    "jest": "^29.7.0",
    "eslint": "^8.56.0",
    "metro-react-native-babel-preset": "^0.77.0"
  }
}

ไฟล์ package.json เป็นรากฐานของโปรเจกต์ JS ใด ๆ สคริปต์ start, android, ios เริ่มต้นบัณเดิล Metro และการสร้าง การพึ่งพาแบ่งออกเป็น dependencies (รันไทม์) และ devDependencies (การทดสอบ, linter) React Navigation เป็นเราเตอร์มาตรฐาน Jest เป็นเฟรมเวิร์กสำหรับการทดสอบ ESLint เป็นตัววิเคราะห์แบบสแตติกที่ตรวจสอบสไตล์โค้ดและข้อผิดพลาดที่อาจเกิดขึ้น