Javascript

โลกของ Javascript ที่ไม่ใช่แค่ทำ web อย่างเดียว

Javascript Zero to Hero พื้นฐาน เครื่องหมายดำเนินการต่าง ๆ JS EP2

พาเข้าสู่เนื้อหาพื้นฐานที่ควรทราบ เพื่อที่จะเขียน javascript ได้อย่างไหล่ลื่น หลังจาก “Javascript Zero to Hero บทนำ EP1” แนะนำเครื่องมือและคำสั่ง javascript ไปบ้างแล้ว บทความนี้จะมาต่อเนื้อหาพื้นฐานของการเขียน javascript ส่วนที่เหลือสำหรับเริ่มต้นกันต่อครับ

Operators

เครื่องหมายดำเนินการกำหนดค่า และทางคณิตศาสตร์ (Assignment operators & Arithmetic Operators)

การกำหนดค่าให้กับตัวแปรด้วย operator equal (=)

let firstName = 'Asabeneh'
let country = 'Finland'

นอกจากเครื่องหมาย (=) ยังมีเครื่องหมายอื่น ๆ ที่ควรทราบ มาทำความรู้จักเพิ่มเติมกัน

เครื่องหมายตัวอย่างเทียบได้กับอธิบาย
=x = yx = yเก็บค่า y ใส่ตัวแปร x
+=x += yx = x + yนำ x บวก y เก็บใส่ตัวแปร x
-=x -= yx = x – yนำ x ลบ y เก็บใส่ตัวแปร x
*=x *= yx = x * yนำ x คูณ y เก็บใส่ตัวแปร x
/=x /= yx = x / yนำ x หาร y เก็บใส่ตัวแปร x
%=x %= yx = x % yนำ x มอด y เก็บใส่ตัวแปร x
**=x **= yx = x ** yนำ x ยกกำลัง y เก็บใส่ตัวแปร x
บวก (+), ลบ (-), คูณ (*), หาร (/), มอด หารใช้ค่าของเศษ (%), ยกกำลัง (**)

เครื่องหมายดำเนินการเปรียบเทียบค่า (Comparison Operators)

เครื่องหมายชื่อเครื่องหมายตัวอย่างอธิบาย
==ค่าเท่ากันx == yค่า x เท่ากับ y หรือไม่
!=ค่าไม่เท่ากันx != yค่า x ไม่เท่ากับ y หรือไม่
===ค่าเท่ากัน และชนิดเดียวกันx === yค่า x เท่ากับ y และ ชนิด x เหมือน ชนิด y หรือไม่
>ค่ามากกว่าx > yค่า x มากกว่า y หรือไม่
<ค่าน้อยกว่าx < yค่า x น้อยกว่า y หรือไม่
>=ค่ามากกว่าหรือเท่ากันx >= yค่า x มากกว่าหรือเท่ากับ y หรือไม่
<=ค่าน้อยกว่าหรือเท่ากันx <= yค่า x น้อยกว่าหรือเท่ากับ y หรือไม่

ตัวอย่างการนำไปใช้งาน

console.log(3 > 2)              // true, because 3 is greater than 2
console.log(3 >= 2)             // true, because 3 is greater than 2
console.log(3 < 2)              // false,  because 3 is greater than 2
console.log(2 < 3)              // true, because 2 is less than 3
console.log(2 <= 3)             // true, because 2 is less than 3
console.log(3 == 2)             // false, because 3 is not equal to 2
console.log(3 != 2)             // true, because 3 is not equal to 2
console.log(3 == '3')           // true, compare only value
console.log(3 === '3')          // false, compare both value and data type
console.log(3 !== '3')          // true, compare both value and data type
console.log(3 != 3)             // false, compare only value
console.log(3 !== 3)            // false, compare both value and data type
console.log(0 == false)         // true, equivalent
console.log(0 === false)        // false, not exactly the same
console.log(0 == '')            // true, equivalent
console.log(0 == ' ')           // true, equivalent
console.log(0 === '')           // false, not exactly the same
console.log(1 == true)          // true, equivalent
console.log(1 === true)         // false, not exactly the same
console.log(undefined == null)  // true
console.log(undefined === null) // false
console.log(NaN == NaN)         // false, not equal
console.log(NaN === NaN)        // false
console.log(typeof NaN)         // number

