站長阿川

站長阿川私房教材:
學 JavaScript 前端,帶作品集去面試!

站長精心設計,帶你實作 63 個小專案,得到作品集!

立即開始免費試讀!

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

用不同的方法多次製作同一個應用程式(主題)」。

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

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

製作一個基於 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。使用起來相當舒適,但價格也相當高。

有挫折感時

程式設計學習是孤獨的。但這沒關係。

與錯誤奮鬥,翱翔於文檔中,進行反覆嘗試。這一過程是非常重要的。

如果感到過於困難,請休息一週。暫時遠離程式設計,然後再回來。這樣就好。如果在 C# 學習中感到困難,可以嘗試學習 JavaScript 等其他語言。持續性和某種程度的興趣才是最重要的。

總結

最終,還是要動手做才行。

如果有人問「程式設計的學習方法是什麼?」,我的回答是:

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

即使每個作品都只是簡單的,但只要能用自己的話解釋為什麼這樣製作,以及你學到了什麼,那它便是一份立派的作品集。比起一個看似很豐富但卻無法詳細解釋的電子商務網站,這樣的作品更能讓人感受到潛力。

與其讀著不懂的高深書籍而自覺學得有成就,不如透過動手實作逐步學習,並定期停下腳步,透過閱讀文件系統地整理知識,這樣的學習更具實質意義。閱讀書籍的目的是為了拓展設計與實現時的判斷範疇。


原文出處:https://qiita.com/ma2mori/items/84454db9127d34fb1cfb


共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。
站長阿川

站長阿川私房教材:
學 JavaScript 前端,帶作品集去面試!

站長精心設計,帶你實作 63 個小專案,得到作品集!

立即開始免費試讀!