單元測試

基本上就是針對最小單元的程式碼去做測試，上週的文章有提到像是計時器之類的，以我目前的工作場景有用到像是：

1. 將時間戳轉成網站共用的時間格式
2. 將存入 AWS S3 的 key 轉為固定的「年/月/日/隨機檔案名稱」格式

（補充一下：因為我有寫 Node.js 後端～所以雖然書籍是前端，但還是會運用在後端上！）

等等之類的，就是那一種非常小的 function 或是 method～就會用單元測試，確保這種很小的單一功能程式不會出錯，如此一來有許多地方共同套用時，就不會一步錯通通錯 XD

基本上也會是測試數量最多，但範圍最小的一種測試。

不過單元測試還是會有它測不到的地方，因為針對的東西太小的，其實無法真的去測到使用者真正實際的流程之間是否會有錯誤，例如有一個情境可能是要把格式化好的時間顯示在某個 Input 上，或許時間格式本身對、顯示的 Input 本身也是沒問題，但是在「顯示到 Input」上可能出錯，這個單元測試就測不到了，畢竟這範圍就不小，就會需要使用到整合測試或是端對端測試來補足這件事。

整合測試

整合測試偏向是針對多個元件協作後的驗證，例如上面提到的格式化好的時間顯示在某個 Input 上，或是點擊了什麼按鈕就會出現一段「Hello World!」之類的東西，就很適合運用整合測試～可以去測試到說這個元件的實際流程長什麼樣子。

當然缺點就是無法像是單元測試那樣，去測到這麼鉅細靡遺的東西～但它們是相輔相成的，單元測試無法測到整體的流程，就可以靠整合測試來補足，因此更貼近使用者的實際操作狀況。

端對端測試

完了到這裡開始在偷看小抄筆記了（誒）趕快看完用自己的話講 XDD

基本上這個測試會模擬整套使用者流程，例如以電商網站來說，使用者可能面臨打開瀏覽器、進入網站之後，可能會點擊特定的功能（可能是登入？）或著是說一般會從商品頁面進入的話，那會是點擊加入購物車？等等之類的一系列行為。

例如最簡單的我進入該頁面該怎麼去知道說這是什麼商品？最簡單的就是看到標題～但會不會不小心標題不見 XD？這就是測試可以去做到的～去點擊商品頁面之後能夠順利取標題的話，這個部分的測試就算過～也可以模擬整個登入到購買的流程來去確保說每個步驟都是正確的，收到錢錢沒問題 XD

至於其缺點的話跟整合測試一樣～比較測不到根本的問題，會需要靠單元測試補足，但是整體測試是最符合使用者操作流程的！

視覺測試

這是上週有提到的視覺測試～

可以透過安裝第三方套件之後，先對一開始的網頁畫面來去做快照，後續如果有任何的更動，會以視覺 diff 呈現差異，快速發現不如預期的畫面變動，以及各裝置、大小是否也符合預期，會去抓一個誤差範圍內是否符合，就可以一次測到許多不一樣的情境！

來個重點整理（其實是我之前看完書後摘錄下來的重點摘錄 XDD）

單元測試 - 精準小功能

• 針對 function、method 等最小範圍功能的測試。
• 例如一個簡單的數字計算，這個過程中可能的參數、所計算出的結果，是否符合或悖離事實。
• 數量最多的測試種類，但是範圍是最小的，因為專注於在該功能，並且更能找到根本原因。
• 但是與元件的整合就比較無法測到，因為是專注於本身。這點就需要靠整合測試補足。
• 適合對象：產品核心功能，驗證 function、method、class instance 輸入與輸出合邏輯。

整合測試（功能測試）- 元件之間的互動

• 針對「合併的程式碼」進行測試。
• 針對整合元件、套件與函式庫、從 API 拿到資料的呈現等。
• 更貼近使用者實際操作狀況。
• 較難發現根本原因，但能透過單元測試補足。

端對端測試（E2E 測試）- 模擬流程

• 模擬使用者實際操作的流程，例如開啟瀏覽器、進入網站、點擊特定功能後等一系列行為。
  • Ex. 打開網址的網站後，是否能夠拿到標題。
• 能完整測試產品功能，最貼近使用者操作狀況，但是較難發現根本原因，要從單元測試找起。

視覺測試 - 比對畫面

• 自動檢測使用者介面變更，對使用者的畫面進行快照後比對。
• 可以達到精準的視覺比對，並針對多種裝置與跨瀏覽器進行測試，
• 需要使用到第三方服務，並且動態改變畫面無法有效檢測出來。

總結

上述提到了這麼多種測試，都可以用在應付各個不同的場景上～但不論是用哪一種測試類型，重點還是要從最重要的地方、商業邏輯開始撰寫，譬如電商網站從購物流程下去優先測試，畢竟能夠收到錢才是根本（？）

另外，測試數量也並非是愈多愈好，還是要針對目前的專案情境來去評估撰寫，還是更重要的！

這週我也才剛開始有更實際運用在工作上，還在感受與摸索中，希望之後更加熟悉後再帶來更多自己實際上的體會～

參考資料

• 前端測試指南：策略與實踐 - 唐心皓（Summer） 著
• 有請 Chat GPT 幫我勘誤、增加重點整理的標題描述
• 縮圖是 Chat GPT 產生出來的

但請不要忘記我們現在這個時代的黑科技登場：AI！

開始學習測試的契機

學習一項技能，要有契機、原因或是藍圖，那我的契機是什麼呢？

第一階段：公司導入了 AI

最近公司導入了 Cursor 這個 AI，讓我感到對於開發有更多的想像性，開始想著有什麼東西可以提升效率？啊！我想就是 debug 這件事情！目前我們公司在 debug 都還是滿仰賴人力、肉眼除錯的，如果有機會直接讓 AI 幫我們去處理這塊，看起來好像滿讚的！

第二階段：從想像到開始

但說真的身為一個測試小白，第一步總是困難的？要找資源、課程、書籍等等，而且也不知道該怎麼起手。

結果就剛好看到平常所待的 Discord 群組，開始招募了測試的線上讀書會，我就想說哇這也太剛好了吧，大概考慮了一下就加入了 XDD

覺得大家想學習一項新技能，也可以去像是技能交換網或 Facebook 社團等之類的平台～尋找是否有人在找讀書會或是自己辦一個，我覺得有大家一起讀、環境一起成長，會比較不容易半途而廢！

我希望達成什麼藍圖？前端測試種類？

其實我一開始的想像是，單純希望讓一些功能不會壞掉，就這樣 XD 畢竟我對測試的認知還沒到很深，所以不太了解測試能做什麼？

直到我開始讀了測試讀書會指定的書籍「前端測試指南：策略與實踐 - 唐心皓（Summer） 著」其中的前端測試種類，好像慢慢有了一點想像。

這裡簡略提到一點，這會是一篇技術筆記系列文，之後會再詳細提到他們分別是什麼：

