🔧 阿川の電商水電行

Shopify 顧問、維護與客製化

💡

小任務 / 單次支援方案

單次處理 Shopify 修正／微調

⭐️

維護方案

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

🚀

專案建置

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

👉 瞭解詳情 / 免費諮詢

小編精選 - 技術文章翻譯 · 10月14日

【2025最新版】如果你想從零開始學習React，就按照這個路線圖來吧！

ロードマップ(黑).png

介紹

你好，我是@Sicut_study (渡邊仁)。

從2023年開始的 「從零開始學習React請遵循這份路線圖」，轉眼間已經迎來了第三年。在這段時間裡，我也通過JISOU指導了許多毫無程式設計經驗的人學習React。

👇成員的文章在這裡

同時，實際按照文章所說的路線圖前進，收到能夠參與React和Next.js專案的感謝信。在此我非常感謝大家的信任和努力。



實際收到的郵件的一部分

通過指導許多人學習React，我發現了以下事實：
即使是完全沒有經驗的人，只要遵循正確的步驟
任何人在三個月內都能達到使用React進行個人開發的水平

通過我這裡的指導可以達成，但如果你有行動力，即使不學習也能做到。事實上，我更希望能夠自主學習的人能夠自主成長。

學習React只需遵循正確的路線圖即可做到
即使是完全不具經驗的人，只要按照我所認為的路線圖行進，大約三個月後也能發佈個人開發的應用，並向用戶提供價值，實現可重現性的成長。
這次我要基於2024年的文章對這種方法進行大幅更新並介紹給大家。

在AI時代，能夠使用React所帶來的價值不斷攀升。
然而，能夠獨立開發的人似乎比預期中少許多。我認為此刻精確地提升技能對未來AI發展來說是一項高效的投資。

我希望這份路線圖能讓更多的工程師改變人生。

我們也準備了影片教材

這裡的教材還附贈了更詳細解說的影片。
如果對文本教材中的某些細節有疑問，可以利用影片進行補充。

本文的對象

希望迅速學習React
希望從零開始學習React
希望以產出為中心學習
想要真正提升實力
希望學習現代開發

為什麼獨學會很困難

從這裡開始介紹路線圖，但在實際操作時，有些努力學習卻沒有回報、技能無法提升的工程師們陷入了錯誤的學習方法。我將對此進行解釋，這在進行路線圖之前很重要，因此我會說明。

初學者苦惱的「類輸出」的輸入

我常常吸引到那些「努力學習，但卻沒有進步」的人。
其中99%以上的人會異口同聲地說「我在看影片教材」、「我在閱讀技術書」。

其實我過去也曾陷入教程地獄的境地。
每天看影片教材，試著將所有賣的React技術書看個遍。

然而，學習教程影片只是 增加知識，而無法真正培養智慧(技能)。

影片教材就像是搭建「樂高積木」一樣。

幾乎每個人購買樂高的「宇宙船」時都能跟著說明書組裝起來。只要花時間就能完成一個精美的作品。

然而，就算組裝了宇宙船，但如果參加樂高比賽，不僅無法獲獎，甚至連簡單的動物都無法製作。換句話說，做影片教材的結果僅僅是按照說明書搭建而已。

影片教材是個危險的東西。
最後總會完成一個看似合適的應用，還會有成就感。不由得想繼續學習下一個影片。可實際上僅僅是看著說明書搭建，根本沒有積累真正的技能。費了大量的時間卻什麼都沒有學到。我在意識到這一事實之前，浪費了很多時間，深感後悔。

讓我意識到這一事實的，是某位優秀工程師的一句話。
「影片教材就像打字練習一樣。」

如果想要以最快速度培養技能，採取以產出為主的學習方法就非常重要。而這條路線圖也設計成以產出為中心。

產出容易挫折

在工程師中，有些人了解產出的重要性，並以此為中心進行學習。

這雖然是件好事，但卻有高挫折率的特徵。

這類學習方法的人往往會想直接從個人開發開始。
在個人開發的過程中，會花很多時間查找資料學習技術。
這樣的方法雖然非常有效，但若在基本功尚未牢固的情況下就直接開發較難的應用(例如帶有登入功能的社交網站)時。

由於缺乏基本知識，解決問題所花的時間會十分驚人。
如果這時使用AI，技能便不會有進步，反而只是留下一堆挫折的經驗，完成不了專案。

重要的是不斷積累解決稍微高難度錯誤的經驗。

工程師的工作是什麼呢？
我並不認為僅僅會編程就足夠了。
程式設計只是個工具。

「工程師的工作是解決問題。」

