---
url: /blog-program/do-you-want-to-do-a-side-project.md
description: 分享一下鱈魚的 Side Project 靈感與發想。(๑•̀ㅂ•́)و✧
---

![do-you-want-to-do-a-side-project](/do-you-want-to-do-a-side-project.webp){.cover}

# 要不要來點 Side Project 啊？ԅ(´∀\` ԅ)

到底要不要做 Side Project 是一個老生常談的問題。%( •̀ ω •́ )✧%

其實廣義來說，任何工作以外的事情都可以算是 Side Project，例如學習一門新技術、寫部落格、練習運動等等。

本文的 Side Project 定義為「與專業相關，但非上班時間做的任何專案」，並聚焦於 Web（Vue）與 JavaScript 領域。%(｡･∀･)ﾉﾞ%

其他領域我就不知道了，需要請教其他大大。%(´,,•ω•,,)%

## 💭 為甚麼要做 Side Project？

來說說我覺得 Side Project 的好處！%(๑•̀ㅂ•́)و✧%

不過這些好處因人而異，每個人標準不同，參考參考即可。

### 創造機會

先不說程式就像學外語一樣，多寫多思考，可以增進程式閱讀速度，也可以縮短將思緒轉換為程式碼的時間。

工作開發專案時，如果想要導入新技術或工具，通常需要考慮供應商綁定、開發流程、團隊接受度等等問題。

所以會保守看待，不會輕易導入，自己練習就不用擔心這些問題啦。

可以放飛自我，在練習的過程中累積經驗。%ヾ(⌐■\_■)ノ♪%

### 做好準備

> 機會是留給準備好的人

這句話雖然很老梗，但依然正確。

當機會不講武德的出現時，除了自己沒自信接，別人也可能不敢交給你，Side Project 就是一個很不錯的練習機會。

也可以趁機練習「軟實力」部分：

1. 找資料：如何快速搜尋並有效率的篩選相關資訊

2. 分析問題：快速定位問題並提出解決方案

3. 歸納、統整文件：將解決方案或使用說明整理成文件，讓他人能夠快速理解

內容很少很簡單無所謂，重點是練習的過程。%(๑•̀ㅂ•́)و✧%

### 單純喜歡

\~~以上是寫報告用的正經理由，看看就好，我自己的主要原因也是這個%( ﾟ ∀。)%。~~

沒有甚麼動機能夠比「有興趣」來得更有動力了。%(´,,•ω•,,)%

就像是小時候躲在被子裡偷完 PSP，或者是再怎麼累都能夠凌晨爬起來偷玩電腦一樣。

不用別人講自己會非常勤奮，但是別人要求的進度或項目總是會能拖就拖，不看到死線絕不開工。%ᕕ( ﾟ ∀。)ᕗ%

## 💡 靈感哪裡來？

不用擔心別人做過，重點是自己的練習與實踐，過程中一定會有各種收穫，甚至新靈感。

以下從門檻高至低介紹，希望大家能夠找到自己喜歡的部分。%(｡･∀･)ﾉﾞ%

### 解決日常問題

記錄下你或周圍朋友、家人常遇到的問題，思考可以怎麼應用技術解決這些問題。

不過使用的技術可能會相對複雜，例如伺服器、資料庫、雲端託管等等，需要更多的背景知識，不過這也是一個很好的學習機會。