• 單元測試：對「對小單位的測試」，比方說有一段程式單純做「數字相差」，沒錯！就是驗證這麼小的東西。
• 整合測試：對於功能進行的全面測試，比方說要測試一個元件能夠「按了一個按鈕，出現一段文字」。
• 端對端測試：模擬使用者操作流程的測試。
• 視覺測試：利用工具自動檢測使用者介面變更的測試。

說真的當讀完第一章之後我才發現原來有這麼多方便的測試工具！像是單元測試，可能會認為說這麼簡單幹嘛測試？不過像是 JavaScript 或是有人如果跟我一樣有寫過 PHP 的，因為弱型別語言的關係，就可能會出現型別錯誤。或是說數字計算時會出現小誤點誤差等等的情況，其實就很適合使用單元測試。

目前其實我有在整理公司的初始後端開發範本，就很適合針對一些基本專案一定會用到的功能做個測試，這樣之後專案複製出來也會是對的，減少的多少成本呀～

沒想到居然對我的工作已經有些幫助？

在讀到視覺測試這塊，有對前端測試有新的認知，可以針對說畫面如果有變動、RWD、不同裝置的不同狀況去做監測，超讚！

不過我自己是剛好有遇到一個情況：一個老舊專案要去做改善，但因為該專案的資料不少，上傳上去後我需要肉眼去一個一個檢查，其實真的還滿麻煩的。

這時候我就突發奇想，去使用了視覺測試來幫助我判斷資料是否有更動 XD 於是我馬上請了 Cursor AI 與 Chat GPT 大神給了我怎麼去執行，說真的 code 我基本上也不太會寫 XDD 但就在跟 AI 一起協作的情況下，就能夠針對我改善 code 更新前與更新後去幫我比對差距是小的（會有點誤差範圍），後續上傳之後也確實就沒有問題。

當然我不確定這是不是個好辦法，但至少給了我一些解決的思路，我是覺得挺不錯的。大家也可以嘗試出自己不同的解決方法～

小結

覺得現在真的很方便能夠與 AI 進行協作～

但其實一開始我有想過一個念頭：既然 AI 這麼強大了，那我還要特別學習測試有意義嗎？還是就請 AI 幫我去處理就可以了～

但後來覺得說還是可以去嘗試學習看看，也因為我去知道了這些測試的東西，我有了新的認知，就能夠搭配過去的經驗產生出沒有想過的搭配與方法！畢竟 AI 是一個工具，但如果我們有更多的知識與創意，更能夠創造出更多提升產能的東西吧！

之後會有一系列的測試系列文，新手上路也可能會有些錯誤 XDD 會盡可能的將內容寫到正確～希望大家一起指教多多交流！

參考資料

• 前端測試指南：策略與實踐 - 唐心皓（Summer） 著
• Cursor AI
• Chat GPT
• 縮圖是 Chat GPT 產生出來的

事前準備

執行環境

我們會使用 PG SQL 這個線上平台來執行 PostgreSQL 指令。

初始語法

首先，要先建立 poducts 資料表，先定義資料表的欄位類型後，透過 INSERT INTO 新增指令建立預設資料。

CREATE TABLE products (
   name VARCHAR(100),         -- 商品名稱
   price INTEGER,            -- 原價
   discount_price INTEGER,    -- 優惠價
   stock INTEGER,            -- 庫存數量
   category VARCHAR(50),      -- 商品分類
   status VARCHAR(20)         -- 商品狀態
);

INSERT INTO products (name, price, discount_price, stock, category, status) VALUES
   ('北歐風雙人沙發', 39900, 35900, 3, '沙發', 'active'),
   ('貓抓皮L型沙發', 58900, 52900, 1, '沙發', 'active'),
   ('典雅三人座沙發', 42800, 42800, 5, '沙發', 'active'),
   ('工業風電視櫃', 5900, 4900, 12, '櫃子', 'active'),
   ('簡約書櫃', 3500, 3500, 8, '櫃子', 'active'),
   ('玄關鞋櫃', 2900, 2900, 15, '櫃子', 'active'),
   ('日式雙人床架', 12000, 11200, 6, '床架', 'active'),
   ('掀床五尺雙人床', 19900, 18900, 2, '床架', 'active'),
   ('兒童床架', 8900, 8900, 0, '床架', 'inactive'),
   ('電腦辦公椅', 4500, 3900, 20, '椅子', 'active'),
   ('餐椅四入組', 6000, 5200, 8, '椅子', 'active'),
   ('北歐風餐桌', 15800, 14800, 4, '桌子', 'active'),
   ('實木咖啡桌', 3200, 2900, 10, '桌子', 'active'),
   ('電競書桌', 8900, 8900, 0, '桌子', 'inactive');

事前都準備好後，接下來就進入「家具店的菜雞銷售奇遇記」的奇幻冒險吧！

P.S. 以下故事本身就是題目，所以如果有在其他地方看到同樣的故事，是正常的哦～

故事 … 開始！！

剛進入『築夢家居』當銷售顧問的小美，，沒想到第一天上班就遇到系統大當機，最扯的是這間老字號家具店只有 POS 機和資料庫，也沒有網站可以查詢。

偏偏今天是週年慶開跑，主管又在門市坐鎮，店裡生意好到不行，只好硬著頭皮詢問店裡的工程師大大...

（門市內）

客人：我要看那個貓抓皮沙發，你們還有貨嗎？

小美：（慌張）啊...貓抓皮沙發...

（急著用 LINE 問小明）

小美：學長救命！要怎麼查這個沙發？

小明：用等於就可以了：

SELECT name, price, stock
FROM products
WHERE name = '貓抓皮L型沙發';

小美：喔！就是以下這樣，對嗎？

選取 名字、價格、庫存
從 商品表
找 商品名等於貓抓皮L型沙發

小明：對！很快就上手了嘛！

小美：（快速輸入…）哇！真的查到了！只剩一張庫存耶…

客人：（不耐煩）小姐？到底有沒有啊？

小美： 這款 L 型沙發目前最後一張特價 52900，要幫您預訂嗎？

客人：哦？最後一張喔...那...就先訂起來好了！

小明：！！！這麼快就會了？根本是資料庫天才 == b

小明：那我再考你幾題，如果你都會了以後，那我就可以退休了ㄏㄏㄏ

小美：.....

基礎比較運算

情境 1：單品查詢

客人：「這張北歐風雙人沙發多少錢？」

小美想查：想找到這張沙發的價格和庫存

SELECT name, price, stock
FROM products
WHERE name = '北歐風雙人沙發'

首先，使用 select 語法來查詢 products 資料表裡面的內容，並且因為題目需要價格與庫存，因此撈了 price 與 stock 欄位，我這邊多撈了 name 欄位來幫助識別。

最後，加上 where 條件，將 name 鎖定在題目所指定的「北歐風雙人沙發」。

情境 2：價格比較

客人：「請列出 5000 元以下的櫃子有哪些？」

小美想查：找出櫃子類且價格在 5000 以下的商品

SELECT * FROM products
WHERE price < 5000