公司的首要目標是賺錢。
為此必須解決用戶的問題，而解決這些問題的手段便是系統開發。

而系統開發的工具則是程式設計和庫。
最近有些人提到「使用AI創建服務就不需要編程」這一說法，我認為這是錯誤的。

確實，有AI可以不需要編程，但如果一味依賴AI，將失去解決簡單錯誤的經驗。這將會使人面對突然出現的大問題，類似於在遊戲中直面BOSS那樣。

99%因為產出而挫折的人，其實是想解決遠超自己能力範圍的錯誤。換句話說，他們跳過了在基礎學習過程中應該遇到的錯誤。

路線圖的設計是讓個人能遇到稍微高一點的錯誤。這些錯誤是可以通過網站搜尋和查看文檔解決的。希望通過這份路線圖，養成「問題解決能力」，成為那些被需求的工程師。

自學最難成長

自學即事故，事故就是自我毀滅
這是我常對學生說的話。

這份路線圖是基於過去的經驗與眾多人的實踐進行改進的。這是一份耗費了諸多驗證和改善時間及多年的經驗的路線圖。

你相信比這份路線圖更適合初學者的方案會更有效嗎？
我完全不相信。因此我希望大家能夠信任這份路線圖並遵循。

在小學時，我們學過圓的面積公式。

半徑 × 半徑 × 3.14

但如果你自作主張將3.14改為3.15，那會怎樣呢？
這不僅是錯誤，而是完全不正確。

將自學的想法帶入學習過程，意義與此相似。
如果在路線圖中途開始自作主張，則會產生完全不同的結果，之前花費的時間甚至會浪費掉。

捨掉自學，首先按照這份路線圖進行學習。
在完成後，如果你覺得這裡的改進意見，歡迎提供反饋。

設定目標是最重要的

我們來玩個遊戲。

明天早上8點在東京集合。如果你能準時到達，我們將給予獎金。

你對於能夠收到這筆獎金有信心嗎？
你9點會在哪裡集合？

東京車站嗎？
東京天空樹嗎？
還是渋谷？

正確的集合地點其實是「東京迪士尼樂園」。

在學習中成長不顯著的工程師正是遇到了這種現象。
JISOU作為一家提供程式設計教練的服務運營。當然會教授技術，但我們非常注重教練的特質。

幾乎所有人都並沒有明確地定義自己的目標。
他們只是在想「收入提高我會很高興」、「希望能去開發現場」、「想提升技術力」等這些程度的思考。這樣的話，目標就變成了「在東京」或是「東京迪士尼樂園」這樣的抽象概念。

目標過於抽象將無法最快速地朝向成果邁進。
反而會變得像是達成東京迪士尼樂園這種不可能的水平。因此，我們必須朝著正確的方向努力。

正因如此，明確目標與遵循路線圖是非常重要的。
這份路線圖能讓你達到的水平是包含CI/CD的個人開發，能夠自學新的技術，並獲得轉職至自家公司開發所需的技能。

這份路線圖的學習過程並不簡單。
若要在短時間內達到這種水平，那絕對是非常艱辛的。
因此，我希望你能透過思考目標，確認自己是否真的需要為此努力。

如果你沒有這樣的目標，這份路線圖大概也不適合你。
與其這樣，或許你能夠在持續有趣的學習中獲得更多的快樂。



實際的目標設定過程

最短最速的路線圖介紹

ロードマップイラスト_3.jpg

遵循路線圖時的鐵則

在路線圖中必須遵守以下規則。
不遵循這些規則，將無法保證成果。

1. 當解決錯誤耗費超過10分鐘時，必須發佈文章

如果錯誤耗費了超過10分鐘，那麼這個錯誤可能不容易搜尋到。將這類錯誤編寫成文章，對許多人會有幫助。此外，把錯誤寫成文章也能增進理解。詳細內容你可以參考我之前在Qiita活動中演講的影片。

2. 儘量不使用AI，而是進行搜尋

工程師的工作是「解決問題」。
程式設計和框架只是工具，不是學習它們的使用方式最為重要。

重要的在於如何解決問題的能力，這是通過從小錯誤解決中逐步培養出來的。此
路線圖的設計是讓你能夠從簡單的錯誤逐漸解決。

若把難得的問題解決能力交給AI，將無法培養真正作為工程師所需的重要能力。能夠使用AI固然重要，但因為AI對每個人而言都能使用，將來「你」存在的價值會逐漸被削弱。

3. 閱讀文檔

對於那些尚未具備技能的工程師來說，閱讀文檔的抗拒感是普遍存在的。因為有些人會因為是英文而無法理解，也有許多人不知文檔中所寫的內容。