เครื่องหมายตรรกะ (Logical Operators)

ย้อนกลับไปในช่วงที่เรียนคณิตศาสตร์ สมัยประถม หรือมัธยมจะมีตารางตรรกะศาสตร์เบื้องต้น

ในภาษา javascript จะใช้สัญลักษณ์

  • && เพื่อแทนเงื่อนไข และ
  • || เพื่อแทนเงื่อนไข หรือ
  • ! เพื่อแทนนิเสธน์
เครื่องหมาย และ (&&)เครื่องหมาย หรือ (||)เครื่องหมาย นิเสธน์ (!)
4 > 3 && 10 > 5
true && true -> true
4 > 3 || 10 > 5
true || true -> true
!4 > 3
true -> false
4 > 3 && 10 < 5
true && false -> false
4 > 3 || 10 < 5
true || false -> true
!4 < 3
false -> true
4 < 3 && 10 > 5
false && true -> false
4 < 3 || 10 > 5
false || true -> true
!(!4 > 3)
true -> false -> true
4 < 3 && 10 < 5
false && false -> false
4 < 3 || 10 < 5
false || false -> false
!(!4 < 3)
false -> true -> false

เครื่องหมายเพิ่มค่า และลดค่า (Increment Operator & Decrement Operator)

การเพิ่มค่า

เพิ่มค่าล่วงหน้า

let count = 0
console.log(++count)        // 1
console.log(count)          // 1

เพิ่มค่าหลังจาก

let count = 0
console.log(count++)        // 0
console.log(count)          // 1

การลบค่า

ลบค่าล่วงหน้า

let count = 0
console.log(--count)        // 1
console.log(count)          // 1

ลบค่าหลังจาก

let count = 0
console.log(count--)        // 0
console.log(count)          // 1

เครื่องหมายดำเนินการ 3 อย่าง (Ternary Operators)

การเขียนเงื่อนไขแบบสั้นจะประกอบไปด้วย 3 อย่าง คือ 1. เงื่อนไข 2. ทำบางอย่างหากเงื่อนไขเป็นจริง 3.ทำบางอย่างหากเงื่อนไขไม่จริง อื่น ๆ

let isRaining = true
isRaining
  ? console.log('You need a rain coat.')
  : console.log('No need for a rain coat.')
isRaining = false

isRaining
  ? console.log('You need a rain coat.')
  : console.log('No need for a rain coat.')

Date Object

javascript จะมี object Date ให้ใช้งาน เหมือนภาษาอื่น ๆ สามารถระบุ รูปแบบวันที่ และดูค่าวันที่ วัน, เดือน, ปี, เวลา ได้

ชื่อ ฟังก์ชันอธิบายตัวอย่าง
getFullYear()คืนค่า ปี รูปแบบ YYYY2021
getMonth()คืนค่า เดือน รูปแบบ ลำดับเดือน ( 0 -11)0
getDate()คืนค่า วันที่ รูปแบบ ลำดับวัน ( 1 -31)1
getHours()คืนค่า เวลาหน่วย ชั่วโมง รูปแบบ ลำดับชั่วโมง ( 0 – 23)15
getMinutes()คืนค่า เวลาหน่วย นาที รูปแบบ ลำดับนาที ( 0 – 59)30
getSoconds()คืนค่า เวลาหน่วย วินาที รูปแบบ ลำดับวินาที ( 0 – 59)45
getMiliSeconds()คืนค่า เวลาหน่วย ลิลลิวินาที รูปแบบ ลำดับวินาที ( 0 – 999)489
getTime()คืนค่า เวลาหน่วย timestamp รูปแบบ ( 1 มกรา 1970 )1578092201341
getDay()คืนค่า สัปดาห์ รูปแบบ ลำดับสัปดาห์ ( 0 – 6) ( อาทิตย์ – เสาร์) 4

