🔧 阿川の電商水電行

Shopify 顧問、維護與客製化

💡

小任務 / 單次支援方案

單次處理 Shopify 修正／微調

⭐️

維護方案

每月 Shopify 技術支援 + 小修改 + 諮詢

🚀

專案建置

Shopify 功能導入、培訓 + 分階段交付

👉 瞭解詳情 / 免費諮詢

小編精選 - 技術文章翻譯 · 09月05日

如果有人問我如何學習編程，我會這樣回答：

這是一個偶爾會被提問的問題，而我的答案很簡單。

「用不同的方法多次製作同一個應用程式（主題）」。

為什麼要重複製作相同的東西

程式設計學習中常見的失敗是「教學疲勞」。

製作一個基於 React 的聊天應用程式，然後再使用 Rails 製作電子商務網站，再製作部落格……只按照教學步驟製作而已，幾乎什麼都沒學到。雖然看起來能運作，但並不覺得能從頭開始製作。

相較之下，我認為專注於製作一個待辦事項應用程式（或任何其他主題）會更有效。

同一個主題的製作使需求更為明確，因此可以集中於技術的差異。這樣可以與上次的實作做比較，並逐步增加複雜度。作為作品集的進展也容易被看到。

推薦的學習步驟

步驟1：使用純 HTML + PHP 製作

從最簡單的開始。

// todo.php
<?php
session_start();
if (!isset($_SESSION['todos'])) {
    $_SESSION['todos'] = [];
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['task'])) {
        $_SESSION['todos'][] = $_POST['task'];
    }
}
?>
<!DOCTYPE html>
<html>
<body>
    <form method="post">
        <input type="text" name="task">
        <button type="submit">新增</button>
    </form>
    <ul>
        <?php foreach ($_SESSION['todos'] as $todo): ?>
            <li><?= htmlspecialchars($todo) ?></li>
        <?php endforeach; ?>
    </ul>
</body>
</html>

這樣可以接觸到表單提交、會話管理等網頁應用的基本機制。

步驟2：使用純 PHP + MySQL 進行持久化

將數據從會話轉移到資料庫。

// todo_db.php
$pdo = new PDO('mysql:host=localhost;dbname=todo', 'root', '');

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['task'])) {
        $stmt = $pdo->prepare("INSERT INTO todos (task) VALUES (?)");
        $stmt->execute([$_POST['task']]);
    }
    if (isset($_POST['delete'])) {
        $stmt = $pdo->prepare("DELETE FROM todos WHERE id = ?");
        $stmt->execute([$_POST['delete']]);
    }
}

$todos = $pdo->query("SELECT * FROM todos")->fetchAll();

可以瞭解 SQL 的基本概念、資料庫連接及 CRUD 操作的基本概念。

步驟3：使用 Laravel 重製

開始使用框架。

// routes/web.php
Route::get('/todos', [TodoController::class, 'index']);
Route::post('/todos', [TodoController::class, 'store']);
Route::delete('/todos/{id}', [TodoController::class, 'destroy']);

可以學習 MVC 模式、路由、遷移、ORM 等。

步驟4：在租用伺服器上公開

嘗試將製作的應用發佈出去。

# .htaccess 的設定
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

透過 SFTP 上傳到租用伺服器（月費約為 500 元），設定自訂網域，導入 SSL 憑證，通過 .env 檔案進行環境變數管理，學習實際運用所需的知識。接觸到網域仲介服務的混亂複雜 UI 也是這個階段的時機。

在公開之前，建議調查 SQL 注入和 XSS 等問題，並回顧整個源代碼。

步驟5：使用 Laravel (API) + Vue.js 製作

嘗試將後端和前端分離。

// TodoList.vue
export default {
  data() {
    return {
      todos: [],
    };
  },
  mounted() {
    fetch("/api/todos")
      .then((res) => res.json())
      .then((data) => (this.todos = data));
  },
};

可以學習 API 設計、CORS、非同步處理和元件設計等。

步驟6：使用 Spring Boot + React 製作

嘗試使用不同的語言達成相同的功能。

@RestController
@RequestMapping("/api/todos")
public class TodoController {
    @GetMapping
    public List<Todo> getTodos() {
        return todoService.findAll();
    }
}

可以學習靜態類型語言、DI 容器、註解等。

步驟7：構建 CI/CD 管道

使用 GitHub Actions 或 CircleCI 實現自動部署。

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Build and Deploy
        run: |
          npm run build
          npm run deploy

推送後自動執行測試、構建及部署。學習本番環境和預備環境的區分、回滾策略、以及安全掃描（依賴關係的漏洞檢查）等。