然而，若沒有讀過文檔並獲得解決的經驗，就無法學會閱讀文檔，而且文檔中大多數的內容都是有紀錄的。

工程師的工作是「解決問題」，因此能夠閱讀文檔將變得至關重要。

第1章：Web開發基礎

在此將學習與Web開發有關的超基本知識。
若沒有這些基本知識，將難以繼續進行學習，因此我們會快速地進行這一部分。

此章節由於JISOU已經省略，並不包含在3個月的學習期間中。
※ 若已了解HTML/CSS/JavaScript的基本知識，請跳過此部分。

1. HTML/CSS

將學習Web開發的基本組成——HTML/CSS。
特別是CSS，因為擁有無法全部記住的樣式，若要學會所有的內容即使有數十年時間也會不夠。因此在此為了快速學習，將僅輸入最低限度所需的知識。

日常使用的CSS樣式數量通常有限，只需大致理解即可，之後在開發的過程中再次回顧使用即可。偶爾會有人嘗試去學習CSS，但在程式設計中，不會有特別去「記住」這一說法。

需要記住的部分是高頻出現的，隨著重複搜尋會自然記住。很少使用的項目其實根本不需要記住。

我們將利用名為「DotInstall」的服務來理解HTML/CSS的基礎。

請確保完成以下所有課程：

初次進行Web製作

整理學習環境
HTML入門基本標籤篇

HTML入門表單標籤篇

CSS入門基本樣式篇

CSS入門應用樣式篇

CSS入門選擇器篇

CSS入門Flexbox篇

CSS入門媒體查詢篇

實踐！模仿作品集

自我介紹頁面的製作

請使用HTML/CSS製作一個自我介紹頁面。

在一頁中包含以下元素
CSS請不要使用ChatGPT進行樣式的添加。

可以看到名字
可以看到年齡
可以看到工作
可以看到興趣
可以看到成為工程師的理由
可以看到照片
CSS樣式被整理過

以目前的水準來說，製作美觀的頁面可能仍然有一定的難度，因此能夠製作出至少可以展示給他人的頁面即可。

請注意，不要在CSS上花費過多的時間。

2. GitHub

GitHub或許會成為你第一次挫折的主題。不過，這是工程師絕對需要掌握的技能。為什麼許多剛開始學習程式設計的人會在這個階段遇到困難呢？

有三個主要原因：

命令繁多
形象不清晰
學習過程中無法應用所學

想學習GitHub的人中，有不少人會購買技術書，但實際工作中所使用的命令其實非常有限，因此學習書中介紹的所有內容會浪費時間。

此外雖然還有許多教材，但市面上幾乎不存在能夠手把手學習、並針對所需內容詳盡講解的資料，因此JISOU製作了原創教材。

只需觀看一支影片，GitHub的學習便可結束。

3. JavaScript

JavaScript是HTML/CSS之後的必備技能，幾乎在所有工作場所都是必需的技術。
不過，實際上在工作中觀察1-2年經驗的初級工程師，發現一個有趣的現象。

能夠自信編碼JavaScript的人其實非常少。
接下來的React正是JavaScript的庫，因此請務必好好學習。
※如果已經了解JavaScript的基本知識，請跳過此部分。

基礎理解

請確保在DotInstall上完成以下所有課程
※因為自信不足，不要在3-3之前進行第二次學習

初次接觸JavaScript

JavaScript入門基本語法篇

JavaScript入門函數篇

JavaScript入門數據結構篇

JavaScript入門DOM篇

JavaScript入門數據類型篇

JavaScript入門類別篇

JavaScript入門fetch API篇

使用JavaScript製作賓果明細

使用JavaScript製作老虎機

使用JavaScript製作數字觸摸遊戲

使用JavaScript製作待辦事項管理應用

JavaScript個人開發

請根據以下規格製作一個應用程式。

在CSS等樣式上請儘量不要過多費時，但請確保其可展示給人看。

問題

普遍認為成為工程師需要1000小時的學習時間。
因此，我們打算製作一款學習記錄應用來記錄每日的學習時間。

用戶可以看到「學習記錄應用」這個標題
用戶可以輸入學習內容
用戶可以查看學習記錄的清單
- 準備測試數據
用戶可以以整數形式輸入學習時間
用戶可以看到註冊按鈕
當用戶輸入不合規時，可以得知錯誤
- 顯示錯誤內容
- 無法註冊
用戶可以看到清單中所有學習記錄的總時間

第2章：React基礎 (至第7天)

從這裡開始，將學習React中常用的基本寫法。
首先要明白React是什麼，並思考如何編寫的過程中進行實現，以深入理解。