ตัวอย่างการเรียกใช้งาน Date

const now = new Date()
console.log(now) // Sat Jan 04 2020 00:56:41 GMT+0200 (Eastern European Standard Time)

// ดึงปี
const now = new Date() 
console.log(now.getFullYear()) // 2020

// ดึงเดือน
const now = new Date() 
console.log(now.getMonth()) // 0, because the month is January,  month(0-11)

// ดึงวันที่
const now = new Date() 
console.log(now.getDate()) // 4, because the day of the month is 4th,  day(1-31)

รูปแบบ Date อื่น ๆ

const now = new Date()
const year = now.getFullYear() // return year
const month = now.getMonth() + 1 // return month(0 - 11)
const date = now.getDate() // return date (1 - 31)
const hours = now.getHours() // return number (0 - 23)
const minutes = now.getMinutes() // return number (0 -59)

console.log(`${date}/${month}/${year} ${hours}:${minutes}`) // 4/1/2020 0:56

Javascript Zero to Hero บทนำ EP1

javascript มีอายุของภาษาก็ 25 ปีแล้ว ถือว่าเป็นภาษาที่ได้รับความนิยมมายาวนาน ด้วยความสามารถที่เขียนไครเอนซ์ไซน์ (client side) และเซอร์เวอร์ไซต์ (server side) ทำให้ตัวภาษารับความนิยม จึงทำให้บริษัทเจ้าใหญ่ๆ ตั้งทีมงานเพื่อมาพัฒนา framework เพื่อเป็นกรอบการทำงานของการพัฒนาแอพพลิเคชั่น (application) ที่เป็นมาตรฐานที่เป็น standard แบบเดียวกัน เช่น React (facebook) , Angular (google) ,Vue (Evan U) เป็นต้น สิ่งที่มีเหมือนกันของแต่ละ framework คือ fundamental ของตัวภาษา javascript เอง ชุดบทความนี้จะพาทำความรู้จักภาษา javascript ตั้งแต่เริ่ม zero จนกระทั่งถึง hero คือสามารถนำไปใช้งานและพัฒนาแอพพลิเคชั่นได้อย่างดีแน่นอน

ทำความรู้จักเครื่องมือ สิ่งที่ช่วยให้การเริ่มเขียน Javascript น่าสนุกมากยิ่งขึ้น

เครื่องมือที่เป็นเหมือนสิ่งที่แปล หรือแปลงโค๊ดของภาษา javascript มากกว่าให้สามารถทำงานได้มีหลัก ๆ อยู้ด้วยกัน 2 การคอมไพล์ (compile) ผ่านเครื่องมือเหล่านี้

  1. NodeJS Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.
  2. Browser ต่าง ๆ ที่จะทำหน้าที่มี javascript runtime engine มาให้อยู่แล้ว เช่น Firefox , Safari ,Chrome แนะนำใช้งาน Google Chrome เพราะจะอัพเกรด version Javascript Engine ก่อน browser อื่น ๆ

console.log คืออะไร

เริ่มต้นก่อนที่จะพาไปรู้จักส่วนอื่น ๆ ในขั้นถัดๆ ไป ที่เรียกว่าขาดไม่ได้เลยคือการที่จะ debug หรือการที่จะแสดงผลลัพธ์ของตัวแปรที่เก็บอยู่ในโค๊ด การเรียกใช้งานคำสั่ง console.log(‘message or variable’)

console.log('Hello', 'World', '!')
console.log('HAPPY', 'NEW', 'YEAR', 2020)
console.log('Welcome', 'to', 'Zero', 'to', 'Hero')

การคอมเม้นท์ (comment)

การคอมเม้นท์ (comment code) คือการแทรกข้อความ หรืออื่น ๆ ที่ต้องการใส่ลงไปในไฟล์ของ โค๊ด javascript ที่ไม่ต้องการที่จะให้ javascript compile โค๊ดในส่งนี้เข้าไปในการทำงานของโปรแกรม จะไม่มีผลต่อการทำงานของโปรแกรม เพียงแต่จะมี text ข้อความแทรกอยู่ในไฟล์เท่านั้นเอง