步驟8：持續添加功能

使用自己喜歡的技術棧，實現用戶認證、即時同步、標籤功能、搜索功能、手機應用版本等。

或者嘗試設定定期備份、導入錯誤監控工具等。

若能做到這裡，開發的基礎應該已經掌握了。

為什麼是待辦事項應用

有些人認為「製作待辦事項應用不會學到什麼」，但實際上並非如此。

待辦事項應用包含了 CRUD 操作（創建、讀取、更新、刪除）、狀態管理、列表顯示、表單處理、數據持久化等，在實務中都非常重要的基本要素。

任何應用都會從基本的 CRUD 操作開始。

不過，並不必然需要堅持於待辦事項應用。如果有重複制作的主題，任何內容都可以。

參考的學習資源

Django Girls 教學

這真的非常推薦。雖然是教學 Python 和 Django 框架，但其實學得的價值遠超過語言和框架的使用。

這個教學從「互聯網是怎麼運作的？」開始，對命令列的使用有著輕鬆易懂的解釋。「黑色螢幕並不可怕」的感覺說明，涵蓋到「資料夾是什麼？」「檔案是什麼？」等基本概念，連出現錯誤時的處理方式都有涵蓋。「當出現這種錯誤時，不用慌張」的感覺。

這段文字口語化且友善，傳遞出「程式設計並不難」的訊息。

對於想學 PHP 或 Java 的人，我推薦先閱讀這本。它讓你獲得程式設計的基本思維、網頁應用的運作原理以及開發環境的構建方式等，這些都是不論何種語言都需要具備的知識。

這雖然是製作部落格應用的教學，但如果能理解這些，無論什麼語言，應該都能製作出待辦事項應用。

在學習後重新閱讀，你會更能感受到這段文字以完美的粒度向初學者解釋了各種概念。

如果因為這個教學而對互聯網的運作產生更強烈的興趣，可以考慮讀讀「網路為何能連接？」。雖然內容相當豐厚，但非常有趣。起初不必急著理解，略讀後再回頭研讀會是個好主意。

官方文件

遇到問題時，首先查看官方文件是最快的。

書籍

意外的是，Kindle Unlimited 中有很多技術書籍值得一讀。普遍的書籍雖然價格稍高，但長期使用確實不錯。選擇二手書也是不錯的選擇。最近的一本書「Tidy First?」不僅介紹重要的思維，還提供了很多即用型的技巧，因此也非常推薦給初學者。

YouTube

透過搜尋「Laravel Todo」或「React Todo」可以找到大量的教學視頻。

Udemy

如果在促銷時購買，約 1,500 元就可以了。如果在環境構建上遇到困難，邊看視頻學習可能會更好。不過，有一些講師的反饋非常積極，但也有一些完全不回應，所以在購買前建議查看確認。

學校與導師的看法

老實說，對於大多數人來說，我認為不太必要。

經過調查發現，有一些服務月費約一千元，可以指定的導師回答問題，但最後容易依賴於「詢問他人」。

另外，我不建議高額的學校課程。如果有五十萬元，可以買一台 MacBook Air，再購買五十本技術書籍，還會有剩餘。

或許會有人認為學校提供的轉職支持很有價值，但也應該考慮從學校介紹的工作機會中選擇可能產生的劣勢。我認為，更應該仔細尋找自己想工作的公司，而不是依賴他人的意見，再自己申請。

對於難以自行解決的問題，可以向 AI 求助。即使是半夜也能立即得到回應。

開發環境的建議

至於電腦等設備，我覺得任何都可以（如果想製作及發佈 iOS 應用，基本上需要 Mac）。可以購買一台約 2 萬元的二手筆記型電腦，再購買幾千至一萬元的記憶體進行更換，這樣可以使用 2 到 3 年。關於更換的方法，可以在 YouTube 上查詢型號，通常能找到大多數的教學。如果想盡量減少初期成本，可以使用便宜的平板，並透過 Cloud9、Codespaces 等雲端開發環境或 Amazon WorkSpaces 等 VDI 服務，這樣能大幅降低成本。

不過，許多技術文章僅在 Mac 上進行測試，如果有條件的話，考慮購買一台 Mac 也是不錯的選擇。

我偏向不花太多錢在愛好上，工作時使用的是公司提供的 MacBook Pro，但個人用的電腦最近使用的是二手的 dynabook。因為逐漸出現自動關機或充電困難的情況，我最終購買了 Mac mini。使用起來相當舒適，但價格也相當高。