2-1. 輸入

請將以下教材通過一遍 (請勿進行兩遍以上的學習)
雖然可能有些內容已經理解，但請務必觀看所有影片並親自撰寫代碼。

2-2. 課題1

請利用Udemy學到的React製作以下規格的應用程式。

要製作的內容

據說成為工程師需要1000小時的學習時間，
因此我們打算製作一款應用來記錄每日學習的內容與時間。

請進行以下所有實現
不過CSS等樣式不需要

利用Vite準備React環境
- 安裝Node.js
- 顯示Hello World
能夠看到標題「學習記錄清單」
顯示測試數據的清單

const records = [
    { title: "學習記錄1", time: 1 },
    { title: "學習記錄2", time: 3 },
    { title: "學習記錄3", time: 5 }
]

能看到學習內容的輸入表單
能看到學習時間的輸入表單
能夠在學習時間的輸入表單中輸入數字
能夠看到註冊按鈕
當點擊註冊按鈕時能夠將記錄新增到records中
完成註冊後，表單會被初始化
當所有項目未填寫時，能夠顯示錯誤
當輸入正確時，點擊註冊按鈕可消除錯誤
能夠看到已記錄的學習時間的總和

第3章：CI/CD (至第10天)

在這裡將通過「使用Supabase進行DB操作」、「利用Jest進行自動測試」、「利用Firebase進行部署」、「使用GitHub Actions進行CI/CD」來迅速接近現代應用開發。

在JISOU中，課題2被認為是最難的，但相對的只要完成到最後便能感受到成長。

2-1. 輸入

請將以下教材學習到「從JSONPlaceholder使用axios獲取數據」為止。
在切換JavaScript和TypeScript的時機後再進行下一個課題。

2-2. 課題2

由於課題1所製作的應用程式在重新載入時數據會被初始化，因此將利用Supabase實現數據的持久化。
然後會構建CI/CD流程。

請依次完成以下實現

創建Supabase專案
在Table Editor中創建以下表格

表格名稱：study-record

column	type	option
id	uuid
title	varchar	non null
time	int4	non null

創建3條測試數據
能夠查看測試數據的清單
數據加載時，顯示Loading...
按下註冊按鈕，將TODO新增進Supabase的表格
按下刪除按鈕，將TODO從Supabase的表格中刪除
創建Firebase帳戶
創建Firebase專案
在Firebase進行部署
在GitHub Actions中進行Hello World
https://qiita.com/Teach/items/d2c4d7bec98228df1807
在Push時能夠將變更部署至Firebase
這需要一些技巧，請注意處理控制台的錯誤信息。
導入Jest和react-testing-library

請撰寫自動測試

標題顯示
在表單中輸入學習內容和時間並按下註冊按鈕後，會新增一條記錄
按下刪除按鈕則會刪除該學習記錄
當未輸入時按下註冊會顯示錯誤
在管道中新增CI

第4章：TypeScript

在當代，TypeScript越來越成為必須掌握的技術。

4-1. 輸入

請繼續學習以下教材直到最後。
在學習TypeScript的過程中，還能理解Atomic Design、ChakraUI和路由。

4-2. 學習Mock和類別

在這個階段將使用JISOU的原創教材來增加自動測試中的Mock。此外，在這個過程中也將理解使用TypeScript的域名概念。

4-3. 課題3

將課題2所創建的學習記錄應用程式進行TypeScript化。

準備React+TypeScript的開發環境在Vite中
在Firebase進行部署
導入Jest和react-testing-library
- 創建一個組件測試作為樣本並確認能夠運行
通過GitHub Actions(Push)進行CI/CD
導入ChakraUI
用戶能看到標題
完成Supabase的初始化
用戶能看到學習記錄清單
學習記錄將利用類別進行實現
用戶在數據獲取時能夠看到加載畫面
用戶能夠註冊學習記錄
- 導入react-hook-form
- 若未輸入學習記錄，則出現「內容輸入為必填」的提示
- 若未輸入學習時間，則出現「時間的輸入為必填」的提示
- 若輸入非0以上的值，則出現「時間必須為0以上」的提示
在註冊後再次開啟註冊模態時，前次的輸入內容不會保留
用戶能夠刪除學習記錄
實現自動測試
- 能看到加載畫面
- 能看到表格
- 有新增註冊按鈕
- 顯示標題
- 能夠註冊學習記錄
- 模態的標題是「新增註冊」
- 當學習內容為空時，註冊會出現錯誤
- 當學習時間為空時，註冊會出現錯誤
- 出現未輸入的錯誤
- 當輸入非0以上的值時，出現錯誤