ตัวอย่างการคอมเม้นท์ 1 บรรทัด
// This is the first comment
// This is the second comment
// I am a single line comment

ตัวอย่างการคอมเม้นท์ หลายบรรทัด
/_ This is a multiline comment
Multiline comments can take multiple lines
JavaScript is the language of the web
_/

การใช้เครื่องหมายดำเนินการทางคณิตศาสตร์

console.log(2 + 3) // Addition
console.log(3 - 2) // Subtraction
console.log(2 * 3) // Multiplication
console.log(3 / 2) // Division
console.log(3 % 2) // Modulus - finding remainder
console.log(3 ** 2) // Exponentiation 3 ** 2 == 3 * 3

แนวทางการเขียน Javascript Code ต่าง ๆ บนหน้าเว็บ

แนวทางการเขียนโค๊ด javascript กับหน้าเว็บไซต์ในรูปแบบต่าง ๆ หลัก ๆ มีด้วยกัน 4 แนวทางคือ

  • inline script การแทรก javascript ใน tag html เป็นการเขียนที่ง่ายที่สุด ตัวอย่าง
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Zero to Hero:Inline Script</title>
  </head>
  <body>
    <button onclick="alert('Welcome to Javascript Zero to Hero!')">Click Me</button>
  </body>
</html>
  • internal script การเขียนแทรก javascript code ในไฟล์ html โดยคำสั่งต่าง ๆ จะถูกเขียนอยู่ใน tag <script> </script>
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Zero to Hero:Internal Script</title>
    <script>
      console.log('Welcome to Javascript Zero to Hero')
    </script>
  </head>
  <body></body>
</html>
  • external script การเขียนโค๊ด javascript แยกเป็นอีก 1 ไฟล์ (นามสกุล .js) จากนั้นเรียกใช้งานเข้ามาในไฟล์ html ด้วยคำสั่ง <script src=”?”/>
    index.js
console.log('Welcome to Javascript Zero to Hero')

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Zero to Hero:External script</title>
    <script src="index.js"></script>
  </head>
  <body></body>
</html>

Javascript Data Type ต่าง ๆ

ในภาษา javascript จะเรียกเป็นรูปแบบ Dynamic Type ความหมายคือเป็นการกำหนด type ที่สามารถเปลี่ยนได้ตลอดเวลา โดยมีการกำนด type อยู่ด้วยกันหลัก ๆ ตามนี้ String, Number, Boolean, undefined, Null, and Symbol.

String

'Poolsawat'
'Apin'
'Javascript Zero to Hero'

Number

Integers: Integer (negative, zero and positive) numbers Example: ... -3, -2, -1, 0, 1, 2, 3 ...
Float-point numbers: Decimal number Example ... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...

Boolean

True/true , False/false

Undefined

let name;
console.log(name) // undefined

Null

let emptyValue = null

การตรวจสอบประเภท หรือชนิดของตัวแปร

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

console.log(typeof 'Poolsawat') // string
console.log(typeof 5) // number
console.log(typeof true) // boolean
console.log(typeof null) // object type
console.log(typeof undefined) // undefined

การประกาศตัวแปร และการกำหนดขอบเขตของการเข้าถึง

ภาษา javascript จะมีการกำหนดประเภทตัวแปร โดยมีอยู่ด้วยกัน 3 รูปแบบ คือ

Var การกำหนดประเภทตัวแปรที่เป็นระดับ global ที่จาก function หรือ condition ไหน ๆ ก็สามารถเข้าถึงได้สามารถ assign value ได้

var name = 'Poolsawat' , lname = 'Apin'
var age = 99
var isMale = true

Const การกำหนดประเภทตัวแปรที่จะคล้ายกับ Var แต่จะไม่สามารถ assign value ใหม่ให้ได้ แต่จะมี scope ที่แคบกว่า var

const name = 'Poolsawat' , lname = 'Apin'
const age = 99
const isMale = true

