你說你早就會了!? 啊我就爛啊

這篇文章主要會根據我的背景以及我的工作環境，討論那些我認為自己應該早點學習的前端技術，肯定不是每個人都適合，加上寫這篇文章的時候我只是個菜雞，如果你也是設計轉前端或是不確定是否要轉職前端的新手的話，也許可以當作一個參考，繼續看下去。

工業設計 x 平面設計 => 網頁前端(?

目前是網頁設計師，工作剛滿一年也是在網頁領域的第一份工作，大約接觸網頁一年半左右。最初是去”知名”的線下實體課程上網頁課程，內容包含HTML、CSS、jQuery，運氣不錯遇到很會教的老師打了不錯的基礎，後來覺得學得還是不夠，所以毅然決然買了線上課程學 JavaScript，從實體課程到後面的線上課程，整個學習的時間大概是半年多一點之後，因為是沒有工作的狀態，所以趕緊弄了一個個人網站後就直接開始找工作，也從中稍微了解該補足甚麼技術，反正最後很幸運有順利找到工作XD。

原本是學工業設計，對於設計算是有粗淺的見解，上一份工作是平面設計，當時的工作除了平面外混了一些網路行銷跟其他沒什麼關連的東西 (例如策展 XD)，設計轉職走前端我覺得向性蠻合的，畢竟畫面和使用者體驗都是前端的重點之一，能夠更加理解設計師想要甚麼，對於走前端真的會有蠻大的幫助。

至今前端三兄弟都算是有基本的認識，工作上有遇到任何問題原則上都可以自己找到解決方式。

接下來，來回顧一下這一年學習的技術順便檢討有哪些需要再精進的部分。

怎麼是網頁設計?

我目前的工作是網頁設計。
相信大家能理解雖然叫做「網頁設計」，每間公司實際的工作內容還是會有差別，有的有設計沒切版，有的有切版加動畫沒設計。

而我這份工作是以切版為主(小聲說:工作量不多)，JS 的部分幾乎可以說是沒有，通通都靠後端寫，但是當時考量到個人能力需要磨練加上JS基礎很薄，所以就理所當然地進來練功了。

這邊有一點必須要先提，由於蔽司並不是資訊或軟體業，團隊對於前端的技術要求不高，(所以我也沒有甚麼特別的開發流程可以分享XD)，因為可以有更大的空間做中學，加上我不想有過長的空窗期，這是當時我選擇進來的原因。
所以如果你覺得有點擔心 JS 的能力不足，又想要早點工作的話，也可以跟我一樣選擇類似的團隊，進去好好的把該學的都學起來，順便磨練一下切版速度，反正不管怎麼做都還是要自我鞭策。

接下來簡單介紹一下我這份「網頁設計」的工作實際上做了哪些事情。

  • 活動網頁切版
  • 官網與各種相關網站維護
  • 內部系統維護與設計
  • 跟網頁無關的雜事

原則上工作內容是以上幾種在跑而已，雖說是網頁設計，大概第三個月的時候，因為有在學 JS，所以直接被後端拉去一起開發內部系統，前端是使用 Vue，我除了負責畫面設計還有少部分接後端的資料處理，所以也算是被強迫推去做前端的東西 (但我個人是蠻開心的XD)，還好有強大的後端支援，後來還有接著一起做一個規模較大的內部新系統開發，一樣是使用Vue開發，當時甚麼都不懂各種崩潰 XDD。

目前曾經用過的網頁相關技術

  • 後端 (其實我現在還是不懂，我只是知道前端會用到的東西大略該怎麼尋找答案)
    • Laravel
  • 前端JS框架
    • Vue 2
    • jQuery ( 我是函式庫 ˋˊ)
    • Lodash ( 我也是函式庫 ˋˊ)
  • CSS框架
    • Bootstrap 4
    • TailwindCss 2 ( 大推 )
  • 自動化工具
    • Laravel mix
    • Gulp
  • 其他 (我覺得各自分出類別有點麻煩XD )
    • Electron
    • Pug
    • SCSS
    • 前端三兄弟 (HTML, CSS, JS)
    • Git、Git flow
    • webpack

可以看的出來實際接觸到的技術算是前端了，但這份工作正式上工前，上面所提到的除了前端三兄弟和SCSS之外，我通通都不會XD，所以這一年來在工作中學了不少新東西，但是，我認為知識量還是遠遠不足，尤其是前後端合作的部分更是有很大的進步空間QQ。

那些我應該早點開始學習的技術 (啊我就廢

這邊不會提到跟設計相關的內容，我相信你的設計能力肯定比我還強。

資料夾結構、自動化工具、打包工具、套件管理 Webpack、Gulp、parcel、npm、yarn…

好像一次包了太多東西在這邊，但我覺得這些東西感覺放一起就好了XD，自動化工具、打包工具、套件管理，這些工具不僅僅只是提升開發效率，還有減少重複執行的動作，他能帶來的效益實在太大了，能夠理解打包工具及套件管理的生態蠻重要的，可以從哪邊修改輸入或輸出的位置，理解資料夾的結構，知道開發資料夾在哪，怎麼調整檔案的流向非常重要。

我剛開始是直接用後端建好的 Laravel 專案，完全不知道怎麼新增套件，在 SCSS 裡連結圖片位置要怎麼打，根本搞不懂為甚麼打個 npm run hot 是在執行甚麼。
基本上自動化、打包工具的概念都差不多，稍微了解之後，即使用了另一套也可以很快就上手。所以我認為至少要稍微看得懂 webpack 的進入檔在寫甚麼，從哪邊打包並存到哪裡，其他的東西慢慢的就會越來越懂，還有 package.json 也要理解在寫甚麼，npm、yarn的生態也要稍微瞭解。
至少我是這樣慢慢理解的QQ。

這個東西理解了之後，在使用框架時才不會看不懂，也能玩更多有趣的設定。
如果真的完全看不懂 webpack 在寫甚麼的話可能要先理解 npm，可以看懂 package.json 是你的第一步。

附上資料多到一直看不下去的 webpack 官網 https://webpack.js.org/
Gulp https://gulpjs.com/
Parcel https://parceljs.org/
npm https://www.npmjs.com/

Git、Git flow

Git

在我開始工作前其實有學過 Git，但是從沒有跟人有團隊合作的經驗，只會add, commit, push, pull，實際使用時超卡，超怕會搞壞的，真正的在工作上使用時才會發現不知道怎麼處理檔案衝突，merge rebase的差別，所以當時碰壁的時候認真的去玩了一下 Learn Git Branching，在有一點團隊實際使用經驗之後重新玩一次，有時候會突然理解”為甚麼會用這個語法”或是”原來要用這個語法”。

超級推薦學習 Git 的好幫手 Learn Git Branching

Git flow

Git flow 應該可以說是各個團隊都會有一點不同，但功用就是讓團隊可以更有規範的管理 Git，更容易從commit紀錄看出每個人做了哪些事情，所以建議至少要稍微了解是怎麼做的，實際遇到的時候再去搜尋會比較有體會。

英文

沒錯，英文其實是我覺得學習前端最重要的工具，畢竟英文的資源非常多，Stackflow 上面有超多熱心的人回覆問題，甚至可以直接上 Github 去看別人發的 issue，我常常在那邊找到問題的解答，看不懂英文至少可以用翻譯軟體撐一下，習慣看英文才更有機會找到問題的答案，更何況大多的文件其實都寫得好好的。

順便推薦不錯的翻譯軟體插件 Rememberry

最後是，我在這一年加入了不少前端社群，進而體認到社群的強大，能夠有一個社群來陪我一起成長，是我在學習前端很大的助力，我通常不會用來問”xxx 為甚麼跑不出來”(反正最後會發現只是打錯字，還是不要拿出來耍白癡XD )。對我來說社群的用途是拿來看看別人都問甚麼問題、在關注甚麼技術，更新資訊的速度才能更快，也不會一直躲在自己的舒適圈裡，有時候看到大神的解說還可以去朝聖一下，順便更新一下待學習的清單，只是打開來看個訊息也能收益良多。

社群上會聊到的不只是怎麼寫程式、該怎麼提升效率或可讀性、基於甚麼樣子的情況下用哪種語法寫更好的問題，還有很重要的思維與前端生態等，偶爾打開來看看或直接上班聊起來(?)，並且去搜尋相關資料並吸收，才不會閉門造車，都寫前端了怎麼可以不擁抱網路呢!

以上是菜雞如我的分享，如果你有覺得更應該早點學習的東西，請跟我分享!

最後推一下不錯的資源

六角學院 - 前端入門的超讚學習資源，可以問爆問題的超熱心課輔系統，不過能自己找到解法才是正確的心態!
MDN - 最讚的前端教科書，記得要看英文版比較正確!
CS50 - 哈佛計算機概論課程，超推薦轉職的朋友，內容有趣、社群討論活躍，來場超讚的通識課吧!

網路上的資源很多，有個領你進門的課程真的不錯，當然最重要的還是要動手實作、自己發想題目，學得更多，加油!

最後附上我的個人連結，如下


本文章若有任何資訊誤植或侵權，煩請告知，我會立刻處理。