這次沒特別指定欄位，所以我就 select 星號把全部欄位給撈出來，並且透過 where 來撈出符合價格低於 5000 的商品出來。

情境 3：庫存確認

客人：「日式雙人床架還有貨嗎？」

小美想查：確認日式雙人床架的庫存狀況

SELECT name, status
FROM products
WHERE name = '日式雙人床架'

因為是確認庫存狀況，所以撈了 status 以及提供識別的 name，並且透過 where 篩選出 name 等於日式雙人床架的欄位，來確認庫存狀況。

邏輯運算 AND

情境 4：預算內的商品

客人：「想找 4 萬以下，而且有現貨的沙發」

小美想查：要同時符合：是沙發、4萬以下、有庫存

SELECT * FROM products
WHERE category = '沙發'
	AND price < 40000
  AND status = 'active'

首先透過 select 查詢 products 資料表後，where 的判斷分別下了 category 等於沙發、price 要小於 40000、status 等於 active 的三個條件式，並且透過 AND 來串接條件式，表示這三個條件同時需要符合，不然就不會回傳該筆資料。

情境 5：特價且有貨

客人：「沙發有哪些特價且現貨的品項？」

小美想查：要找到沙發類且有特價（原價大於優惠價）且還有庫存的商品

SELECT * FROM products
WHERE price > discount_price
	AND status = 'active'

此題需要符合價格 price 要大於優惠價 discount_price，表示該商品目前有折扣，如果兩者相等代表這個商品目前沒有折扣。因此 where 的條件下了 price 要大於 discount_price，直接透過欄位比較來下條件，並且同時需要符合 status 等於 active 才能撈出所需條件的筆數。

邏輯運算 OR

情境 6：多分類查詢

客人：「我要找櫃子或桌子」

小美想查：要找出櫃子類或桌子類的商品

SELECT * FROM products
WHERE category = '沙發' or category = '桌子'

此題要撈分類等於「沙發」與「卓子」的欄位，但如果使用 AND 就變成要同時符合，但是題目設計上分類只會分別等於沙發、卓子，所以就會與題目要求不相符。所以此時就需要使用到 OR，這樣只要 OR 前後有其中一項符合，就會撈出該筆資料，如此一來就會將分類等於沙發或是桌子的筆數撈出來。

情境 7：指定商品

客人：「北歐風雙人沙發和貓抓皮L型沙發哪個還有貨？」

小美想查：要找出這兩張特定沙發的庫存狀況

SELECT name, status
FROM products
WHERE name = '北歐風雙人沙發' OR name = '貓抓皮L型沙發'

這次撈出題目指定的庫存狀況 status 與方便識別的商品名稱 name，在 where 讀不份透過 OR 來將商品名稱為「北歐風雙人沙發」與「貓抓皮L型沙發」資料撈出來。

IN 運算

情境 8：多分類查詢

客人：「客廳的家具有哪些？我要看沙發、櫃子跟桌子」

小美想查：要找出沙發、櫃子和桌子這三種分類的商品

SELECT * FROM products
WHERE category IN ('沙發', '櫃子', '桌子')

如果照情境 6 的做法，就會是要透過兩個 or 將上面三個分類的條件式列出來，如果條件一多其實滿累人，程式碼又很冗長 XD 但是透過 in 的方式，等於是只要 category 有符合右邊括號內的其中一個元素（可以理解成陣列元素）就會將資料撈出來。

情境 9：特定商品

客人：「電腦辦公椅和餐椅四入組的價格是多少？」

小美想查：要找出這兩款椅子的價格

SELECT name, price
FROM products
WHERE name IN ('電腦辦公椅', '餐椅四入組')

邏輯基本上跟上面一樣，撈出商品名稱為「電腦辦公椅」與「餐椅四入組」的商品名稱與價格。

BETWEEN

情境 10：價格區間

客人：「想找 10000 到 20000 之間的商品有哪些？」

小美想查：列出這個價格區間的所有商品

SELECT * FROM products
WHERE price BETWEEN 10000 AND 20000

透過 BETWEEN 數字一 AND 數字二 可以撈出價格在這兩個數字之間的資料，所以透過這個語法來撈出價格在 10000 到 20000 之間的資料。

情境 11：庫存區間

主管：「請列出庫存在 5 到 15 之間的商品」

小美想查：列出庫存數量在這個範圍的商品

SELECT * FROM products
WHERE stock BETWEEN 5 AND 15

將庫存在 5 到 15 之間的商品撈出來。

NOT IN

情境 12：排除商品

SELECT * FROM products
WHERE category NOT IN ('沙發', '床架')

這個指令會將分類是「分類」與「床架」以外的資料撈出來。

更新和刪除

情境 13：調整價格

主管：「北歐風雙人沙發要調降 2000 元」

小美想查：要如何更新這張沙發的價格

UPDATE products
SET price = price - 2000
WHERE name = '北歐風雙人沙發'

透過 Update 指令可以更新 products 資料表內的 price 欄位，以題目來說會將商品名稱為「北歐風雙人沙發」的價格 price 更新為 price 在減 2000

情境 14：更新庫存

主管：「電腦辦公椅進了 5 張」

小美想查：要如何增加這款椅子的庫存數量

UPDATE products
SET stock = stock + 5
WHERE name = '電腦辦公椅'

這個題目會將原本電腦辦公椅的庫存再加上 5 筆庫存。

情境 15：清除資料

主管：「要清掉兒童床架和電競書桌的資料」

小美想查：要如何刪除這兩項商品

DELETE FROM products
WHERE name IN ('兒童床架', '電競書桌')

這個題目結合了上面提到的 IN，會將商品名稱為「兒童床架」與「電競書桌」的資料給刪除。

故事結束

發現透過情境來學習，增加了一些有趣程度寫起來會有種不一樣的感覺 XDD 尤其是在資料庫這種我不擅長的科目，開心不少（？）希望可以趁這次機會把一直沒機會學好的資料庫理解更深入！

使用 Git 的好處

上述提到了版本控制，以往最原始的版本控制，可能是在檔案或目錄加上版號，或甚至是「project_final」、「project_final2.0」之類的奇耙名稱 XD 雖然這樣能夠做到區分，但是我們並無法直接知道每個版本之間的差異，甚至是當程式、檔案一多就更難管理了。

另外使用 Git 更能容易與其它團隊成員進行協作開發，當然其它版本控制或許也可以，但是我沒有用過，今天主要專注在 Git 上。我們能透過像是 GitHub、GitLab 等服務存放專案，如果專案有多位成員同時開發需求，就能夠透過這些儲存庫服務將專案拉下來後開發，並且紀錄何人在何時所進行的開發、程式與版本差異，如果需要回復或是切換到某個版本一樣非常方便。

學 Git 很難？

其實在學 Git 之前，看到這一串指令我同樣感到焦慮，看不懂到底是什麼東西，因此才會有你現在看到這個部落格，會用 Hexo 建立這個部落格有部分原因就是想學習使用指令 XD 因此找到一個你想建立的專案，從興趣下手，順道來學習 Git，慢慢用久就會愈來愈熟悉、上手。