Let การกำหนดประเภทข้อมูลในระดับที่แคบมาก ๆ สามารถ assign value ใหม่ได้ สามารถกำหนดชื่อซ้ำกันได้ แต่อยู่คนละ statement code ได้

let name = 'Poolsawat' , lname = 'Apin'
let age = 99
let isMale = true
if (age == 99 ){
    isMale = false
}

สรุปท้ายบทความ

จากบทความนี้จะเป็นการปูพื้นฐานก่อนเริ่มการเขียน javascript ในบทถัด ๆ ไปสิ่งเหล่านี้จำเป็นต้องจดจำและฝึกฝนเขียนให้จำได้ เพราะในบทความต่อ ๆ ไปจะเจอคำสั่งหรือเรื่องจากบทความนี้เยอะมาก สำหรับการทดสอบเรียกคำสั่งแบบง่ายที่สุด เพียงแต่เปิด browser chrome กด F12 เลือกไปที่ tab console จากนั้นพิมพ์ console.log(‘message ‘); กด enter ผลลัพธ์ก็จะแสดงทันที บทความถัดไปจะมาอธิบายเกี่ยวกับเรื่องอะไรคอยติดตามกันด้วยนะครับ

SPA สร้าง Web Site Universal ด้วย Nuxt.js (EP.2) “Nuxt Directory Structure”