反正做壞了也沒人會怪你，放手做做看吧。%ლ（´∀\`ლ）%

\~~有人酸你，那是他 G8，不是你的問題~~。ᕕ( ﾟ ∀。)ᕗ

::: tip
前端可以練習使用 Firestore 儲存資料，就可以再沒有後端的情況下儲存資料，完成一個完整的應用程式喔。%( •̀ ω •́ )✧%
:::

### 從模仿開始

模仿是一個很好的開始，可以從中學習到很多東西，但是門檻高低不一，需要斟酌斟酌。%(◜௰◝)%

#### 做一個網頁版小畫家

這個有點難度，不過可以先從一個簡單的功能開始，例如圖片編輯、濾鏡等等。

最後目標挑戰一下打造一個網頁版 Photoshop。

可以玩到很多很有趣的圖學知識和一些網頁性能的技巧。

[Photopea](https://www.photopea.com/) 就是一個很好的例子，來玩玩看吧！%ˋ( ° ▽、° )%

#### 模仿某個 UI 套件

例如 [Quasar](https://quasar.dev/)、[Vuetify](https://vuetifyjs.com/en/) 等等，也可以挖挖看原始碼學習，不過在沒有說明的情況下，很不容易看懂就是了。%( ・ิω・ิ)%

#### 實作 utility libraries 某個的 API

例如 [VueUse](https://vueuse.org/) 這類套件，裡面很有趣且實用的 API，找一個自己覺得有趣的 API 實作看看。

實作的過程不只可以學到一些少見的[瀏覽器 APIs 知識](https://developer.mozilla.org/en-US/docs/Web/API)，還可以臨摹開源大神們的寫作習慣與 API 設計風格，進而增進自己的程式能力。

以下舉幾個很有趣的 API：

* [`useElementByPoint`](https://vueuse.org/core/useElementByPoint/)：取得滑鼠所在位置的元素
* [`useMagicKeys`](https://vueuse.org/core/useMagicKeys/)：註冊各類快捷鍵、組合鍵
* [`onLongPress`](https://vueuse.org/core/onLongPress/)：長按事件
* [`onClickOutside`](https://vueuse.org/core/onClickOutside/)：點擊元素外部事件
* [`useRefHistory`](https://vueuse.org/core/useRefHistory/)：記錄 ref 的歷史數值
* [`makeDestructurable`](https://vueuse.org/shared/makeDestructurable/)：讓物件變為可以矩陣解構或物件解構
* [`useVModel`](https://vueuse.org/core/useVModel/)：簡化元件定義 v-model 過程。（不過現在有 [defineModel](https://vuejs.org/api/sfc-script-setup.html#definemodel)，這個 API 可以功臣身退了）

查看原始碼前先想想看這些 API 如何實現？又考慮了哪些邊界情境呢？%( •̀ ω •́ )✧%

::: tip
我的[酷酷的元件](https://chillcomponent.codlin.me/components/)內就大量使用了 VueUse API

歡迎來玩玩看。%(/≧▽≦)/%
:::

### 從興趣出發

這個動機最強，但是也是門檻不一，因為簡單可以很簡單，要複雜也能很複雜。

以下是一些我曾經看過的酷酷題目。%(⌐■\_■)y%

#### 寶可夢圖鑑

可以查閱各種寶可夢資訊的網站，進階一點可以挑戰模糊搜尋、圖片辨識等等功能。

#### 網頁調音器

分享者本身的興趣是音樂，融合自身專長打造了一個網頁調音器，方便快速校正吉他。

超酷超強！(≖‿ゝ≖)✧

#### 生成式藝術

英文為 Creative Code，利用程式碼產生各種有趣的圖形或者藝術品。

[Creative Coding TW](https://creativecoding.in/) 有很多有趣的資訊與作品，大家可以參考參考。

#### 梗圖編輯器

方便快速製作梗圖的網站，一言不合就梗圖。XD

例如：[Meme 梗圖倉庫](https://memes.tw/)、[Meme Generator](https://imgflip.com/memegenerator) 等等。

#### 網頁自動化

這裡的例子為 [Automa](https://www.automa.site/)，他是一個瀏覽器外掛，使用節點拖拉的方式，可以很輕鬆、直覺的實現自動化網頁操作。

#### 桌面自動化

網頁可以自動化，桌面當然也可以自動化，做個像是按鍵精靈的東西，可以幫你自動化一些重複性工作，~~刷個遊戲甚麼的~~。%∠( ᐛ 」∠)\_%

目前找到較為成熟的套件為 [Nut.js](https://nutjs.dev/)，歡迎大家多多補充！%(´▽\`ʃ♡ƪ)%

## 🧰 練習技術或套件

最後就是門檻最低、相對容易開始的部分，我會依序介紹 JS 生態圈中的套件並附上連結。

大家一起來看看吧。( ´ ▽ \` )ﾉ

### 動畫

動畫是網頁設計不可或缺的一部分，以下是一些常見的動畫套件。

#### 動畫控制

* [GSAP](https://gsap.com)、[Anime.js](https://animejs.com)

可以控制各種 DOM 或屬性動畫，例如 CSS、SVG 等等。

GSAP 功能最多也最強大，不過進階功能要收費，Anime.js 功能雖然沒那麼多，但是用到目前為止覺得很夠用。

#### 精緻動畫

* [Lottie](https://lottiefiles.com)、[Rive](https://rive.app)

有獨立的動畫製作工具，方便設計、管理極為複雜的動畫，並在網頁提供尺寸更小（相較影片）、自定義程度更高且效果一致的動畫。

#### 動畫工具

* [Theatre.js](https://www.theatrejs.com)

方便直接在網頁上調整、設計特殊元素動畫，例如 three.js 內的 3D 物件，定位上比較接近工程師。

### 多媒體

#### 聲音

* [Tone.js](https://tonejs.github.io)

可以製作各種音樂、音效，並融合於各種網頁互動。

#### 繪圖

* [p5.js](https://p5js.org)、[PixiJS](https://pixijs.com)

可以製作各種 HTML、CSS 難以實現的複雜繪圖。

p5.js 比較像是在畫布上作畫，Pixi 則是將將畫布視為一個場景，加入各類物體進行繪製。

很推薦大家看看這本電子書：《[Nature of Code](https://natureofcode.com/introduction/)》

書中基於 p5.js 開發，介紹了很多有趣的知識與開發技巧，並用程式碼實現自然界的各種現象。

例如物理模擬、生物遺傳等等，超級有趣！%◝(≧∀≦)◟%

#### 3D

* [Three.js](https://threejs.org)、[Babylon.js](https://www.babylonjs.com)

開發製作各種酷炫的 3D 互動、遊戲等等。

::: tip
先前曾經用 Babylon.js 製作[精靈球工作臺](https://side_project.gitlab.io/pokeball-workshop/)
:::

#### 遊戲

* [Phaser](https://phaser.io)、[PlayCanvas](https://playcanvas.com)、[GDevelop](https://gdevelop.io)

可以製作各種網頁遊戲，但是門檻可能會高一點。

不過因為好玩，所以通常更有動力。%(´,,•ω•,,)%

::: tip
我先前出的書：《[Arduino自造趣：結合 JavaScript x Vue x Phaser 輕鬆打造個人遊戲機(iThome鐵人賽系列書)](https://www.books.com.tw/products/0010942459?sloc=main)》，最後一章的[貓狗大戰遊戲](https://youtu.be/OpayalfQ124?si=XeiACQL9xzPhdxzP\&t=170)就是使用 Phaser 開發的呦。( •̀ ω •́ )✧
:::

### 其他領域

JS 得利於瀏覽器與 V8 引擎的發揚光大，觸角也延伸至其他領域。

不過這個部分需要其他領域的相關知識，有興趣再加減嘗試看看囉。%ヾ(◍'౪\`◍)ﾉﾞ%

::: danger
且記「JS 可以實現，不代表適合用 JS」，如果要深入實作或者打造產品，還請選用合適的語言。

例如：機器學習 Python 資源最多；嵌入式系統就看廠商 SDK 語言，通常都是 C/C++。
:::

#### 機器學習

* [TensorFlow.js](https://www.tensorflow.org/js?hl=zh-tw)、[Transformers.js](https://github.com/xenova/transformers.js)、[ml5.js](https://ml5js.org)

在瀏覽器上實現臉部、語音、骨架辨識等等有趣的功能。

#### 嵌入式系統

* [Johnny-Five](https://johnny-five.io)、[DeviceScript](https://microsoft.github.io/devicescript/)

用來控制或開發各種微控制器或單晶片，例如 Arduino、ESP8266、ESP32 等等。

不過 Johnny-Five 需要電腦（Node.js）與硬體持續通訊，DeviceScript 則直接撰寫 TypeScript，編譯後燒入硬體的韌體中。

#### IoT

* [MQTT.js](https://github.com/mqttjs)、[matter.js](https://github.com/project-chip/matter.js/)、[Aedes](https://github.com/moscajs/aedes)

可以製作 IoT 應用程式，例如智慧家居、智慧農業等等。

我曾經使用 Aedes 建立一個分散式系統，可以遙控並收集數百台 IoT 裝置資料，非常有趣。ヾ(◍'౪\`◍)ﾉﾞ

#### 外掛

* [瀏覽器外掛](https://developer.chrome.com/docs/extensions?hl=zh-tw)、[VSCode 外掛](https://code.visualstudio.com/api)

製作瀏覽器外掛、VSCode 外掛或各類開發工具的外掛，提升工作~~~或摸魚~~效率。%ᕕ( ﾟ ∀。)ᕗ%

#### 桌面應用程式

* [Electron](https://www.electronjs.org)

可以使用前端生態系，建立 UI 豐富的跨平台桌面應用程式。

缺點是記憶體消耗較高、程式體積也大。 %(́◉◞౪◟◉‵)%

::: tip
知名的 [VSCode、Slack、Notion 等等](https://www.electronjs.org/apps)的桌面版程式，就是用 Electron 開發。
:::

#### 手機應用程式

* [Capacitor](https://capacitorjs.com)、[NativeScript](https://nativescript.org)

可以用網頁技術開發手機應用程式，因為有一層轉換框架，所以一定會受限於框架本身。

如果框架沒有提供對應功能，就必須自己實作原生模組，這部分就需要原生開發知識。

但是若只是一些簡單的資料展示，沒有性能需求的應用程式，可以考慮使用。

Capacitor 基於 WebView，其實就是 APP 內嵌網頁。優點是可以使用前端現有生態圈，缺點就是性能會比原生差得多。（我自己實測 Android 14 很順，iOS 17.4 會有點卡）

NativeScript 則是編譯為原生程式碼，性能會比 Capacitor 好，但是限制也比 Capacitor 來得多。

#### Headless CMS

* [Directus](https://directus.io)、[Strapi](https://strapi.io)

可以快速建立 CMS、產生資料 API，而且內建一個管理後台。

讓使用者可以在沒有專職後端的情況下，建立一個資料單純的簡易系統。

如果前端想要跨足後端領域，個人認為這是一個很不錯的起頭。

可以從中學習到 API 設計、資料規劃、權限規劃等等後端常見的入門知識。

Directus 後台基於 Vue 開發，Strapi 後台則是基於 React 開發，兩者都有很高的客製化能力。

## 🛠 實用資源

分享給大家一些我常看的電子報或網站。%(◍′ω\`◍)%

### 電子報

英文的話有 [JavaScript Weekly](https://javascriptweekly.com/)、[Frontend Focus](https://frontendfoc.us/)、[Node Weekly](https://nodeweekly.com/)，可以收到各種 JS 或前端生態圈的最新消息與技術發展。

中文的話則是 [ExplainThis](https://www.explainthis.io/zh-hant)、[Star Rocket 科技創業週報](https://blog.starrocket.io/star-rocket-newsletter/)、[VK 科技閱讀時間](https://vickyho.com/)，可以看到各類科技圈的大小事。

### 參考資料

有空我會逛逛 [Codrops](https://tympanus.net/codrops/)、[Awwwards](https://www.awwwards.com/collections/)、[Codepen Spark](https://codepen.io/spark)。

以上網站集結了全世界的優秀作品和技術探討，很適合作為靈感或臨摹的參考。

### 部屬平台

常用的部署資源則有 `Cloudflare`、`Firebase`、`Zeabur`。

::: tip
Zeabur 是台灣的雲端服務商，來推一下自家人。%(/≧▽≦)/%
:::

## 總結 🐟

* 建立靈感庫，以免忘記點子
* 不用擔心別人做過，重點是自己的練習與實踐，過程一定會有各種收穫，甚至新靈感
* 先求有再求好，否則永遠無法開始
* 別怕做不出來，慢慢研究，例如：[派對動物](https://www.youtube.com/watch?v=PPWyUhT6gRk\&ab_channel=%E9%B1%88%E9%AD%9A)就是我 2020 年想到的點子，直到 2023 才有能力做出來。%(´,,•ω•,,)%
* 有餘力的話可以把過程寫成文章，除了當學習筆記，也可以作為作品集

感謝您讀到這裡，如果您覺得有收穫，歡迎分享出去。%(´▽\`ʃ♡ƪ)%

一起來做 Side Project 吧！%✧⁑｡٩(ˊᗜˋ\*)و✧⁕｡%