開始動手安裝吧！

首先需要安裝 Git 軟體，這個部分，就到 官網 來下載安裝。

開啟終端機

下載完 Git 後，我們就開始打指令啦！雖然說有圖形化介面可以使用，不過我個人建議可以先從指令開始下手，了解整個指令的操作流程，使用圖形化介面更能更快上手～

如果你是 Windows 可以在搜尋打上 cmd 開啟命令提示字元、使用 Mac 則開啟終端機。

設定個人資料

首先，我們剛剛提到，透過 Git 可以記錄是誰在何時進行的開發紀錄，因此在使用 Git 之前，我們要先將自己的名字、Email 紀錄上去，這樣之後推送修改紀錄的時候才知道是誰推送的。

輸入名字、E-mail 可以使用以下指令：

git config --global user.name "你的名字"
git config --global user.name "你的 E-mail"

設定好後，可以透過以下指令來查看 Git 設定內容，包含上述我們設定的名字、E-mail：

git config --list

如果設定好發現資料打錯了，該怎麼辦？不用擔心，假設是名字打錯，再輸入一次上述名字那段指令，把名字改成正確名字就好，其它相同。

使用 cd 移動到專案目錄

我們可以先在桌面或是你喜歡的地方，建立一個專案目錄，但此時要如何讓終端機能夠吃到專案目錄呢？這時要使用 cd 這個指令，透過 cd 後面加上目錄路徑，可以讓終端機前往該專案目錄。

cd 專案目錄路徑

此時可能會有一個疑問，路徑這麼長，難道都要自己打嗎？會不會太累？其實不用，首先將 cd 後加空格打好後，接著按住專案目錄不放，拖曳到終端機內放開，終端機就會帶入目錄路徑了，此時按下 Enter，就會前往專案目錄囉。

建立本地儲存庫

接下來就是今天的重頭戲，我們要針對這個專案目錄建立一個 Git 儲存庫，往後這個專案內所有變動都會透過 Git 來儲存下來。我們只需輸入以下指令就能為這個專案建立 Git 追蹤：

git init

完成！就是這麼簡單，此時你可以開啟顯示隱藏檔案或目錄，就會看到這個被歸類在隱藏目錄的「.git」，Git 所追蹤的資料，會被歸類在這個目錄下。

第一個 Git 版控專案建立成功！

恭喜你成功建立第一個 Git 版控專案！當然之後還會介紹到 commit 等更多用法，幫助記憶每一個版本開發過程，這部分就下次來介紹。

使用函數原因

用輸入跟輸出的例子來說明：

而函數 function 就像是上列表格的處理，進行我們要的請求，例如我們可以定義一個加法函數，在裡面撰寫加法程式。

範例

// 沒有參數
function 變數名稱(){

}
變數名稱(); // 執行函數

// 有參數
function 變數名稱(num1, num2){

}
變數名稱('參數1','參數2'); // 假設有兩個參數，就要傳遞兩個參數進去

// 加法函數，在函數裡寫 console.log 顯示出（無法使用變數接收，因為函數只是顯示出答案，並沒有回傳值）
function add(num1, num2){
    console.log(num1+num2);
}
add(12,24); //執行函數

// 乘法函數，利用 return 回傳值，並使用變數接收；若要顯示答案，須在外層撰寫 console 顯示
function mul(num1, num2){
    return num1 * num2
}
let ans = num(9*9); // 執行函數並賦予值給變數 ans
console.log(ans); // 顯示答案

return

函數內可以有多個 return，但是第一個 return 執行完後，就會跳脫 function，後面不管事 return 還是其它程式，都不會執行

全域變數與區域變數邏輯

• 在 function 以外宣告的變數，為全域變數
• 在 function 內宣告的變數或是參數，為區域變數；只能在 function 內使用，
• 在 function 內執行變數，會先尋找 function 內有沒有宣告；如果沒有，會向 function 外尋求是否有同名的全域變數

使用 if 執行多個 return，並在內運作全域變數

/* 是否有發燒 */

let number = 0; //記錄受測人數

function degree(num){
    number+=1; // 受測人數+1
    if(num>=37.5){
        return "有發燒";
    }else{
        return "沒發燒";
    }
}

console.log(degree(37.2));

result: "沒發燒"

做個加法計算機：子元件

假設有個子元件是這樣：

const addNum = {
  template: `<button type="button" @click="returnData">點我 + 1</button>`,
  props: ['number'],
  methods: {
    returnData() {
      this.$emit('return-text', this.number + 1);
    }
  },
};

這邊建立了一個名為 addNum 的子元件，有一個名為 number 的 Props 傳入，當有人點擊「點我 + 1」按鈕時，會觸發 returnData()。在這個 function 我們發現了一個新的 this.$emit()，便是我們今天的重點。

this.$emit() 用法

this.$emit('emit 名稱', '要傳回的值');

在這段函式的兩個參數中，第一個參數是 emit 名稱，到時父元件會使用此名稱觸發 emit。

第二個參數則是要回傳的值，可以是字串、數字、物件、...各式各樣資訊，或是如範例所看到的，直接在函式內進行運算，將答案傳回。另外不一定要傳回值，可以用於單純讓父元件觸發指定 function。

父元件

HTML

<div id="app">
  <p>答案：{{ answer }}</p>
  <input type="number" v-model="number">
  <add-num :number="number" @return-text="getReturnData"/>
</div>

JavaScript

const app = Vue.createApp({
  components: {
    addNum
  },
  data() {
    return {
      number: 0,
      answer: 0,
    }
  },
  methods: {
    getReturnData(ans) {
      this.answer = ans;
    }
  }
});

app.mount('#app');

從範例可以看到有一個 input 輸入框，並與 number 做了雙向綁定，並透過 Props 將 number 傳入給 add-num 子元件，最後會將答案顯示在 answer。

但這邊出現了一個 @return-text="getReturnData"，這段話的意思就是剛剛建立的 return-text 這個 Emit 被觸發了，觸發後要執行右邊指定的函式 getReturnData()。

接下來從 JavaScript 範例可知，getReturnData() 函式帶了一個參數，就是剛剛 Emit 所傳回的參數，這時我們在將傳回值賦予值到 this.answer，父元件就會顯示 答案：傳回值 了。

此外，如果 Emit 沒有傳回值，仍然能夠透過 Emit 觸發後執行函式，這在上一段有介紹過，相信跑過這段流程後更加理解。

後記

這邊提供一個 codepen 範例「Vue Props + Emit 計算機」讓大家玩玩看，理解後在自己練習一次，會更加熟悉其用法。

參考資料

• Day16 Vue Component(元件) props、emit介紹 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

將資料傳入元件

用法

<元件Tag Props名稱="傳入值" />

來段範例

<card :title="item.title" :img="item.imgUrl" />

方法很簡單，就是在元件的 HTML 標籤內增加屬性，屬性名稱就是我們要設定的 Props 名稱，並將傳入值帶入，如果帶入值為變數可使用 v-bind 形式傳入。