หลังจากที่ได้ทำการ create nuxt project เป็นที่เรียบร้อยแล้ว (ถ้ายังไม่รู้ว่า setup Nuxt อย่างไรเข้าไปติดตามได้ที่บทความนี้ ” SPA สร้าง Web Site Universal ด้วย Nuxt.js (EP.1) “Setup Nuxt Project” “ ) สังเกตุว่าภายใต้ project จะเจอ folders และ files ต่าง ๆ  แต่ละส่วนแบ่งการทำงานและมีหน้าที่ต่างกัน

  • assets
    • คือ folder เก็บไฟล์ resources อย่างเช่น image ,javascript ,stylesheet หรือเป็นไฟล์อื่น ๆ ที่ต้องการทำเป็น static resource
    • การเรียกใช้งาน <img src=“~/assets/image.png”>
    • <template>
        <img src="~/assets/image.png">
      </template>
  • components
    • คือ folder เก็บ File components (.vue)
  • layouts
    • ใช้เก็บไฟล์ layout ของ project ภายในจะมีไฟล์ default.vue เป็น template layout  สามารถกำหนด error page กรณีที่มี error status ที่ไม่ใช้ 200 และยังสามารถสร้าง custom layout ในแบบที่เราต้องการได้อีกด้วย
    • <template>
        <div>
          <nuxt/>
        </div>
      </template>
  • middleware
    • เก็บไฟล์ที่เป็น intercepter ของ project ตัวอย่างไฟล์ authentication กรณีทำระบบ login (auth.js) ก็จะสร้างเก็บไว้ที่ folder นี้
    • export default function (context) {
        context.userAgent = context.isServer ? context.req.headers['user-agent'] : navigator.userAgent
      }
  • pages
    • เก็บไฟล์ views (route mapping) ของ project
    •  
    • <template>
        <div class="container">
          <h1 v-if="error.statusCode === 404">Page not found</h1>
          <h1 v-else>An error occurred</h1>
          <nuxt-link to="/">Home page</nuxt-link>
        </div>
      </template>
      
      <script>
      export default {
        props: ['error'],
        layout: 'blog' // you can set a custom layout for the error page
      }
      </script>
  •  plugins
    • เก็บไฟล์ config plugin เพื่อเรียกใช้ plugin ร่วมกับ project เรา เช่น axios เป็นต้น
  • static
    • เก็บไฟล์ static content ที่สามารถเรียกเข้าถึงได้ผ่าน route url ของ project ได้
    • <!-- Static image from static directory -->
      <img src="/my-image.png"/>
      
      <!-- webpacked image from assets directory -->
      <img src="~/assets/my-image-2.png"/>
  • store
    • เก็บไฟล์ data store Vuex Store store เก็บ data ทำ passing data ภายใน project โดยจะมี main file index.js และเรียก import  modules ต่าง ๆ ได้
    • import Vuex from 'vuex'
      
      const createStore = () => {
        return new Vuex.Store({
          state: () => ({
            counter: 0
          }),
          mutations: {
            increment (state) {
              state.counter++
            }
          }
        })
      }
      
      export default createStore
  • nuxt.config.js
    • file config หลักของ Project ใช้ config เรื่อง build ,css ,js ,plugin ,dev ,env ,generate ,head ฯลฯ เป็นต้น
    • const pkg = require('./package')
      
      module.exports = {
        mode: 'universal',
      
        /*
        ** Headers of the page
        */
        head: {
          title: pkg.name,
          meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: pkg.description }
          ],
          link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
        },
      
        /*
        ** Customize the progress-bar color
        */
        loading: { color: '#fff' },
      
        /*
        ** Global CSS
        */
        css: [],
      
        /*
        ** Plugins to load before mounting the App
        */
        plugins: [],
      
        /*
        ** Nuxt.js modules
        */
        modules: [
          // Doc: https://github.com/nuxt-community/axios-module#usage
          '@nuxtjs/axios',
          // Doc:https://github.com/nuxt-community/modules/tree/master/packages/bulma
          '@nuxtjs/bulma'
        ],
        /*
        ** Axios module configuration
        */
        axios: {
          // See https://github.com/nuxt-community/axios-module#options
        },
      
        /*
        ** Build configuration
        */
        build: {
          postcss: {
            preset: {
              features: {
                customProperties: false
              }
            }
          }
          /*
          ** You can extend webpack config here
          */
          // extend(config, ctx) {
          //   // Run ESLint on save
          //   if (ctx.isDev && ctx.isClient) {
          //     config.module.rules.push({
          //       enforce: 'pre',
          //       test: /\.(js|vue)$/,
          //       loader: 'eslint-loader',
          //       exclude: /(node_modules)/
          //     })
          //   }
          // }
        }
      }
      
  • package.json
    • lib dependencies ของ Nuxt Project
    • {
        "name": "poolsawat",
        "version": "1.0.0",
        "description": "My shining Nuxt.js project",
        "author": "pool13433",
        "private": true,
        "scripts": {
          "dev": "nuxt",
          "build": "nuxt build",
          "start": "nuxt start",
          "generate": "nuxt generate",
          "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
          "precommit": "npm run lint"
        },
        "dependencies": {
          "cross-env": "^5.2.0",
          "nuxt": "^2.0.0",
          "@nuxtjs/bulma": "^1.2.0",
          "@nuxtjs/axios": "^5.0.0"
        },
        "devDependencies": {
          "nodemon": "^1.11.0",
          "babel-eslint": "^8.2.1",
          "eslint": "^5.0.1",
          "eslint-loader": "^2.0.0",
          "eslint-plugin-vue": "^4.0.0",
          "eslint-config-prettier": "^3.1.0",
          "eslint-plugin-prettier": "2.6.2",
          "prettier": "1.14.3"
        }
      }

บทความนี้เป็นเพียงรายละเอียดคร่าว ๆ ของแต่ละส่วนของ Project Nuxt ศึกษาเพิ่มเติมได้จากลิ้งนี้ Nuxt Doc

SPA สร้าง Web Site Universal ด้วย Nuxt.js (EP.1) “Setup Nuxt Project”

