ChatGPT 問世至今快半年了。
一開始非常興趣缺缺，即使知道他神通廣大，越早認識越好、即使把 “去使用 ChatGPT “ 放在代辦事項，依舊拖了好幾週都沒有動靜。
在某次工程師朋友聊天後，忽然被燒到，於是登入註冊、隔天上班開始試著跟他對話，然後陷入情網？
我大約是在 2 月中開始使用，從一開始諮詢職涯跟技術方向、到後來的工作家教、或是任何原本會問 google 的問題，現在都會先想到 ChatGPT 。
三個月相處下來， ChatGPT 的定位，用 “ 貼身家教 ”來形容最貼切。
這篇文章，我會分享 身為一個沒有資訊底，從零轉職前端工程師的中年人 ，如何把 ChatGPT 當貼身家教，解決大多數的基本程式問題。
如果你符合以下條件，這篇文章可能會給你些幫助或靈感
- 用關鍵字找答案的能力篇薄弱，提問時總無法下精準的關鍵字
- 自己在用的程式語言，有許多語法沒用過或不太熟悉的情況
- 經常有種 “真想有個不會鄙視我低能問題家教” 的想法
- 臉皮很薄、沒朋友的新人 (?)
如果你的關鍵字能力極好、Stack Overflow 已經在我的最愛、查閱各種英文的官方文件就跟在看童話書一樣簡單的話，看到太低能的問題會生氣的話，出口在左邊 XD
ChatGPT 超好用的時候
需求超明確時
某程式語言的某語法要如何使用
寫程式經常遇到那種你知道他存在，但想不起來正確寫法、或是不確定怎麼寫的情境
問隔壁怕被當作低能兒，問 google 不一定能找到正解，這種時候口語化的描述需求，通常能在 5 行內獲得可以直接複製貼上的答案
我曾經問過像是
- css 區塊的兩邊下方圓角怎麼寫？
- css 背景色上下漸層怎麼寫?
- css hover 時放大的效果怎麼寫？
- 讓文字靠下對齊，但 vertical-align:baseline 失效，還有什麼方法?
- 寫在父元件的 css 為什麼子元件沒吃到？
css 老師我對不起你，但我真的很少寫這些東西 Ｔ-Ｔ
問資深前輩只能得到模稜兩可的答案時
如果時間很多，想了解細節，很多資訊找前輩大神們的部落格細細品味是很不錯的選擇
但有時候只想先知道個大概，或明確的利弊分析，貼身家教就是很棒的選擇了，我問過像是
- Vue, React, Angular 的優勢分別是甚麼？
- 前端想轉全端，應該先學 node.js 還是 python
每個人的背景經歷都不一樣，上述的類似問題也可以問很多人來蒐集到不同訊息，但想想每次選舉後都會發現同溫層的厚度， 若問題明確，ChatGPT 或許有機會從更符合自身需求的角度做分析給答案
想複習某個特定觀念時
找官方文件或關鍵字查到的部落格，通常會從很久很久以前…說起，問資深前輩時，又常遇到想 ”關心” 你怎麼連這個基本觀念都不清楚、或是貼心送上一篇你剛剛看過的部落格文章
沒耐性慢慢爬文時，貼身家教 ChatGPT 也會是超級好朋友，我問過像是
- vue 的父子元件，同時有呼叫 api 的話，生命週期順序會是如何進行?
- 貼一段 React 的語法，請 ChatGPT 說明背後的邏輯跟應用場景
希望有人幫你 code review 或校稿時
不是每個菜鳥都有幸擁有 “資深前輩” ，我第一份前端工作的第 2 個月，在什麼都還不會的情況下，就成為全公司最資深前端，當時遇到問題真的是超級無助，只能祈禱下的關鍵字剛好賽到正確答案，更瞎的是很多時候正確答案已經在我眼前了我卻不知道
對於新手工程師，這些都是我很常做的事
- 貼上一段自己的垃圾 code。 “請優化這段程式碼”
- 貼上一段看不懂的前人 code。 “請說明這段程式碼在做甚麼”
- 貼上一段 api 回傳值、以及我最終想要的資料內容及格式，問他如何實做
- 所有的錯誤訊息都可以直接貼給 ChatGPT ，我自己貼過包含瀏覽器工具人 F12 的沒看過紅字，或是在 terminal 安裝、執行各種指令時的 Error，就算 ChatGPT 無法直接解，從他的回覆，還是可以獲得一些蛛絲馬跡（ 傳說中珍貴的關鍵字 ）
- 貼上一段文章內容。“請提供 5 個合適的標題 / 標語，25個字以內 ”
ChatGPT 讓人無言以對的時候
只給了一半的答案
很多時候，ChatGPT 給的最佳解，是符合大多數人的需求，並不符合你現在的實際需求
有些功能網路上的中文資源沒有想像中的多，而且貪心又懶惰的複製貼上工程師，就想要可以直接貼過來小改的程式碼，而不是拿給原生 HTML + JavaScript，還要自己改成 Vue
在開發無障礙網頁的時後，要做導盲磚的功能，雖然當時跟 ChatGPT 來回了 20 段對話，千里跋涉終於產出完全符合需求的程式碼，如果是自己在 google 找，花的時間可能變成 4 倍，感恩惜福
補充導盲磚是什麼：對於 ”聽網頁“ 的使用者，導盲磚會是進到網頁後第一個聽到的資訊，約莫是 “Ｕ會回到主選單、Ｃ會跳到主要內容、Ｌ到次要選到、Ｆ到 Footer ” 這樣
當時的需求，導盲磚只會在同一頁裡面跳轉、不會有換頁的情境
同時，使用者會用鍵盤直接跳到他要的地方，也不是用滑鼠慢慢滾
最後，希望導盲磚可以拉出來變成共用元件
貼身家教 ChatGPT 在過程中提供了以下可愛的的小狀況
先提供了頁面跳轉的實作方法 （一看就不是我要的）
假設並去偵測滑鼠滾動網頁 （一看也不是我要的）
註冊事件卻沒正確銷毀 （瀏覽器噴錯）
當 ChatGPT 提供的答案不是你要的時候
那不叫做失敗，我只是發現哪些方法做不出電燈來 ~愛迪生~
約莫是自己提問的方式，讓 ChatGPT 不明不白，所以給了方向錯誤的答案
這種情境最簡單，在發現的第一時間，直接中斷他，重新提問（還不用擔心他會氣你沒禮貌）
附上我打斷 ChatGPT ，重新提問的瞬間
ChatGPT 鬼打牆的時候
也是在無障礙網頁開發遇到障礙的時候，把原本的程式碼貼給 ChatGPT，並提出需求， ChatGPT 來來回回應對了 3 次，提供的解答都是我一開始貼的程式碼。最後才說 ” 我一開始的程式碼看起來沒問題，要我去檢查瀏覽器 ” ？？？！
當你的問題太少見的時候
ChatGPT 其實就在茫茫網路海中幫你篩選出他認為的最佳解
但要是你的問題從沒人問過或討論過。那也很容易得到答非所問的無效解答
就是剛才那個無障礙網頁的栗子，當時網頁是用前端好朋友 element ui 這個元件庫開發。他的 table 表格跟 from 表單，本來包的層級就不符合無障礙的需求，所提供的自定義屬性或事件，也都無法寫到符合規範 ( 像是無障礙的 <label> 跟 <input> 必須當鄰居，但 element ui 提供的<label> 跟 <input> 是祖孫三代層級，還無法調整 = = )
在跟 ChatGPT 對話的過程，他只能不斷提供符合無障礙規範的寫法 ( 但放到 element ui 的原件上網頁會直接死給你看 )、或是提供 element ui 的官方用法 ( element ui 官方文檔已經在我的最愛了請問是在哈囉？！ )
但這部分其實在 google 搜不太到相關內容時，就不該對貼身家教抱持著過高的期待
p.s 後來 table 只能捨棄 element ui，自己寫香草版的
google 搜尋比 ChatGPT 好用的時候
你知道某篇部落格有答案、或是你要的是一句明確的語法時
在 google 上打模糊的關鍵字，很容易找到當時那篇文章，通常會出現在前三篇，但如果一樣模糊的去問 ChatGPT ，他會很大方的從從前從前說起，等他提到那句語法的時間，都可以從 google 找到的答案，複製貼上、然後跑出結果了。
自己的經驗是使用前端好朋友 nvm 的情境。
在短短一年內，我在三台電腦上安裝過 nvm， 跟切換不同版本的 node，甚至有過一天內切換 2~3 個版本的 node 來開發不同專案。
他如何管理 node 版本、切換的語法也都有模糊的印象。
nvm 對我來說類似最熟悉的陌生人，但許久未用的某一次，忽然要在新電腦上切換 node 版本，我知道要先確認這台電腦有沒有安裝 nvm、沒有就安裝，有就確認目前這台電腦有哪些 node 版本，有的話就切換版本、沒有一樣就安裝。
整個過程最多只需要 5 句指令。
在跟 ChatGPT 對話的同時，沒耐性的一起在 google 搜尋 “nvm node”，前 5 篇就跳出我需要的所有資訊，與此同時， ChatGPT 還在天橋下說書。
但這樣的前提是，在 ChatGPT 還沒問世時， google 搜尋 “nvm node” 的前 10 篇文章可能都被我看過三四五六次了，所以會第一時間知道哪一篇有我要的答案，如果是第一次搜尋，加上看文章的時間，或許 ChatGPT 的一篇說書中就會提供解答了
所以我其實很常問了困難問題後，先去倒個水、聊個天、上個廁所、再回來收割答案
結語
很多時候 ChatGPT 不見得能給出正解，即使是這樣，通常都還是能從他提供的資訊中找到蛛絲馬跡，繼續問下去，或是用正確的關鍵字問 google
如果問了很偏的蠢問題，從 ChatGPT 給的回覆，通常可以慢慢導回正確的方向；而且，臉皮跟春捲皮一樣薄的新人，很多時候其實是蠢問題說不出口
工作上，雖然跟他對話也有很多翻白眼的時候，但至少不用擔心他會玻璃心碎或跑去跟主管告狀
三個月的使用心得，算是非常滿意，除了工作上的技術問題，生活的雜七雜八疑難雜症懶得看太多文章，我也會直接丟給 ChatGPT
唯一要留意的是提醒自己，
不要因為方便，失去判斷及獨立思考能力
如果喜歡我的文章，可以拍拍手讓我知道，更歡迎你追蹤並持續關注更多的分享。
想轉職工程師、對養成班有興趣、或對前端工程師有興趣的朋友們也歡迎聊聊
網頁開發世界不孤單，我們下篇文章見！