如此一來元件內就會運用我們在此時設定的 Props 名稱來取傳入值。

子元件接收傳入值：陣列寫法

export default {
    data () {
        return {
            text: '文字',
        }
    },
    // props: ['Props 名稱 1', 'Props 名稱 2', /* ... 以此類堆 */ ]
    props: ['title', 'img'],
    mounted() {
        console.log(this.title);
        console.log(this.img);
    }
}

我們在以上範例中增加了一個 props 的陣列，裡面擺放了兩個陣列元素的名稱要跟外面傳入的 Props 是一樣的，如此一來我們便能利用 props 來去做後續的操作，以此範例為例我們在 mounted() 內 console 出兩個傳入值。

子元件接收傳入值：物件寫法

export default {
    data () {
        return {
            text: '文字',
        }
    },
    props: {
        title: {
            type: String,
            default: '預設值',
            required: true,
        },
        img: {
            type: String,
            default: '預設值',
            required: true,
        },
    },
    mounted() {
        console.log(this.title);
        console.log(this.img);
    }
}

使用這個寫法的好處是能夠自訂預設值，假設外層沒傳入資料，還是能夠透過這裡設定的預設值來進行運算，同時能夠加入驗證機制，從傳入時即判斷值是否合乎驗證規則。

後記

這篇介紹的 Props 讓父層資料可以傳遞給子元件進行處理，但既然資料可以傳入，代表同樣能夠將資料傳遞回父元件。因此下一次就要介紹 Emit 的用法，敬請期待～

參考資料

• 2-2 元件之間的溝通傳遞 | 重新認識 Vue.js | Kuro Hsu
• Day17 Vue Component(元件) - props使用注意細項(1) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

修改 Edge 預設搜尋引擎

首先第一步先進入 Edge 設定後，點選左邊選單的「隱私權、搜尋與服務」，然後滑到最下面點擊「網址列和搜尋」。（雖然都有搜尋字樣，但我當初怎麼找這麼久 QQ）

第二步把「在網址列中使用的搜尋引擎」的下拉式選單，預設應該會是 Bing，改成你想選擇的搜尋引擎，就完成了。

.col-* 寫法

一開始新手在學習撰寫格線系統時，可能會主要以下面這樣形式撰寫：

<div class="container">
    <div class="row">
        <div class="col-md-6 col-xl-3">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse recusandae saepe sed et laborum. Odit, impedit a aliquid cupiditate soluta fugiat reprehenderit ducimus excepturi cum dolores dolore quae quia enim!</p>
        </div>
        <div class="col-md-6 col-xl-3">
            <h3>title</h3>
            <p>Facere expedita asperiores adipisci quos! Fugit eum corporis qui doloremque quia pariatur deserunt eligendi numquam, iste, possimus cumque quam repellat molestias temporibus. Veritatis quas molestiae autem hic? A, nostrum possimus?</p>
        </div>
        <div class="col-md-6 col-xl-3">
            <h3>title</h3>
            <p>Odio voluptates veritatis facilis ea quo sapiente libero iusto necessitatibus, quibusdam suscipit corporis sunt nisi officiis natus aspernatur beatae eos eaque possimus dolor alias perferendis. Distinctio cum placeat impedit laboriosam.</p>
        </div>
        <div class="col-md-6 col-xl-3">
            <h3>title</h3>
            <p>Neque eligendi inventore a ullam. Sapiente quae culpa accusantium numquam, earum cupiditate alias dignissimos eos dolor minus sed repudiandae eaque amet quibusdam nulla vero repellat at? Et cumque veniam nulla?</p>
        </div>
    </div>
</div>

但假設後續我要針對版面排列方式進行修正，就必須很麻煩的一個一個改，就算有搜尋取代的功能，但有時候也不會只有一個地方使用到格線系統，還是會有些許不方便。

.row-cols-* 寫法

先來段範例讓大家參考：

<div class="container">
    <div class="row row-cols-md-2 row-cols-xl-4">
        <div class="col">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse recusandae saepe sed et laborum. Odit, impedit a aliquid cupiditate soluta fugiat reprehenderit ducimus excepturi cum dolores dolore quae quia enim!</p>
        </div>
        <div class="col">
            <h3>title</h3>
            <p>Facere expedita asperiores adipisci quos! Fugit eum corporis qui doloremque quia pariatur deserunt eligendi numquam, iste, possimus cumque quam repellat molestias temporibus. Veritatis quas molestiae autem hic? A, nostrum possimus?</p>
        </div>
        <div class="col">
            <h3>title</h3>
            <p>Odio voluptates veritatis facilis ea quo sapiente libero iusto necessitatibus, quibusdam suscipit corporis sunt nisi officiis natus aspernatur beatae eos eaque possimus dolor alias perferendis. Distinctio cum placeat impedit laboriosam.</p>
        </div>
        <div class="col">
            <h3>title</h3>
            <p>Neque eligendi inventore a ullam. Sapiente quae culpa accusantium numquam, earum cupiditate alias dignissimos eos dolor minus sed repudiandae eaque amet quibusdam nulla vero repellat at? Et cumque veniam nulla?</p>
        </div>
    </div>
</div>

子層改寫

先將子欄所有 .col-*、.col-md-* 或 .col-xl-* 等改寫成純 .col，讓父層來設定。

父層改寫

再來至父層 .row，.row 保留不變外，再加上 .row-cols-* 的設定。值得注意的是，* 所設定的數字即設定整個版面需要呈現幾欄，而非設定單欄需要占多少個位置。Ex. .row-cols-3 代表三欄式版面。

與 .col-* 設定一樣，可在與 .row 同層 div 設定 .row-cols-md-*、.row-cols-xl-* 響應式版面設定。

參考資料

• 網格系統 (Grid system) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0

基本寫法

Minix 撰寫方式

/* 不帶參數 */
@mixin Mixin名稱 {
    /* SCSS 語法 */
}

/* 帶參數 */
@mixin Mixin帶參數($參數名稱一, $參數名稱二) {
    屬性一: $參數名稱一;
    屬性二: $參數名稱二;
}

• 以 mixin 為開頭後，接著自訂 Mixin 名稱
• 如果需要帶參數，在 Mixin 名稱後加上括號包覆，如超過一個參數使用逗號分隔
• 在 {} 撰寫語法

呼叫 Mixin

/* 不帶參數 */
@include Mixin名稱;

/* 帶參數 */
.類別選擇器 {
    @include Mixin帶參數(帶入參數一, 帶入參數二)
}

• 以 @include 為開頭後，接著自訂 Mixin 名稱
• 如果需要帶資料進入，在 Mixin 名稱後加上括號包覆，超過一個參數使用逗號分隔

範例

不帶參數

假設今天我們想為放置標題的 h1 標籤以圖片取代文字呈現，SCSS 可以這麼撰寫：

/* 圖片取代文字 */
@mixin hide-text {
    text-indent: 110%;
    white-space: nowrap;
    overflow: hidden;
}