พวกเรามาถึงยุคที่ต้องมีเว็บไซต์ที่เข้าใช้งานแล้วรู้สึกว่ารวดเร็วทันใจเพราะเมื่อมีอะไรมาขัดจังหวะคนใช้งานจะรู้สึกไม่อยากรอ หรือ อาจจะเลิกสนใจ website ของคุณไปเลย แล้วถ้าอยากจะสร้าง website ลักษณะที่ตอบโจทย์ที่กล่าวมาละ เครื่องมืออะไรจะตอบโจทย์นี้ได้
SPA หรือ single page application คือการที่มี application ที่มีการทำงานในหน้าเดียวกล่าวคือจะไม่มีการ refresh หน้า ถ้าในสมัยเก่าก่อนวิธีการที่นิยมที่สุดก็คงเป็นการใช้ AJAX ในการ รับ-ส่งค่าข้อมูลระหว่างกันโดยเมื่อมีข้อมูลหน้าเว็บเปลี่ยนก็สั่งให้ DOM เปลี่ยนแปลงโดยใช้งานร่วมกับ jQuery พระเอกตลอดการของเรานั้นเอง ฟังดูยากสำหรับเมื่อก่อน
SPA ก็มี framework ในการพัฒนา 3 ค่ายดัง ๆ อย่าง React(Facebook) ,Angular(Google), Vue(ทีมพัฒนาอิสระ) ซึ่ง 3 framework ก็ล้วนเป็น open source แล้วทั้งสิน ถ้าเมื่อจะเลือกเครื่องมืออะไรสักอย่างก็ต้องเข้าไปใช้งาน หรือต้องได้ลองเล่น และเมื่อเกิดปัญหา หรือรู้สึกว่าติดขัดก็จะเลิกและเปลี่ยนไปใช้งานตัวถัดไป และเมื่อถ้าได้ลองจะครบทั้ง 3 framework แล้วตัวเราเองก็จะเลือกได้เองว่าจะเลือก framework ตัวใด
Vue คือ framework ระดับแรก ๆ ที่นักพัฒนามือใหม่เลือกใช้งาน ด้วยเหตุผลเรื่องความง่ายในการติดตั้งไม่จำเป็นต้องติดตั้ง build tool ก็สามารถเริ่มต้นใช้งานได้
Nuxt.js เป็น framework ที่พัฒนาต่อยอดจาก VueJS เพื่อช่วยแก้ปัญหาสำหรับ website ที่ต้องการทำเรื่อง SEO(Search Engine Optimization) เพื่อในพบการค้นหาใน google ได้ง่ายยิ่งขึ้น
เริ่มต้นใช้งาน
เริ่มแรกติดตั้ง Nuxt.js

  1. ติดตั้ง npx (ไม่ขอกล่าวถึงสำหรับขั้นตอนการติดตั้งส่วนนี้) หรือจะใช้ yarn ก็ได้ตามความถนัด
  2. npx: create nuxt project
    npx create-nuxt-app <project-name>
  3. yarn: create nuxt project
    yarn create nuxt-app <project-name>
  4. ใส่ชื่อ project? Project name (poolsawat)
  5. ใส่คำอธิบาย? Project description (My shining Nuxt.js project)
  6. เลือก integrate ร่วมกับ framework อื่น เลือก None (Nuxt default server)
    > none
    express
    koa
    adonis
    hapi
    feathers
    micro
  7. เลือก ui framework
    > none
    bootstrap
    vuetify
    bulma
    tailwind
    element-ui
    buefy
  8. Single Page App เลือก mode website SEO เลือก Universal
    > Universal
    SPA
  9. website ที่มีการต่อเรียก api ก็ให้ติดตั้ง axios ด้วย
    no
    > yes
  10. เพิ่มการตรวจสอบ source code ด้วย ESLint
    no
    > yes
  11. เพิ่มให้มีการจัด format code หลัง save
    no
    > yes
  12. รอ…
  13. ทำตาม stepcd poolsawat
    npm run dev

ติดตั้งเรียบร้อยลอง start application ดู

d:\Blogger\nuxt\poolsawat>npm run dev

> [email protected] dev d:\Blogger\nuxt\poolsawat
> nuxt

INFO Building project

√ success Builder initialized
√ success Nuxt files generated

READY Listening on http://localhost:3000

เสร็จสิ้นเป็นที่เรียบร้อย ตอนหน้าจะพาไปแนะนำโครงสร้างภายใน Nuxt.js กันว่าแต่ละส่วนใช้ทำงานอะไรบ้าง และถ้าจะสร้าง page ใหม่จะต้องทำอย่างไร