.header h1 {
    background: url('../logo.png');
    @include hide-text;
}

我們將圖片取代文字語法撰寫在 hide-test 的 Mixin 內，並且當 h1 標籤需要使用這樣的機制時，就可以直接引入 hide-text。

另外一個好處是，後續如果有其它地方，需要使用圖片取代文字的機制就不用特別另外在撰寫一次。因此圖片取代文字的機制就不會是 h1 標籤專有，而是有需要就可以直接引入。

帶參數

假設我們需要在不同區域加上不同大小的圓形，可以這麼寫：

@mixin circle ($size, $bgcolor) {
    border-radius: 50%;
    height: $size;
    width: $size;
    background: $bgcolor;
}

.box1 {
    @include circle(30px, #fff);
}
.box2 {
    @include circle(60px, orange);
}

如此一來我們便能在不同的 div 區塊上，透過參數各自設定為不同大小與顏色的圓形。

Mixin + RWD 應用

透過 Mixin 能透非常方便管理 RWD 內容，如下：

@minix pad {
    @media (min-width: 768px) {
        @content
    }
}
@minix desktop {
    @media (max-width: 992px) {
        @content
    }
}

我們能夠先撰寫不同大小裝置使用媒體查詢於各自 Mixin，其中在媒體查詢裡面使用到了 @content，這個機制可以讓外部呼叫 Mixin 時，可以直接將語法撰寫至指定的 Mixin，保留一個給外部寫入的空間。

假設有個網頁頁首，手機版、平板與 PC 裝置背景顏色分別呈現為橘色、藍色與紅色，能夠這樣設置：

.header {
    background-color: orange;
    @include pad {
        background-color: blue;
    }
    @include desktop {
        background-color: red;
    }
}

透過這樣撰寫，就會自動將語法帶入到 @content 內，進行不同樣式上渲染。

Mixin + import 組合技

搭配 使用 @import 讓你 Sass 切分檔案、維護管理更方便！ 使用，可以將 Mixin 整理成一個檔案或多個檔案進行整合後，使用 @import 整合至主樣式檔：

@import "variable"; /* 變數檔 */
@import "normalize"; /* CSS Reset */
@import "mixin"; /* Mixin 檔 */
@import "main"; /* 自己的 SCSS */

先引入 Mixin 檔後再載入自訂 SCSS 檔，使由上而下編譯時能夠先識別 Mixin（如同變數），就能夠於後續使用 Mixin。

基本寫法

以下語法皆以 SCSS 撰寫。

/* 載入目錄 components 下 banner.scss 樣式 */
@import 'components/banner';

載入上不用特別加上副檔名，直接使用 目錄/檔名 形式載入即可。

@import 整合範例

來一段範例，假設同一目錄中有以下 SCSS 檔案：

style.scss
bootstrap.scss
_reset.scss
_base.scss
_banner.scss

我希望 style.scss 可以載入 _reset.scss、_base.scss、_banner.scss，可以在 style.scss 這麼撰寫：

@import "reset";
@import "base";
@import "banner";

如此一來進行編譯後，就會產生以下 CSS 檔案：

style.css -> 包含 reset、base、banner 等內容
bootstrap.css

檔名底線用途

從 @import 整合範例能夠看到經過編譯後僅保留 style.css 與 bootstrap.css 兩支檔案，是因為其它三支檔案都在檔名開頭加上底線，基本上編譯時就不會將這些檔案編譯成獨立 CSS 檔案。

@import 建議載入順序

Sass / SCSS 筆記：如何利用變數管理重複設定值？ 提到 Sass / SCSS 為由上而下編譯，因此在載入順序建議可依照以下順序來載入：

• 變數檔，使後面讀取變數順利
• Mixin
• CSS Reset
• 通用類別
• Other files ...

以要被後面讀取的資訊或是要被 Reset 的內容放在前面為主。

v-if 與 v-else

以上述的情境，我們先來段範例：

HTML

<div id="app">
    <ul class="menu" v-if="is_login">
        <li><a href="#">登出</a></li>
    </ul>
    <ul class="menu" v-else>
        <li><a href="#">登入</a></li>
        <li><a href="#">註冊</a></li>
    </ul>
</div>

JavaScript

const app = {
    data() {
        return {
            is_login: true;
        }
    }
}

範例解說

以這段範例來說，有兩個 ul 選單，我們希望在一個狀態之下只顯示一個 ul 選單，以 Vue 來說我們只要針對這兩個 ul 區塊設定 v-if、v-else 條件渲染語法。

基本上就跟程式語言的 if...else... 用法一樣，在 v-if 設定條件式，因此我們將 data 中 is_login 帶入，假設為 true 代表為登入狀態，即顯示登出那個 ul 區塊，反之為 false 就顯示 v-else 區塊。

v-else-if

跟一般程式語言一樣，如果需要多條件判斷，可使用 v-else-if 這段指令。假設呈現不同會員等級就很適合使用。

HTML

<div id="app">
    <div v-if="member_level == '管理員'">
        <p>您擁有最高管理權限</p>
    </div>
    <div v-else-if="member_level == '編輯'">
        <p>您擁有新增文章權限</p>
    </div>
    <div v-else-if="member_level == '會員'">
        <p>您擁有回復文章權限</p>
    </div>
    <div v-else>
        <p>您擁有觀看文章權限</p>
    </div>
</div>

JavaScript

const app = {
    data() {
        return {
            member_level: '編輯'
        }
    }
}

範例解說

這個範例總共分成管理員、編輯、一般會員以及沒有註冊的訪客，我們將條件式直接填入 v-if 與 v-else-if，當達成指定條件後，顯示該區塊。

v-if 與 v-show 的差別是什麼

v-if

基本上 v-if 與 v-else 狀態切換的改變，會是直接開啟、關閉其生命週期，所以如過透過像是按鈕切換等功能切換 v-if 與 v-else 區塊，原本顯示的區塊會在原始碼消失，顯示新區塊。

v-show

使用這個指令基本上跟 v-if 差不多（不過剛剛稍微測試，v-else-show 似乎不能運作？大家可以動手測試看看 XD），不過切換狀態時，原本顯示的區塊如果被替換，會透過 CSS display: none; 來隱藏區塊，而不會動到生命週期。

我很喜歡，不管程度如何，至少大家都有一個機會能夠事前具備一些基本觀念（當然，畢竟這是 Vue 直播班，還是先要有 JS 基礎比較好），當遇到問題時，就可以在詢問助教或是直接於直播課程詢問老師。

再來這次直播班還會主動關心學員狀況，因為過年有點過的太開心，再加上新工作離家裡有點遠，所以後來進度整個大落後，作業都沒寫 XD 此時就會有機器人來關心你的狀況，是否需要協助之類的。

同學間的討論氣氛依舊相當熱烈，然而我並不是一個遇到問題喜歡發問的人，但是透過 Discard 上爬文，仍然有機會找到自己在作業上到底踩到什麼雷。

這次參與度沒有像之前那麼高，主要還是在適應開始上班之後的生活與長時間的通勤，這也是必須持續做的功課，畢竟下班後的自我成長還是相當重要。

打算先趕完作業後，再來開始慢慢啃課程提供的資源～

v-on 寫法與縮寫

一般寫法（以點擊事件為例）

<button v-on:click="帶入方法（或其參數） or 直接撰寫">按鈕</button>

縮寫（以點擊事件為例）

<button @click="帶入方法（或其參數） or 直接撰寫">按鈕</button>

事件修飾符：prevent

• HTML 中的 a 或是 form 表單內的 post 會分別在點擊鏈結跟 submit 後跳轉鏈結
• 若無須跳轉鏈結，可在 v-on 後加入 .prevent，可移除其事件
• 當然也可以增加事件，可參考官方文件：https://cn.vuejs.org/v2/api/#v-on

a 鏈結範例

<a href="https://www.google.com" @click.prevent="方法變數">鏈結</a>

• 加入 .prevent 前，執行完方法後就會跳轉鏈結
• 加入 .prevent 後，執行完方法不會跳轉鏈結

表單 submit 範例

<form action="https://www.google.com/" @submit.prevent="方法變數">
    <input type="text">
    <input type="submit">
</form>

• 加入 .prevent 前，點擊 submit 會執行完方法後並跳轉鏈結
• 加入 .prevent 後，點擊 submit 執行完方法但不會跳轉鏈結

範例程式碼

HTML

<div id="app">
    <button @click="counter += 1">Add 1</button>
    <p>The button above has been clicked {{ counter }} times.</p>
    <hr>
    <button @click="say('hi')">say hi</button>
    <button @click="say('what')">say what</button>
    <hr>
    <a href="https://www.google.com/" @click.prevent="clickfu">有 prevent 的狀況下</a><br>
    <a href="https://www.google.com/" @click="clickfu">沒有 prevent 的狀況下</a>
    <hr>
    <form action="https://www.google.com/" @submit.prevent="submitFu">
        <h3>有 prevent</h3>
        <input type="text">
        <input type="submit">
    </form>
    <form action="https://www.google.com/" @submit="submitFu">
        <h3>沒有 prevent</h3>
        <input type="text">
        <input type="submit">
    </form>
    <hr>
    <p>
        <label for="enter">針對 input 按下 Enter 會觸發按鍵精靈</label>
        <input id="enter" type="text" @keyup.enter="onEnter">
    </p>
    <p>
        <label for="a">針對 input 按下 Enter 會觸發按鍵精靈</label>
        <input id="a" type="text" @keyup.a="onEnter">
    </p>
    <p>
        <label for="b">針對 input 按下 Enter 會觸發按鍵精靈</label>
        <input id="b" type="text" @keyup.b="onEnter">
    </p>
    <p>
        <label for="c">針對 input 按下 Enter 會觸發按鍵精靈</label>
        <input id="c" type="text" @keyup.c="onEnter">
    </p>
</div>

JavaScript

const app = {
    data () {
        return {
            counter: 0,
        }
    },
    methods: {
        say (message) {
            alert(message);
        },
        clickfu () {
            alert('prevent');
        },
        submitFu () {
            alert('表單傳遞');
        },
        onEnter () {
            alert('按鍵精靈');
        },
    },
}

Vue.createApp(app).mount('#app');

lazy：轉為 change 事件後同步

編輯資料時不會一起更動值，等到輸入完畢離開 input 後才會變動

<!-- HTML -->
<div id="app">
    <input type="text" v-model.lazy="message">
    {{ message }}
</div>

number：改變 input 資料型別 typeof

<!-- HTML -->
<div id="app">
    <input type="text" v-model="message">
    <input type="text" v-model.number="message">
    <input type="number" v-model="message">
    <input type="number" v-model.number="message">
    {{ message }}
    {{ typeof message }}
</div>

<script>
	// 假設值為 123456：
    /*
    	欄位一：string
    	欄位二：number
    	欄位三：string
    	欄位四：number
    */
</script>

• {{ typeof 資料名稱 }} 可取得該筆資料的資料型別
• 加上修飾符 .number 才能改變其資料型態為 number，否則儘管輸入數字也會是 string

trim：去掉頭尾空格

<!-- HTML -->
<div id="app">
    <input type="text" v-model="message">
    <input type="text" v-model.trim="message">
    首{{ message }}尾
</div>

<script>
	// 假設值為 " 哈囉 "：
    /*
    	欄位一：首 哈囉 尾
    	欄位二：首哈囉尾
    */
</script>

• trim 能夠自動去除用戶在 input 框內首尾輸入的空格

參考資料

• v-model - Vue 常用指令及方法
• vue修飾符——.lazy - IT閱讀
  • 參考了一下如何介紹 lazy

• input 加上 v-model 能夠與 vue 進行雙向溝通
• 會覆蓋 HTML 的 value、checked、selected 預設值

v-model 範例

HTML

<div id="app">
    <input type="text" v-model="message">
    {{ message }}
</div>

JavaScript

const app = {
    data () {
        return {
            message: '哈囉',
        }
    }
}

Vue.createApp(app).mount('#app');

• 先在 JS 定義 message 資料，並透過 {{ message }} 顯示資料在網頁上
• 在 input 標籤上榜定 v-model，預設會載入 JS 定義的資料，如果編輯資料會馬上改變值，達到雙向溝通綁定

指令

就我目前了解，渲染資料可用下面四種指令：

• {{ 資料名稱 }}
• v-text 綁定在標籤上，Ex. v-text="資料名稱"
  • {{ }} = v-text
• v-once 綁定在父層，內層放置資料名稱 Ex. <div v-once>{{ 資料名稱 }}</div>
  • 資料名稱放置於子層，而不是 v-once="資料名稱"
  • 僅會輸出一次資料在畫面上，往後更新都不會更動
• v-html 可以編譯 HTML 與法至標籤畫面上 Ex. v-html="資料名稱"
  • 不輕易讓用戶撰寫 HTML 語法，否則會用 XSS 攻擊風險；只可在可信內容上使用，不能用於提交內容上
  • 詳細說明可參考：https://cn.vuejs.org/v2/api/#v-html

程式範例

HTML

<div id="app">
    <input class="form-control" v-model="text">
    {{ text }}
    <div v-text="text"></div>
    <div v-once>{{ text }}</div>
    <div v-html="text"></div>
</div>

JavaScript

const app = {
    data () {
        return {
            text: 0,
        }
    }
}

Vue.createApp(app).mount('#app');

結果

當 <input class="form-control" v-model="text"> 輸入 2<br>3

• {{ text }} 顯示：2<br>3

• v-text 顯示：2<br>3

• v-once 顯示：0

• v-html 顯示：2

引入 Vue CDN

引入 Vue CDN，載入 Vue 外部資源，讓網頁能夠讀取 Vue 功能

<script src="https://unpkg.com/vue@next"></script>

在 HTML、JavaScript 建立 Vue 環境

HTML

設定一個 ID 為 app 的 div，事實上不一定要取名為 app，不過大部分人都會取名為 app。

<div id="app">
    
</div>

JavaScript

範例 JS

const app = {
    data () {
        return {
            text: 0,
        }
    }
}

Vue.createApp(app).mount('#app')

JS 解說

const 變數名稱 = {
    data () {
        return {
            資料名稱: 資料內容 or 物件,
        }
    }
}

Vue.createApp(變數名稱).mount('HTML ID 名稱')

• 一開始宣告一個變數，內含要傳給 HTML 的資料
• 其中定義一個 data() 函式，裡面要放置 return {}，資料則放在 return {} 內
• 資料擺放格式為「資料名稱：資料內容 or 物件」，讀取資料時會使用資料名稱，而內容可以是單一值或物件
• 最後透過 Vue.createApp 選取要傳入的變數，並在透過 mount 傳送給指定的 HTML 區塊

另外一種 JavaScript 寫法

const app = Vue.createApp({
    data () {
        return {
            text: 0,
        }
    }
}).mount('#app');

• 方法一是先宣告變數，後面再透過 Vue.createApp 去選取變數
• 此方法是在宣告變數的同時，就透過 Vue.createApp 選取並將資料傳遞給指定的 HTML 區塊

想改變一件事情，從習慣開始

當我們想要改變一件長久以來的陋習，或是要開始一個嶄新的計畫，通常來說我不會一開始給自己很大的壓力，可能是每天 10 分鐘、15 分鐘的時間，從最簡單的單位開始，比如說讀一頁書、做 20 下仰臥起坐，我相信這都比什麼都不執行還來的好。

就像運動，我希望它是我生活中的一部分，但畢竟過去它比較算是過客的形式在我的生活當中，一開始一定會有些不習慣；所以先從養成習慣開始，說不定習慣之後因為喜歡這項活動，就會自己想持續進步，不需要一開始就擬定讓人喘不過氣的執行計畫，導致還沒開始或一下就放棄。

從調整作息看到成長的痛苦

先說其實我還沒看過原子習慣這本書，不過透過網路許多人的分享，也開始運用每天進步 1 % 的進步法，尤其像是之前因為是 SOHO 族的關係，自由的作息使我比較晚睡晚起，開始我善用每天提早 15 分鐘起床的方式，起初覺得還算輕鬆，不會出太多力。

不過後來就開始停滯甚至又有些退步了，我原本以為每天不斷進步一些，過程應該不至於會太痛苦，不過我太天真了，到了一個階段還要再往前進步，或許還是會有些痛苦。這對一些人來說或許並不算什麼，但是在這種自由的作息久了之後，真的開始調整了還真是要有一些意志力。

習慣養成只是開始，成長本就是痛苦

或許在一開始我們能夠以一個比較無壓力的方式成長，讓我們不要在一開始就因為壓力而放棄，但是到了一個階段，或許是習慣已經養成已久、進步的蜜月期結束、成長已經開始停滯，如果想要持續在這條路上前進，仍然不得不做一些犧牲，才能夠繼續往下走。

畢竟成長終究還是痛苦的，但這也是它難能可貴的地方，畢竟如果過程中都沒有任何痛苦，就代表任何人來做都可以很快上手，就沒有它應有的價值了。

接受人生所有的挑戰

當然，每天進步 1 % 的力量還是很強大的，至少最近有一項過去一直沒有達成過的事情或許快達成了（對別人應該算是滿基本的事情，但對我是個挑戰），等達到再跟各位分享。

不過真正達到那個巔峰，勢必還是要有所付出，這也是成果帶給我們的美妙之處。

專精？還是協槓？

最近很夯的某詐賭事件中，有提到起因大致上是「雖然本業月收很多，但除了本業還能夠做什麼事情？」，先姑且不論這項自白大家解讀為何，但這句話帶給我一些反思。

坦白說我也是有些焦慮的，雖然工程師這行業看似前景不錯，不過我也常問自己一個問題：我除了「網站工程師」這條路以外，我還能夠做什麼事情？如果以後一個萬一沒有了網路了，我還有這個價值嗎？（不要懷疑，我常常這樣想 XD）

有太多想完成的事情了

當然上述那段是很極端的事情，我自己也知道不太可能發生 XD 不過偶爾還是會有想要提升的其它東西，比如健身、遊戲、社交能力、英語能力、...等等還有許多，都是我想要提升的部分，但不用說到這些了，光是網站這項領域，我自己就經常會有一股衝動想要一網打盡。

有這個企圖心以及野心，我相信是好的；但是，吸收得了嗎？我看有些人很厲害，也是多項協槓技能在身，我難道就不行嗎？

從運動得到的反思

我的體能在大眾上來看是偏差的，體育成績也總是名列前茅（倒數來看的話），雖然有在跑健身房，但畢竟是自己練，對於健身的觀念、細節絕對有很多不懂之處，於是於年底請了運動教練幫我調整。

教練給我的目標是：增加體重、體指維持，培養運動基礎。雖然在請教練之前，算是滿認真的在跑健身房三個多月，但事實上我的運動基礎能力還是很弱。畢竟，花了 23 年不善待自己身體，又怎能想在短期看見效果？

只想看到成熟的果實

有些人運動可能是希望為了短期可以達到瘦身的效果，然而有時候執行過程的反饋，並不如自己預期般那樣；於是開始鬆懈，最後再度回到原點。

曾經我給自己的壓力也是挺大的，好像把運動這件事情看得很慎重一樣，尤其自己「完美主義」感到強烈後，一點點不如意就能夠讓我煩惱好幾天，搞得像會影響很大，但實際上根本就是想一堆有的沒的，才導致效果低落。

求慢不求快：花一輩子的時間，好好運動！

後來心態上能夠有所轉變的原因，是因為我將「運動」這件事情當成是我生活的一部分、生活習慣，它就是我的日常生活，我不會因為哪幾天狀況比較差，就造成長時間心情低落，而更是需要慢慢磨練、持續進步。

當然，過程中還是要持續檢討過程帶給我們的反饋。不過，盡可能地更加享受過程，畢竟，我要花一輩子的時間，好好運動！

只要自己還有在進步，就不怕在未來等不到成熟果實

今年我的目標，打算放在身體健康（包含運動與飲食）、專業技能、社交技巧上面。當然，我還有一堆想要學習的東西，但是既然知道我們無法同時兼顧這麼多事情，那不如先努力達標今年所有目標，再來考慮其它事情。

當然有些人能協槓很厲害，但我們不用跟他人比較，因為當我夠努力，或許總有一天那個成功的人就會是我；就算比別人慢一點，那又有什麼關係？

結論

在這個步調很快的世界裡，或許更應該放慢腳步。世界帶給我們很多的雜訊，但是每個人一天都只有 24 小時，不可能兼顧所有事情，我們都必須適時暫時放下某件事情。

不過我相信，只要有那一份信念在，既然有一輩子的事情可以去努力，那或許也不用急於去兌現；唯一能做的，就是不斷的精進提升，把每一天過得更加充實。